actual-css 0.9.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/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,159 +1,159 @@
-{
-  "name": "actual-css",
-  "version": "0.9.0",
-  "description": "Plain CSS component framework with semantic classes, universal variants, small tokens, theme hooks, and progressive enhancements.",
-  "type": "module",
-  "packageManager": "bun@1.4.2",
-  "license": "MIT",
-  "author": "Thomas <thomas@lekoala.be>",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/lekoala/actual-css.git"
-  },
-  "homepage": "https://github.com/lekoala/actual-css",
-  "bugs": {
-    "url": "https://github.com/lekoala/actual-css/issues"
-  },
-  "keywords": [
-    "css",
-    "css-framework",
-    "component-library",
-    "semantic",
-    "accessibility",
-    "dark-mode",
-    "themable",
-    "no-build",
-    "progressive-enhancement"
-  ],
-  "exports": {
-    ".": "./dist/actual.min.css",
-    "./full": "./dist/actual.full.min.css",
-    "./css": "./src/css/actual.css",
-    "./css/components": "./src/css/components/index.css",
-    "./css/components/*": "./src/css/components/*.css",
-    "./css/effects": "./src/css/effects/index.css",
-    "./css/effects/*": "./src/css/effects/*.css",
-    "./css/forms": "./src/css/forms/base.css",
-    "./css/forms/all": "./src/css/forms/index.css",
-    "./css/forms/*": "./src/css/forms/*.css",
-    "./css/full": "./src/css/actual.full.css",
-    "./css/layer": "./src/css/actual.layer.css",
-    "./css/layout": "./src/css/layout/index.css",
-    "./css/layout/*": "./src/css/layout/*.css",
-    "./css/themes": null,
-    "./css/themes/*": null,
-    "./css/typography": "./src/css/typography/index.css",
-    "./css/typography/*": "./src/css/typography/*.css",
-    "./css/utilities": "./src/css/utilities/index.css",
-    "./css/utilities/*": "./src/css/utilities/*.css",
-    "./js": "./src/js/index.js",
-    "./js/full": "./src/js/full.js",
-    "./js/command": "./src/js/command.js",
-    "./js/context-menu": "./src/js/context-menu.js",
-    "./js/dialog": "./src/js/dialog.js",
-    "./js/dismiss": "./src/js/dismiss.js",
-    "./js/escape": "./src/js/escape.js",
-    "./js/enhance": "./src/js/enhance.js",
-    "./js/enhancement-loader": "./src/js/enhancement-loader.js",
-    "./js/parse-config": "./src/js/parse-config.js",
-    "./js/events": "./src/js/events.js",
-    "./js/filter": "./src/js/filter.js",
-    "./js/flyout": "./src/js/flyout.js",
-    "./js/focus": "./src/js/focus.js",
-    "./js/focus-group": "./src/js/focus-group.js",
-    "./js/input": "./src/js/input.js",
-    "./js/keys": "./src/js/keys.js",
-    "./js/mask": "./src/js/mask.js",
-    "./js/menu": "./src/js/menu.js",
-    "./js/password": "./src/js/password.js",
-    "./js/scrollspy": "./src/js/scrollspy.js",
-    "./js/selectors": "./src/js/selectors.js",
-    "./js/tab": "./src/js/tab.js",
-    "./js/tooltip": "./src/js/tooltip.js",
-    "./js/validation": "./src/js/validation.js",
-    "./js/status": "./src/js/status.js",
-    "./js/surface": "./src/js/surface.js",
-    "./reserved-classes.json": "./reserved-classes.json",
-    "./components.json": "./components.json",
-    "./package.json": "./package.json"
-  },
-  "bin": {
-    "actual-css": "./src/cli/actual-css.js"
-  },
-  "main": "./dist/actual.js",
-  "style": "./dist/actual.min.css",
-  "unpkg": "./dist/actual.min.css",
-  "jsdelivr": "./dist/actual.min.css",
-  "sideEffects": true,
-  "files": [
-    "dist",
-    "src/css/*.css",
-    "src/css/core",
-    "src/css/layout",
-    "src/css/typography",
-    "src/css/forms",
-    "src/css/components",
-    "src/css/effects",
-    "src/css/utilities",
-    "src/cli",
-    "src/js",
-    "src/tooling",
-    "reserved-classes.json",
-    "components.json",
-    "docs",
-    "CHANGELOG.md",
-    "llms.txt",
-    "LICENSE",
-    "README.md"
-  ],
-  "engines": {
-    "bun": ">=1.4.0",
-    "node": ">=18"
-  },
-  "scripts": {
-    "lint": "biome check",
-    "lint:fix": "biome check --write",
-    "build:docs": "bun run build:themes && bun scripts/build-docs.js",
-    "watch:docs": "bun run build:themes && bun scripts/build-docs.js --watch",
-    "check:docs": "bun scripts/check-docs.js",
-    "format:docs": "bun scripts/format-doc-tables.js",
-    "check:doc-classes": "bun scripts/check-doc-classes.js",
-    "check:compat": "bun scripts/check-compat.js",
-    "check:css-api": "bun scripts/check-css-api.js",
-    "check:color-space": "bun scripts/check-color-space.js",
-    "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",
-    "build:themes": "bun scripts/build-themes.js",
-    "build:size": "bun scripts/build-size.js",
-    "check:enhance": "bun run scripts/check-enhance.js",
-    "generate:reserved": "bun scripts/generate-reserved-classes.js",
-    "check:reserved": "bun scripts/check-reserved.js",
-    "generate:catalog": "bun scripts/build-catalog.js",
-    "check:catalog": "bun scripts/check-catalog.js",
-    "check:links": "bun scripts/check-doc-links.js",
-    "check:templates": "bun scripts/check-templates.js",
-    "check:markup": "bun scripts/check-markup.js",
-    "shot:forced": "bun scripts/forced-colors-shot.js",
-    "shot:multi": "bun scripts/multi-shot.js",
-    "shot:page": "bun scripts/page-shot.js",
-    "probe": "bun scripts/probe.js",
-    "serve": "bun scripts/serve.js",
-    "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 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": {
-    "@biomejs/biome": "^2.5.12",
-    "happy-dom": "^20.14.0"
-  },
-  "dependencies": {
-    "@lekoala/floating": "^0.2.0"
-  }
-}
+{
+  "name": "actual-css",
+  "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",
+  "license": "MIT",
+  "author": "Thomas <thomas@lekoala.be>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lekoala/actual-css.git"
+  },
+  "homepage": "https://github.com/lekoala/actual-css",
+  "bugs": {
+    "url": "https://github.com/lekoala/actual-css/issues"
+  },
+  "keywords": [
+    "css",
+    "css-framework",
+    "component-library",
+    "semantic",
+    "accessibility",
+    "dark-mode",
+    "themable",
+    "no-build",
+    "progressive-enhancement"
+  ],
+  "exports": {
+    ".": "./dist/actual.min.css",
+    "./full": "./dist/actual.full.min.css",
+    "./css": "./src/css/actual.css",
+    "./css/components": "./src/css/components/index.css",
+    "./css/components/*": "./src/css/components/*.css",
+    "./css/effects": "./src/css/effects/index.css",
+    "./css/effects/*": "./src/css/effects/*.css",
+    "./css/forms": "./src/css/forms/base.css",
+    "./css/forms/all": "./src/css/forms/index.css",
+    "./css/forms/*": "./src/css/forms/*.css",
+    "./css/full": "./src/css/actual.full.css",
+    "./css/layer": "./src/css/actual.layer.css",
+    "./css/layout": "./src/css/layout/index.css",
+    "./css/layout/*": "./src/css/layout/*.css",
+    "./css/themes": null,
+    "./css/themes/*": null,
+    "./css/typography": "./src/css/typography/index.css",
+    "./css/typography/*": "./src/css/typography/*.css",
+    "./css/utilities": "./src/css/utilities/index.css",
+    "./css/utilities/*": "./src/css/utilities/*.css",
+    "./js": "./src/js/index.js",
+    "./js/full": "./src/js/full.js",
+    "./js/command": "./src/js/command.js",
+    "./js/context-menu": "./src/js/context-menu.js",
+    "./js/dialog": "./src/js/dialog.js",
+    "./js/dismiss": "./src/js/dismiss.js",
+    "./js/escape": "./src/js/escape.js",
+    "./js/enhance": "./src/js/enhance.js",
+    "./js/enhancement-loader": "./src/js/enhancement-loader.js",
+    "./js/parse-config": "./src/js/parse-config.js",
+    "./js/events": "./src/js/events.js",
+    "./js/filter": "./src/js/filter.js",
+    "./js/flyout": "./src/js/flyout.js",
+    "./js/focus": "./src/js/focus.js",
+    "./js/focus-group": "./src/js/focus-group.js",
+    "./js/input": "./src/js/input.js",
+    "./js/keys": "./src/js/keys.js",
+    "./js/mask": "./src/js/mask.js",
+    "./js/menu": "./src/js/menu.js",
+    "./js/password": "./src/js/password.js",
+    "./js/scrollspy": "./src/js/scrollspy.js",
+    "./js/selectors": "./src/js/selectors.js",
+    "./js/tab": "./src/js/tab.js",
+    "./js/tooltip": "./src/js/tooltip.js",
+    "./js/validation": "./src/js/validation.js",
+    "./js/status": "./src/js/status.js",
+    "./js/surface": "./src/js/surface.js",
+    "./reserved-classes.json": "./reserved-classes.json",
+    "./components.json": "./components.json",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "actual-css": "./src/cli/actual-css.js"
+  },
+  "main": "./dist/actual.js",
+  "style": "./dist/actual.min.css",
+  "unpkg": "./dist/actual.min.css",
+  "jsdelivr": "./dist/actual.min.css",
+  "sideEffects": true,
+  "files": [
+    "dist",
+    "src/css/*.css",
+    "src/css/core",
+    "src/css/layout",
+    "src/css/typography",
+    "src/css/forms",
+    "src/css/components",
+    "src/css/effects",
+    "src/css/utilities",
+    "src/cli",
+    "src/js",
+    "src/tooling",
+    "reserved-classes.json",
+    "components.json",
+    "docs",
+    "CHANGELOG.md",
+    "llms.txt",
+    "LICENSE",
+    "README.md"
+  ],
+  "engines": {
+    "bun": ">=1.4.0",
+    "node": ">=18"
+  },
+  "scripts": {
+    "lint": "biome check",
+    "lint:fix": "biome check --write",
+    "build:docs": "bun run build:themes && bun scripts/build-docs.js",
+    "watch:docs": "bun run build:themes && bun scripts/build-docs.js --watch",
+    "check:docs": "bun scripts/check-docs.js",
+    "format:docs": "bun scripts/format-doc-tables.js",
+    "check:doc-classes": "bun scripts/check-doc-classes.js",
+    "check:compat": "bun scripts/check-compat.js",
+    "check:css-api": "bun scripts/check-css-api.js",
+    "check:color-space": "bun scripts/check-color-space.js",
+    "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",
+    "build:themes": "bun scripts/build-themes.js",
+    "build:size": "bun scripts/build-size.js",
+    "check:enhance": "bun run scripts/check-enhance.js",
+    "generate:reserved": "bun scripts/generate-reserved-classes.js",
+    "check:reserved": "bun scripts/check-reserved.js",
+    "generate:catalog": "bun scripts/build-catalog.js",
+    "check:catalog": "bun scripts/check-catalog.js",
+    "check:links": "bun scripts/check-doc-links.js",
+    "check:templates": "bun scripts/check-templates.js",
+    "check:markup": "bun scripts/check-markup.js",
+    "shot:forced": "bun scripts/forced-colors-shot.js",
+    "shot:multi": "bun scripts/multi-shot.js",
+    "shot:page": "bun scripts/page-shot.js",
+    "probe": "bun scripts/probe.js",
+    "serve": "bun scripts/serve.js",
+    "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 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": {
+    "@biomejs/biome": "^2.5.12",
+    "happy-dom": "^20.14.0"
+  },
+  "dependencies": {
+    "@lekoala/floating": "^0.2.0"
+  }
+}

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.