actual-css 0.4.2 → 0.6.0

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: 400; --font-weight-medium: 500; --font-weight-strong: 650; --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); --density-compact-size: 1.5rem; --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: ease; --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: 1em; --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"); --viewport-block: 100vh; --viewport-inline: 100vw; --z-sticky: 10; --z-menu: 20; --z-tooltip: 50; --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 { --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); } :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: 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(--space-60); } code, kbd, samp, pre { font-family: var(--font-mono); } 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); } .secondary { --intent: var(--secondary); --intent-fg: var(--secondary-fg); } .success { --intent: var(--success); --intent-fg: var(--success-fg); } .warning { --intent: var(--warning); --intent-fg: var(--warning-fg); } .danger { --intent: var(--danger); --intent-fg: var(--danger-fg); } .neutral { --intent: var(--neutral); --intent-fg: var(--neutral-fg); } .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); } .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); } .sm { --gap: var(--space-20); --density-space: var(--space-20); --control-size: var(--control-size-sm); --density-compact-size: 1.25rem; } .lg { --gap: var(--space-50); --density-space: var(--space-50); --control-size: var(--control-size-lg); --density-compact-size: 1.875rem; } @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: 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: 400; --font-weight-medium: 500; --font-weight-strong: 650; --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); --density-compact-size: 1.5rem; --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: 1em; --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-tooltip: 50; --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 { --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); } :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(--space-60); } code, kbd, samp, pre { font-family: var(--font-mono); } 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); } .secondary { --intent: var(--secondary); --intent-fg: var(--secondary-fg); } .success { --intent: var(--success); --intent-fg: var(--success-fg); } .warning { --intent: var(--warning); --intent-fg: var(--warning-fg); } .danger { --intent: var(--danger); --intent-fg: var(--danger-fg); } .neutral { --intent: var(--neutral); --intent-fg: var(--neutral-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); } .sm { --gap: var(--space-20); --density-space: var(--space-20); --control-size: var(--control-size-sm); --density-compact-size: 1.25rem; } .lg { --gap: var(--space-50); --density-space: var(--space-50); --control-size: var(--control-size-lg); --density-compact-size: 1.875rem; } @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: 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; } }

package/docs/design-notes/browser-support.md

@@ -83,20 +83,20 @@ The tiers above are Actual's own contract. The table below tracks the Web
 Platform Baseline of the individual CSS features the framework uses; it is a
 different notion from an Actual tier.
 
-| Feature area     | Baseline    | Progressive enhancement       |
-|------------------|-------------|-------------------------------|
-| Layout (flex, grid, position) | Baseline 2023 | —                  |
-| CSS custom properties         | Baseline 2023 | —                  |
-| `:has()`                      | Baseline 2023 | —                  |
-| `<dialog>` element            | Baseline 2023 | —                  |
-| `color-mix()`                 | Baseline 2023 | Fallback flat color |
-| `light-dark()`                | 2024+        | Manual theme override |
-| `:user-invalid`               | 2024+        | `[aria-invalid]` attribute |
-| `transition-behavior: allow-discrete` | 2024+ | Native dialog open/close |
-| `appearance: base-select`     | 2024+        | Native `<select>` |
-| `@starting-style`             | 2024+        | Instant appearance |
-| View Transition API           | 2024+        | Dialog open/close transition |
-| CSS Anchor Positioning        | Future       | JS positioning (`floating.js`) |
+| Feature area                          | Baseline      | Progressive enhancement        |
+| ------------------------------------- | ------------- | ------------------------------ |
+| Layout (flex, grid, position)         | Baseline 2023 | —                              |
+| CSS custom properties                 | Baseline 2023 | —                              |
+| `:has()`                              | Baseline 2023 | —                              |
+| `<dialog>` element                    | Baseline 2023 | —                              |
+| `color-mix()`                         | Baseline 2023 | Fallback flat color            |
+| `light-dark()`                        | 2024+         | Manual theme override          |
+| `:user-invalid`                       | 2024+         | `[aria-invalid]` attribute     |
+| `transition-behavior: allow-discrete` | 2024+         | Native dialog open/close       |
+| `appearance: base-select`             | 2024+         | Native `<select>`              |
+| `@starting-style`                     | 2024+         | Instant appearance             |
+| View Transition API                   | 2024+         | Dialog open/close transition   |
+| CSS Anchor Positioning                | Future        | JS positioning (`floating.js`) |
 
 Core layout and visual tokens work on all Baseline 2023 browsers. Features marked
 2024+ are gated with `@supports` or degrade gracefully through fallback values.

package/docs/design-notes/enhancement-contract.md

@@ -105,22 +105,39 @@ defeating the split.
 
 ## Design decisions recorded
 
-| # | Decision | Rationale |
-|---|----------|-----------|
-| D2 | `selectors.js` drops its 5 discovery entries, keeps 11 write-side state entries | The file's job changes from *CSS↔init bridge* to *state vocabulary the runtime writes*. It stays the single file to alias for another CSS framework. |
-| D4 | `status.js` uses `[data-status][role="status"]` — no class, no token | The markup already carries `role="status"` everywhere. Semantics alone scope the document-wide lookup. |
-| D5 | `<dialog>` gets no token | `<dialog>` is its own opt-in: semantic, native, CSS-agnostic. |
-| D6 | `validation.js` accepts `[data-field-error]` as an alias for `.field-error` and keeps `.field` / `.danger` as an optional, degrading presentation adapter | Validation is the one module with intentional, optional CSS coupling. The adapter degrades to a no-op under foreign CSS while `aria-invalid`, focus management, custom rules, and server errors all keep working. |
-| D7 | Context-menu reuses `surface`, not `flyout` | The panel gets no token; `menuFor()` validates semantically (`menu, [role="menu"]`). A context menu may legitimately want the flyout *look* without the flyout *behavior*. |
-| D9 | Orphaned mounted surfaces closed from the origin's disconnect handler | A `fix:`, not part of the contract itself. Landed independently. |
+**D2 — `selectors.js` drops its 5 discovery entries and keeps 11 write-side
+state entries.** The file's job changes from *CSS↔init bridge* to *state
+vocabulary the runtime writes*. It stays the single file to alias for another
+CSS framework.
+
+**D4 — `status.js` uses `[data-status][role="status"]`, with no class and no
+token.** The markup already carries `role="status"` everywhere, so semantics
+alone scope the document-wide lookup.
+
+**D5 — `<dialog>` gets no token.** It is its own opt-in: semantic, native,
+CSS-agnostic.
+
+**D6 — `validation.js` accepts `[data-field-error]` as an alias for
+`.field-error`, and keeps `.field` / `.danger` as an optional, degrading
+presentation adapter.** Validation is the one module with intentional, optional
+CSS coupling. The adapter degrades to a no-op under foreign CSS, while
+`aria-invalid`, focus management, custom rules and server errors all keep
+working.
+
+**D7 — Context-menu reuses `surface`, not `flyout`.** The panel gets no token;
+`menuFor()` validates semantically (`menu, [role="menu"]`). A context menu may
+legitimately want the flyout *look* without the flyout *behavior*.
+
+**D9 — Orphaned mounted surfaces are closed from the origin's disconnect
+handler.** A `fix:`, not part of the contract itself. Landed independently.
 
 ## Token vocabulary
 
-| Token | Behavior | Existing class |
-|-------|----------|---------------|
-| `tabs` | Tab panel switching, arrow-key navigation | `.tabs` |
-| `flyout` | Trigger → panel positioning, open/close | `.flyout` |
-| `scrollspy` | Scroll-driven nav highlighting | `.scrollspy` |
+| Token        | Behavior                                         | Existing class      |
+| ------------ | ------------------------------------------------ | ------------------- |
+| `tabs`       | Tab panel switching, arrow-key navigation        | `.tabs`             |
+| `flyout`     | Trigger → panel positioning, open/close          | `.flyout`           |
+| `scrollspy`  | Scroll-driven nav highlighting                   | `.scrollspy`        |
 | `validation` | Form validation, focus management, server errors | `.needs-validation` |
 
 Four tokens. Everything else stays self-describing.

package/docs/design-notes/forced-colors.md

@@ -53,13 +53,17 @@ an essential shape, state, or affordance.
 
 ## Color system keywords by role
 
-| Context | Color | Why |
-|---|---|---|
-| Disclosure / accordion marker | `CanvasText` | Summary is on Canvas, not a button |
-| Button, switch, checkbox | `ButtonText` / `ButtonFace` / `Highlight` / `HighlightText` | Interactive controls |
-| Selected / current state | `Highlight` / `HighlightText` | Matches OS selection |
-| Disabled state | `GrayText` | Standard disabled system color |
-| Hover indicator | `ButtonText` outline or `CanvasText` underline | Avoids blocked backgrounds |
+| Context                  | Color                 | Why                                |
+| ------------------------ | --------------------- | ---------------------------------- |
+| Disclosure marker        | `CanvasText`          | Summary is on Canvas, not a button |
+| Button, switch, checkbox | the `Button*` pair    | Interactive controls               |
+| Selected / current state | the `Highlight*` pair | Matches OS selection               |
+| Disabled state           | `GrayText`            | Standard disabled system color     |
+| Hover indicator          | outline or underline  | Avoids blocked backgrounds         |
+
+Controls use `ButtonText` / `ButtonFace`, and `Highlight` / `HighlightText` for
+their selected state. A hover indicator is a `ButtonText` outline or a
+`CanvasText` underline.
 
 Prefer `CanvasText` for non-interactive mark-up content. `CanvasText` and
 `ButtonText` are **not guaranteed identical** — custom HCM palettes can set

package/docs/design-notes/grid.md

@@ -254,7 +254,7 @@ asks.
 It is nevertheless the right **baseline**. Bounded at N, using `auto-fill`, it
 is responsive, overflow-safe, and equal-width at every state, and it needs
 nothing above Actual's Minimal floor. Adopting it as the unenhanced behavior of
-`.grid-N` is what makes the actual-grid container a precision enhancement rather than
+`.grid-N` is what makes the actual-container container a precision enhancement rather than
 a prerequisite for responsiveness. This is the single most important difference
 from 0.3.1, where a preset used without a wrapper stayed frozen at N columns
 and was a genuine trap.
@@ -391,7 +391,7 @@ The extra ancestor is therefore not accidental ceremony.
 
 It represents a real boundary imposed by the CSS containment model.
 
-Actual should not hide that boundary if hiding it requires changing the sizing semantics of the grid. Balanced subdivision keys off a container **named** `actual-grid` rather than any anonymous query container, so an incidental `container-type: inline-size` region never changes the grid by accident; `.container-query` is the convenience helper that establishes that named context.
+Actual should not hide that boundary if hiding it requires changing the sizing semantics of the grid. Balanced subdivision keys off a container **named** `actual-container` rather than any anonymous query container, so an incidental `container-type: inline-size` region never changes the grid by accident; `.container-query` is the convenience helper that establishes that named context. The name is generic rather than grid-specific: it means "here is the width you were allocated", and other size-aware components (`.steps` and its label collapse) read the same context. The grid does not own it — it is one consumer.
 
 ## Out of scope: explicit per-region placement
 
@@ -520,7 +520,7 @@ viewport
           |
         named query container
           |
-        actual-grid
+        actual-container
           |
         2 / 3 / 4 / 6 stages
 ```
@@ -620,7 +620,7 @@ inside a query container.
 .grid                      space-driven, auto-fit, --grid-min
 .grid-N                    count-driven baseline, auto-fill bounded at N,
                            may pass through non-divisor column counts
-actual-grid .grid-N        balanced subdivision, N -> divisors of N -> 1
+actual-container .grid-N        balanced subdivision, N -> divisors of N -> 1
 ```
 
 The whole enhancement lives inside `@supports (container-type: inline-size)`.

package/docs/design-notes/naming.md

@@ -40,15 +40,21 @@ Actual CSS is intended for new projects. Existing projects with class collisions
 
 ## Utilities
 
-Utilities ship in two layers that follow the same class grammar.
+Utilities ship in two modules that follow the same class grammar. Both are
+imported by `utilities/index.css`, so the split is about naming and curation,
+never about opting in.
 
-- **Base utilities** are a curated set of common ergonomic shortcuts
-  (`.overflow-auto`, `.gap-none`, `.text-nowrap`, `.px`, `.py`).
-- **Optional utilities** use explicit property/value names
+- **Base** (`utilities/base.css`) is a curated set of common ergonomic
+  shortcuts (`.overflow-auto`, `.gap-none`, `.text-nowrap`, `.px`, `.py`).
+- **Extra** (`utilities/extra.css`) uses explicit property/value names
   (`.overflow-hidden`, `.gap-sm`, `.white-space-normal`).
 
-Base utilities may use compact names for a small set of frequent operations
-(`.px`, `.py`, `.mbs`, `.mbe`). Extra utilities use explicit property/value
-names and must not duplicate an operation already provided by base. The two
-sets may cover the same CSS property, but must not expose competing names for
-the same declaration.
+Call them base and extra, after the files. "Optional" is the wrong word for
+either: it reads as a layer an author has to opt into, which is true of every
+module outside `core/` and therefore says nothing about these two.
+
+Base may use compact names for a small set of frequent operations (`.px`,
+`.py`, `.mbs`, `.mbe`). Extra uses explicit property/value names and must not
+duplicate an operation already provided by base. The two sets may cover the
+same CSS property, but must not expose competing names for the same
+declaration.

package/docs/design-notes/platform-alignment.md

@@ -287,6 +287,15 @@ Avoid building a large custom range abstraction around browser-specific pseudo-e
 
 Prefer native controls and progressive styling.
 
+The concrete signal to watch is `appearance: base-slider` with `::slider-track`, `::slider-fill`, and `::slider-thumb`. Checked on Chrome 152: `CSS.supports('appearance', 'base-slider')` and `CSS.supports('selector(::slider-fill)')` are both false, so there is nothing to enhance against yet.
+
+Until then, `.range` intentionally omits filled tracks and tick marks. Both are reachable today only through techniques Actual should not take on:
+
+- The Chromium filled-track trick needs `overflow: hidden` on the runnable track plus a large `box-shadow` on the thumb. It collides twice with `range.css`: the thumb is wider than the track and would be clipped, and the focus ring already owns the thumb's `box-shadow`.
+- CSS-only tick marks need a step count duplicated out of `min`/`max`/`step` into a custom property, so markup carries the same contract twice and the two can diverge. `datalist` cannot carry it either: its native ticks are part of the appearance that `appearance: none` removes, and no engine renders `<option label>` for a range.
+
+When the base-slider parts become interoperable, this becomes a `@supports` enhancement in the shape of `custom-select.css` — less engine-specific CSS, not more.
+
 ### Navigation
 
 Native navigation proposals may eventually provide richer semantics and interaction behavior for complex navigation structures.

package/docs/design-notes/references.md

@@ -330,3 +330,7 @@ Prior Actual CSS libraries:
 - https://getbootstrap.com/docs/5.3/components/scrollspy/
 - https://una.im/scroll-target-group/
 - https://www.sarasoueidan.com/blog/css-scrollspy/
+
+### @container
+
+- https://ishadeed.com/article/css-container-query-guide/

package/docs/design-notes/spacing-units.md

@@ -0,0 +1,286 @@
+# Spacing Units: When to Use `em`, `rem`, `ch`, `lh`, or `--space-*`
+
+Actual does not require every relative length to come from a design token.
+
+CSS relative units already carry useful semantics. A literal `0.5em`, `1lh`, `20rem`, or `65ch` can be more meaningful than replacing it with an unrelated spacing token.
+
+The goal is not to eliminate literal values. The goal is to choose the unit that best expresses the relationship.
+
+## Core rule
+
+Use `--space-*` when the value belongs to the **shared interface rhythm**.
+
+Use a CSS relative unit when the value belongs to the **intrinsic geometry or typography of the component**.
+
+A useful question is:
+
+> If this value changes, is that a design-system decision or a local relationship inside the component?
+
+If it is a design-system decision, prefer a token.
+
+If it is a local relationship, prefer the appropriate CSS unit.
+
+## `--space-*`: interface rhythm
+
+Use spacing tokens for layout distances that should remain consistent across components and respond to Actual's density system.
+
+Typical cases:
+
+```css
+.card {
+  padding: var(--space-40);
+}
+
+.cluster {
+  gap: var(--space-20);
+}
+
+.data-list {
+  gap: var(--space-20) var(--space-40);
+}
+```
+
+Good candidates include:
+
+* component padding
+* gaps between peer controls
+* spacing between sections
+* list and grid gaps
+* toolbar spacing
+* application layout rhythm
+
+Using a spacing token also communicates that the value is expected to participate in density changes.
+
+Do not use `--space-*` merely to avoid writing a literal relative unit.
+
+## `em`: relative to the local text
+
+Use `em` when a dimension should scale with the font size of the element or component.
+
+Typical cases:
+
+```css
+.prose dd {
+  margin-inline-start: 1.5em;
+}
+
+.inline-icon {
+  margin-inline-end: 0.4em;
+}
+```
+
+Good candidates include:
+
+* typographic indentation
+* small offsets around inline icons
+* decorative elements sized relative to text
+* local relationships that should scale when the component font size changes
+
+`em` is especially useful when the relationship is best understood as:
+
+> some fraction or multiple of this text size
+
+Do not use `em` for general application spacing when local font-size changes should not affect the layout.
+
+## `rem`: relative to the root scale
+
+Use `rem` when a dimension should follow the user's/root font size but remain independent of a component's local typography.
+
+Typical cases:
+
+```css
+.sidebar {
+  inline-size: 18rem;
+}
+
+.dialog {
+  max-inline-size: 36rem;
+}
+```
+
+Good candidates include:
+
+* component size constraints
+* layout thresholds
+* widths and heights tied to the overall UI scale
+* values that should remain stable when nested inside differently sized text
+
+A literal `18rem` does not need a custom property unless the value itself is part of the public API, reused significantly, or expected to be configured.
+
+## `ch`: text-measure relationships
+
+Use `ch` when a dimension is naturally related to the approximate width of characters.
+
+Typical cases:
+
+```css
+.prose {
+  max-inline-size: 65ch;
+}
+
+.search-field {
+  inline-size: 24ch;
+}
+```
+
+Good candidates include:
+
+* readable text measures
+* text-oriented input widths
+* content regions whose useful size is determined by expected text length
+
+Do not use `ch` as a generic substitute for `rem`; its value depends on font metrics.
+
+## `lh`: line-height relationships
+
+Use `lh` when a dimension should be directly related to the computed line height.
+
+Typical cases:
+
+```css
+.floating-label {
+  inset-block-start: calc(0.5lh + var(--border-width));
+}
+```
+
+Good candidates include:
+
+* vertical positioning relative to a line of text
+* text-area or field geometry
+* offsets that conceptually represent one or part of one line
+
+`lh` is preferable to reconstructing line height indirectly from font size when line height is the actual relationship being expressed.
+
+## Choosing between them
+
+| Intent                                  | Prefer           |
+| --------------------------------------- | ---------------- |
+| Shared application spacing              | `var(--space-*)` |
+| Density-aware spacing                   | `var(--space-*)` |
+| Local relationship to component text    | `em`             |
+| Stable size relative to root typography | `rem`            |
+| Width related to text length            | `ch`             |
+| Geometry related to line height         | `lh`             |
+
+## Examples
+
+### System rhythm
+
+```css
+.alert {
+  padding: var(--space-30) var(--space-40);
+  gap: var(--space-30);
+}
+```
+
+The spacing is part of the visual density and should stay aligned with other components.
+
+### Intrinsic typography
+
+```css
+.prose dd {
+  margin-inline-start: 1.5em;
+}
+```
+
+The indentation belongs to the description text itself. A spacing token would add no useful meaning.
+
+### Stable component width
+
+```css
+.sidebar {
+  flex-basis: 18rem;
+}
+```
+
+The width belongs to the component geometry, not to the spacing scale.
+
+### Readable prose
+
+```css
+.prose {
+  max-inline-size: 65ch;
+}
+```
+
+The width exists to control line length, so `ch` expresses the intention directly.
+
+### Line-relative positioning
+
+```css
+.field-label {
+  inset-block-start: 0.5lh;
+}
+```
+
+The position is defined relative to the text line, not to global spacing.
+
+## Avoid token laundering
+
+Do not replace meaningful CSS units with spacing tokens simply to make a stylesheet appear more tokenized.
+
+Avoid patterns such as:
+
+```css
+.icon {
+  translate: 0 var(--space-10);
+}
+
+.prose {
+  max-inline-size: var(--space-900);
+}
+
+.label {
+  margin-inline-end: var(--space-20);
+}
+```
+
+when the real relationships would be better expressed as:
+
+```css
+.icon {
+  translate: 0 -0.1em;
+}
+
+.prose {
+  max-inline-size: 65ch;
+}
+
+.label {
+  margin-inline-end: 0.5em;
+}
+```
+
+Tokens should add meaning, not hide it.
+
+## Literal relative values are not a code smell
+
+A well-chosen literal relative value is valid framework CSS.
+
+Values such as:
+
+```css
+0.25em
+1.5em
+1lh
+18rem
+65ch
+```
+
+can be more stable and understandable than introducing a custom property or mapping them artificially onto the spacing scale.
+
+Promote a value to a token when at least one of these becomes true:
+
+* it represents a shared design decision
+* multiple components need the same semantic value
+* themes or density modes should modify it
+* users are expected to configure it
+* naming the value improves understanding of the API
+
+Otherwise, keep the direct CSS unit.
+
+## Guideline
+
+> Use tokens for shared design rhythm. Use CSS relative units for intrinsic relationships.
+
+Actual favors semantic CSS over tokenization for its own sake.