8321f1b · htmlang · git.iko.soy

git.iko.soy/htmlang

Pass standard CSS properties through generically

attrs_to_css keeps only arms that add meaning beyond CSS; any other standard CSS property is copied through, with px added to bare numbers for length properties. The attribute vocabulary (htmlang attributes, CSS properties, HTML attributes) lives in vocab.rs and drives both codegen and the unknown-attribute warning. Properties such as margin-top or font-size, which were silently dropped before, now work.

commit8321f1bd254e34042779389b41d27962d29e4c3a authoriko <mail@iko.soy> dateFri 25 Sep 2026, 20:10 (2 weeks ago) parent56a38fc

6 files changed+221−917

compare with master

unifiedsplit

crates/htmlang-core/src/codegen.rs+14−579 crates/htmlang-core/src/lib.rs+1 crates/htmlang-core/src/parser.rs+2−336 crates/htmlang-core/src/vocab.rs+202 tests/snapshots/stress_deeply_nested.html+1−1 tests/snapshots/stress_large.html+1−1

crates/htmlang-core/src/codegen.rs+14−579

@@ -1351,113 +1351,14 @@ fn generate_node(

13511351 }

13521352}

13531353

1354−/// HTML attributes that are passed through to the HTML tag rather than converted to CSS.

1355−const HTML_PASSTHROUGH_ATTRS: &[&str] = &[

1356− "type",

1357− "placeholder",

1358− "name",

1359− "value",

1360− "disabled",

1361− "required",

1362− "checked",

1363− "for",

1364− "action",

1365− "method",

1366− "autocomplete",

1367− "min",

1368− "max",

1369− "step",

1370− "pattern",

1371− "maxlength",

1372− "rows",

1373− "cols",

1374− "multiple",

1375− "alt",

1376− "role",

1377− "tabindex",

1378− "title",

1379− "autofocus",

1380− // Media

1381− "controls",

1382− "autoplay",

1383− "loop",

1384− "muted",

1385− "playsinline",

1386− "poster",

1387− "preload",

1388− // Image optimization

1389− "loading",

1390− "decoding",

1391− // Media src (explicit attribute form)

1392− "src",

1393− // New element attributes

1394− "datetime",

1395− "media",

1396− "sizes",

1397− "srcset",

1398− "list",

1399− // Details

1400− "open",

1401− // Form

1402− "novalidate",

1403− // Progress/Meter

1404− "low",

1405− "high",

1406− "optimum",

1407− // Table

1408− "colspan",

1409− "rowspan",

1410− "scope",

1411− // Popover API

1412− "popover",

1413− "popovertarget",

1414− "popovertargetaction",

1415− // Modern form/input hints

1416− "inputmode",

1417− "enterkeyhint",

1418− // Performance hints

1419− "fetchpriority",

1420− "blocking",

1421− // Global attrs

1422− "translate",

1423− "spellcheck",

1424− // ARIA live regions

1425− "aria-live",

1426− "aria-atomic",

1427− "aria-relevant",

1428−];

1429−

1430−/// Boolean HTML attributes (rendered without a value, e.g., `<input disabled>`).

1431−const BOOLEAN_HTML_ATTRS: &[&str] = &[

1432− "disabled",

1433− "required",

1434− "checked",

1435− "multiple",

1436− "controls",

1437− "autoplay",

1438− "loop",

1439− "muted",

1440− "playsinline",

1441− "open",

1442− "novalidate",

1443− "autofocus",

1444− "defer",

1445− "async",

1446− "nomodule",

1447− // Popover

1448− "popover",

1449−];

14501354

14511355fn emit_html_passthrough_attrs(out: &mut String, attrs: &[Attribute]) {

14521356 for attr in attrs {

14531357 let key = attr.key.as_str();

1454− let is_passthrough = HTML_PASSTHROUGH_ATTRS.contains(&key)

1455− || key.starts_with("aria-")

1456− || key.starts_with("data-");

1457− if !is_passthrough {

1358+ if !crate::vocab::is_html_passthrough(key) {

14581359 continue;

14591360 }

1460− if BOOLEAN_HTML_ATTRS.contains(&key) && attr.value.is_none() {

1361+ if crate::vocab::BOOLEAN_HTML_ATTRS.contains(&key) && attr.value.is_none() {

14611362 out.push(' ');

14621363 out.push_str(key);

14631364 } else if let Some(val) = &attr.value {

@@ -2706,16 +2607,6 @@ fn attrs_to_css(

27062607 },

27072608

27082609 // Style

2709− "background" => {

2710− if let Some(v) = val {

2711− push_css(&mut css, "background", v);

2712− }

2713− }

2714− "color" => {

2715− if let Some(v) = val {

2716− push_css(&mut css, "color", v);

2717− }

2718− }

27192610 "border" => {

27202611 if let Some(v) = val {

27212612 let parts: Vec<&str> = v.splitn(2, ' ').collect();

@@ -2776,28 +2667,8 @@ fn attrs_to_css(

27762667 push_css(&mut css, "font-family", v);

27772668 }

27782669 }

2779− "transition" => {

2780− if let Some(v) = val {

2781− push_css(&mut css, "transition", v);

2782− }

2783− }

2784− "cursor" => {

2785− if let Some(v) = val {

2786− push_css(&mut css, "cursor", v);

2787− }

2788− }

2789− "opacity" => {

2790− if let Some(v) = val {

2791− push_css(&mut css, "opacity", v);

2792− }

2793− }

27942670

27952671 // Typography

2796− "text-align" => {

2797− if let Some(v) = val {

2798− push_css(&mut css, "text-align", v);

2799− }

2800− }

28012672 "line-height" => {

28022673 if let Some(v) = val {

28032674 push_css(&mut css, "line-height", &css_line_height(v));

@@ -2808,28 +2679,8 @@ fn attrs_to_css(

28082679 push_css(&mut css, "letter-spacing", &css_px(v));

28092680 }

28102681 }

2811− "text-transform" => {

2812− if let Some(v) = val {

2813− push_css(&mut css, "text-transform", v);

2814− }

2815− }

2816− "white-space" => {

2817− if let Some(v) = val {

2818− push_css(&mut css, "white-space", v);

2819− }

2820− }

28212682

28222683 // Overflow & positioning

2823− "overflow" => {

2824− if let Some(v) = val {

2825− push_css(&mut css, "overflow", v);

2826− }

2827− }

2828− "position" => {

2829− if let Some(v) = val {

2830− push_css(&mut css, "position", v);

2831− }

2832− }

28332684 "top" => {

28342685 if let Some(v) = val {

28352686 push_css(&mut css, "top", &css_px(v));

@@ -2850,37 +2701,10 @@ fn attrs_to_css(

28502701 push_css(&mut css, "left", &css_px(v));

28512702 }

28522703 }

2853− "z-index" => {

2854− if let Some(v) = val {

2855− push_css(&mut css, "z-index", v);

2856− }

2857− }

28582704

28592705 // Display & visibility

2860− "display" => {

2861− if let Some(v) = val {

2862− push_css(&mut css, "display", v);

2863− }

2864− }

2865− "visibility" => {

2866− if let Some(v) = val {

2867− push_css(&mut css, "visibility", v);

2868− }

2869− }

28702706 "hidden" => push_css(&mut css, "display", "none"),

28712707

2872− // Transform & filters

2873− "transform" => {

2874− if let Some(v) = val {

2875− push_css(&mut css, "transform", v);

2876− }

2877− }

2878− "backdrop-filter" => {

2879− if let Some(v) = val {

2880− push_css(&mut css, "backdrop-filter", v);

2881− }

2882− }

2883−

28842708 // Effects

28852709 "shadow" => {

28862710 if let Some(v) = val {

@@ -2942,20 +2766,6 @@ fn attrs_to_css(

29422766 }

29432767 }

29442768

2945− // Animation

2946− "animation" => {

2947− if let Some(v) = val {

2948− push_css(&mut css, "animation", v);

2949− }

2950− }

2951−

2952− // Aspect ratio

2953− "aspect-ratio" => {

2954− if let Some(v) = val {

2955− push_css(&mut css, "aspect-ratio", v);

2956− }

2957− }

2958−

29592769 // CSS containment for rendering performance

29602770 "contain" => {

29612771 if let Some(v) = val {

@@ -3080,18 +2890,6 @@ fn attrs_to_css(

30802890 }

30812891 }

30822892

3083− // Scroll snap

3084− "scroll-snap-type" => {

3085− if let Some(v) = val {

3086− push_css(&mut css, "scroll-snap-type", v);

3087− }

3088− }

3089− "scroll-snap-align" => {

3090− if let Some(v) = val {

3091− push_css(&mut css, "scroll-snap-align", v);

3092− }

3093− }

3094−

30952893 // Margin

30962894 "margin" => {

30972895 if let Some(v) = val {

@@ -3109,125 +2907,10 @@ fn attrs_to_css(

31092907 }

31102908 }

31112909

3112− // Filter

3113− "filter" => {

3114− if let Some(v) = val {

3115− push_css(&mut css, "filter", v);

3116− }

3117− }

3118−

3119− // Object fit/position (for images)

3120− "object-fit" => {

3121− if let Some(v) = val {

3122− push_css(&mut css, "object-fit", v);

3123− }

3124− }

3125− "object-position" => {

3126− if let Some(v) = val {

3127− push_css(&mut css, "object-position", v);

3128− }

3129− }

3130−

3131− // Text shadow

3132− "text-shadow" => {

3133− if let Some(v) = val {

3134− push_css(&mut css, "text-shadow", v);

3135− }

3136− }

3137−

3138− // Text overflow

3139− "text-overflow" => {

3140− if let Some(v) = val {

3141− push_css(&mut css, "text-overflow", v);

3142− }

3143− }

3144−

3145− // Interaction

3146− "pointer-events" => {

3147− if let Some(v) = val {

3148− push_css(&mut css, "pointer-events", v);

3149− }

3150− }

3151− "user-select" => {

3152− if let Some(v) = val {

3153− push_css(&mut css, "user-select", v);

3154− }

3155− }

3156−

3157− // Flexbox/grid alignment

3158− "justify-content" => {

3159− if let Some(v) = val {

3160− push_css(&mut css, "justify-content", v);

3161− }

3162− }

3163− "align-items" => {

3164− if let Some(v) = val {

3165− push_css(&mut css, "align-items", v);

3166− }

3167− }

3168−

3169− // Flex item order

3170− "order" => {

3171− if let Some(v) = val {

3172− push_css(&mut css, "order", v);

3173− }

3174− }

3175−

3176− // Background extras

3177− "background-size" => {

3178− if let Some(v) = val {

3179− push_css(&mut css, "background-size", v);

3180− }

3181− }

3182− "background-position" => {

3183− if let Some(v) = val {

3184− push_css(&mut css, "background-position", v);

3185− }

3186− }

3187− "background-repeat" => {

3188− if let Some(v) = val {

3189− push_css(&mut css, "background-repeat", v);

3190− }

3191− }

3192−

3193− // Text wrapping

3194− "word-break" => {

3195− if let Some(v) = val {

3196− push_css(&mut css, "word-break", v);

3197− }

3198− }

3199− "overflow-wrap" => {

3200− if let Some(v) = val {

3201− push_css(&mut css, "overflow-wrap", v);

3202− }

3203− }

3204−

32052910 // Container queries

32062911 "container" => {

32072912 push_css(&mut css, "container-type", "inline-size");

32082913 }

3209− "container-name" => {

3210− if let Some(v) = val {

3211− push_css(&mut css, "container-name", v);

3212− }

3213− }

3214− "container-type" => {

3215− if let Some(v) = val {

3216− push_css(&mut css, "container-type", v);

3217− }

3218− }

3219−

3220− // Overflow axis

3221− "overflow-x" => {

3222− if let Some(v) = val {

3223− push_css(&mut css, "overflow-x", v);

3224− }

3225− }

3226− "overflow-y" => {

3227− if let Some(v) = val {

3228− push_css(&mut css, "overflow-y", v);

3229− }

3230− }

32312914

32322915 // Inset (shorthand for top/right/bottom/left)

32332916 "inset" => {

@@ -3236,43 +2919,7 @@ fn attrs_to_css(

32362919 }

32372920 }

32382921

3239− // Accent & caret colors

3240− "accent-color" => {

3241− if let Some(v) = val {

3242− push_css(&mut css, "accent-color", v);

3243− }

3244− }

3245− "caret-color" => {

3246− if let Some(v) = val {

3247− push_css(&mut css, "caret-color", v);

3248− }

3249− }

3250−

3251− // Color scheme & appearance

3252− "color-scheme" => {

3253− if let Some(v) = val {

3254− push_css(&mut css, "color-scheme", v);

3255− }

3256− }

3257− "appearance" => {

3258− if let Some(v) = val {

3259− push_css(&mut css, "appearance", v);

3260− }

3261− }

3262−

3263− // List style

3264− "list-style" => {

3265− if let Some(v) = val {

3266− push_css(&mut css, "list-style", v);

3267− }

3268− }

3269−

32702922 // Table

3271− "border-collapse" => {

3272− if let Some(v) = val {

3273− push_css(&mut css, "border-collapse", v);

3274− }

3275− }

32762923 "border-spacing" => {

32772924 if let Some(v) = val {

32782925 push_css(&mut css, "border-spacing", &css_px(v));

@@ -3280,26 +2927,11 @@ fn attrs_to_css(

32802927 }

32812928

32822929 // Text decoration

3283− "text-decoration" => {

3284− if let Some(v) = val {

3285− push_css(&mut css, "text-decoration", v);

3286− }

3287− }

3288− "text-decoration-color" => {

3289− if let Some(v) = val {

3290− push_css(&mut css, "text-decoration-color", v);

3291− }

3292− }

32932930 "text-decoration-thickness" => {

32942931 if let Some(v) = val {

32952932 push_css(&mut css, "text-decoration-thickness", &css_px(v));

32962933 }

32972934 }

3298− "text-decoration-style" => {

3299− if let Some(v) = val {

3300− push_css(&mut css, "text-decoration-style", v);

3301− }

3302− }

33032935 "text-underline-offset" => {

33042936 if let Some(v) = val {

33052937 push_css(&mut css, "text-underline-offset", &css_px(v));

@@ -3312,64 +2944,8 @@ fn attrs_to_css(

33122944 push_css(&mut css, "column-width", &css_px(v));

33132945 }

33142946 }

3315− "column-rule" => {

3316− if let Some(v) = val {

3317− push_css(&mut css, "column-rule", v);

3318− }

3319− }

3320−

3321− // Place items/self

3322− "place-items" => {

3323− if let Some(v) = val {

3324− push_css(&mut css, "place-items", v);

3325− }

3326− }

3327− "place-self" => {

3328− if let Some(v) = val {

3329− push_css(&mut css, "place-self", v);

3330− }

3331− }

3332−

3333− // Scroll behavior

3334− "scroll-behavior" => {

3335− if let Some(v) = val {

3336− push_css(&mut css, "scroll-behavior", v);

3337− }

3338− }

3339−

3340− // Resize

3341− "resize" => {

3342− if let Some(v) = val {

3343− push_css(&mut css, "resize", v);

3344− }

3345− }

33462947

33472948 // New CSS properties

3348− "clip-path" => {

3349− if let Some(v) = val {

3350− push_css(&mut css, "clip-path", v);

3351− }

3352− }

3353− "mix-blend-mode" => {

3354− if let Some(v) = val {

3355− push_css(&mut css, "mix-blend-mode", v);

3356− }

3357− }

3358− "background-blend-mode" => {

3359− if let Some(v) = val {

3360− push_css(&mut css, "background-blend-mode", v);

3361− }

3362− }

3363− "writing-mode" => {

3364− if let Some(v) = val {

3365− push_css(&mut css, "writing-mode", v);

3366− }

3367− }

3368− "column-count" => {

3369− if let Some(v) = val {

3370− push_css(&mut css, "column-count", v);

3371− }

3372− }

33732949 "column-gap" => {

33742950 if let Some(v) = val {

33752951 push_css(&mut css, "column-gap", &css_px(v));

@@ -3380,71 +2956,11 @@ fn attrs_to_css(

33802956 push_css(&mut css, "text-indent", &css_px(v));

33812957 }

33822958 }

3383− "hyphens" => {

3384− if let Some(v) = val {

3385− push_css(&mut css, "hyphens", v);

3386− }

3387− }

3388− "flex-grow" => {

3389− if let Some(v) = val {

3390− push_css(&mut css, "flex-grow", v);

3391− }

3392− }

3393− "flex-shrink" => {

3394− if let Some(v) = val {

3395− push_css(&mut css, "flex-shrink", v);

3396− }

3397− }

33982959 "flex-basis" => {

33992960 if let Some(v) = val {

34002961 push_css(&mut css, "flex-basis", &css_px(v));

34012962 }

34022963 }

3403− "isolation" => {

3404− if let Some(v) = val {

3405− push_css(&mut css, "isolation", v);

3406− }

3407− }

3408− "place-content" => {

3409− if let Some(v) = val {

3410− push_css(&mut css, "place-content", v);

3411− }

3412− }

3413− "background-image" => {

3414− if let Some(v) = val {

3415− push_css(&mut css, "background-image", v);

3416− }

3417− }

3418− "font-weight" => {

3419− if let Some(v) = val {

3420− push_css(&mut css, "font-weight", v);

3421− }

3422− }

3423− "font-style" => {

3424− if let Some(v) = val {

3425− push_css(&mut css, "font-style", v);

3426− }

3427− }

3428− "text-wrap" => {

3429− if let Some(v) = val {

3430− push_css(&mut css, "text-wrap", v);

3431− }

3432− }

3433− "will-change" => {

3434− if let Some(v) = val {

3435− push_css(&mut css, "will-change", v);

3436− }

3437− }

3438− "touch-action" => {

3439− if let Some(v) = val {

3440− push_css(&mut css, "touch-action", v);

3441− }

3442− }

3443− "vertical-align" => {

3444− if let Some(v) = val {

3445− push_css(&mut css, "vertical-align", v);

3446− }

3447− }

34482964 "scroll-margin" => {

34492965 if let Some(v) = val {

34502966 push_css(&mut css, "scroll-margin", &css_px(v));

@@ -3471,11 +2987,6 @@ fn attrs_to_css(

34712987 push_css(&mut css, effective_key, &css_px(v));

34722988 }

34732989 }

3474− "direction" => {

3475− if let Some(v) = val {

3476− push_css(&mut css, "direction", v);

3477− }

3478− }

34792990

34802991 "content" => {

34812992 if let Some(v) = val {

@@ -3554,94 +3065,6 @@ fn attrs_to_css(

35543065 }

35553066 }

35563067

3557− // Grid areas

3558− "grid-template-areas" => {

3559− if let Some(v) = val {

3560− push_css(&mut css, "grid-template-areas", v);

3561− }

3562− }

3563− "grid-area" => {

3564− if let Some(v) = val {

3565− push_css(&mut css, "grid-area", v);

3566− }

3567− }

3568−

3569− // View transitions

3570− "view-transition-name" => {

3571− if let Some(v) = val {

3572− push_css(&mut css, "view-transition-name", v);

3573− }

3574− }

3575−

3576−

3577− // CSS subgrid

3578− "grid-template-columns" => {

3579− if let Some(v) = val {

3580− push_css(&mut css, "grid-template-columns", v);

3581− }

3582− }

3583− "grid-template-rows" => {

3584− if let Some(v) = val {

3585− push_css(&mut css, "grid-template-rows", v);

3586− }

3587− }

3588−

3589− // Scroll-driven animations

3590− "animation-timeline" => {

3591− if let Some(v) = val {

3592− push_css(&mut css, "animation-timeline", v);

3593− }

3594− }

3595− "animation-range" => {

3596− if let Some(v) = val {

3597− push_css(&mut css, "animation-range", v);

3598− }

3599− }

3600− "view-timeline-name" => {

3601− if let Some(v) = val {

3602− push_css(&mut css, "view-timeline-name", v);

3603− }

3604− }

3605− "view-timeline-axis" => {

3606− if let Some(v) = val {

3607− push_css(&mut css, "view-timeline-axis", v);

3608− }

3609− }

3610− "scroll-timeline-name" => {

3611− if let Some(v) = val {

3612− push_css(&mut css, "scroll-timeline-name", v);

3613− }

3614− }

3615− "scroll-timeline-axis" => {

3616− if let Some(v) = val {

3617− push_css(&mut css, "scroll-timeline-axis", v);

3618− }

3619− }

3620−

3621− // Anchor positioning

3622− "anchor-name" => {

3623− if let Some(v) = val {

3624− push_css(&mut css, "anchor-name", v);

3625− }

3626− }

3627− "position-anchor" => {

3628− if let Some(v) = val {

3629− push_css(&mut css, "position-anchor", v);

3630− }

3631− }

3632− "position-area" => {

3633− if let Some(v) = val {

3634− push_css(&mut css, "position-area", v);

3635− }

3636− }

3637−

3638− // initial-letter (drop caps)

3639− "initial-letter" => {

3640− if let Some(v) = val {

3641− push_css(&mut css, "initial-letter", v);

3642− }

3643− }

3644−

36453068 // Critical CSS hint — not CSS, handled elsewhere

36463069 "critical" => {}

36473070

@@ -3657,6 +3080,18 @@ fn attrs_to_css(

36583081 | "formmethod" | "formtarget" | "target" | "autofocus" => {}

36593082

3083+ // Any other standard CSS property is copied through, with `px`

3084+ // added to bare numbers where the property takes a length.

3085+ key if crate::vocab::is_css_property(key) && !crate::vocab::is_html_passthrough(key) => {

3086+ if let Some(v) = val {

3087+ if crate::vocab::is_length_property(key) {

3088+ push_css(&mut css, key, &css_px_multi(v));

3089+ } else {

3090+ push_css(&mut css, key, v);

3091+ }

3092+ }

3093+ }

3094+

36603095 _ => {}

36613096 }

36623097 }

crates/htmlang-core/src/lib.rs+1

@@ -1,6 +1,7 @@

11pub mod ast;

22pub mod codegen;

33pub mod parser;

4+pub mod vocab;

56#[cfg(test)]

67mod codegen_tests;

crates/htmlang-core/src/parser.rs+2−336

@@ -3277,337 +3277,6 @@ fn check_undefined_vars(

32773277// Attribute parsing

32783278// ---------------------------------------------------------------------------

32793279

3280−const KNOWN_ATTRS: &[&str] = &[

3281− // Layout

3282− "spacing",

3283− "gap",

3284− "padding",

3285− "padding-x",

3286− "padding-y",

3287− "padding-top",

3288− "padding-bottom",

3289− "padding-left",

3290− "padding-right",

3291− "width",

3292− "height",

3293− "min-width",

3294− "max-width",

3295− "min-height",

3296− "max-height",

3297− "center-x",

3298− "center-y",

3299− "align-left",

3300− "align-right",

3301− "align-top",

3302− "align-bottom",

3303− // Style

3304− "background",

3305− "color",

3306− "border",

3307− "border-top",

3308− "border-bottom",

3309− "border-left",

3310− "border-right",

3311− "rounded",

3312− "bold",

3313− "italic",

3314− "underline",

3315− "size",

3316− "font",

3317− "transition",

3318− "cursor",

3319− "opacity",

3320− "text-align",

3321− "line-height",

3322− "letter-spacing",

3323− "text-transform",

3324− "white-space",

3325− "overflow",

3326− "position",

3327− "top",

3328− "right",

3329− "bottom",

3330− "left",

3331− "z-index",

3332− "shadow",

3333− "wrap",

3334− "gap-x",

3335− "gap-y",

3336− // Display & visibility

3337− "display",

3338− "visibility",

3339− // Transform & filters

3340− "transform",

3341− "backdrop-filter",

3342− // Grid

3343− "grid",

3344− "grid-cols",

3345− "grid-rows",

3346− "col-span",

3347− "row-span",

3348− // Container queries

3349− "container",

3350− "container-name",

3351− "container-type",

3352− // Identity

3353− "id",

3354− "class",

3355− // Animation

3356− "animation",

3357− // Form

3358− "type",

3359− "placeholder",

3360− "name",

3361− "value",

3362− "disabled",

3363− "required",

3364− "checked",

3365− "for",

3366− "action",

3367− "method",

3368− "autocomplete",

3369− "min",

3370− "max",

3371− "step",

3372− "pattern",

3373− "maxlength",

3374− "rows",

3375− "cols",

3376− "multiple",

3377− // Accessibility

3378− "alt",

3379− "role",

3380− "tabindex",

3381− "title",

3382− "autofocus",

3383− // CSS: aspect-ratio, outline, logical properties, scroll-snap

3384− "aspect-ratio",

3385− "outline",

3386− "padding-inline",

3387− "padding-block",

3388− "margin-inline",

3389− "margin-block",

3390− "padding-inline-start",

3391− "padding-inline-end",

3392− "padding-block-start",

3393− "padding-block-end",

3394− "margin-inline-start",

3395− "margin-inline-end",

3396− "margin-block-start",

3397− "margin-block-end",

3398− "inset-inline",

3399− "inset-block",

3400− "inset-inline-start",

3401− "inset-inline-end",

3402− "inset-block-start",

3403− "inset-block-end",

3404− "border-inline",

3405− "border-block",

3406− "border-inline-start",

3407− "border-inline-end",

3408− "border-block-start",

3409− "border-block-end",

3410− "border-start-start-radius",

3411− "border-start-end-radius",

3412− "border-end-start-radius",

3413− "border-end-end-radius",

3414− "scroll-margin-inline",

3415− "scroll-margin-block",

3416− "scroll-padding-inline",

3417− "scroll-padding-block",

3418− "inline-size",

3419− "block-size",

3420− "min-inline-size",

3421− "max-inline-size",

3422− "min-block-size",

3423− "max-block-size",

3424− "scroll-snap-type",

3425− "scroll-snap-align",

3426− // Media attributes

3427− "controls",

3428− "autoplay",

3429− "loop",

3430− "muted",

3431− "poster",

3432− "preload",

3433− "loading",

3434− "decoding",

3435− // List

3436− "ordered",

3437− // Media src (explicit attribute form)

3438− "src",

3439− // New elements

3440− "open",

3441− "novalidate",

3442− "low",

3443− "high",

3444− "optimum",

3445− "colspan",

3446− "rowspan",

3447− "scope",

3448− // Margin

3449− "margin",

3450− "margin-x",

3451− "margin-y",

3452− // Filter & object

3453− "filter",

3454− "object-fit",

3455− "object-position",

3456− // Text extras

3457− "text-shadow",

3458− "text-overflow",

3459− // Interaction

3460− "pointer-events",

3461− "user-select",

3462− // Flexbox/grid alignment

3463− "justify-content",

3464− "align-items",

3465− // Flex item

3466− "order",

3467− // Background extras

3468− "background-size",

3469− "background-position",

3470− "background-repeat",

3471− // Text wrapping

3472− "word-break",

3473− "overflow-wrap",

3474− // Asset inlining

3475− "inline",

3476− // Hidden

3477− "hidden",

3478− // Overflow directional

3479− "overflow-x",

3480− "overflow-y",

3481− // Inset shorthand

3482− "inset",

3483− // Modern form theming

3484− "accent-color",

3485− "caret-color",

3486− // Color scheme & appearance

3487− "color-scheme",

3488− "appearance",

3489− // List styling

3490− "list-style",

3491− // Table styling

3492− "border-collapse",

3493− "border-spacing",

3494− // Text decoration variants

3495− "text-decoration",

3496− "text-decoration-color",

3497− "text-decoration-thickness",

3498− "text-decoration-style",

3499− "text-underline-offset",

3500− "column-width",

3501− "column-rule",

3502− // Grid/flex placement

3503− "place-items",

3504− "place-self",

3505− // Scroll behavior

3506− "scroll-behavior",

3507− // Resize

3508− "resize",

3509− // New CSS properties

3510− "clip-path",

3511− "mix-blend-mode",

3512− "background-blend-mode",

3513− "writing-mode",

3514− "column-count",

3515− "column-gap",

3516− "text-indent",

3517− "hyphens",

3518− "flex-grow",

3519− "flex-shrink",

3520− "flex-basis",

3521− "isolation",

3522− "place-content",

3523− "background-image",

3524− "datetime",

3525− "direction",

3526− // New CSS properties (batch 2)

3527− "font-weight",

3528− "font-style",

3529− "text-wrap",

3530− "will-change",

3531− "touch-action",

3532− "vertical-align",

3533− "contain",

3534− "content-visibility",

3535− "scroll-margin",

3536− "scroll-margin-top",

3537− "scroll-margin-bottom",

3538− "scroll-margin-left",

3539− "scroll-margin-right",

3540− "scroll-padding",

3541− "scroll-padding-top",

3542− "scroll-padding-bottom",

3543− "scroll-padding-left",

3544− "scroll-padding-right",

3545− // Iframe/output attrs

3546− "sandbox",

3547− "allow",

3548− "allowfullscreen",

3549− "referrerpolicy",

3550− "formaction",

3551− "formmethod",

3552− "formtarget",

3553− "target",

3554− // Popover API

3555− "popover",

3556− "popovertarget",

3557− "popovertargetaction",

3558− // Modern form/input hints

3559− "inputmode",

3560− "enterkeyhint",

3561− // Performance hints

3562− "fetchpriority",

3563− "blocking",

3564− // Global attrs

3565− "translate",

3566− "spellcheck",

3567− // Script attributes

3568− "defer",

3569− "async",

3570− "crossorigin",

3571− "integrity",

3572− "nomodule",

3573− // Pseudo-element content

3574− "content",

3575− // CSS shorthands

3576− "truncate",

3577− "line-clamp",

3578− "blur",

3579− "backdrop-blur",

3580− "no-scrollbar",

3581− "skeleton",

3582− "gradient",

3583− // Grid areas

3584− "grid-template-areas",

3585− "grid-area",

3586− // View transitions

3587− "view-transition-name",

3588− // Animate shorthand

3589− // Critical CSS hint

3590− "critical",

3591− // CSS subgrid

3592− "grid-template-columns",

3593− "grid-template-rows",

3594− // Scroll-driven animations

3595− "animation-timeline",

3596− "animation-range",

3597− "view-timeline-name",

3598− "view-timeline-axis",

3599− "scroll-timeline-name",

3600− "scroll-timeline-axis",

3601− // Anchor positioning

3602− "anchor-name",

3603− "position-anchor",

3604− "position-area",

3605− // Drop caps

3606− "initial-letter",

3607− // Responsive images

3608− "responsive",

3609−];

3610−

36113280/// Attributes that expect purely numeric values (px-based) or values with CSS units.

36123281const NUMERIC_ATTRS: &[&str] = &[

36133282 "spacing",

@@ -4143,11 +3812,8 @@ fn parse_attr_list(

41433812 // Warn on unknown attributes

41443813 if validate {

41453814 let base_key = strip_all_prefixes(attr.key.as_str());

4146− if !KNOWN_ATTRS.contains(&base_key)

4147− && !base_key.starts_with("aria-")

4148− && !base_key.starts_with("data-")

4149− {

4150− let suggestion = suggest_closest(base_key, KNOWN_ATTRS);

3815+ if !crate::vocab::is_known_attribute(base_key) {

3816+ let suggestion = suggest_closest(base_key, &crate::vocab::all_attributes());

41513817 let msg = match suggestion {

41523818 Some(closest) => {

41533819 format!(

crates/htmlang-core/src/vocab.rsnew file+202

@@ -0,0 +1,202 @@

1+//! The attribute vocabulary.

2+//!

3+//! An attribute in `[...]` is one of three things:

4+//! - one of htmlang's own attributes, which mean more than a single CSS

5+//! property (`spacing`, `center-x`, `rounded`, ...), handled in codegen;

6+//! - a standard CSS property, copied into the generated CSS unchanged;

7+//! - an HTML attribute, emitted on the element.

9+/// htmlang's own attributes (those that are neither a CSS property nor an

10+/// HTML attribute).

11+pub const HTMLANG_ATTRIBUTES: &[&str] = &[

12+ "align-bottom", "align-left", "align-right", "align-top", "backdrop-blur", "blur", "bold",

13+ "center-x", "center-y", "col-span", "critical", "gap-x", "gap-y", "gradient", "grid-cols",

14+ "grid-rows", "inline", "italic", "margin-x", "margin-y", "no-scrollbar", "ordered",

15+ "padding-x", "padding-y", "responsive", "rounded", "row-span", "shadow", "skeleton",

16+ "spacing", "truncate", "underline",

17+];

18+

19+/// Standard CSS properties, sorted. Any of these can be written as an

20+/// attribute and is copied into the generated CSS as-is.

21+pub const CSS_PROPERTIES: &[&str] = &[

22+ "accent-color", "align-content", "align-items", "align-self", "all", "anchor-name",

23+ "animation", "animation-composition", "animation-delay", "animation-direction",

24+ "animation-duration", "animation-fill-mode", "animation-iteration-count", "animation-name",

25+ "animation-play-state", "animation-range", "animation-range-end", "animation-range-start",

26+ "animation-timeline", "animation-timing-function", "appearance", "aspect-ratio",

27+ "backdrop-filter", "backface-visibility", "background", "background-attachment",

28+ "background-blend-mode", "background-clip", "background-color", "background-image",

29+ "background-origin", "background-position", "background-position-x",

30+ "background-position-y", "background-repeat", "background-size", "block-size", "border",

31+ "border-block", "border-block-color", "border-block-end", "border-block-end-color",

32+ "border-block-end-style", "border-block-end-width", "border-block-start",

33+ "border-block-start-color", "border-block-start-style", "border-block-start-width",

34+ "border-block-style", "border-block-width", "border-bottom", "border-bottom-color",

35+ "border-bottom-left-radius", "border-bottom-right-radius", "border-bottom-style",

36+ "border-bottom-width", "border-collapse", "border-color", "border-end-end-radius",

37+ "border-end-start-radius", "border-image", "border-image-outset", "border-image-repeat",

38+ "border-image-slice", "border-image-source", "border-image-width", "border-inline",

39+ "border-inline-color", "border-inline-end", "border-inline-end-color",

40+ "border-inline-end-style", "border-inline-end-width", "border-inline-start",

41+ "border-inline-start-color", "border-inline-start-style", "border-inline-start-width",

42+ "border-inline-style", "border-inline-width", "border-left", "border-left-color",

43+ "border-left-style", "border-left-width", "border-radius", "border-right",

44+ "border-right-color", "border-right-style", "border-right-width", "border-spacing",

45+ "border-start-end-radius", "border-start-start-radius", "border-style", "border-top",

46+ "border-top-color", "border-top-left-radius", "border-top-right-radius", "border-top-style",

47+ "border-top-width", "border-width", "bottom", "box-decoration-break", "box-shadow",

48+ "box-sizing", "break-after", "break-before", "break-inside", "caption-side", "caret-color",

49+ "clear", "clip", "clip-path", "color", "color-scheme", "column-count", "column-fill",

50+ "column-gap", "column-rule", "column-rule-color", "column-rule-style", "column-rule-width",

51+ "column-span", "column-width", "columns", "contain", "contain-intrinsic-block-size",

52+ "contain-intrinsic-height", "contain-intrinsic-inline-size", "contain-intrinsic-size",

53+ "contain-intrinsic-width", "container", "container-name", "container-type", "content",

54+ "content-visibility", "counter-increment", "counter-reset", "counter-set", "cursor",

55+ "direction", "display", "empty-cells", "field-sizing", "filter", "flex", "flex-basis",

56+ "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap", "float", "font",

57+ "font-family", "font-feature-settings", "font-kerning", "font-language-override",

58+ "font-optical-sizing", "font-palette", "font-size", "font-size-adjust", "font-stretch",

59+ "font-style", "font-synthesis", "font-variant", "font-variant-alternates",

60+ "font-variant-caps", "font-variant-east-asian", "font-variant-ligatures",

61+ "font-variant-numeric", "font-variant-position", "font-variation-settings", "font-weight",

62+ "forced-color-adjust", "gap", "grid", "grid-area", "grid-auto-columns", "grid-auto-flow",

63+ "grid-auto-rows", "grid-column", "grid-column-end", "grid-column-start", "grid-row",

64+ "grid-row-end", "grid-row-start", "grid-template", "grid-template-areas",

65+ "grid-template-columns", "grid-template-rows", "hanging-punctuation", "height",

66+ "hyphenate-character", "hyphens", "image-orientation", "image-rendering", "initial-letter",

67+ "inline-size", "inset", "inset-block", "inset-block-end", "inset-block-start",

68+ "inset-inline", "inset-inline-end", "inset-inline-start", "interpolate-size", "isolation",

69+ "justify-content", "justify-items", "justify-self", "left", "letter-spacing", "line-break",

70+ "line-clamp", "line-height", "list-style", "list-style-image", "list-style-position",

71+ "list-style-type", "margin", "margin-block", "margin-block-end", "margin-block-start",

72+ "margin-bottom", "margin-inline", "margin-inline-end", "margin-inline-start", "margin-left",

73+ "margin-right", "margin-top", "mask", "mask-clip", "mask-composite", "mask-image",

74+ "mask-mode", "mask-origin", "mask-position", "mask-repeat", "mask-size", "mask-type",

75+ "math-depth", "math-style", "max-block-size", "max-height", "max-inline-size", "max-width",

76+ "min-block-size", "min-height", "min-inline-size", "min-width", "mix-blend-mode",

77+ "object-fit", "object-position", "offset", "offset-anchor", "offset-distance",

78+ "offset-path", "offset-position", "offset-rotate", "opacity", "order", "orphans", "outline",

79+ "outline-color", "outline-offset", "outline-style", "outline-width", "overflow",

80+ "overflow-anchor", "overflow-block", "overflow-clip-margin", "overflow-inline",

81+ "overflow-wrap", "overflow-x", "overflow-y", "overscroll-behavior",

82+ "overscroll-behavior-block", "overscroll-behavior-inline", "overscroll-behavior-x",

83+ "overscroll-behavior-y", "padding", "padding-block", "padding-block-end",

84+ "padding-block-start", "padding-bottom", "padding-inline", "padding-inline-end",

85+ "padding-inline-start", "padding-left", "padding-right", "padding-top", "page",

86+ "page-break-after", "page-break-before", "page-break-inside", "paint-order", "perspective",

87+ "perspective-origin", "place-content", "place-items", "place-self", "pointer-events",

88+ "position", "position-anchor", "position-area", "position-try", "position-try-fallbacks",

89+ "position-visibility", "print-color-adjust", "quotes", "resize", "right", "rotate",

90+ "row-gap", "ruby-align", "ruby-position", "scale", "scroll-behavior", "scroll-margin",

91+ "scroll-margin-block", "scroll-margin-block-end", "scroll-margin-block-start",

92+ "scroll-margin-bottom", "scroll-margin-inline", "scroll-margin-inline-end",

93+ "scroll-margin-inline-start", "scroll-margin-left", "scroll-margin-right",

94+ "scroll-margin-top", "scroll-padding", "scroll-padding-block", "scroll-padding-block-end",

95+ "scroll-padding-block-start", "scroll-padding-bottom", "scroll-padding-inline",

96+ "scroll-padding-inline-end", "scroll-padding-inline-start", "scroll-padding-left",

97+ "scroll-padding-right", "scroll-padding-top", "scroll-snap-align", "scroll-snap-stop",

98+ "scroll-snap-type", "scroll-timeline", "scroll-timeline-axis", "scroll-timeline-name",

99+ "scrollbar-color", "scrollbar-gutter", "scrollbar-width", "shape-image-threshold",

100+ "shape-margin", "shape-outside", "tab-size", "table-layout", "text-align",

101+ "text-align-last", "text-anchor", "text-box", "text-box-edge", "text-box-trim",

102+ "text-combine-upright", "text-decoration", "text-decoration-color", "text-decoration-line",

103+ "text-decoration-skip-ink", "text-decoration-style", "text-decoration-thickness",

104+ "text-emphasis", "text-emphasis-color", "text-emphasis-position", "text-emphasis-style",

105+ "text-indent", "text-justify", "text-orientation", "text-overflow", "text-rendering",

106+ "text-shadow", "text-transform", "text-underline-offset", "text-underline-position",

107+ "text-wrap", "text-wrap-mode", "text-wrap-style", "timeline-scope", "top", "touch-action",

108+ "transform", "transform-box", "transform-origin", "transform-style", "transition",

109+ "transition-behavior", "transition-delay", "transition-duration", "transition-property",

110+ "transition-timing-function", "translate", "unicode-bidi", "user-select", "vertical-align",

111+ "view-timeline", "view-timeline-axis", "view-timeline-inset", "view-timeline-name",

112+ "view-transition-class", "view-transition-name", "visibility", "white-space",

113+ "white-space-collapse", "widows", "width", "will-change", "word-break", "word-spacing",

114+ "writing-mode", "z-index", "zoom",

115+];

116+

117+/// HTML attributes emitted on any element when present.

118+pub const HTML_PASSTHROUGH_ATTRS: &[&str] = &[

119+ "action", "alt", "aria-atomic", "aria-live", "aria-relevant", "autocomplete", "autofocus",

120+ "autoplay", "blocking", "checked", "cols", "colspan", "controls", "datetime", "decoding",

121+ "disabled", "enterkeyhint", "fetchpriority", "for", "high", "inputmode", "list", "loading",

122+ "loop", "low", "max", "maxlength", "media", "method", "min", "multiple", "muted", "name",

123+ "novalidate", "open", "optimum", "pattern", "placeholder", "playsinline", "popover",

124+ "popovertarget", "popovertargetaction", "poster", "preload", "required", "role", "rows",

125+ "rowspan", "scope", "sizes", "spellcheck", "src", "srcset", "step", "tabindex", "title",

126+ "translate", "type", "value",

127+];

128+

129+/// Boolean HTML attributes (rendered without a value, e.g. `<input disabled>`).

130+pub const BOOLEAN_HTML_ATTRS: &[&str] = &[

131+ "disabled", "required", "checked", "multiple", "controls", "autoplay", "loop", "muted",

132+ "playsinline", "open", "novalidate", "autofocus", "defer", "async", "nomodule", "popover",

133+];

134+

135+/// Every HTML attribute htmlang knows, including ones only certain elements

136+/// emit (`href`, `sandbox`, `defer`, ...).

137+pub const HTML_ATTRIBUTES: &[&str] = &[

138+ "abbr", "accept", "action", "allow", "allowfullscreen", "alt", "aria-atomic", "aria-live",

139+ "aria-relevant", "async", "autocomplete", "autofocus", "autoplay", "blocking", "charset",

140+ "checked", "cite", "class", "cols", "colspan", "content", "contenteditable", "controls",

141+ "crossorigin", "datetime", "decoding", "defer", "dir", "disabled", "download", "draggable",

142+ "enctype", "enterkeyhint", "fetchpriority", "for", "form", "formaction", "formmethod",

143+ "formtarget", "headers", "height", "hidden", "high", "href", "hreflang", "http-equiv", "id",

144+ "inert", "inputmode", "integrity", "ismap", "kind", "label", "lang", "list", "loading",

145+ "loop", "low", "max", "maxlength", "media", "method", "min", "multiple", "muted", "name",

146+ "nomodule", "novalidate", "open", "optimum", "pattern", "placeholder", "playsinline",

147+ "popover", "popovertarget", "popovertargetaction", "poster", "preload", "readonly",

148+ "referrerpolicy", "rel", "required", "reversed", "role", "rows", "rowspan", "sandbox",

149+ "scope", "selected", "size", "sizes", "span", "spellcheck", "src", "srcset", "start",

150+ "step", "tabindex", "target", "title", "translate", "type", "usemap", "value", "width",

151+ "wrap",

152+];

153+

154+/// CSS properties whose bare numbers are lengths, so `margin-top 16` means

155+/// `16px`. (Others, like `opacity` or `z-index`, take unitless numbers.)

156+pub fn is_length_property(name: &str) -> bool {

157+ const PREFIXES: &[&str] = &["margin", "padding", "inset", "scroll-margin", "scroll-padding"];

158+ const SUFFIXES: &[&str] = &["-width", "-height", "-radius", "-offset", "-spacing", "gap"];

159+ const EXACT: &[&str] = &[

160+ "top", "right", "bottom", "left", "width", "height", "font-size", "block-size",

161+ "inline-size", "min-block-size", "max-block-size", "min-inline-size", "max-inline-size",

162+ "text-indent", "flex-basis", "perspective", "text-decoration-thickness",

163+ ];

164+ EXACT.contains(&name)

165+ || PREFIXES.iter().any(|p| name.starts_with(p))

166+ || SUFFIXES.iter().any(|s| name.ends_with(s))

167+}

168+

169+pub fn is_css_property(name: &str) -> bool {

170+ CSS_PROPERTIES.binary_search(&name).is_ok()

171+}

172+

173+/// Emitted as an HTML attribute on any element.

174+pub fn is_html_passthrough(name: &str) -> bool {

175+ HTML_PASSTHROUGH_ATTRS.contains(&name) || name.starts_with("aria-") || name.starts_with("data-")

176+}

177+

178+pub fn is_known_attribute(name: &str) -> bool {

179+ HTMLANG_ATTRIBUTES.contains(&name)

180+ || is_css_property(name)

181+ || HTML_ATTRIBUTES.contains(&name)

182+ || name.starts_with("aria-")

183+ || name.starts_with("data-")

184+}

185+

186+/// All known attribute names, for "did you mean" suggestions.

187+pub fn all_attributes() -> Vec<&'static str> {

188+ HTMLANG_ATTRIBUTES

189+ .iter()

190+ .chain(CSS_PROPERTIES)

191+ .chain(HTML_ATTRIBUTES)

192+ .copied()

193+ .collect()

194+}

195+

196+#[cfg(test)]

197+mod tests {

198+ #[test]

199+ fn css_properties_are_sorted() {

200+ assert!(super::CSS_PROPERTIES.windows(2).all(|w| w[0] < w[1]));

201+ }

202+}

tests/snapshots/stress_deeply_nested.html+1−1

@@ -1 +1 @@

1−<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Deeply Nested Stress Test</title><style>@layer hl-reset,htmlang;@layer hl-reset{*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}img{display:block}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}}:root{--primary:#3b82f6;--border:#e2e8f0;--radius:8;}@layer htmlang{.a{display:flex;flex-direction:column;gap:20px;padding:24px;}.b{display:flex;flex-direction:column;background:#f0f9ff;border-radius:12px;padding:20px;border:1px solid #bae6fd;}.c{font-weight:bold;font-size:20px;color:#0369a1;}.d{display:flex;flex-direction:row;gap:16px;}.e{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid var(--border);flex:1;min-width:0;}.f{font-weight:bold;font-size:16px;color:#1e293b;}.g{display:flex;flex-direction:column;gap:8px;}.h{display:flex;flex-direction:column;background:#f1f5f9;border-radius:6px;padding:12px;}.i{font-size:14px;color:#475569;}.j{display:flex;flex-direction:column;gap:4px;}.k{display:flex;flex-direction:column;padding:8px 12px;border-radius:4px;transition:all 0.15s;}.l{font-size:13px;color:#64748b;}.m{display:flex;flex-direction:row;gap:6px;align-items:center;}.n{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:#10b981;}.o{display:flex;flex-direction:column;padding:4px 8px;background:#dbeafe;border-radius:4px;}.p{font-size:11px;color:#1d4ed8;}.q{flex-direction:column;display:inline-block;}.r{font-size:10px;color:var(--primary);}.s{display:flex;flex-direction:column;}.t{font-size:9px;color:#93c5fd;}.u{display:flex;flex-direction:column;padding:2px 4px;background:#eff6ff;border-radius:2px;}.v{font-size:8px;color:#bfdbfe;}.w{display:flex;flex-direction:column;padding:8px 12px;border-radius:4px;}.x{display:flex;flex-direction:column;padding:6px;background:#f0fdf4;border-radius:4px;}.y{font-size:12px;color:#166534;}.z{display:flex;flex-direction:row;gap:4px;}.aa{display:flex;flex-direction:column;padding:2px 6px;background:#bbf7d0;border-radius:2px;}.ab{font-size:10px;color:#15803d;}.ac{display:flex;flex-direction:column;padding:2px 6px;background:#fef3c7;border-radius:2px;}.ad{font-size:10px;color:#92400e;}.ae{display:flex;flex-direction:column;gap:12px;}.af,.bk{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid var(--border);}.ag{font-weight:bold;font-size:16px;}.ah,.bl{display:flex;flex-direction:column;background:#f8fafc;border-radius:6px;padding:12px;}.ai{display:flex;flex-direction:row;gap:8px;}.aj{display:flex;flex-direction:column;flex:1;min-width:0;background:#eff6ff;border-radius:4px;padding:8px;}.ak{font-size:12px;color:#1d4ed8;font-weight:bold;}.al{display:flex;flex-direction:column;height:60px;background:#dbeafe;border-radius:4px;padding:8px;}.am{font-size:20px;font-weight:bold;color:#1e40af;}.an{display:flex;flex-direction:row;gap:2px;}.ao{display:flex;flex-direction:column;width:4px;height:12px;background:#93c5fd;border-radius:1px;}.ap{display:flex;flex-direction:column;width:4px;height:18px;background:#60a5fa;border-radius:1px;}.aq{display:flex;flex-direction:column;width:4px;height:8px;background:#93c5fd;border-radius:1px;}.ar{display:flex;flex-direction:column;width:4px;height:22px;background:var(--primary);border-radius:1px;}.as{display:flex;flex-direction:column;width:2px;height:2px;border-radius:50%;background:white;}.at{font-size:6px;color:white;}.au{display:flex;flex-direction:column;flex:1;min-width:0;background:#f0fdf4;border-radius:4px;padding:8px;}.av{font-size:12px;color:#166534;font-weight:bold;}.aw{display:flex;flex-direction:column;height:60px;background:#dcfce7;border-radius:4px;padding:8px;}.ax{font-size:20px;font-weight:bold;color:#166534;}.ay{font-size:10px;color:#16a34a;}.az{flex-direction:column;padding:1px 4px;background:#bbf7d0;border-radius:2px;display:inline-block;}.a0{font-size:8px;color:#15803d;}.a1,.ba{display:flex;flex-direction:column;padding:8px;border:1px solid var(--border);border-radius:4px;}.a2{font-size:12px;color:#64748b;}.a3{padding:6px 10px;border-radius:4px;border:1px solid var(--border);width:100%;}.a4{display:flex;flex-direction:column;padding:4px 8px;background:#fef2f2;border-radius:4px;}.a5{font-size:11px;color:#991b1b;}.a6{font-size:10px;color:#dc2626;}.a7{display:flex;flex-direction:column;padding:2px 4px;background:#fee2e2;border-radius:2px;}.a8{font-size:9px;color:#b91c1c;}.a9{display:flex;flex-direction:column;gap:6px;}.bb{font-size:14px;font-weight:bold;color:#1e293b;}.bc{display:flex;flex-direction:column;padding:6px;background:#f8fafc;border-radius:4px;}.bd{display:flex;flex-direction:row;gap:8px;align-items:center;}.be{display:flex;flex-direction:column;width:8px;height:8px;border-radius:2px;background:var(--primary);}.bf{font-size:12px;color:#475569;}.bg{font-size:11px;color:#94a3b8;}.bh{display:flex;flex-direction:column;padding:2px 6px;background:#eff6ff;border-radius:2px;}.bi{display:flex;flex-direction:column;background:#fefce8;border-radius:12px;padding:20px;border:1px solid #fde68a;}.bj{font-weight:bold;font-size:20px;color:#854d0e;}.bm{display:flex;flex-direction:column;padding:10px;border:1px solid var(--border);border-radius:6px;}.bn{font-size:13px;color:#1e293b;}.bo{flex-direction:column;width:80px;height:80px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;}.bp{font-size:24px;color:#94a3b8;font-weight:bold;}.bq{flex-direction:column;position:absolute;bottom:0;right:0;width:24px;height:24px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;}.br{font-size:10px;color:white;}.bs{display:flex;flex-direction:column;padding:1px 3px;background:#1e3a5f;border-radius:2px;}.bt{font-size:7px;color:white;}.bu{display:flex;flex-direction:row;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--border);border-radius:4px;}.bv{font-size:13px;color:#1e293b;flex:1;min-width:0;}.bw{display:flex;flex-direction:column;padding:4px 12px;background:#f1f5f9;border-radius:4px;}.bx{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px;border-bottom:1px solid var(--border);}.by{font-size:14px;color:#1e293b;flex:1;min-width:0;}.bz{display:flex;flex-direction:column;width:36px;height:20px;border-radius:10px;background:var(--primary);padding:2px;}.b0{display:flex;flex-direction:column;width:16px;height:16px;border-radius:50%;background:white;}.b1{display:flex;flex-direction:column;background:#fdf2f8;border-radius:12px;padding:20px;border:1px solid #fbcfe8;}.b2{font-weight:bold;font-size:20px;color:#9d174d;}.b3{display:flex;flex-direction:column;background:white;border-radius:8px;padding:12px;border:1px solid var(--border);flex:1;min-width:0;}.b4{font-weight:bold;font-size:14px;color:#1e293b;}.b5{display:flex;flex-direction:column;background:#f0fdf4;border-radius:6px;padding:8px;}.b6{display:flex;flex-direction:column;flex:1;min-width:0;height:4px;background:#86efac;border-radius:2px;}.b7{display:flex;flex-direction:column;flex:1;min-width:0;height:4px;background:#4ade80;border-radius:2px;}.b8{display:flex;flex-direction:column;flex:1;min-width:0;height:4px;background:#22c55e;border-radius:2px;}.b9{font-size:11px;color:#16a34a;}.ca{font-size:10px;color:#22c55e;}.cb{display:flex;flex-direction:column;padding:2px 6px;background:#dcfce7;border-radius:2px;}.cc{font-size:9px;color:#15803d;}.cd{font-size:8px;color:#4ade80;}.ce{display:flex;flex-direction:column;padding:1px 3px;background:#bbf7d0;border-radius:1px;}.cf{font-size:7px;color:#166534;}.k:hover,.w:hover{background:var(--border);}.ba:hover{background:#f8fafc;}@media(prefers-color-scheme:dark){.af{background:#1e293b;}.ah{background:#0f172a;}}}</style></head><body><div class="a"><div class="b"><span class="c">Level 1 - App Shell</span><div class="d"><div class="e"><span class="f">Level 2 - Sidebar</span><div class="g"><div class="h"><span class="i">Level 3 - Nav Group</span><div class="j"><div class="k"><span class="l">Level 4 - Nav Item</span><div class="m"><div class="n"></div><div class="o"><span class="p">Level 5 - Badge</span><div class="q"><span class="r">Level 6 - Badge Detail</span><div class="s"><span class="t">Level 7 - Sub Detail</span><div class="u"><span class="v">Level 8 - Deepest Badge</span></div></div></div></div></div></div><div class="w"><span class="l">Level 4 - Second Nav Item</span><div class="x"><span class="y">Level 5 - Status</span><div class="z"><div class="aa"><span class="ab">Level 6 - Online</span></div><div class="ac"><span class="ad">Level 6 - Away</span></div></div></div></div></div></div><div class="h"><span class="i">Level 3 - Second Group</span><div class="j"><div class="w"><span class="l">Settings</span></div><div class="w"><span class="l">Profile</span></div><div class="w"><span class="l">Security</span></div></div></div></div></div><div class="e"><span class="f">Level 2 - Main Content</span><div class="ae"><div class="af"><span class="ag">Level 3 - Dashboard Card</span><div class="ah"><span class="l">Level 4 - Chart Area</span><div class="ai"><div class="aj"><span class="ak">Level 5 - Metric A</span><div class="al"><span class="am">Level 6 - Value</span><div class="s"><span class="r">Level 7 - Trend</span><div class="an"><div class="ao"></div><div class="ap"></div><div class="aq"></div><div class="ar"><div class="as"><span class="at">Level 8 - Spark Dot</span></div></div></div></div></div></div><div class="au"><span class="av">Level 5 - Metric B</span><div class="aw"><span class="ax">Level 6 - Value</span><div class="s"><span class="ay">Level 7 - Change</span><div class="az"><span class="a0">Level 8 - Delta</span></div></div></div></div></div></div></div><div class="af"><span class="ag">Level 3 - Form Card</span><div class="ah"><span class="l">Level 4 - Form Section</span><div class="g"><div class="a1"><span class="a2">Level 5 - Field Group</span><input class="a3" type="text" placeholder="Name"><div class="a4"><span class="a5">Level 6 - Validation Error</span><div class="s"><span class="a6">Level 7 - Error Detail</span><div class="a7"><span class="a8">Level 8 - Error Code</span></div></div></div></div><div class="a1"><span class="a2">Level 5 - Select Group</span><select class="a3"><option value="a">Option A</option><option value="b">Option B</option><option value="c">Option C</option></select></div></div></div></div><div class="af"><span class="ag">Level 3 - Nested Lists Card</span><div class="ah"><span class="l">Level 4 - Category Browser</span><div class="a9"><div class="ba"><span class="bb">Level 5 - Electronics</span><div class="j"><div class="bc"><div class="bd"><div class="be"></div><span class="bf">Level 6 - Subcategory</span></div><div class="s"><span class="bg">Level 7 - Item</span><div class="bh"><span class="r">Level 8 - Variant</span></div></div></div></div></div><div class="ba"><span class="bb">Level 5 - Clothing</span><div class="j"><div class="bc"><div class="bd"><div class="be"></div><span class="bf">Level 6 - Subcategory</span></div><div class="s"><span class="bg">Level 7 - Item</span><div class="bh"><span class="r">Level 8 - Variant</span></div></div></div></div></div><div class="ba"><span class="bb">Level 5 - Books</span><div class="j"><div class="bc"><div class="bd"><div class="be"></div><span class="bf">Level 6 - Subcategory</span></div><div class="s"><span class="bg">Level 7 - Item</span><div class="bh"><span class="r">Level 8 - Variant</span></div></div></div></div></div></div></div></div></div></div></div></div><div class="bi"><span class="bj">Level 1 - Settings Panel</span><div class="ae"><div class="bk"><span class="f">Level 2 - Account Settings</span><div class="g"><div class="bl"><span class="i">Level 3 - Profile Section</span><div class="bm"><span class="bn">Level 4 - Avatar Upload</span><div class="bo"><span class="bp">Level 5 - Initials</span><div class="bq"><span class="br">Level 6 - Edit Icon</span><div class="s"><span class="v">Level 7 - Tooltip</span><div class="bs"><span class="bt">Level 8 - Tooltip Arrow</span></div></div></div></div></div></div><div class="bl"><span class="i">Level 3 - Preferences</span><div class="a9"><div class="bu"><span class="bv">Level 4 - Language</span><div class="bw"><span class="a2">Level 5 - Current Value</span></div></div><div class="bu"><span class="bv">Level 4 - Timezone</span><div class="bw"><span class="a2">Level 5 - Current Value</span></div></div><div class="bu"><span class="bv">Level 4 - Currency</span><div class="bw"><span class="a2">Level 5 - Current Value</span></div></div></div></div></div></div><div class="bk"><span class="f">Level 2 - Notification Preferences</span><div class="a9"><div class="bx"><span class="by">Email Notifications</span><div class="bz"><div class="b0"></div></div></div><div class="bx"><span class="by">Push Notifications</span><div class="bz"><div class="b0"></div></div></div><div class="bx"><span class="by">SMS Notifications</span><div class="bz"><div class="b0"></div></div></div><div class="bx"><span class="by">Slack Notifications</span><div class="bz"><div class="b0"></div></div></div></div></div></div></div><div class="b1"><span class="b2">Level 1 - Monitoring</span><div class="d"><div class="b3"><span class="b4">Level 2 - API</span><div class="b5"><span class="y">Level 3 - Healthy</span><div class="s"><div class="z"><div class="b6"></div><div class="b7"></div><div class="b8"></div><div class="b6"></div></div><div class="s"><span class="b9">Level 4 - Uptime 99.9%</span><div class="s"><span class="ca">Level 5 - Response 42ms</span><div class="cb"><span class="cc">Level 6 - p99 120ms</span><div class="s"><span class="cd">Level 7 - Throughput 1.2k/s</span><div class="ce"><span class="cf">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div><div class="b3"><span class="b4">Level 2 - Database</span><div class="b5"><span class="y">Level 3 - Healthy</span><div class="s"><div class="z"><div class="b6"></div><div class="b7"></div><div class="b8"></div><div class="b6"></div></div><div class="s"><span class="b9">Level 4 - Uptime 99.9%</span><div class="s"><span class="ca">Level 5 - Response 42ms</span><div class="cb"><span class="cc">Level 6 - p99 120ms</span><div class="s"><span class="cd">Level 7 - Throughput 1.2k/s</span><div class="ce"><span class="cf">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div><div class="b3"><span class="b4">Level 2 - Cache</span><div class="b5"><span class="y">Level 3 - Healthy</span><div class="s"><div class="z"><div class="b6"></div><div class="b7"></div><div class="b8"></div><div class="b6"></div></div><div class="s"><span class="b9">Level 4 - Uptime 99.9%</span><div class="s"><span class="ca">Level 5 - Response 42ms</span><div class="cb"><span class="cc">Level 6 - p99 120ms</span><div class="s"><span class="cd">Level 7 - Throughput 1.2k/s</span><div class="ce"><span class="cf">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div><div class="b3"><span class="b4">Level 2 - Queue</span><div class="b5"><span class="y">Level 3 - Healthy</span><div class="s"><div class="z"><div class="b6"></div><div class="b7"></div><div class="b8"></div><div class="b6"></div></div><div class="s"><span class="b9">Level 4 - Uptime 99.9%</span><div class="s"><span class="ca">Level 5 - Response 42ms</span><div class="cb"><span class="cc">Level 6 - p99 120ms</span><div class="s"><span class="cd">Level 7 - Throughput 1.2k/s</span><div class="ce"><span class="cf">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div></div></div></div></body></html>

1+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Deeply Nested Stress Test</title><style>@layer hl-reset,htmlang;@layer hl-reset{*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}img{display:block}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}}:root{--primary:#3b82f6;--border:#e2e8f0;--radius:8;}@layer htmlang{.a{display:flex;flex-direction:column;gap:20px;padding:24px;}.b{display:flex;flex-direction:column;background:#f0f9ff;border-radius:12px;padding:20px;border:1px solid #bae6fd;}.c{font-weight:bold;font-size:20px;color:#0369a1;}.d{display:flex;flex-direction:row;gap:16px;margin-top:16px;}.e{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid var(--border);flex:1;min-width:0;}.f{font-weight:bold;font-size:16px;color:#1e293b;}.g{display:flex;flex-direction:column;gap:8px;margin-top:12px;}.h{display:flex;flex-direction:column;background:#f1f5f9;border-radius:6px;padding:12px;}.i{font-size:14px;color:#475569;}.j{display:flex;flex-direction:column;gap:4px;margin-top:8px;}.k{display:flex;flex-direction:column;padding:8px 12px;border-radius:4px;transition:all 0.15s;}.l{font-size:13px;color:#64748b;}.m{display:flex;flex-direction:row;gap:6px;margin-top:4px;align-items:center;}.n{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:#10b981;}.o{display:flex;flex-direction:column;padding:4px 8px;background:#dbeafe;border-radius:4px;}.p{font-size:11px;color:#1d4ed8;}.q{flex-direction:column;display:inline-block;margin-left:4px;}.r{font-size:10px;color:var(--primary);}.s{display:flex;flex-direction:column;margin-top:2px;}.t{font-size:9px;color:#93c5fd;}.u{display:flex;flex-direction:column;padding:2px 4px;background:#eff6ff;border-radius:2px;margin-top:1px;}.v{font-size:8px;color:#bfdbfe;}.w{display:flex;flex-direction:column;padding:8px 12px;border-radius:4px;}.x{display:flex;flex-direction:column;margin-top:4px;padding:6px;background:#f0fdf4;border-radius:4px;}.y{font-size:12px;color:#166534;}.z{display:flex;flex-direction:row;gap:4px;margin-top:2px;}.aa{display:flex;flex-direction:column;padding:2px 6px;background:#bbf7d0;border-radius:2px;}.ab{font-size:10px;color:#15803d;}.ac{display:flex;flex-direction:column;padding:2px 6px;background:#fef3c7;border-radius:2px;}.ad{font-size:10px;color:#92400e;}.ae{display:flex;flex-direction:column;gap:12px;margin-top:12px;}.af,.bo{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid var(--border);}.ag{font-weight:bold;font-size:16px;}.ah{display:flex;flex-direction:column;background:#f8fafc;border-radius:6px;padding:12px;margin-top:8px;}.ai{display:flex;flex-direction:row;gap:8px;margin-top:8px;}.aj{display:flex;flex-direction:column;flex:1;min-width:0;background:#eff6ff;border-radius:4px;padding:8px;}.ak{font-size:12px;color:#1d4ed8;font-weight:bold;}.al{display:flex;flex-direction:column;margin-top:4px;height:60px;background:#dbeafe;border-radius:4px;padding:8px;}.am{font-size:20px;font-weight:bold;color:#1e40af;}.an{display:flex;flex-direction:row;gap:2px;margin-top:2px;}.ao{display:flex;flex-direction:column;width:4px;height:12px;background:#93c5fd;border-radius:1px;}.ap{display:flex;flex-direction:column;width:4px;height:18px;background:#60a5fa;border-radius:1px;}.aq{display:flex;flex-direction:column;width:4px;height:8px;background:#93c5fd;border-radius:1px;}.ar{display:flex;flex-direction:column;width:4px;height:22px;background:var(--primary);border-radius:1px;}.as{display:flex;flex-direction:column;width:2px;height:2px;border-radius:50%;background:white;margin-top:1px;}.at{font-size:6px;color:white;}.au{display:flex;flex-direction:column;flex:1;min-width:0;background:#f0fdf4;border-radius:4px;padding:8px;}.av{font-size:12px;color:#166534;font-weight:bold;}.aw{display:flex;flex-direction:column;margin-top:4px;height:60px;background:#dcfce7;border-radius:4px;padding:8px;}.ax{font-size:20px;font-weight:bold;color:#166534;}.ay{font-size:10px;color:#16a34a;}.az{flex-direction:column;padding:1px 4px;background:#bbf7d0;border-radius:2px;display:inline-block;}.a0{font-size:8px;color:#15803d;}.a1{display:flex;flex-direction:column;gap:8px;margin-top:8px;}.a2,.bb{display:flex;flex-direction:column;padding:8px;border:1px solid var(--border);border-radius:4px;}.a3{font-size:12px;color:#64748b;margin-bottom:4px;}.a4{padding:6px 10px;border-radius:4px;border:1px solid var(--border);width:100%;}.a5{display:flex;flex-direction:column;margin-top:4px;padding:4px 8px;background:#fef2f2;border-radius:4px;}.a6{font-size:11px;color:#991b1b;}.a7{font-size:10px;color:#dc2626;}.a8{display:flex;flex-direction:column;margin-top:1px;padding:2px 4px;background:#fee2e2;border-radius:2px;}.a9{font-size:9px;color:#b91c1c;}.ba{display:flex;flex-direction:column;gap:6px;margin-top:8px;}.bc{font-size:14px;font-weight:bold;color:#1e293b;}.bd{display:flex;flex-direction:column;gap:4px;margin-top:6px;margin-left:12px;}.be{display:flex;flex-direction:column;padding:6px;background:#f8fafc;border-radius:4px;}.bf{display:flex;flex-direction:row;gap:8px;align-items:center;}.bg{display:flex;flex-direction:column;width:8px;height:8px;border-radius:2px;background:var(--primary);}.bh{font-size:12px;color:#475569;}.bi{display:flex;flex-direction:column;margin-top:4px;margin-left:16px;}.bj{font-size:11px;color:#94a3b8;}.bk{display:flex;flex-direction:column;margin-left:12px;margin-top:2px;padding:2px 6px;background:#eff6ff;border-radius:2px;}.bl{display:flex;flex-direction:column;background:#fefce8;border-radius:12px;padding:20px;border:1px solid #fde68a;margin-top:20px;}.bm{font-weight:bold;font-size:20px;color:#854d0e;}.bn{display:flex;flex-direction:column;gap:12px;margin-top:16px;}.bp{display:flex;flex-direction:column;background:#f8fafc;border-radius:6px;padding:12px;}.bq{display:flex;flex-direction:column;margin-top:8px;padding:10px;border:1px solid var(--border);border-radius:6px;}.br{font-size:13px;color:#1e293b;}.bs{flex-direction:column;margin-top:6px;width:80px;height:80px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;}.bt{font-size:24px;color:#94a3b8;font-weight:bold;}.bu{flex-direction:column;position:absolute;bottom:0;right:0;width:24px;height:24px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;}.bv{font-size:10px;color:white;}.bw{display:flex;flex-direction:column;margin-top:1px;}.bx{display:flex;flex-direction:column;padding:1px 3px;background:#1e3a5f;border-radius:2px;margin-top:1px;}.by{font-size:7px;color:white;}.bz{display:flex;flex-direction:row;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--border);border-radius:4px;}.b0{font-size:13px;color:#1e293b;flex:1;min-width:0;}.b1{display:flex;flex-direction:column;padding:4px 12px;background:#f1f5f9;border-radius:4px;}.b2{font-size:12px;color:#64748b;}.b3{display:flex;flex-direction:column;gap:6px;margin-top:12px;}.b4{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px;border-bottom:1px solid var(--border);}.b5{font-size:14px;color:#1e293b;flex:1;min-width:0;}.b6{display:flex;flex-direction:column;width:36px;height:20px;border-radius:10px;background:var(--primary);padding:2px;}.b7{display:flex;flex-direction:column;width:16px;height:16px;border-radius:50%;background:white;margin-left:16px;}.b8{display:flex;flex-direction:column;background:#fdf2f8;border-radius:12px;padding:20px;border:1px solid #fbcfe8;margin-top:20px;}.b9{font-weight:bold;font-size:20px;color:#9d174d;}.ca{display:flex;flex-direction:column;background:white;border-radius:8px;padding:12px;border:1px solid var(--border);flex:1;min-width:0;}.cb{font-weight:bold;font-size:14px;color:#1e293b;}.cc{display:flex;flex-direction:column;margin-top:8px;background:#f0fdf4;border-radius:6px;padding:8px;}.cd{display:flex;flex-direction:column;margin-top:4px;}.ce{display:flex;flex-direction:row;gap:4px;}.cf{display:flex;flex-direction:column;flex:1;min-width:0;height:4px;background:#86efac;border-radius:2px;}.cg{display:flex;flex-direction:column;flex:1;min-width:0;height:4px;background:#4ade80;border-radius:2px;}.ch{display:flex;flex-direction:column;flex:1;min-width:0;height:4px;background:#22c55e;border-radius:2px;}.ci{font-size:11px;color:#16a34a;}.cj{font-size:10px;color:#22c55e;}.ck{display:flex;flex-direction:column;margin-top:2px;padding:2px 6px;background:#dcfce7;border-radius:2px;}.cl{font-size:9px;color:#15803d;}.cm{font-size:8px;color:#4ade80;}.cn{display:flex;flex-direction:column;padding:1px 3px;background:#bbf7d0;border-radius:1px;margin-top:1px;}.co{font-size:7px;color:#166534;}.k:hover,.w:hover{background:var(--border);}.bb:hover{background:#f8fafc;}@media(prefers-color-scheme:dark){.af{background:#1e293b;}.ah{background:#0f172a;}}}</style></head><body><div class="a"><div class="b"><span class="c">Level 1 - App Shell</span><div class="d"><div class="e"><span class="f">Level 2 - Sidebar</span><div class="g"><div class="h"><span class="i">Level 3 - Nav Group</span><div class="j"><div class="k"><span class="l">Level 4 - Nav Item</span><div class="m"><div class="n"></div><div class="o"><span class="p">Level 5 - Badge</span><div class="q"><span class="r">Level 6 - Badge Detail</span><div class="s"><span class="t">Level 7 - Sub Detail</span><div class="u"><span class="v">Level 8 - Deepest Badge</span></div></div></div></div></div></div><div class="w"><span class="l">Level 4 - Second Nav Item</span><div class="x"><span class="y">Level 5 - Status</span><div class="z"><div class="aa"><span class="ab">Level 6 - Online</span></div><div class="ac"><span class="ad">Level 6 - Away</span></div></div></div></div></div></div><div class="h"><span class="i">Level 3 - Second Group</span><div class="j"><div class="w"><span class="l">Settings</span></div><div class="w"><span class="l">Profile</span></div><div class="w"><span class="l">Security</span></div></div></div></div></div><div class="e"><span class="f">Level 2 - Main Content</span><div class="ae"><div class="af"><span class="ag">Level 3 - Dashboard Card</span><div class="ah"><span class="l">Level 4 - Chart Area</span><div class="ai"><div class="aj"><span class="ak">Level 5 - Metric A</span><div class="al"><span class="am">Level 6 - Value</span><div class="s"><span class="r">Level 7 - Trend</span><div class="an"><div class="ao"></div><div class="ap"></div><div class="aq"></div><div class="ar"><div class="as"><span class="at">Level 8 - Spark Dot</span></div></div></div></div></div></div><div class="au"><span class="av">Level 5 - Metric B</span><div class="aw"><span class="ax">Level 6 - Value</span><div class="s"><span class="ay">Level 7 - Change</span><div class="az"><span class="a0">Level 8 - Delta</span></div></div></div></div></div></div></div><div class="af"><span class="ag">Level 3 - Form Card</span><div class="ah"><span class="l">Level 4 - Form Section</span><div class="a1"><div class="a2"><span class="a3">Level 5 - Field Group</span><input class="a4" type="text" placeholder="Name"><div class="a5"><span class="a6">Level 6 - Validation Error</span><div class="s"><span class="a7">Level 7 - Error Detail</span><div class="a8"><span class="a9">Level 8 - Error Code</span></div></div></div></div><div class="a2"><span class="a3">Level 5 - Select Group</span><select class="a4"><option value="a">Option A</option><option value="b">Option B</option><option value="c">Option C</option></select></div></div></div></div><div class="af"><span class="ag">Level 3 - Nested Lists Card</span><div class="ah"><span class="l">Level 4 - Category Browser</span><div class="ba"><div class="bb"><span class="bc">Level 5 - Electronics</span><div class="bd"><div class="be"><div class="bf"><div class="bg"></div><span class="bh">Level 6 - Subcategory</span></div><div class="bi"><span class="bj">Level 7 - Item</span><div class="bk"><span class="r">Level 8 - Variant</span></div></div></div></div></div><div class="bb"><span class="bc">Level 5 - Clothing</span><div class="bd"><div class="be"><div class="bf"><div class="bg"></div><span class="bh">Level 6 - Subcategory</span></div><div class="bi"><span class="bj">Level 7 - Item</span><div class="bk"><span class="r">Level 8 - Variant</span></div></div></div></div></div><div class="bb"><span class="bc">Level 5 - Books</span><div class="bd"><div class="be"><div class="bf"><div class="bg"></div><span class="bh">Level 6 - Subcategory</span></div><div class="bi"><span class="bj">Level 7 - Item</span><div class="bk"><span class="r">Level 8 - Variant</span></div></div></div></div></div></div></div></div></div></div></div></div><div class="bl"><span class="bm">Level 1 - Settings Panel</span><div class="bn"><div class="bo"><span class="f">Level 2 - Account Settings</span><div class="g"><div class="bp"><span class="i">Level 3 - Profile Section</span><div class="bq"><span class="br">Level 4 - Avatar Upload</span><div class="bs"><span class="bt">Level 5 - Initials</span><div class="bu"><span class="bv">Level 6 - Edit Icon</span><div class="bw"><span class="v">Level 7 - Tooltip</span><div class="bx"><span class="by">Level 8 - Tooltip Arrow</span></div></div></div></div></div></div><div class="bp"><span class="i">Level 3 - Preferences</span><div class="ba"><div class="bz"><span class="b0">Level 4 - Language</span><div class="b1"><span class="b2">Level 5 - Current Value</span></div></div><div class="bz"><span class="b0">Level 4 - Timezone</span><div class="b1"><span class="b2">Level 5 - Current Value</span></div></div><div class="bz"><span class="b0">Level 4 - Currency</span><div class="b1"><span class="b2">Level 5 - Current Value</span></div></div></div></div></div></div><div class="bo"><span class="f">Level 2 - Notification Preferences</span><div class="b3"><div class="b4"><span class="b5">Email Notifications</span><div class="b6"><div class="b7"></div></div></div><div class="b4"><span class="b5">Push Notifications</span><div class="b6"><div class="b7"></div></div></div><div class="b4"><span class="b5">SMS Notifications</span><div class="b6"><div class="b7"></div></div></div><div class="b4"><span class="b5">Slack Notifications</span><div class="b6"><div class="b7"></div></div></div></div></div></div></div><div class="b8"><span class="b9">Level 1 - Monitoring</span><div class="d"><div class="ca"><span class="cb">Level 2 - API</span><div class="cc"><span class="y">Level 3 - Healthy</span><div class="cd"><div class="ce"><div class="cf"></div><div class="cg"></div><div class="ch"></div><div class="cf"></div></div><div class="cd"><span class="ci">Level 4 - Uptime 99.9%</span><div class="s"><span class="cj">Level 5 - Response 42ms</span><div class="ck"><span class="cl">Level 6 - p99 120ms</span><div class="bw"><span class="cm">Level 7 - Throughput 1.2k/s</span><div class="cn"><span class="co">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div><div class="ca"><span class="cb">Level 2 - Database</span><div class="cc"><span class="y">Level 3 - Healthy</span><div class="cd"><div class="ce"><div class="cf"></div><div class="cg"></div><div class="ch"></div><div class="cf"></div></div><div class="cd"><span class="ci">Level 4 - Uptime 99.9%</span><div class="s"><span class="cj">Level 5 - Response 42ms</span><div class="ck"><span class="cl">Level 6 - p99 120ms</span><div class="bw"><span class="cm">Level 7 - Throughput 1.2k/s</span><div class="cn"><span class="co">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div><div class="ca"><span class="cb">Level 2 - Cache</span><div class="cc"><span class="y">Level 3 - Healthy</span><div class="cd"><div class="ce"><div class="cf"></div><div class="cg"></div><div class="ch"></div><div class="cf"></div></div><div class="cd"><span class="ci">Level 4 - Uptime 99.9%</span><div class="s"><span class="cj">Level 5 - Response 42ms</span><div class="ck"><span class="cl">Level 6 - p99 120ms</span><div class="bw"><span class="cm">Level 7 - Throughput 1.2k/s</span><div class="cn"><span class="co">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div><div class="ca"><span class="cb">Level 2 - Queue</span><div class="cc"><span class="y">Level 3 - Healthy</span><div class="cd"><div class="ce"><div class="cf"></div><div class="cg"></div><div class="ch"></div><div class="cf"></div></div><div class="cd"><span class="ci">Level 4 - Uptime 99.9%</span><div class="s"><span class="cj">Level 5 - Response 42ms</span><div class="ck"><span class="cl">Level 6 - p99 120ms</span><div class="bw"><span class="cm">Level 7 - Throughput 1.2k/s</span><div class="cn"><span class="co">Level 8 - Peak 2.4k/s</span></div></div></div></div></div></div></div></div></div></div></div></body></html>

tests/snapshots/stress_large.html+1−1

@@ -1 +1 @@

1−<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Stress Test Large Document</title><style>@layer hl-reset,htmlang;@layer hl-reset{*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}img{display:block}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}}:root{--primary:#3b82f6;--secondary:#10b981;--accent:#f59e0b;--danger:#ef4444;--dark:#1e293b;--light:#f8fafc;--gray:#64748b;--border:#e2e8f0;--radius:8;--gap:16;--gap-sm:8;--gap-lg:24;--h0:none solid currentColor;}@layer htmlang{.a{display:flex;flex-direction:row;gap:0;min-height:100vh;}.b{display:flex;flex-direction:column;width:260px;background:white;border-right:1px solid var(--border);padding:16px;gap:8px;}.c{display:flex;flex-direction:row;gap:12px;padding:8px;align-items:center;}.d{flex-direction:column;width:36px;height:36px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;}.e{display:flex;flex-direction:column;gap:2px;}.f{font-weight:bold;font-size:16px;color:var(--dark);}.g{font-size:12px;color:var(--gray);}.h{display:flex;flex-direction:column;width:100%;height:1px;background:var(--border);margin:8px 0;}.i{display:flex;flex-direction:column;}.j{font-weight:bold;font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:1px;}.k{color:var(--primary);font-weight:bold;padding:8px 12px;background:#eff6ff;border-radius:6px;}.l{color:var(--gray);padding:8px 12px;border-radius:6px;transition:all 0.15s;}.m{display:flex;flex-direction:column;gap:4px;}.n{display:flex;flex-direction:row;gap:8px;align-items:center;}.o{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:var(--secondary);}.p{font-size:13px;color:var(--gray);}.q{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:var(--accent);}.r{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:#cbd5e1;}.s{display:flex;flex-direction:column;padding:12px;background:#f1f5f9;border-radius:8px;}.t{flex-direction:column;width:28px;height:28px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;}.u{display:flex;flex-direction:column;gap:0;}.v{font-size:13px;font-weight:bold;color:var(--dark);}.w{font-size:11px;color:var(--gray);}.x{display:flex;flex-direction:column;flex:1;min-width:0;background:var(--light);}.y{display:flex;flex-direction:column;padding:12px 24px;background:white;border-bottom:1px solid var(--border);}.z{display:flex;flex-direction:row;gap:16px;align-items:center;}.aa{display:flex;flex-direction:row;gap:8px;}.ab{color:var(--gray);font-size:14px;}.ac{color:var(--border);font-size:14px;}.ad{color:var(--dark);font-size:14px;}.ae{font-weight:bold;font-size:22px;color:var(--dark);}.af{display:flex;flex-direction:column;flex:1;min-width:0;}.ag{display:flex;flex-direction:row;gap:12px;align-items:center;}.ah{padding:8px 12px;border-radius:6px;border:1px solid var(--border);width:240px;transition:all 0.2s;}.ai{display:flex;flex-direction:column;position:relative;}.aj{padding:8px 16px;background:var(--primary);color:white;border-radius:6px;border:var(--h0);cursor:pointer;transition:all 0.2s;}.ak{display:flex;flex-direction:column;position:absolute;top:-2px;right:-2px;}.al{display:flex;flex-direction:column;width:8px;height:8px;border-radius:50%;background:var(--danger);}.am{padding:8px 16px;background:var(--gray);color:white;border-radius:6px;border:var(--h0);cursor:pointer;transition:all 0.2s;}.an{display:flex;flex-direction:column;padding:24px;overflow-y:auto;}.ao{display:flex;flex-direction:column;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px 16px;}.ap{color:#1e40af;font-size:14px;}.aq{display:flex;flex-direction:row;gap:16px;}.ar{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid var(--border);}.as{font-size:14px;color:var(--gray);}.at{font-weight:bold;font-size:28px;color:var(--dark);}.au{font-size:12px;color:var(--secondary);}.av{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid var(--border);transition:all 0.2s;animation:fade-in 0.3s ease;}.aw{font-weight:bold;font-size:18px;color:var(--dark);}.ax{flex-direction:column;height:200px;background:var(--light);border-radius:6px;display:flex;align-items:flex-end;padding:16px;gap:8px;}.ay{display:flex;flex-direction:column;width:100%;height:40%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.az{display:flex;flex-direction:column;width:100%;height:65%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a0{display:flex;flex-direction:column;width:100%;height:45%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a1{display:flex;flex-direction:column;width:100%;height:80%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a2{display:flex;flex-direction:column;width:100%;height:55%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a3{display:flex;flex-direction:column;width:100%;height:70%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a4{display:flex;flex-direction:column;width:100%;height:90%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a5{display:flex;flex-direction:column;width:100%;height:60%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a6{display:flex;flex-direction:column;width:100%;height:75%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a7{display:flex;flex-direction:column;width:100%;height:85%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a8{display:flex;flex-direction:column;width:100%;height:50%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a9{display:flex;flex-direction:column;width:100%;height:95%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.ba{display:flex;flex-direction:column;gap:12px;}.bb{display:flex;flex-direction:row;gap:12px;align-items:center;padding:8px;border-radius:6px;}.bc{flex-direction:column;width:32px;height:32px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;}.bd{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}.be{font-size:14px;font-weight:bold;color:var(--dark);}.bf{display:flex;flex-direction:column;flex:1;min-width:0;gap:16px;}.bg{display:flex;flex-direction:row;gap:0;padding:8px 16px;background:var(--light);border-bottom:1px solid var(--border);}.bh{display:flex;flex-direction:column;width:200px;}.bi{font-weight:bold;font-size:12px;color:var(--gray);text-transform:uppercase;}.bj{display:flex;flex-direction:column;width:150px;}.bk{display:flex;flex-direction:column;width:120px;}.bl{display:flex;flex-direction:row;gap:0;padding:12px 16px;border-bottom:1px solid var(--border);}.bm{font-size:14px;}.bn{display:flex;flex-direction:row;gap:0;}.bo{font-size:13px;color:var(--dark);flex:1;min-width:0;}.bp{display:flex;flex-direction:column;width:100%;height:8px;background:var(--border);border-radius:4px;overflow:hidden;}.bq{display:flex;flex-direction:column;width:67%;height:100%;background:var(--primary);border-radius:4px;}.br{display:flex;flex-direction:column;gap:8px;}.bs{display:flex;flex-direction:row;gap:12px;padding:8px 12px;align-items:center;}.bt{flex-direction:column;width:24px;height:24px;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center;}.bu{font-size:10px;color:var(--primary);font-weight:bold;}.bv{font-size:14px;color:var(--dark);flex:1;min-width:0;}.bw{display:flex;flex-direction:column;width:340px;gap:16px;}.bx{padding:8px 16px;background:var(--secondary);color:white;border-radius:6px;border:var(--h0);cursor:pointer;transition:all 0.2s;}.by{padding:8px 16px;background:var(--accent);color:white;border-radius:6px;border:var(--h0);cursor:pointer;transition:all 0.2s;}.bz{padding:8px 16px;background:var(--gray);color:white;border-radius:6px;border:var(--h0);cursor:pointer;transition:all 0.2s;}.b0{display:flex;flex-direction:row;gap:10px;align-items:center;padding:6px 8px;border-radius:6px;transition:all 0.15s;}.b1{display:flex;flex-direction:column;gap:0;flex:1;min-width:0;}.b2{display:flex;flex-direction:column;width:8px;height:8px;border-radius:50%;background:var(--secondary);}.b3{display:flex;flex-direction:row;gap:0;flex-wrap:wrap;}.b4{flex-direction:column;display:inline-block;padding:4px 10px;background:#f1f5f9;color:var(--gray);border-radius:4px;margin:2px;}.b5{display:flex;flex-direction:row;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);align-items:center;}.b6{display:flex;flex-direction:row;gap:0;align-items:center;}.b7{display:flex;flex-direction:column;width:40px;height:22px;border-radius:11px;background:var(--primary);padding:2px;cursor:pointer;transition:all 0.2s;}.b8{display:flex;flex-direction:column;width:18px;height:18px;border-radius:50%;background:white;transition:all 0.2s;}.b9{display:flex;flex-direction:column;width:40px;height:22px;border-radius:11px;background:#cbd5e1;padding:2px;cursor:pointer;transition:all 0.2s;}.ca{padding:8px 12px;border-radius:6px;border:1px solid var(--border);width:240px;}.cb{padding:6px 12px;border-radius:4px;border:1px solid var(--border);background:white;color:var(--gray);cursor:pointer;transition:all 0.15s;}.cc{display:flex;flex-direction:row;gap:0;padding:8px 16px;background:var(--light);border-bottom:2px solid var(--border);border-radius:6 6 0 0;}.cd{display:flex;flex-direction:column;width:60px;}.ce{display:flex;flex-direction:row;gap:0;padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:all 0.1s;}.cf{flex-direction:column;width:24px;height:24px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;}.cg{font-size:14px;color:var(--dark);}.ch{flex-direction:column;display:inline-block;padding:2px 8px;background:var(--secondary);color:white;border-radius:12px;}.ci{display:flex;flex-direction:row;gap:16px;padding:12px 16px;align-items:center;border-top:1px solid var(--border);}.cj{display:flex;flex-direction:row;gap:4px;}.ck{padding:6px 10px;border-radius:4px;border:1px solid var(--border);background:white;color:var(--gray);cursor:pointer;}.cl{padding:6px 10px;border-radius:4px;border:1px solid var(--primary);background:var(--primary);color:white;cursor:pointer;}.cm{display:flex;flex-direction:column;padding:24px 24px;background:white;border-top:1px solid var(--border);}.cn{display:flex;flex-direction:row;gap:24px;}.co{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;}.cp{font-weight:bold;font-size:14px;color:var(--dark);}.cq{color:var(--gray);font-size:13px;}.l:hover{color:var(--primary);background:#f1f5f9;}.ab:hover,.cq:hover{color:var(--primary);}.aj:hover,.am:hover,.bx:hover,.by:hover,.bz:hover{background:var(--dark);}.av:hover{box-shadow:0 4 12 rgba(0,0,0,0.1);}.ay:hover,.az:hover,.a0:hover,.a1:hover,.a2:hover,.a3:hover,.a4:hover,.a5:hover,.a6:hover,.a7:hover,.a8:hover,.a9:hover{background:#2563eb;}.bb:hover,.bl:hover,.ce:hover{background:var(--light);}.b0:hover{background:#f1f5f9;}.cb:hover{background:#f1f5f9;color:var(--dark);}.ah:focus{border:1px solid var(--primary);}@media(min-width:640px){.bw{flex:1;min-width:0;}}@media(prefers-color-scheme:dark){.b{background:#0f172a;border-right:1px solid var(--dark);}.f,.v,.ad,.ae,.at,.aw,.be,.bo,.bv,.cg,.cp{color:white;}.h,.bp{background:#334155;}.k,.bt{background:#1e3a5f;}.s,.cb,.ck{background:var(--dark);}.x,.ax,.bg,.cc{background:#0f172a;}.y{background:#0f172a;border-bottom:1px solid var(--dark);}.ah{border:1px solid #334155;background:var(--dark);color:white;}.ar,.av{background:var(--dark);border:1px solid #334155;}.bl,.b5,.ce{border-bottom:1px solid #334155;}.b4{background:#334155;color:#94a3b8;}.b9{background:#475569;}.cm{background:#0f172a;border-top:1px solid var(--dark);}}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes slide-down{0%{transform:translateY(-10px);opacity:0}100%{transform:translateY(0);opacity:1}}</style></head><body><div class="a"><div class="b"><div class="c"><div class="d"><span>HL</span></div><div class="e"><span class="f">htmlang</span><span class="g">Dashboard v2.0</span></div></div><div class="h"></div><div class="i"><span class="j">Navigation</span><div class="e"><a href="/dashboard" class="k">Dashboard</a><a href="/analytics" class="l">Analytics</a><a href="/projects" class="l">Projects</a><a href="/team" class="l">Team</a><a href="/messages" class="l">Messages</a><a href="/calendar" class="l">Calendar</a><a href="/documents" class="l">Documents</a><a href="/settings" class="l">Settings</a></div></div><div class="i"><span class="j">Favorites</span><div class="e"><a href="/project/alpha" class="l">Project Alpha</a><a href="/project/beta" class="l">Project Beta</a><a href="/reports/q4" class="l">Q4 Reports</a></div></div><div class="i"><span class="j">Shortcuts</span><div class="m"><div class="n"><div class="o"></div><span class="p">Online (12)</span></div><div class="n"><div class="q"></div><span class="p">Away (3)</span></div><div class="n"><div class="r"></div><span class="p">Offline (5)</span></div></div></div><div class="s"><div class="n"><div class="t"><span>JD</span></div><div class="u"><span class="v">Jane Doe</span><span class="w">jane@example.com</span></div></div></div></div><div class="x"><header class="y"><div class="z"><div class="e"><div class="aa"><div class="aa"><a href="/" class="ab">Home</a><span class="ac">/</span></div><span class="ad">Dashboard</span></div><span class="ae">Dashboard Overview</span></div><div class="af"></div><div class="ag"><input class="ah" type="search" placeholder="Search..."><div class="ai"><button class="aj">Alerts</button><div class="ak"><div class="al"></div></div></div><button class="am">Settings</button></div></div></header><div class="an"><div class="ao"><span class="ap">Welcome back! You have 3 new notifications and 2 pending tasks.</span></div><div class="aq"><div class="ar"><span class="as">Total Revenue</span><span class="at">$48</span><span class="au">+12.5% from last month</span></div><div class="ar"><span class="as">Active Users</span><span class="at">2</span><span class="au">+8.2% from last week</span></div><div class="ar"><span class="as">Conversion Rate</span><span class="at">3.24%</span><span class="au">+0.4% from yesterday</span></div><div class="ar"><span class="as">Open Tickets</span><span class="at">142</span><span class="au">-5.1% from last month</span></div></div><div class="aq"><div class="av"><span class="aw">Revenue Overview</span><div class="i"><div class="ax"><div class="ay"></div><div class="az"></div><div class="a0"></div><div class="a1"></div><div class="a2"></div><div class="a3"></div><div class="a4"></div><div class="a5"></div><div class="a6"></div><div class="a7"></div><div class="a8"></div><div class="a9"></div></div></div></div><div class="av"><span class="aw">Activity Feed</span><div class="i"><div class="ba"><div class="bb"><div class="bc"><span>Alice</span></div><div class="bd"><span class="be">Alice</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bb"><div class="bc"><span>Bob</span></div><div class="bd"><span class="be">Bob</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bb"><div class="bc"><span>Carol</span></div><div class="bd"><span class="be">Carol</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bb"><div class="bc"><span>Dave</span></div><div class="bd"><span class="be">Dave</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bb"><div class="bc"><span>Eve</span></div><div class="bd"><span class="be">Eve</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bb"><div class="bc"><span>Frank</span></div><div class="bd"><span class="be">Frank</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bb"><div class="bc"><span>Grace</span></div><div class="bd"><span class="be">Grace</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bb"><div class="bc"><span>Hank</span></div><div class="bd"><span class="be">Hank</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div></div></div></div></div><div class="aq"><div class="bf"><div class="av"><span class="aw">Project Status</span><div class="i"><div class="u"><div class="bg"><div class="bh"><span class="bi">Project</span></div><div class="bj"><span class="bi">Status</span></div><div class="bk"><span class="bi">Progress</span></div><div class="af"><span class="bi">Due Date</span></div></div><div class="bl"><div class="bh"><span class="bm">Project Alpha</span></div><div class="bj"><span class="as">In Progress</span></div><div class="bk"><span class="bm">75%</span></div><div class="af"><span class="as">Dec 15 2025</span></div></div><div class="bl"><div class="bh"><span class="bm">Project Beta</span></div><div class="bj"><span class="as">Review</span></div><div class="bk"><span class="bm">90%</span></div><div class="af"><span class="as">Nov 30 2025</span></div></div><div class="bl"><div class="bh"><span class="bm">Project Gamma</span></div><div class="bj"><span class="as">Planning</span></div><div class="bk"><span class="bm">20%</span></div><div class="af"><span class="as">Jan 20 2026</span></div></div><div class="bl"><div class="bh"><span class="bm">Project Delta</span></div><div class="bj"><span class="as">Completed</span></div><div class="bk"><span class="bm">100%</span></div><div class="af"><span class="as">Oct 10 2025</span></div></div><div class="bl"><div class="bh"><span class="bm">Project Epsilon</span></div><div class="bj"><span class="as">On Hold</span></div><div class="bk"><span class="bm">45%</span></div><div class="af"><span class="as">Feb 28 2026</span></div></div></div></div></div><div class="av"><span class="aw">Progress Breakdown</span><div class="i"><div class="ba"><div class="m"><div class="bn"><span class="bo">Alpha</span><span class="p">67%</span></div><div class="bp"><div class="bq"></div></div></div><div class="m"><div class="bn"><span class="bo">Beta</span><span class="p">67%</span></div><div class="bp"><div class="bq"></div></div></div><div class="m"><div class="bn"><span class="bo">Gamma</span><span class="p">67%</span></div><div class="bp"><div class="bq"></div></div></div><div class="m"><div class="bn"><span class="bo">Delta</span><span class="p">67%</span></div><div class="bp"><div class="bq"></div></div></div><div class="m"><div class="bn"><span class="bo">Epsilon</span><span class="p">67%</span></div><div class="bp"><div class="bq"></div></div></div></div></div></div><div class="av"><span class="aw">Recent Activity Log</span><div class="i"><div class="br"><div class="bs"><div class="bt"><span class="bu">v2.3.1 to production</span></div><span class="bv">Deployed</span><span class="w">just now</span></div><div class="bs"><div class="bt"><span class="bu">feature/auth-redesign</span></div><span class="bv">Merged</span><span class="w">just now</span></div><div class="bs"><div class="bt"><span class="bu">issue #482: Login timeout</span></div><span class="bv">Closed</span><span class="w">just now</span></div><div class="bs"><div class="bt"><span class="bu">CI/CD pipeline config</span></div><span class="bv">Updated</span><span class="w">just now</span></div><div class="bs"><div class="bt"><span class="bu">unit tests for payment module</span></div><span class="bv">Added</span><span class="w">just now</span></div><div class="bs"><div class="bt"><span class="bu">PR #156: API refactor</span></div><span class="bv">Reviewed</span><span class="w">just now</span></div><div class="bs"><div class="bt"><span class="bu">memory leak in worker pool</span></div><span class="bv">Fixed</span><span class="w">just now</span></div><div class="bs"><div class="bt"><span class="bu">hotfix 2.3.2</span></div><span class="bv">Released</span><span class="w">just now</span></div></div></div></div></div><div class="bw"><div class="av"><span class="aw">Quick Actions</span><div class="i"><div class="br"><button class="aj">New Project</button><button class="bx">Create Report</button><button class="by">Invite Member</button><button class="bz">View Backlog</button></div></div></div><div class="av"><span class="aw">Team Members</span><div class="i"><div class="br"><div class="b0"><div class="t"><span>Alice</span></div><div class="b1"><span class="v">Alice</span><span class="w">Developer</span></div><div class="b2"></div></div><div class="b0"><div class="t"><span>Bob</span></div><div class="b1"><span class="v">Bob</span><span class="w">Developer</span></div><div class="b2"></div></div><div class="b0"><div class="t"><span>Carol</span></div><div class="b1"><span class="v">Carol</span><span class="w">Developer</span></div><div class="b2"></div></div><div class="b0"><div class="t"><span>Dave</span></div><div class="b1"><span class="v">Dave</span><span class="w">Developer</span></div><div class="b2"></div></div><div class="b0"><div class="t"><span>Eve</span></div><div class="b1"><span class="v">Eve</span><span class="w">Developer</span></div><div class="b2"></div></div><div class="b0"><div class="t"><span>Frank</span></div><div class="b1"><span class="v">Frank</span><span class="w">Developer</span></div><div class="b2"></div></div><div class="b0"><div class="t"><span>Grace</span></div><div class="b1"><span class="v">Grace</span><span class="w">Developer</span></div><div class="b2"></div></div><div class="b0"><div class="t"><span>Hank</span></div><div class="b1"><span class="v">Hank</span><span class="w">Developer</span></div><div class="b2"></div></div></div></div></div><div class="av"><span class="aw">Tags</span><div class="i"><div class="b3"><div class="b4"><span>frontend</span></div><div class="b4"><span>backend</span></div><div class="b4"><span>devops</span></div><div class="b4"><span>design</span></div><div class="b4"><span>mobile</span></div><div class="b4"><span>security</span></div><div class="b4"><span>performance</span></div><div class="b4"><span>testing</span></div><div class="b4"><span>docs</span></div><div class="b4"><span>infra</span></div><div class="b4"><span>ux</span></div><div class="b4"><span>api</span></div></div></div></div><div class="av"><span class="aw">Notifications</span><div class="i"><div class="u"><div class="b5"><div class="al"></div><span class="bo">New deployment completed</span><span class="w">now</span></div><div class="b5"><div class="al"></div><span class="bo">PR review requested</span><span class="w">now</span></div><div class="b5"><div class="al"></div><span class="bo">Build failed on staging</span><span class="w">now</span></div><div class="b5"><div class="al"></div><span class="bo">Meeting in 30 minutes</span><span class="w">now</span></div><div class="b5"><div class="al"></div><span class="bo">Subscription renewal due</span><span class="w">now</span></div></div></div></div><div class="av"><span class="aw">Settings</span><div class="i"><div class="ba"><div class="b6"><span class="bv">Dark Mode</span><div class="b7"><div class="b8"></div></div></div><div class="b6"><span class="bv">Notifications</span><div class="b7"><div class="b8"></div></div></div><div class="b6"><span class="bv">Auto-save</span><div class="b9"><div class="b8"></div></div></div><div class="b6"><span class="bv">Compact View</span><div class="b9"><div class="b8"></div></div></div></div></div></div></div></div><div class="i"><div class="av"><span class="aw">Data Table</span><div class="i"><div class="u"><div class="z"><input class="ca" type="search" placeholder="Filter results..."><div class="af"></div><div class="aa"><button class="cb">all</button><button class="cb">design</button><button class="cb">development</button><button class="cb">marketing</button><button class="cb">analytics</button></div></div><div class="cc"><div class="cd"><span class="bi">ID</span></div><div class="bh"><span class="bi">Name</span></div><div class="bj"><span class="bi">Category</span></div><div class="bk"><span class="bi">Status</span></div><div class="af"><span class="bi">Updated</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Alpha</span></div><span class="cg">Alpha</span></div></div><div class="bj"><span class="p">active</span></div><div class="bk"><div class="ch"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Beta</span></div><span class="cg">Beta</span></div></div><div class="bj"><span class="p">active</span></div><div class="bk"><div class="ch"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Gamma</span></div><span class="cg">Gamma</span></div></div><div class="bj"><span class="p">active</span></div><div class="bk"><div class="ch"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Delta</span></div><span class="cg">Delta</span></div></div><div class="bj"><span class="p">active</span></div><div class="bk"><div class="ch"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Epsilon</span></div><span class="cg">Epsilon</span></div></div><div class="bj"><span class="p">active</span></div><div class="bk"><div class="ch"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Alpha</span></div><span class="cg">Alpha</span></div></div><div class="bj"><span class="p">pending</span></div><div class="bk"><div class="ch"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Beta</span></div><span class="cg">Beta</span></div></div><div class="bj"><span class="p">pending</span></div><div class="bk"><div class="ch"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Gamma</span></div><span class="cg">Gamma</span></div></div><div class="bj"><span class="p">pending</span></div><div class="bk"><div class="ch"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Delta</span></div><span class="cg">Delta</span></div></div><div class="bj"><span class="p">pending</span></div><div class="bk"><div class="ch"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Epsilon</span></div><span class="cg">Epsilon</span></div></div><div class="bj"><span class="p">pending</span></div><div class="bk"><div class="ch"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Alpha</span></div><span class="cg">Alpha</span></div></div><div class="bj"><span class="p">completed</span></div><div class="bk"><div class="ch"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Beta</span></div><span class="cg">Beta</span></div></div><div class="bj"><span class="p">completed</span></div><div class="bk"><div class="ch"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Gamma</span></div><span class="cg">Gamma</span></div></div><div class="bj"><span class="p">completed</span></div><div class="bk"><div class="ch"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Delta</span></div><span class="cg">Delta</span></div></div><div class="bj"><span class="p">completed</span></div><div class="bk"><div class="ch"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Epsilon</span></div><span class="cg">Epsilon</span></div></div><div class="bj"><span class="p">completed</span></div><div class="bk"><div class="ch"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Alpha</span></div><span class="cg">Alpha</span></div></div><div class="bj"><span class="p">archived</span></div><div class="bk"><div class="ch"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Beta</span></div><span class="cg">Beta</span></div></div><div class="bj"><span class="p">archived</span></div><div class="bk"><div class="ch"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Gamma</span></div><span class="cg">Gamma</span></div></div><div class="bj"><span class="p">archived</span></div><div class="bk"><div class="ch"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Delta</span></div><span class="cg">Delta</span></div></div><div class="bj"><span class="p">archived</span></div><div class="bk"><div class="ch"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ce"><div class="cd"><span class="p">#42</span></div><div class="bh"><div class="n"><div class="cf"><span>Epsilon</span></div><span class="cg">Epsilon</span></div></div><div class="bj"><span class="p">archived</span></div><div class="bk"><div class="ch"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ci"><span class="p">Showing 1-20 of 142 results</span><div class="af"></div><div class="cj"><button class="ck">Prev</button><button class="cl">1</button><button class="ck">2</button><button class="ck">3</button><button class="ck">Next</button></div></div></div></div></div></div></div><footer class="cm"><div class="cn"><div class="co"><span class="cp">htmlang Dashboard</span><span class="g">Built with htmlang - a declarative HTML language</span><span class="w">Copyright 2025 htmlang contributors</span></div><div class="m"><span class="bi">Product</span><a href="/features" class="cq">Features</a><a href="/pricing" class="cq">Pricing</a><a href="/changelog" class="cq">Changelog</a><a href="/roadmap" class="cq">Roadmap</a></div><div class="m"><span class="bi">Resources</span><a href="/docs" class="cq">Documentation</a><a href="/api" class="cq">API Reference</a><a href="/guides" class="cq">Guides</a><a href="/examples" class="cq">Examples</a></div><div class="m"><span class="bi">Company</span><a href="/about" class="cq">About</a><a href="/blog" class="cq">Blog</a><a href="/careers" class="cq">Careers</a><a href="/contact" class="cq">Contact</a></div><div class="m"><span class="bi">Legal</span><a href="/privacy" class="cq">Privacy Policy</a><a href="/terms" class="cq">Terms of Service</a><a href="/cookies" class="cq">Cookie Policy</a></div></div></footer></div></div></body></html>

1+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Stress Test Large Document</title><style>@layer hl-reset,htmlang;@layer hl-reset{*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif}img{display:block}a{text-decoration:none;color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:2px}}:root{--primary:#3b82f6;--secondary:#10b981;--accent:#f59e0b;--danger:#ef4444;--dark:#1e293b;--light:#f8fafc;--gray:#64748b;--border:#e2e8f0;--radius:8;--gap:16;--gap-sm:8;--gap-lg:24;--h0:none solid currentColor;}@layer htmlang{.a{display:flex;flex-direction:row;gap:0;min-height:100vh;}.b{display:flex;flex-direction:column;width:260px;background:white;border-right:1px solid var(--border);padding:16px;gap:8px;}.c{display:flex;flex-direction:row;gap:12px;padding:8px;align-items:center;}.d{flex-direction:column;width:36px;height:36px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;}.e{display:flex;flex-direction:column;gap:2px;}.f{font-weight:bold;font-size:16px;color:var(--dark);}.g{font-size:12px;color:var(--gray);}.h{display:flex;flex-direction:column;width:100%;height:1px;background:var(--border);margin:8px 0;}.i{display:flex;flex-direction:column;margin-bottom:24px;}.j{font-weight:bold;font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}.k{color:var(--primary);font-weight:bold;padding:8px 12px;background:#eff6ff;border-radius:6px;}.l{color:var(--gray);padding:8px 12px;border-radius:6px;transition:all 0.15s;}.m{display:flex;flex-direction:column;gap:4px;}.n{display:flex;flex-direction:row;gap:8px;align-items:center;}.o{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:var(--secondary);}.p{font-size:13px;color:var(--gray);}.q{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:var(--accent);}.r{display:flex;flex-direction:column;width:6px;height:6px;border-radius:50%;background:#cbd5e1;}.s{display:flex;flex-direction:column;margin-top:auto;padding:12px;background:#f1f5f9;border-radius:8px;}.t{flex-direction:column;width:28px;height:28px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;}.u{display:flex;flex-direction:column;gap:0;}.v{font-size:13px;font-weight:bold;color:var(--dark);}.w{font-size:11px;color:var(--gray);}.x{display:flex;flex-direction:column;flex:1;min-width:0;background:var(--light);}.y{display:flex;flex-direction:column;padding:12px 24px;background:white;border-bottom:1px solid var(--border);}.z{display:flex;flex-direction:row;gap:16px;align-items:center;}.aa{display:flex;flex-direction:row;gap:8px;}.ab{color:var(--gray);font-size:14px;}.ac{color:var(--border);font-size:14px;}.ad{color:var(--dark);font-size:14px;}.ae{font-weight:bold;font-size:22px;color:var(--dark);}.af{display:flex;flex-direction:column;flex:1;min-width:0;}.ag{display:flex;flex-direction:row;gap:12px;align-items:center;}.ah{padding:8px 12px;border-radius:6px;border:1px solid var(--border);width:240px;transition:all 0.2s;}.ai{display:flex;flex-direction:column;position:relative;}.aj{padding:8px 16px;background:var(--primary);color:white;border-radius:6px;border:var(--h0);cursor:pointer;transition:all 0.2s;font-size:14px;}.ak{display:flex;flex-direction:column;position:absolute;top:-2px;right:-2px;}.al{display:flex;flex-direction:column;width:8px;height:8px;border-radius:50%;background:var(--danger);}.am{padding:8px 16px;background:var(--gray);color:white;border-radius:6px;border:var(--h0);cursor:pointer;transition:all 0.2s;font-size:14px;}.an{display:flex;flex-direction:column;padding:24px;overflow-y:auto;}.ao{display:flex;flex-direction:column;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px 16px;}.ap{color:#1e40af;font-size:14px;}.aq,.av{display:flex;flex-direction:row;gap:16px;margin-top:24px;}.ar{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid var(--border);}.as{font-size:14px;color:var(--gray);}.at{font-weight:bold;font-size:28px;color:var(--dark);margin-top:4px;}.au{font-size:12px;color:var(--secondary);margin-top:2px;}.aw{display:flex;flex-direction:column;background:white;border-radius:8px;padding:16px;border:1px solid var(--border);transition:all 0.2s;animation:fade-in 0.3s ease;}.ax{font-weight:bold;font-size:18px;color:var(--dark);}.ay{display:flex;flex-direction:column;margin-top:8px;}.az{flex-direction:column;height:200px;background:var(--light);border-radius:6px;margin-top:12px;display:flex;align-items:flex-end;padding:16px;gap:8px;}.a0{display:flex;flex-direction:column;width:100%;height:40%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a1{display:flex;flex-direction:column;width:100%;height:65%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a2{display:flex;flex-direction:column;width:100%;height:45%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a3{display:flex;flex-direction:column;width:100%;height:80%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a4{display:flex;flex-direction:column;width:100%;height:55%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a5{display:flex;flex-direction:column;width:100%;height:70%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a6{display:flex;flex-direction:column;width:100%;height:90%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a7{display:flex;flex-direction:column;width:100%;height:60%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a8{display:flex;flex-direction:column;width:100%;height:75%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.a9{display:flex;flex-direction:column;width:100%;height:85%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.ba{display:flex;flex-direction:column;width:100%;height:50%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.bb{display:flex;flex-direction:column;width:100%;height:95%;background:var(--primary);border-radius:4 4 0 0;transition:all 0.2s;min-width:20px;}.bc{display:flex;flex-direction:column;gap:12px;margin-top:12px;}.bd{display:flex;flex-direction:row;gap:12px;align-items:center;padding:8px;border-radius:6px;}.be{flex-direction:column;width:32px;height:32px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;}.bf{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}.bg{font-size:14px;font-weight:bold;color:var(--dark);}.bh{display:flex;flex-direction:column;flex:1;min-width:0;gap:16px;}.bi{display:flex;flex-direction:column;gap:0;margin-top:12px;}.bj{display:flex;flex-direction:row;gap:0;padding:8px 16px;background:var(--light);border-bottom:1px solid var(--border);}.bk{display:flex;flex-direction:column;width:200px;}.bl{font-weight:bold;font-size:12px;color:var(--gray);text-transform:uppercase;}.bm{display:flex;flex-direction:column;width:150px;}.bn{display:flex;flex-direction:column;width:120px;}.bo{display:flex;flex-direction:row;gap:0;padding:12px 16px;border-bottom:1px solid var(--border);}.bp{font-size:14px;}.bq{display:flex;flex-direction:row;gap:0;}.br{font-size:13px;color:var(--dark);flex:1;min-width:0;}.bs{display:flex;flex-direction:column;width:100%;height:8px;background:var(--border);border-radius:4px;overflow:hidden;}.bt{display:flex;flex-direction:column;width:67%;height:100%;background:var(--primary);border-radius:4px;}.bu{display:flex;flex-direction:column;gap:8px;margin-top:12px;}.bv{display:flex;flex-direction:row;gap:12px;padding:8px 12px;align-items:center;}.bw{flex-direction:column;width:24px;height:24px;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center;}.bx{font-size:10px;color:var(--primary);font-weight:bold;}.by{font-size:14px;color:var(--dark);flex:1;min-width:0;}.bz{display:flex;flex-direction:column;width:340px;gap:16px;}.b0{padding:8px 16px;background:var(--secondary);color:white;border-radius:6px;border:var(--h0);cursor:pointer;transition:all 0.2s;font-size:14px;}.b1{padding:8px 16px;background:var(--accent);color:white;border-radius:6px;border:var(--h0);cursor:pointer;transition:all 0.2s;font-size:14px;}.b2{padding:8px 16px;background:var(--gray);color:white;border-radius:6px;border:var(--h0);cursor:pointer;transition:all 0.2s;font-size:14px;}.b3{display:flex;flex-direction:row;gap:10px;align-items:center;padding:6px 8px;border-radius:6px;transition:all 0.15s;}.b4{display:flex;flex-direction:column;gap:0;flex:1;min-width:0;}.b5{display:flex;flex-direction:column;width:8px;height:8px;border-radius:50%;background:var(--secondary);}.b6{display:flex;flex-direction:row;gap:0;flex-wrap:wrap;margin-top:8px;}.b7{flex-direction:column;display:inline-block;padding:4px 10px;background:#f1f5f9;color:var(--gray);border-radius:4px;font-size:12px;margin:2px;}.b8{display:flex;flex-direction:row;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);align-items:center;}.b9{display:flex;flex-direction:row;gap:0;align-items:center;}.ca{display:flex;flex-direction:column;width:40px;height:22px;border-radius:11px;background:var(--primary);padding:2px;cursor:pointer;transition:all 0.2s;}.cb{display:flex;flex-direction:column;width:18px;height:18px;border-radius:50%;background:white;margin-left:18px;transition:all 0.2s;}.cc{display:flex;flex-direction:column;width:40px;height:22px;border-radius:11px;background:#cbd5e1;padding:2px;cursor:pointer;transition:all 0.2s;}.cd{display:flex;flex-direction:column;width:18px;height:18px;border-radius:50%;background:white;transition:all 0.2s;}.ce{display:flex;flex-direction:column;margin-top:24px;}.cf{display:flex;flex-direction:row;gap:16px;margin-bottom:12px;align-items:center;}.cg{padding:8px 12px;border-radius:6px;border:1px solid var(--border);width:240px;}.ch{padding:6px 12px;border-radius:4px;border:1px solid var(--border);background:white;color:var(--gray);font-size:13px;cursor:pointer;transition:all 0.15s;}.ci{display:flex;flex-direction:row;gap:0;padding:8px 16px;background:var(--light);border-bottom:2px solid var(--border);border-radius:6 6 0 0;}.cj{display:flex;flex-direction:column;width:60px;}.ck{display:flex;flex-direction:row;gap:0;padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:all 0.1s;}.cl{flex-direction:column;width:24px;height:24px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;}.cm{font-size:14px;color:var(--dark);}.cn{flex-direction:column;display:inline-block;padding:2px 8px;background:var(--secondary);color:white;border-radius:12px;font-size:12px;}.co{display:flex;flex-direction:row;gap:16px;padding:12px 16px;align-items:center;border-top:1px solid var(--border);}.cp{display:flex;flex-direction:row;gap:4px;}.cq{padding:6px 10px;border-radius:4px;border:1px solid var(--border);background:white;color:var(--gray);font-size:13px;cursor:pointer;}.cr{padding:6px 10px;border-radius:4px;border:1px solid var(--primary);background:var(--primary);color:white;font-size:13px;cursor:pointer;}.cs{display:flex;flex-direction:column;padding:24px 24px;background:white;border-top:1px solid var(--border);}.ct{display:flex;flex-direction:row;gap:24px;}.cu{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;}.cv{font-weight:bold;font-size:14px;color:var(--dark);}.cw{font-weight:bold;font-size:12px;color:var(--gray);text-transform:uppercase;margin-bottom:4px;}.cx{color:var(--gray);font-size:13px;}.l:hover{color:var(--primary);background:#f1f5f9;}.ab:hover,.cx:hover{color:var(--primary);}.aj:hover,.am:hover,.b0:hover,.b1:hover,.b2:hover{background:var(--dark);}.aw:hover{box-shadow:0 4 12 rgba(0,0,0,0.1);}.a0:hover,.a1:hover,.a2:hover,.a3:hover,.a4:hover,.a5:hover,.a6:hover,.a7:hover,.a8:hover,.a9:hover,.ba:hover,.bb:hover{background:#2563eb;}.bd:hover,.bo:hover,.ck:hover{background:var(--light);}.b3:hover{background:#f1f5f9;}.ch:hover{background:#f1f5f9;color:var(--dark);}.ah:focus{border:1px solid var(--primary);}@media(min-width:640px){.aq,.ct{flex-direction:column;}.bz{flex:1;min-width:0;}}@media(min-width:1024px){.aq,.ct{flex-direction:row;}}@media(prefers-color-scheme:dark){.b{background:#0f172a;border-right:1px solid var(--dark);}.f,.v,.ad,.ae,.at,.ax,.bg,.br,.by,.cm,.cv{color:white;}.h,.bs{background:#334155;}.k,.bw{background:#1e3a5f;}.s,.ch,.cq{background:var(--dark);}.x,.az,.bj,.ci{background:#0f172a;}.y{background:#0f172a;border-bottom:1px solid var(--dark);}.ah{border:1px solid #334155;background:var(--dark);color:white;}.ar,.aw{background:var(--dark);border:1px solid #334155;}.bo,.b8,.ck{border-bottom:1px solid #334155;}.b7{background:#334155;color:#94a3b8;}.cc{background:#475569;}.cs{background:#0f172a;border-top:1px solid var(--dark);}}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes slide-down{0%{transform:translateY(-10px);opacity:0}100%{transform:translateY(0);opacity:1}}</style></head><body><div class="a"><div class="b"><div class="c"><div class="d"><span>HL</span></div><div class="e"><span class="f">htmlang</span><span class="g">Dashboard v2.0</span></div></div><div class="h"></div><div class="i"><span class="j">Navigation</span><div class="e"><a href="/dashboard" class="k">Dashboard</a><a href="/analytics" class="l">Analytics</a><a href="/projects" class="l">Projects</a><a href="/team" class="l">Team</a><a href="/messages" class="l">Messages</a><a href="/calendar" class="l">Calendar</a><a href="/documents" class="l">Documents</a><a href="/settings" class="l">Settings</a></div></div><div class="i"><span class="j">Favorites</span><div class="e"><a href="/project/alpha" class="l">Project Alpha</a><a href="/project/beta" class="l">Project Beta</a><a href="/reports/q4" class="l">Q4 Reports</a></div></div><div class="i"><span class="j">Shortcuts</span><div class="m"><div class="n"><div class="o"></div><span class="p">Online (12)</span></div><div class="n"><div class="q"></div><span class="p">Away (3)</span></div><div class="n"><div class="r"></div><span class="p">Offline (5)</span></div></div></div><div class="s"><div class="n"><div class="t"><span>JD</span></div><div class="u"><span class="v">Jane Doe</span><span class="w">jane@example.com</span></div></div></div></div><div class="x"><header class="y"><div class="z"><div class="e"><div class="aa"><div class="aa"><a href="/" class="ab">Home</a><span class="ac">/</span></div><span class="ad">Dashboard</span></div><span class="ae">Dashboard Overview</span></div><div class="af"></div><div class="ag"><input class="ah" type="search" placeholder="Search..."><div class="ai"><button class="aj">Alerts</button><div class="ak"><div class="al"></div></div></div><button class="am">Settings</button></div></div></header><div class="an"><div class="ao"><span class="ap">Welcome back! You have 3 new notifications and 2 pending tasks.</span></div><div class="aq"><div class="ar"><span class="as">Total Revenue</span><span class="at">$48</span><span class="au">+12.5% from last month</span></div><div class="ar"><span class="as">Active Users</span><span class="at">2</span><span class="au">+8.2% from last week</span></div><div class="ar"><span class="as">Conversion Rate</span><span class="at">3.24%</span><span class="au">+0.4% from yesterday</span></div><div class="ar"><span class="as">Open Tickets</span><span class="at">142</span><span class="au">-5.1% from last month</span></div></div><div class="av"><div class="aw"><span class="ax">Revenue Overview</span><div class="ay"><div class="az"><div class="a0"></div><div class="a1"></div><div class="a2"></div><div class="a3"></div><div class="a4"></div><div class="a5"></div><div class="a6"></div><div class="a7"></div><div class="a8"></div><div class="a9"></div><div class="ba"></div><div class="bb"></div></div></div></div><div class="aw"><span class="ax">Activity Feed</span><div class="ay"><div class="bc"><div class="bd"><div class="be"><span>Alice</span></div><div class="bf"><span class="bg">Alice</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Bob</span></div><div class="bf"><span class="bg">Bob</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Carol</span></div><div class="bf"><span class="bg">Carol</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Dave</span></div><div class="bf"><span class="bg">Dave</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Eve</span></div><div class="bf"><span class="bg">Eve</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Frank</span></div><div class="bf"><span class="bg">Frank</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Grace</span></div><div class="bf"><span class="bg">Grace</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div><div class="bd"><div class="be"><span>Hank</span></div><div class="bf"><span class="bg">Hank</span><span class="g">Updated project files</span></div><span class="w">2h ago</span></div></div></div></div></div><div class="aq"><div class="bh"><div class="aw"><span class="ax">Project Status</span><div class="ay"><div class="bi"><div class="bj"><div class="bk"><span class="bl">Project</span></div><div class="bm"><span class="bl">Status</span></div><div class="bn"><span class="bl">Progress</span></div><div class="af"><span class="bl">Due Date</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Alpha</span></div><div class="bm"><span class="as">In Progress</span></div><div class="bn"><span class="bp">75%</span></div><div class="af"><span class="as">Dec 15 2025</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Beta</span></div><div class="bm"><span class="as">Review</span></div><div class="bn"><span class="bp">90%</span></div><div class="af"><span class="as">Nov 30 2025</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Gamma</span></div><div class="bm"><span class="as">Planning</span></div><div class="bn"><span class="bp">20%</span></div><div class="af"><span class="as">Jan 20 2026</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Delta</span></div><div class="bm"><span class="as">Completed</span></div><div class="bn"><span class="bp">100%</span></div><div class="af"><span class="as">Oct 10 2025</span></div></div><div class="bo"><div class="bk"><span class="bp">Project Epsilon</span></div><div class="bm"><span class="as">On Hold</span></div><div class="bn"><span class="bp">45%</span></div><div class="af"><span class="as">Feb 28 2026</span></div></div></div></div></div><div class="aw"><span class="ax">Progress Breakdown</span><div class="ay"><div class="bc"><div class="m"><div class="bq"><span class="br">Alpha</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div><div class="m"><div class="bq"><span class="br">Beta</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div><div class="m"><div class="bq"><span class="br">Gamma</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div><div class="m"><div class="bq"><span class="br">Delta</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div><div class="m"><div class="bq"><span class="br">Epsilon</span><span class="p">67%</span></div><div class="bs"><div class="bt"></div></div></div></div></div></div><div class="aw"><span class="ax">Recent Activity Log</span><div class="ay"><div class="bu"><div class="bv"><div class="bw"><span class="bx">v2.3.1 to production</span></div><span class="by">Deployed</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">feature/auth-redesign</span></div><span class="by">Merged</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">issue #482: Login timeout</span></div><span class="by">Closed</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">CI/CD pipeline config</span></div><span class="by">Updated</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">unit tests for payment module</span></div><span class="by">Added</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">PR #156: API refactor</span></div><span class="by">Reviewed</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">memory leak in worker pool</span></div><span class="by">Fixed</span><span class="w">just now</span></div><div class="bv"><div class="bw"><span class="bx">hotfix 2.3.2</span></div><span class="by">Released</span><span class="w">just now</span></div></div></div></div></div><div class="bz"><div class="aw"><span class="ax">Quick Actions</span><div class="ay"><div class="bu"><button class="aj">New Project</button><button class="b0">Create Report</button><button class="b1">Invite Member</button><button class="b2">View Backlog</button></div></div></div><div class="aw"><span class="ax">Team Members</span><div class="ay"><div class="bu"><div class="b3"><div class="t"><span>Alice</span></div><div class="b4"><span class="v">Alice</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Bob</span></div><div class="b4"><span class="v">Bob</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Carol</span></div><div class="b4"><span class="v">Carol</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Dave</span></div><div class="b4"><span class="v">Dave</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Eve</span></div><div class="b4"><span class="v">Eve</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Frank</span></div><div class="b4"><span class="v">Frank</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Grace</span></div><div class="b4"><span class="v">Grace</span><span class="w">Developer</span></div><div class="b5"></div></div><div class="b3"><div class="t"><span>Hank</span></div><div class="b4"><span class="v">Hank</span><span class="w">Developer</span></div><div class="b5"></div></div></div></div></div><div class="aw"><span class="ax">Tags</span><div class="ay"><div class="b6"><div class="b7"><span>frontend</span></div><div class="b7"><span>backend</span></div><div class="b7"><span>devops</span></div><div class="b7"><span>design</span></div><div class="b7"><span>mobile</span></div><div class="b7"><span>security</span></div><div class="b7"><span>performance</span></div><div class="b7"><span>testing</span></div><div class="b7"><span>docs</span></div><div class="b7"><span>infra</span></div><div class="b7"><span>ux</span></div><div class="b7"><span>api</span></div></div></div></div><div class="aw"><span class="ax">Notifications</span><div class="ay"><div class="bi"><div class="b8"><div class="al"></div><span class="br">New deployment completed</span><span class="w">now</span></div><div class="b8"><div class="al"></div><span class="br">PR review requested</span><span class="w">now</span></div><div class="b8"><div class="al"></div><span class="br">Build failed on staging</span><span class="w">now</span></div><div class="b8"><div class="al"></div><span class="br">Meeting in 30 minutes</span><span class="w">now</span></div><div class="b8"><div class="al"></div><span class="br">Subscription renewal due</span><span class="w">now</span></div></div></div></div><div class="aw"><span class="ax">Settings</span><div class="ay"><div class="bc"><div class="b9"><span class="by">Dark Mode</span><div class="ca"><div class="cb"></div></div></div><div class="b9"><span class="by">Notifications</span><div class="ca"><div class="cb"></div></div></div><div class="b9"><span class="by">Auto-save</span><div class="cc"><div class="cd"></div></div></div><div class="b9"><span class="by">Compact View</span><div class="cc"><div class="cd"></div></div></div></div></div></div></div></div><div class="ce"><div class="aw"><span class="ax">Data Table</span><div class="ay"><div class="bi"><div class="cf"><input class="cg" type="search" placeholder="Filter results..."><div class="af"></div><div class="aa"><button class="ch">all</button><button class="ch">design</button><button class="ch">development</button><button class="ch">marketing</button><button class="ch">analytics</button></div></div><div class="ci"><div class="cj"><span class="bl">ID</span></div><div class="bk"><span class="bl">Name</span></div><div class="bm"><span class="bl">Category</span></div><div class="bn"><span class="bl">Status</span></div><div class="af"><span class="bl">Updated</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Alpha</span></div><span class="cm">Alpha</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Beta</span></div><span class="cm">Beta</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Gamma</span></div><span class="cm">Gamma</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Delta</span></div><span class="cm">Delta</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Epsilon</span></div><span class="cm">Epsilon</span></div></div><div class="bm"><span class="p">active</span></div><div class="bn"><div class="cn"><span>active</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Alpha</span></div><span class="cm">Alpha</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Beta</span></div><span class="cm">Beta</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Gamma</span></div><span class="cm">Gamma</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Delta</span></div><span class="cm">Delta</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Epsilon</span></div><span class="cm">Epsilon</span></div></div><div class="bm"><span class="p">pending</span></div><div class="bn"><div class="cn"><span>pending</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Alpha</span></div><span class="cm">Alpha</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Beta</span></div><span class="cm">Beta</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Gamma</span></div><span class="cm">Gamma</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Delta</span></div><span class="cm">Delta</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Epsilon</span></div><span class="cm">Epsilon</span></div></div><div class="bm"><span class="p">completed</span></div><div class="bn"><div class="cn"><span>completed</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Alpha</span></div><span class="cm">Alpha</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Beta</span></div><span class="cm">Beta</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Gamma</span></div><span class="cm">Gamma</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Delta</span></div><span class="cm">Delta</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="ck"><div class="cj"><span class="p">#42</span></div><div class="bk"><div class="n"><div class="cl"><span>Epsilon</span></div><span class="cm">Epsilon</span></div></div><div class="bm"><span class="p">archived</span></div><div class="bn"><div class="cn"><span>archived</span></div></div><div class="af"><span class="p">2 hours ago</span></div></div><div class="co"><span class="p">Showing 1-20 of 142 results</span><div class="af"></div><div class="cp"><button class="cq">Prev</button><button class="cr">1</button><button class="cq">2</button><button class="cq">3</button><button class="cq">Next</button></div></div></div></div></div></div></div><footer class="cs"><div class="ct"><div class="cu"><span class="cv">htmlang Dashboard</span><span class="g">Built with htmlang - a declarative HTML language</span><span class="w">Copyright 2025 htmlang contributors</span></div><div class="m"><span class="cw">Product</span><a href="/features" class="cx">Features</a><a href="/pricing" class="cx">Pricing</a><a href="/changelog" class="cx">Changelog</a><a href="/roadmap" class="cx">Roadmap</a></div><div class="m"><span class="cw">Resources</span><a href="/docs" class="cx">Documentation</a><a href="/api" class="cx">API Reference</a><a href="/guides" class="cx">Guides</a><a href="/examples" class="cx">Examples</a></div><div class="m"><span class="cw">Company</span><a href="/about" class="cx">About</a><a href="/blog" class="cx">Blog</a><a href="/careers" class="cx">Careers</a><a href="/contact" class="cx">Contact</a></div><div class="m"><span class="cw">Legal</span><a href="/privacy" class="cx">Privacy Policy</a><a href="/terms" class="cx">Terms of Service</a><a href="/cookies" class="cx">Cookie Policy</a></div></div></footer></div></div></body></html>