actual-css 0.8.0 → 0.9.1

package/dist/actual.min.css

@@ -1 +1 @@
-*, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; } button, input, textarea, select { font: inherit; } [hidden]:not([hidden="until-found"]) { display: none !important; } :where(img, svg, video) { max-inline-size: 100%; block-size: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } } :root { --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --line-height: 1.5; --line-height-tight: 1.25; --line-height-relaxed: 1.75; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 0.8125rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --gap: 0.75rem; --density-space: var(--space-40); --space-10: 0.25rem; --space-20: 0.5rem; --space-30: 0.75rem; --space-40: 1rem; --space-50: 1.5rem; --space-60: 2rem; --border-width: 1px; --radius-full: 9999px; --shadow: 0 1px 3px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.04); --shadow-popout: 0 0.25rem 0.75rem rgb(0 0 0 / 0.15); --duration: 150ms; --duration-fast: 100ms; --duration-slow: 200ms; --duration-spin: 0.75s; --duration-shimmer: 1.2s; --ease-enter: cubic-bezier(0.2, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --focus-outline-color: currentColor; --focus-outline: calc(var(--border-width) * 2) solid var(--focus-outline-color); --focus-outline-offset: 2px; --focus-ring-width: 3px; --indicator-offset: 14.65%; --backdrop-color: rgb(0 0 0); --backdrop-opacity: 0.45; --backdrop-fill: rgb(0 0 0 / var(--backdrop-opacity)); --bar-height: 0.65rem; --control-size-sm: 2rem; --control-size-md: 2.375rem; --control-size-lg: 2.75rem; --control-size: var(--control-size-md); --control-pad-x: var(--font-size-md); --control-font-size: var(--font-size-md); --choice-control-size: 1.125em; --disabled-opacity: 0.65; } :root, [data-theme] { --state-selected: var(--primary); --state-selected-fg: var(--primary-fg); --state-disabled: var(--text-subtle); --indicator-ring: var(--surface); } :root { --soft-bg-mix: 88%; --soft-border-mix: 65%; --soft-hover-alpha: 12%; --soft-fg-mix: 100%; --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); --viewport-block: 100vh; --viewport-inline: 100vw; --z-sticky: 10; --z-menu: 20; --z-status: 60; } @media (forced-colors: active) { :root, [data-theme] { --state-disabled: GrayText; --disabled-opacity: 1; } } @supports (block-size: 100dvh) { :root { --viewport-block: 100dvh; } } @supports (inline-size: 100vi) { :root { --viewport-inline: 100vi; } } @supports (color: color-mix(in oklch, red, white)) { :root, [data-theme] { --shadow: 0 1px 3px color-mix(in oklch, var(--shadow-color) 5%, transparent), 0 4px 12px color-mix(in oklch, var(--shadow-color) 4%, transparent); --shadow-popout: 0 0.25rem 0.75rem color-mix(in oklch, var(--shadow-color) 15%, transparent); } :root, [data-theme] { --backdrop-fill: color-mix( in oklch, var(--backdrop-color) calc(var(--backdrop-opacity) * 100%), transparent ); } } :root { color-scheme: light dark; } [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } @supports not (color: light-dark(red, blue)) { :root, [data-theme="light"], [data-theme="dark"] { color-scheme: light; } } :root, [data-theme="light"] { --primary: hsl(268 32% 33%); --primary-fg: hsl(0 0% 98%); --secondary: hsl(16 38% 38%); --secondary-fg: hsl(0 0% 98%); --success: hsl(150 40% 31%); --success-fg: hsl(0 0% 98%); --warning: hsl(36 68% 34%); --warning-fg: hsl(0 0% 98%); --danger: hsl(5 58% 43%); --danger-fg: hsl(0 0% 98%); --neutral: hsl(258 7% 43%); --neutral-fg: hsl(0 0% 98%); --surface: hsl(0 0% 100%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(262 24% 96%); --surface-solid: hsl(261 16% 13%); --text: hsl(261 20% 13%); --text-muted: hsl(259 9% 42%); --text-subtle: hsl(258 7% 57%); --border: hsl(260 15% 88%); --focus: var(--neutral); --focus-ring: hsl(258 7% 43% / 0.3); --hover-overlay: hsl(260 20% 10% / 0.04); --radius: 0.5rem; --radius-sm: 0.25rem; --radius-lg: 0.75rem; --shadow-color: hsl(260 25% 10%); --hgroup-gap: 0.25em; } :root, [data-theme] { --heading: var(--text); --selection-bg: var(--primary); --selection-fg: var(--primary-fg); --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); } :where([data-theme]:not([data-theme="light"]):not([data-theme="dark"])) { --primary-soft-fg: initial; --secondary-soft-fg: initial; --success-soft-fg: initial; --warning-soft-fg: initial; --danger-soft-fg: initial; --neutral-soft-fg: initial; } :root, [data-theme="light"], [data-theme="dark"] { --secondary-soft-fg: color-mix(in oklab, var(--text) 10%, var(--secondary) 90%); --success-soft-fg: color-mix(in oklab, var(--text) 15%, var(--success) 85%); --warning-soft-fg: color-mix(in oklab, var(--text) 25%, var(--warning) 75%); --danger-soft-fg: color-mix(in oklab, var(--text) 15%, var(--danger) 85%); --neutral-soft-fg: color-mix(in oklab, var(--text) 20%, var(--neutral) 80%); } :root, [data-theme] { accent-color: var(--primary); } [data-tone="dark"] { --tone-fg: white; } [data-tone="light"] { --tone-fg: var(--text); } @supports (color: color-mix(in oklch, red, white)) { :root, [data-theme] { --focus-ring: color-mix(in oklch, var(--focus) 30%, transparent); } } @supports (color: light-dark(red, blue)) { :root, [data-theme="light"] { --primary: light-dark(hsl(268 32% 33%), hsl(268 42% 76%)); --primary-fg: light-dark(hsl(0 0% 98%), hsl(268 30% 12%)); --secondary: light-dark(hsl(16 38% 38%), hsl(18 45% 72%)); --secondary-fg: light-dark(hsl(0 0% 98%), hsl(18 32% 11%)); --success: light-dark(hsl(150 40% 31%), hsl(150 38% 62%)); --success-fg: light-dark(hsl(0 0% 98%), hsl(150 35% 8%)); --warning: light-dark(hsl(36 68% 34%), hsl(40 62% 64%)); --warning-fg: light-dark(hsl(0 0% 98%), hsl(38 35% 10%)); --danger: light-dark(hsl(5 58% 43%), hsl(4 60% 70%)); --danger-fg: light-dark(hsl(0 0% 98%), hsl(4 35% 10%)); --neutral: light-dark(hsl(258 7% 43%), hsl(258 10% 72%)); --neutral-fg: light-dark(hsl(0 0% 98%), hsl(260 18% 10%)); --surface: light-dark(hsl(0 0% 100%), hsl(263 17% 9%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(263 15% 12%)); --surface-subtle: light-dark(hsl(262 24% 96%), hsl(263 13% 16%)); --surface-solid: light-dark(hsl(261 16% 13%), hsl(0 0% 96%)); --text: light-dark(hsl(261 20% 13%), hsl(260 12% 95%)); --text-muted: light-dark(hsl(259 9% 42%), hsl(259 9% 67%)); --text-subtle: light-dark(hsl(258 7% 57%), hsl(258 7% 54%)); --border: light-dark(hsl(260 15% 88%), hsl(262 12% 24%)); --focus-ring: light-dark(hsl(258 7% 43% / 0.3), hsl(258 10% 72% / 0.28)); --hover-overlay: light-dark(hsl(260 20% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(260 25% 10%), hsl(262 40% 2%)); } } @supports (color: color-mix(in oklch, red, white)) and (color: light-dark(red, blue)) { :root, [data-theme] { --focus-ring: light-dark( color-mix(in oklch, var(--focus) 30%, transparent), color-mix(in oklch, var(--focus) 28%, transparent) ); } } @media (prefers-contrast: more) { :root, [data-theme][data-theme] { --border-width: 2px; --focus-outline-offset: 3px; --focus-ring-width: 4px; --text-muted: var(--text); --text-subtle: var(--text); } } body { background: var(--surface); color: var(--text); font-family: var(--font-sans); line-height: var(--line-height); } a { color: var(--link, inherit); text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 0.12em; } :where(h1, h2, h3, h4, h5, h6) { color: var(--heading, inherit); line-height: var(--line-height-tight); text-wrap: balance; } hgroup { display: grid; gap: var(--hgroup-gap); } hgroup > * { margin-block: 0; } hr { border: 0; border-block-start: var(--border-width) solid var(--border); margin-block: var(--hr-space, var(--space-60)); margin-inline: 0; } code, kbd, samp, pre { font-family: var(--font-mono); } pre { overflow-x: auto; } small { font-size: 0.875em; } ::selection { background: var(--selection-bg, var(--primary)); color: var(--selection-fg, var(--primary-fg)); } .primary { --intent: var(--primary); --intent-fg: var(--primary-fg); --intent-soft-fg: var(--primary-soft-fg); } .secondary { --intent: var(--secondary); --intent-fg: var(--secondary-fg); --intent-soft-fg: var(--secondary-soft-fg); } .success { --intent: var(--success); --intent-fg: var(--success-fg); --intent-soft-fg: var(--success-soft-fg); } .warning { --intent: var(--warning); --intent-fg: var(--warning-fg); --intent-soft-fg: var(--warning-soft-fg); } .danger { --intent: var(--danger); --intent-fg: var(--danger-fg); --intent-soft-fg: var(--danger-soft-fg); } .neutral { --intent: var(--neutral); --intent-fg: var(--neutral-fg); --intent-soft-fg: var(--neutral-soft-fg); } .intent-color { color: var(--intent); } .solid { --ui-bg: var(--intent, var(--neutral)); --ui-fg: var(--intent-fg, var(--neutral-fg)); --ui-border: transparent; } .soft { --ui-bg: var(--surface-subtle); --ui-border: var(--border); --ui-fg: var(--intent, var(--text)); } .outline { --ui-bg: transparent; --ui-fg: var(--intent, currentColor); --ui-border: var(--intent, currentColor); } .surface { --ui-bg: var(--surface); --ui-fg: var(--intent, var(--text)); --ui-border: var(--border); } .inverted { --ui-bg: var(--surface-solid); --ui-fg: var(--surface); --ui-border: transparent; --ui-hover-bg: var(--surface-solid); --heading: var(--surface); --busy-overlay-bg: var(--surface-solid); background: var(--ui-bg); color: var(--ui-fg); border-color: var(--ui-border); } .compact { --gap: var(--space-20); --density-space: var(--space-20); --control-size: var(--control-size-sm); } .spacious { --gap: var(--space-50); --density-space: var(--space-50); --control-size: var(--control-size-lg); } :where( .btn, .input, .textarea, .select, .color, .file, .field, .choice, .input-icon, .otp, .join, .pagination, .tabs, .tab, .flyout ).sm { --control-size: var(--control-size-sm); --control-font-size: var(--font-size-sm); --control-pad-x: var(--font-size-sm); } :where( .btn, .input, .textarea, .select, .color, .file, .field, .choice, .input-icon, .otp, .join, .pagination, .tabs, .tab, .flyout ).lg { --control-size: var(--control-size-lg); --control-font-size: var(--font-size-lg); --control-pad-x: var(--font-size-lg); } @supports (color: color-mix(in oklch, red, white)) { .soft { --ui-bg: color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral))); --ui-border: color-mix( in oklab, var(--surface) var(--soft-border-mix), var(--intent, var(--neutral)) ); --ui-fg: var( --intent-soft-fg, color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix)) ); } .inverted { --ui-hover-bg: color-mix(in oklch, var(--surface-solid) 88%, black); } } :focus { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } @supports selector(:focus-visible) { :focus:not(:focus-visible) { outline: none; } } @media print { :root, body { color-scheme: light; background: #fff; color: #000; } h1, h2, h3, h4, h5, h6 { break-after: avoid; } }
+*, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; } button, input, textarea, select { font: inherit; } [hidden]:not([hidden="until-found"]) { display: none !important; } :where(img, svg, video) { max-inline-size: 100%; block-size: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } } :root { --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --line-height: 1.5; --line-height-tight: 1.25; --line-height-relaxed: 1.75; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 0.8125rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --gap: 0.75rem; --density-space: var(--space-40); --space-10: 0.25rem; --space-20: 0.5rem; --space-30: 0.75rem; --space-40: 1rem; --space-50: 1.5rem; --space-60: 2rem; --border-width: 1px; --radius-full: 9999px; --shadow: 0 1px 3px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.04); --shadow-popout: 0 0.25rem 0.75rem rgb(0 0 0 / 0.15); --duration: 150ms; --duration-fast: 100ms; --duration-slow: 200ms; --duration-spin: 0.75s; --duration-shimmer: 1.2s; --ease-enter: cubic-bezier(0.2, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --focus-outline-color: currentColor; --focus-outline: calc(var(--border-width) * 2) solid var(--focus-outline-color); --focus-outline-offset: 2px; --focus-ring-width: 3px; --indicator-offset: 14.65%; --backdrop-color: rgb(0 0 0); --backdrop-opacity: 0.45; --backdrop-fill: rgb(0 0 0 / var(--backdrop-opacity)); --bar-height: 0.65rem; --control-size-sm: 2rem; --control-size-md: 2.375rem; --control-size-lg: 2.75rem; --control-size: var(--control-size-md); --control-pad-x: var(--font-size-md); --control-font-size: var(--font-size-md); --choice-control-size: 1.125em; --disabled-opacity: 0.65; } :root, [data-theme] { --state-selected: var(--primary); --state-selected-fg: var(--primary-fg); --state-disabled: var(--text-subtle); --indicator-ring: var(--surface); } :root { --soft-bg-mix: 88%; --soft-border-mix: 65%; --soft-hover-alpha: 12%; --soft-fg-mix: 100%; --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); --viewport-block: 100vh; --viewport-inline: 100vw; --z-sticky: 10; --z-menu: 20; --z-status: 60; } @media (forced-colors: active) { :root, [data-theme] { --state-disabled: GrayText; --disabled-opacity: 1; } } @supports (block-size: 100dvh) { :root { --viewport-block: 100dvh; } } @supports (inline-size: 100vi) { :root { --viewport-inline: 100vi; } } @supports (color: color-mix(in oklch, red, white)) { :root, [data-theme] { --shadow: 0 1px 3px color-mix(in oklch, var(--shadow-color) 5%, transparent), 0 4px 12px color-mix(in oklch, var(--shadow-color) 4%, transparent); --shadow-popout: 0 0.25rem 0.75rem color-mix(in oklch, var(--shadow-color) 15%, transparent); } :root, [data-theme] { --backdrop-fill: color-mix( in oklch, var(--backdrop-color) calc(var(--backdrop-opacity) * 100%), transparent ); } } :root { color-scheme: light dark; } [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } @supports not (color: light-dark(red, blue)) { :root, [data-theme="light"], [data-theme="dark"] { color-scheme: light; } } :root, [data-theme="light"] { --primary: hsl(268 32% 33%); --primary-fg: hsl(0 0% 98%); --secondary: hsl(16 38% 38%); --secondary-fg: hsl(0 0% 98%); --success: hsl(150 40% 31%); --success-fg: hsl(0 0% 98%); --warning: hsl(36 68% 34%); --warning-fg: hsl(0 0% 98%); --danger: hsl(5 58% 43%); --danger-fg: hsl(0 0% 98%); --neutral: hsl(258 7% 43%); --neutral-fg: hsl(0 0% 98%); --surface: hsl(0 0% 100%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(262 24% 96%); --surface-solid: hsl(261 16% 13%); --text: hsl(261 20% 13%); --text-muted: hsl(259 9% 42%); --text-subtle: hsl(258 7% 57%); --border: hsl(260 15% 88%); --focus: var(--neutral); --focus-ring: hsl(258 7% 43% / 0.3); --hover-overlay: hsl(260 20% 10% / 0.04); --radius: 0.5rem; --radius-sm: 0.25rem; --radius-lg: 0.75rem; --shadow-color: hsl(260 25% 10%); --hgroup-gap: 0.25em; } :root, [data-theme] { --heading: var(--text); --selection-bg: var(--primary); --selection-fg: var(--primary-fg); --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); } :where([data-theme]:not([data-theme="light"]):not([data-theme="dark"])) { --primary-soft-fg: initial; --secondary-soft-fg: initial; --success-soft-fg: initial; --warning-soft-fg: initial; --danger-soft-fg: initial; --neutral-soft-fg: initial; } :root, [data-theme="light"], [data-theme="dark"] { --secondary-soft-fg: color-mix(in oklab, var(--text) 10%, var(--secondary) 90%); --success-soft-fg: color-mix(in oklab, var(--text) 15%, var(--success) 85%); --warning-soft-fg: color-mix(in oklab, var(--text) 25%, var(--warning) 75%); --danger-soft-fg: color-mix(in oklab, var(--text) 15%, var(--danger) 85%); --neutral-soft-fg: color-mix(in oklab, var(--text) 20%, var(--neutral) 80%); } :root, [data-theme] { accent-color: var(--primary); } [data-tone="dark"] { --tone-fg: white; } [data-tone="light"] { --tone-fg: var(--text); } @supports (color: color-mix(in oklch, red, white)) { :root, [data-theme] { --focus-ring: color-mix(in oklch, var(--focus) 30%, transparent); } } @supports (color: light-dark(red, blue)) { :root, [data-theme="light"] { --primary: light-dark(hsl(268 32% 33%), hsl(268 42% 76%)); --primary-fg: light-dark(hsl(0 0% 98%), hsl(268 30% 12%)); --secondary: light-dark(hsl(16 38% 38%), hsl(18 45% 72%)); --secondary-fg: light-dark(hsl(0 0% 98%), hsl(18 32% 11%)); --success: light-dark(hsl(150 40% 31%), hsl(150 38% 62%)); --success-fg: light-dark(hsl(0 0% 98%), hsl(150 35% 8%)); --warning: light-dark(hsl(36 68% 34%), hsl(40 62% 64%)); --warning-fg: light-dark(hsl(0 0% 98%), hsl(38 35% 10%)); --danger: light-dark(hsl(5 58% 43%), hsl(4 60% 70%)); --danger-fg: light-dark(hsl(0 0% 98%), hsl(4 35% 10%)); --neutral: light-dark(hsl(258 7% 43%), hsl(258 10% 72%)); --neutral-fg: light-dark(hsl(0 0% 98%), hsl(260 18% 10%)); --surface: light-dark(hsl(0 0% 100%), hsl(263 17% 9%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(263 15% 12%)); --surface-subtle: light-dark(hsl(262 24% 96%), hsl(263 13% 16%)); --surface-solid: light-dark(hsl(261 16% 13%), hsl(0 0% 96%)); --text: light-dark(hsl(261 20% 13%), hsl(260 12% 95%)); --text-muted: light-dark(hsl(259 9% 42%), hsl(259 9% 67%)); --text-subtle: light-dark(hsl(258 7% 57%), hsl(258 7% 54%)); --border: light-dark(hsl(260 15% 88%), hsl(262 12% 24%)); --focus-ring: light-dark(hsl(258 7% 43% / 0.3), hsl(258 10% 72% / 0.28)); --hover-overlay: light-dark(hsl(260 20% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(260 25% 10%), hsl(262 40% 2%)); } } @supports (color: color-mix(in oklch, red, white)) and (color: light-dark(red, blue)) { :root, [data-theme] { --focus-ring: light-dark( color-mix(in oklch, var(--focus) 30%, transparent), color-mix(in oklch, var(--focus) 28%, transparent) ); } } @media (prefers-contrast: more) { :root, [data-theme][data-theme] { --border-width: 2px; --focus-outline-offset: 3px; --focus-ring-width: 4px; --text-muted: var(--text); --text-subtle: var(--text); } } body { background: var(--surface); color: var(--text); font-family: var(--font-sans); line-height: var(--line-height); } a { color: var(--link, inherit); text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 0.12em; } :where(h1, h2, h3, h4, h5, h6) { color: var(--heading, inherit); line-height: var(--line-height-tight); text-wrap: balance; } hgroup { display: grid; gap: var(--hgroup-gap); } hgroup > * { margin-block: 0; } hr { border: 0; border-block-start: var(--border-width) solid var(--border); margin-block: var(--hr-space, var(--space-60)); margin-inline: 0; } code, kbd, samp, pre { font-family: var(--font-mono); } pre { overflow-x: auto; } small { font-size: 0.875em; } ::selection { background: var(--selection-bg, var(--primary)); color: var(--selection-fg, var(--primary-fg)); } .primary { --intent: var(--primary); --intent-fg: var(--primary-fg); --intent-soft-fg: var(--primary-soft-fg); } .secondary { --intent: var(--secondary); --intent-fg: var(--secondary-fg); --intent-soft-fg: var(--secondary-soft-fg); } .success { --intent: var(--success); --intent-fg: var(--success-fg); --intent-soft-fg: var(--success-soft-fg); } .warning { --intent: var(--warning); --intent-fg: var(--warning-fg); --intent-soft-fg: var(--warning-soft-fg); } .danger { --intent: var(--danger); --intent-fg: var(--danger-fg); --intent-soft-fg: var(--danger-soft-fg); } .neutral { --intent: var(--neutral); --intent-fg: var(--neutral-fg); --intent-soft-fg: var(--neutral-soft-fg); } .intent-color { color: var(--intent); } .solid { --ui-bg: var(--intent, var(--neutral)); --ui-fg: var(--intent-fg, var(--neutral-fg)); --ui-border: transparent; } .soft { --ui-bg: var(--surface-subtle); --ui-border: var(--border); --ui-fg: var(--intent, var(--text)); } .outline { --ui-bg: transparent; --ui-fg: var(--intent, currentColor); --ui-border: var(--intent, currentColor); } .surface { --ui-bg: var(--surface); --ui-fg: var(--intent, var(--text)); --ui-border: var(--border); } .inverted { --ui-bg: var(--surface-solid); --ui-fg: var(--surface); --ui-border: transparent; --ui-hover-bg: var(--surface-solid); --heading: var(--surface); --busy-overlay-bg: var(--surface-solid); background: var(--ui-bg); color: var(--ui-fg); border-color: var(--ui-border); } .compact { --gap: var(--space-20); --density-space: var(--space-20); --control-size: var(--control-size-sm); } .spacious { --gap: var(--space-50); --density-space: var(--space-50); --control-size: var(--control-size-lg); } :where( .btn, .input, .textarea, .select, .color, .file, .field, .choice, .choice-card, .input-icon, .floating-field, .otp, .join, .pagination, .tabs, .tab, .flyout ).sm { --control-size: var(--control-size-sm); --control-font-size: var(--font-size-sm); --control-pad-x: var(--font-size-sm); } :where( .btn, .input, .textarea, .select, .color, .file, .field, .choice, .choice-card, .input-icon, .floating-field, .otp, .join, .pagination, .tabs, .tab, .flyout ).lg { --control-size: var(--control-size-lg); --control-font-size: var(--font-size-lg); --control-pad-x: var(--font-size-lg); } @supports (color: color-mix(in oklch, red, white)) { .soft { --ui-bg: color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral))); --ui-border: color-mix( in oklab, var(--surface) var(--soft-border-mix), var(--intent, var(--neutral)) ); --ui-fg: var( --intent-soft-fg, color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix)) ); } .inverted { --ui-hover-bg: color-mix(in oklch, var(--surface-solid) 88%, black); } } :focus { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } @supports selector(:focus-visible) { :focus:not(:focus-visible) { outline: none; } } @media print { :root, [data-theme][data-theme], body { color-scheme: light; background: #fff; color: #000; } h1, h2, h3, h4, h5, h6 { break-after: avoid; } }

package/docs/pages/components/alert.md

@@ -106,8 +106,13 @@ trailing link or button is content, not anatomy, so it lives in the text column:
 wrap the row in a `.cluster` and push the two ends apart. Same recipe as any
 split / spread row — there is no `.alert-action` class.
 
+The alert aligns its columns to the block start, so a multi-line message keeps
+its icon on the first line. A trailing control makes that row taller than a line
+of text: add `.items-center` to put the icon, the text and the button on one
+center.
+
 ```html demo
-<div class="alert surface">
+<div class="alert surface items-center">
   <i class="ti ti-info-circle alert-icon" aria-hidden="true"></i>
   <div class="cluster justify-content-space-between">
     <strong>New message!</strong>

package/docs/pages/components/dialog.md

@@ -170,6 +170,11 @@ hidden` (and reserves the scrollbar gutter with `scrollbar-gutter: stable` when
 one was present). The height cap follows the small viewport, so the panel keeps
 a stable size while mobile browser chrome expands or collapses.
 
+The scrolling body is a scroll container, and browsers make one
+keyboard-focusable so it can be scrolled without a pointer — it takes a focus
+ring like any other focusable element, and it can claim initial focus when
+nothing focusable precedes it. Mark the control you want focused `autofocus`.
+
 ```html demo
 <button class="btn"
         type="button"

package/docs/pages/components/drawer.md

@@ -21,8 +21,21 @@
 - Use `closedby="none"` when the drawer must not be dismissed by the user at all
   (e.g. a form with unsaved changes): no backdrop close and no Escape close.
 - Use `[data-side="end"]` for a right-side drawer.
+- Put the body between a `header` and a `footer`: the panel is a three-row grid
+  whose middle region scrolls, so the footer stays reachable however long the
+  content gets.
 - Permanent desktop sidebars belong in layout, not here.
 
+The panel is `--viewport-block` tall, so it follows the space a mobile browser
+actually leaves on screen as its URL bar collapses. A shell that fakes a
+viewport (an embedded preview) overrides that token rather than the drawer.
+
+The body region is a scroll container, and browsers make one keyboard-focusable
+so it can be scrolled without a pointer — it takes a focus ring like any other
+focusable element. `showModal()` focuses the first focusable thing in the
+drawer, so put the close button in the `header` (as both examples do) or mark
+your intended target `autofocus`; otherwise the body claims initial focus.
+
 ```html demo
 <button class="btn ghost"
         type="button"

package/docs/pages/components/skeleton.md

@@ -37,4 +37,6 @@
 - `--skeleton-highlight` — sweeping highlight color.
 - `--skeleton-radius` — corner radius; `data-shape` presets override it.
 - `--skeleton-size` — block size; `data-shape` presets override it.
-- `--skeleton-width` — inline size; `data-shape` presets override it.
+- `--skeleton-width` — maximum inline size. A placeholder fills its container
+  and stops here, so it never gives an ancestor a width floor. `data-shape`
+  presets set it; `avatar` ignores it and stays square.

package/docs/pages/enhancements/flyout.md

@@ -506,8 +506,22 @@ delay; a number sets the delay in milliseconds.
 
 ## CSS hooks
 
-- `--flyout-inline-size` — panel width.
-- `--flyout-max-inline-size` — panel width cap.
+- `--flyout-inline-size` — preferred width. Takes intrinsic values such as
+  `max-content`, its default.
+- `--flyout-max-inline-size` — width cap, a `<length-percentage>` the runtime
+  also clamps to the viewport. Defaults to `20rem`, independently of the
+  preferred width — the same way `width: 42rem; max-width: 20rem` renders at
+  20rem. A panel wider than the cap therefore sets both:
+
+  ```css
+  .mega-panel {
+    --flyout-inline-size: 42rem;
+    --flyout-max-inline-size: 42rem;
+  }
+  ```
+
+  The repetition is the point: the two hooks are different contracts, and only
+  the cap may enter the runtime's `min()`.
 - `--menu-item-size` — minimum row height of `.menu-item`.
 - `--menu-item-icon-size` — shared leading-column width for icons and checked-state indicators.
 

package/docs/pages/forms/choice-cards.md

@@ -105,7 +105,8 @@ Plain `.check` / `.radio` controls expose two hooks:
   type. The switch track derives from it too, so a checkbox and a switch on the
   same line stay proportionate. A `.choice.sm` or `.choice.lg` scales it through
   the surrounding typography.
-- `--choice-control-offset` — top offset that aligns the control with the first
-  line of a multi-line label. Left unset, each control derives its own offset
-  from its height and the line box, which keeps a checkbox and a taller switch
-  level with each other. Setting one constant applies it to both.
+- `--choice-control-nudge` — block correction added to the derived first-line
+  offset, for every control in the row. Left unset, each control centres itself
+  on the first line's cap height, measured from its own block size — so a
+  checkbox and a taller switch stay level with each other, and with the text,
+  whatever the font, line-height or control size.

package/docs/pages/foundations/tokens.md

@@ -505,7 +505,7 @@ Because the native select chevron is an SVG background image and cannot inherit
 
 Under `prefers-contrast: more`, the user's contrast preference wins over a theme's palette by contract: the core collapses `--text-muted`/`--text-subtle` to `--text` and thickens borders and focus so no theme can defeat a legibility requirement. This is a deliberate decision, not a specificity quirk — the repeated `[data-theme][data-theme]` attribute only outranks a preset theme stylesheet loaded after the core.
 
-Under `forced-colors: active`, the browser automatically remaps `color`, `background`, and `border` properties to system colors. The default theme provides the few necessary system-color overrides for cases the browser cannot handle — `--focus-outline-color`, `--state-selected`/`--state-selected-fg`, `--state-disabled`, `--backdrop-fill`, and decorative shadow removal. Because that rule targets `:root` (which always matches regardless of `data-theme`) and the `[data-theme]` attributes, it reaches every theme. Components should inherit that baseline; keep local forced-color rules only for custom control geometry, native bar parts, disabled states, or selected states that would otherwise be communicated only by background color.
+Under `forced-colors: active`, the browser automatically remaps `color`, `background`, and `border` properties to system colors. The core only adjusts what the remapping cannot express on its own — `--state-disabled` becomes `GrayText` and `--disabled-opacity` becomes `1` — declared on `:root` and `[data-theme]` so every theme boundary follows. Keep local forced-color rules only for custom control geometry, native bar parts, or selected/checked states that would otherwise be communicated only by background color.
 
 ## Component mapping
 

package/docs/pages/guides/progressive-enhancement.md

@@ -286,14 +286,14 @@ The runtime dispatches a small set of public `actual:*` events. All are
 listenable on the document; cancelable events veto the associated action when
 `preventDefault()` is called.
 
-| Event                  | Dispatch                       | `detail`                             |
-| ---------------------- | ------------------------------ | ------------------------------------ |
-| `actual:surface-open`  | before a surface opens         | `{ surface, options }`               |
-| `actual:context-menu`  | before a context menu opens    | `{ menu, context, origin, trigger }` |
-| `actual:status`        | status module, or any code     | `{ message, intent, duration }`      |
-| `actual:invalid`       | after a submit was blocked     | `{ form, firstInvalid, message }`    |
-| `actual:dialog-cancel` | before a native cancel close   | `{ dialog, sourceEvent }`            |
-| `actual:dismiss`       | after `--dismiss` hid a target | `{ trigger }`                        |
+| Event                  | Dispatch                      | `detail`                             |
+| ---------------------- | ----------------------------- | ------------------------------------ |
+| `actual:surface-open`  | before a surface opens        | `{ surface, options }`               |
+| `actual:context-menu`  | before a context menu opens   | `{ menu, context, origin, trigger }` |
+| `actual:status`        | status module, or any code    | `{ message, intent, duration }`      |
+| `actual:invalid`       | after a submit was blocked    | `{ form, firstInvalid, message }`    |
+| `actual:dialog-cancel` | before a native cancel close  | `{ dialog, sourceEvent }`            |
+| `actual:dismiss`       | after a `--dismiss` dismissal | `{ trigger }`                        |
 
 `actual:surface-open`, `actual:context-menu` and `actual:dialog-cancel` are
 cancelable. `actual:status` both shows and clears the status bar — omit
@@ -343,6 +343,10 @@ applications that unload the module owning the command.
 The runtime includes a generic `--dismiss` command for hiding any resolved
 target. It prevents the trigger's default action, sets `hidden`, and emits a
 bubbling `actual:dismiss` event with the trigger in `event.detail.trigger`.
+On an open surface (flyout, context menu), the surface consumes the event to
+close through its own lifecycle instead of staying hidden — by the time the
+event reaches document listeners, `hidden` has already been lifted again and
+the surface reads as closed, not merely attribute-hidden.
 
 ```html demo
 <section id="notice" class="alert">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "actual-css",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "Plain CSS component framework with semantic classes, universal variants, small tokens, theme hooks, and progressive enhancements.",
   "type": "module",
   "packageManager": "bun@1.4.2",
@@ -124,6 +124,7 @@
     "report:theme-contrast": "bun scripts/report-theme-contrast.js",
     "report:neutral-ramp": "bun scripts/report-neutral-ramp.js",
     "report:dead-css": "bun scripts/report-dead-css.js",
+    "report:overflow": "bun scripts/report-overflow.js",
     "check:architecture": "bun scripts/check-css-architecture.js",
     "build:dist": "bun scripts/build-dist.js",
     "build:js": "bun scripts/build-js.js",
@@ -145,7 +146,7 @@
     "check:sync": "bun scripts/check-sync.js",
     "test": "bun test",
     "test:changed": "bun test --changed=master",
-    "build:all": "bun run lint && bun run build:dist && bun run build:js && bun run format:docs && bun run build:docs && bun run check:docs && bun run check:doc-classes && bun run check:compat && bun run check:css-api && bun run check:color-space && bun run check:architecture && bun run check:enhance && bun run generate:reserved && bun run check:reserved && bun run generate:catalog && bun run check:catalog && bun run check:sync && bun run check:links && bun run check:templates && bun run check:markup && bun run test && bun run build:size",
+    "build:all": "bun run lint && bun run build:dist && bun run build:js && bun run build:size && bun run format:docs && bun run build:docs && bun run check:docs && bun run check:doc-classes && bun run check:compat && bun run check:css-api && bun run check:color-space && bun run check:architecture && bun run check:enhance && bun run generate:reserved && bun run check:reserved && bun run generate:catalog && bun run check:catalog && bun run check:sync && bun run check:links && bun run check:templates && bun run check:markup && bun run test",
     "prepublishOnly": "bun run build:all"
   },
   "devDependencies": {

package/src/css/components/accordion.css

@@ -1,6 +1,8 @@
 /*
  * Accordion disclosures built on native details and summary.
  *
+ * Docs: docs/pages/components/accordion.md
+ *
  * Keeps the clickable summary affordance aligned and usable without JavaScript
  * or demo styles. Decorative palettes and custom markers belong outside the
  * base component.

package/src/css/components/actions.css

@@ -1,6 +1,8 @@
 /*
  * Actions — a horizontal action-button cluster.
  *
+ * Docs: docs/pages/patterns/actions.md
+ *
  * Composes with .btn (or any inline element) and feeds layout via the shared
  * --gap token.
  *

package/src/css/components/alert.css

@@ -1,6 +1,8 @@
 /*
  * Alerts for inline feedback and status messages.
  *
+ * Docs: docs/pages/components/alert.md
+ *
  * Keeps alert defaults local while consuming the shared --ui-* variant
  * plumbing for emphasis.
  *

package/src/css/components/app-nav.css

@@ -3,6 +3,8 @@
  * and item states; app-layout owns whether that surface is a bottom bar or
  * labelled side navigation.
  *
+ * Docs: docs/pages/components/app-navigation.md
+ *
  * Public hooks:
  * --app-nav-size
  * --app-nav-gap

package/src/css/components/avatar.css

@@ -1,6 +1,8 @@
 /*
  * Avatars for initials, images, links, and buttons.
  *
+ * Docs: docs/pages/components/avatar.md
+ *
  * The visual box stays the same across semantic elements. Grouping and status
  * dots (an empty .badge child) compose around the avatar without changing its
  * meaning.

package/src/css/components/badge.css

@@ -1,6 +1,8 @@
 /*
  * Badges for compact labels, counts, and state hints.
  *
+ * Docs: docs/pages/components/badge.md
+ *
  * Soft by default. .solid for counters and notification badges. The dot
  * (.badge:empty) stays solid regardless — a soft dot is pointless.
  * Shared .outline variant stays available.

package/src/css/components/breadcrumb.css

@@ -1,6 +1,8 @@
 /*
  * Breadcrumb — current-location trail from the site root.
  *
+ * Docs: docs/pages/components/breadcrumb.md
+ *
  * Inline list separated by "/". Mark the current page with `aria-current="page"`
  * either on the item or on the current link.
  */

package/src/css/components/busy.css

@@ -1,6 +1,8 @@
 /*
  * Busy overlay — non-button loading state.
  *
+ * Docs: docs/pages/components/spinner.md
+ *
  * A non-button element with aria-busy="true" and a direct last-child .spinner
  * shows that spinner as a centered overlay over a faded surface. Buttons keep
  * their spinners inline (e.g. .btn[aria-busy] > .spinner stays inline-flex).

package/src/css/components/button.css

@@ -1,6 +1,8 @@
 /*
  * Buttons for actions and button-like links.
  *
+ * Docs: docs/pages/components/button.md
+ *
  * .btn is primarily for actionable elements: <button>, <a href>,
  * input[type="button"|"submit"|"reset"].
  *

package/src/css/components/card.css

@@ -1,6 +1,8 @@
 /*
  * Cards provide a neutral raised surface for grouped content.
  *
+ * Docs: docs/pages/components/card.md
+ *
  * Surface, border, radius, padding, density, and elevation stay local here.
  * Direct header/footer children are structural slots; a direct footer is
  * anchored to the card's bottom edge when extra block space is available (so

package/src/css/components/chat.css

@@ -1,6 +1,8 @@
 /*
  * Message rows composed from an optional avatar, metadata, and bubble.
  *
+ * Docs: docs/pages/components/chat.md
+ *
  * Public hooks:
  * --chat-gap
  * --chat-max-size

package/src/css/components/data-list.css

@@ -1,6 +1,8 @@
 /*
  * Data list — term/value pairs for the properties of a single object.
  *
+ * Docs: docs/pages/components/data-list.md
+ *
  * Expects alternating <dt>/<dd> children: one term, one value per property.
  * A plain <dl> handles richer relationships (several terms or descriptions)
  * and stays untouched by this component.

package/src/css/components/drawer.css

@@ -1,6 +1,12 @@
 /*
  * Drawer — modal side-sheet built on the native dialog element.
  *
+ * Docs: docs/pages/components/drawer.md
+ *
+ * Open with a native command button:
+ * command="show-modal" commandfor="<drawer-id>".
+ * For stacked navigation, compose with .nav-list from navbar.css.
+ *
  * Top-layer rendering, ::backdrop, Escape, and modal focus come from the
  * native dialog. CSS owns progressive enter/exit motion where browsers support
  * discrete display/overlay transitions. The drawer is a layout shell only —
@@ -13,10 +19,11 @@
  *
  * Internal:
  * --drawer-closed-translate (side/RTL positioning state)
+ * --drawer-focus-bleed
  * --drawer-motion-duration (shared by panel and ::backdrop so exit duration
  *   changes in one place; entry state redefines it longer)
  */
-dialog.drawer {
+:where(dialog).drawer {
   --drawer-size: 20rem;
   --drawer-pad: var(--space-40);
   --drawer-closed-translate: -100%;
@@ -26,15 +33,24 @@ dialog.drawer {
 
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button.
-     A percentage height resolves against the fixed containing viewport, while
-     dynamic viewport units can be stale in embedded previews. */
+
+     The panel reaches both viewport edges, so it has to follow the space that
+     is actually on screen: --viewport-block resolves to 100dvh and tracks a
+     mobile browser's collapsing URL bar. A percentage resolves against the
+     layout viewport instead, which those browsers size as if the bar were
+     hidden — that put the footer below the fold for as long as it showed. The
+     modal pins the small viewport for the opposite reason: it floats, so a
+     stable height beats a panel that breathes while the bar moves.
+
+     An embedded preview that fakes a viewport overrides --viewport-block on
+     its own shell; the component does not degrade to a percentage for it. */
   position: fixed;
   inset-block-start: 0;
 
   inline-size: min(calc(var(--viewport-inline) * 0.9), var(--drawer-size));
-  block-size: 100%;
+  block-size: var(--viewport-block);
   max-inline-size: none;
-  max-block-size: 100%;
+  max-block-size: var(--viewport-block);
   margin: 0;
   padding: var(--drawer-pad);
   border: 0;
@@ -50,7 +66,7 @@ dialog.drawer {
     transform var(--drawer-motion-duration) var(--ease-exit);
 }
 
-dialog.drawer[open] {
+:where(dialog).drawer[open] {
   --drawer-motion-duration: var(--duration-slow);
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
@@ -65,7 +81,7 @@ dialog.drawer[open] {
 /* A form is the drawer's content wrapper when actions need method="dialog".
    Span the drawer tracks so the form can keep the header at the top, let the
    body absorb the available height, and keep the footer at the bottom. */
-dialog.drawer > form {
+:where(dialog).drawer > form {
   display: grid;
   grid-row: 1 / -1;
   grid-template-rows: auto minmax(0, 1fr) auto;
@@ -74,7 +90,7 @@ dialog.drawer > form {
 }
 
 /* The shared backdrop token keeps drawer and modal scrims consistent. */
-dialog.drawer::backdrop {
+:where(dialog).drawer::backdrop {
   background: var(--backdrop-fill);
   opacity: 0;
   /* Scrim curve stays neutral `ease`; only the panel's character curves
@@ -82,7 +98,7 @@ dialog.drawer::backdrop {
   transition: opacity var(--drawer-motion-duration) ease;
 }
 
-dialog.drawer[data-side="end"] {
+:where(dialog).drawer[data-side="end"] {
   --drawer-closed-translate: 100%;
 
   margin-inline-start: auto;
@@ -91,29 +107,41 @@ dialog.drawer[data-side="end"] {
   border-inline-start: var(--border-width) solid var(--border);
 }
 
-dialog.drawer[open]::backdrop {
+:where(dialog).drawer[open]::backdrop {
   opacity: 1;
 }
 
 @starting-style {
-  dialog.drawer[open] {
+  :where(dialog).drawer[open] {
     opacity: 0;
     transform: translateX(var(--drawer-closed-translate));
   }
 
-  dialog.drawer[open]::backdrop {
+  :where(dialog).drawer[open]::backdrop {
     opacity: 0;
   }
 }
 
-/* Scrollable navigation region inside the drawer. */
-dialog.drawer nav {
+/* The body region absorbs the panel's height and scrolls. A drawer is a
+   full-height shell by definition, so it always scrolls its body — unlike the
+   modal, which sizes to its content and opts in with .scrollable. Header and
+   footer keep their own tracks; .drawer-close is named because a generic
+   exclusion list is easier to trust than its `position: absolute`. */
+:where(dialog).drawer > :not(:is(header, footer, form, .drawer-close)),
+:where(dialog).drawer > form > :not(:is(header, footer, .drawer-close)) {
+  --drawer-focus-bleed: calc(var(--focus-outline-offset) + var(--border-width) * 2);
+
   min-block-size: 0;
-  overflow-y: auto;
+  /* Keep focus paint inside the clip without moving the body off the fixed
+     header and footer edges. */
+  margin-inline: calc(var(--drawer-focus-bleed) * -1);
+  padding-inline: var(--drawer-focus-bleed);
+  overflow: auto;
+  overscroll-behavior: contain;
 }
 
 @supports (transition-behavior: allow-discrete) {
-  dialog.drawer {
+  :where(dialog).drawer {
     transition:
       opacity var(--drawer-motion-duration) var(--ease-exit),
       transform var(--drawer-motion-duration) var(--ease-exit),
@@ -121,7 +149,7 @@ dialog.drawer nav {
       display var(--drawer-motion-duration) allow-discrete;
   }
 
-  dialog.drawer[open] {
+  :where(dialog).drawer[open] {
     transition:
       opacity var(--drawer-motion-duration) var(--ease-enter),
       transform var(--drawer-motion-duration) var(--ease-enter),
@@ -129,7 +157,7 @@ dialog.drawer nav {
       display var(--drawer-motion-duration) allow-discrete;
   }
 
-  dialog.drawer::backdrop {
+  :where(dialog).drawer::backdrop {
     transition:
       opacity var(--drawer-motion-duration) ease,
       overlay var(--drawer-motion-duration) allow-discrete,
@@ -143,40 +171,40 @@ dialog.drawer nav {
    directionality and handles nested direction changes; the explicit ltr rules
    neutralize an outer RTL fallback selector. Each specificity group keeps the
    fallback before the :dir() rules. */
-[dir="rtl"] dialog.drawer {
+[dir="rtl"] :where(dialog).drawer {
   --drawer-closed-translate: 100%;
 }
 
-dialog.drawer:dir(ltr) {
+:where(dialog).drawer:dir(ltr) {
   --drawer-closed-translate: -100%;
 }
 
-dialog.drawer:dir(rtl) {
+:where(dialog).drawer:dir(rtl) {
   --drawer-closed-translate: 100%;
 }
 
-[dir="rtl"] dialog.drawer[data-side="end"] {
+[dir="rtl"] :where(dialog).drawer[data-side="end"] {
   --drawer-closed-translate: -100%;
 }
 
-dialog.drawer[data-side="end"]:dir(ltr) {
+:where(dialog).drawer[data-side="end"]:dir(ltr) {
   --drawer-closed-translate: 100%;
 }
 
-dialog.drawer[data-side="end"]:dir(rtl) {
+:where(dialog).drawer[data-side="end"]:dir(rtl) {
   --drawer-closed-translate: -100%;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  dialog.drawer.is-static {
+  :where(dialog).drawer.is-static {
     animation: actual-dialog-static var(--duration-slow) ease;
   }
 }
 
 /* The header reserves inline room so the title never runs under the close
    control. */
-dialog.drawer > header,
-dialog.drawer > form > header {
+:where(dialog).drawer > header,
+:where(dialog).drawer > form > header {
   padding-inline-end: calc(var(--control-size) + var(--space-30));
 }
 

package/src/css/components/fab.css

@@ -3,6 +3,8 @@
  * Button owns the trigger's size, shape, and intent; FAB owns placement and
  * the speed dial's structural open/close markers (--icon-plus / --icon-close).
  *
+ * Docs: docs/pages/components/fab.md
+ *
  * Public hooks:
  * --fab-offset
  * --fab-gap

package/src/css/components/flyout.css

@@ -1,6 +1,8 @@
 /*
  * Flyout — floating panel for actions and links.
  *
+ * Docs: docs/pages/enhancements/flyout.md
+ *
  * JavaScript promotes the panel to the top layer and chooses viewport or
  * document coordinates from its anchor. It also owns state (.is-open), focus,
  * and keyboard behavior. CSS owns the surfaced panel appearance, item styles,

package/src/css/components/indicator.css

@@ -1,6 +1,8 @@
 /*
  * Indicator — generic corner positioning for overlaid component content.
  *
+ * Docs: docs/pages/components/indicator.md
+ *
  * The container only establishes the containing block. The item owns no
  * paint, size, or ring so badges and other components keep their own visual
  * contract.

package/src/css/components/join.css

@@ -1,6 +1,8 @@
 /*
  * Join — visually groups adjacent controls into a single unit.
  *
+ * Docs: docs/pages/forms/joined-controls.md
+ *
  * This is a cross-cutting control primitive, not a forms-only component:
  * it applies equally to inputs, selects, buttons, and button-like links.
  *

package/src/css/components/key.css

@@ -1,6 +1,8 @@
 /*
  * Key — keyboard keys and shortcut tokens for UI chrome.
  *
+ * Docs: docs/pages/components/key.md
+ *
  * Use .key outside prose. Plain kbd inside .prose gets the same visual
  * treatment from prose.css so authored content stays convenient.
  *

package/src/css/components/list.css

@@ -3,6 +3,8 @@
  * Content determines the number of lines; the component only owns the row
  * geometry, dividers, and supporting-text treatment.
  *
+ * Docs: docs/pages/components/list.md
+ *
  * Public hooks:
  * --list-item-min-size
  * --list-item-pad-block

package/src/css/components/meter.css

@@ -1,6 +1,8 @@
 /*
  * Meter — native and segmented gauges for known-range values.
  *
+ * Docs: docs/pages/components/meter.md
+ *
  * Maps the three standard meter zones (optimum / suboptimum / even-less-good)
  * to the shared success / warning / danger intent colors.
  *