actual-css 0.4.1 → 0.5.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"); --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/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.

package/docs/navigation.json

@@ -55,6 +55,7 @@
         "chat",
         "dialog",
         "drawer",
+        "data-list",
         "fab",
         "indicator",
         "key",

package/docs/pages/components/alert.md

@@ -31,7 +31,7 @@ itself needs to change, not `.soft`.
 | `.alert-title`   | Composition | Admonition title bar; hosts the dismiss button.                                   |
 | `.alert-body`    | Composition | Admonition body resting on the page surface.                                      |
 | Shared intents   | Intent      | `.primary`, `.secondary`, `.success`, `.warning`, `.danger`.                      |
-| Shared variants  | Variant     | `.solid` and `.outline` emphasis.                                                 |
+| Shared variants  | Variant     | `.solid`, `.outline`, and `.surface` emphasis.                                    |
 | `.sm` / `.lg`    | Size        | Density; inline padding stays stable.                                             |
 
 ## Basic usage

package/docs/pages/components/app-navigation.md

@@ -5,6 +5,8 @@
 Use one `.app-nav` landmark for the application's primary destinations. Links
 remain links, and `aria-current="page"` is the only current-page state.
 
+**Related terms:** tab bar, bottom navigation, bottom nav, navigation rail, side navigation.
+
 ```html demo
 <nav class="app-nav" aria-label="Primary">
   <a href="#today" aria-current="page">

package/docs/pages/components/badge.md

@@ -16,6 +16,8 @@ direct child of `.stack` (where flex children otherwise stretch). Use
 `inline-size: 100%` — or the optional `.inline-size-full` utility — when a
 full-width badge is intentional.
 
+**Related terms:** chip, tag, pill, removable tag.
+
 ## Class reference
 
 | Class           | Kind        | Description                                                  |
@@ -23,7 +25,7 @@ full-width badge is intentional.
 | `.badge`        | Component   | Compact label; soft by default.                              |
 | `.badge:empty`  | Composition | Truly-empty badge renders as a solid dot.                    |
 | Shared intents  | Intent      | `.primary`, `.secondary`, `.success`, `.warning`, `.danger`. |
-| Shared variants | Variant     | `.solid` (filled) and `.outline` (bordered) emphasis.        |
+| Shared variants | Variant     | `.solid` (filled), `.outline` (bordered), `.surface` (untinted) emphasis. |
 | `.sm` / `.lg`   | Size        | Compact density.                                             |
 
 ## Basic usage
@@ -58,13 +60,25 @@ full-width badge is intentional.
 </button>
 ```
 
-## Empty badge dot
+## Status dot
 
 ```html demo
 <span class="badge success" aria-label="Online"></span>
 ```
 
-The dot conveys no text, so an `aria-label` is required for it to mean anything.
+An autonomous dot conveys state without visible text, so give it an accessible
+name.
+
+## Color marker
+
+Use an empty badge as a compact intent-colored marker in legends and status
+labels. When adjacent text carries the same information, keep the marker
+decorative.
+
+```html demo
+<span class="badge primary" aria-hidden="true"></span>
+Regular
+```
 
 ## Size variants
 

package/docs/pages/components/button.md

@@ -16,6 +16,7 @@ Actions and navigation with shared intents, variants, sizes, and loading, presse
 | `.soft`       | Variant   | Muted intent-tinted surface.                                                               |
 | `.outline`    | Variant   | Transparent with an intent-colored border.                                                 |
 | `.solid`      | Variant   | Filled intent background — the `.btn` default.                                             |
+| `.surface`    | Variant   | Page surface with a neutral border; the intent colors the label only.                      |
 | `.ghost`      | Variant   | Borderless text button (button-only).                                                      |
 | `.link`       | Variant   | Underlined text button (button-only).                                                      |
 | `.sm` / `.lg` | Size      | Compact or large control height.                                                           |
@@ -53,8 +54,12 @@ Shared intent classes set color meaning. They compose with every variant.
 
 ## Variants
 
-`.ghost` and `.link` are button-only; `.soft`, `.outline`, and `.solid` are
-shared with other components.
+`.ghost` and `.link` are button-only; `.soft`, `.outline`, `.solid`, and
+`.surface` are shared with other components.
+
+Reach for `.surface` when a secondary action must sit on an opaque, neutral
+chip: `.outline` lets whatever is behind it show through, and `.soft` is the
+intent-tinted treatment (its baseline fallback uses `--surface-subtle`).
 
 Transparent treatments (`.outline`, `.ghost`, `.link`) follow the surrounding
 foreground by default, including on a contrasting `.inverted` surface. A local
@@ -79,6 +84,8 @@ container. For a plain text link, use a bare `<a>` with no class.
   <button class="btn danger outline" type="button">Danger outline</button>
   <button class="btn soft" type="button">Soft</button>
   <button class="btn danger soft" type="button">Danger soft</button>
+  <button class="btn surface" type="button">Surface</button>
+  <button class="btn danger surface" type="button">Danger surface</button>
   <button class="btn ghost" type="button">Ghost</button>
   <button class="btn link" type="button">Button as link</button>
 </div>

package/docs/pages/components/card.md

@@ -9,6 +9,7 @@ Flexible content container with optional header, body, and footer regions, plus
 | `.card`     | Component        | Neutral raised surface for grouped content.                                                                                                                                                                     |
 | `.raised`   | Variant          | Elevated surface with a soft shadow.                                                                                                                                                                            |
 | `.subtle`   | Variant          | Lower contrast against the page surface.                                                                                                                                                                        |
+| `.surface`  | Variant          | Shared variant: the page surface instead of `--surface-raised`, with the intent in the text only.                                                                                                               |
 | `.inverted` | Surface modifier | Inverse surface treatment: paints `--surface-solid` and swaps the foreground to `--surface`, so it inverts in dark themes instead of always reading as dark. Apply as `class="card inverted"`, or on any block. |
 | `.compact`  | Variant          | Tighter padding for dense contexts.                                                                                                                                                                             |
 
@@ -162,6 +163,11 @@ the surface tokens, so `.card.subtle.inverted` renders a subtle background with
 inverted foreground. Treat them as mutually exclusive, like two competing
 variants.
 
+`.surface` is the shared variant on a card: it drops the card to the page
+surface instead of `--surface-raised`, keeps the theme border, and lets an
+intent class color the text only. `.raised` and `.subtle` are the card-local
+treatments on either side of it.
+
 ```html demo
 <section class="grid">
   <article class="card raised">
@@ -178,6 +184,13 @@ variants.
     </hgroup>
   </article>
 
+  <article class="card surface">
+    <hgroup>
+      <h3>Surface</h3>
+      <p class="muted">The page surface with the theme border.</p>
+    </hgroup>
+  </article>
+
   <article class="card inverted stack">
     <hgroup>
       <h3>Inverted</h3>

package/docs/pages/components/data-list.md

@@ -0,0 +1,72 @@
+# Data list
+
+> A compact key/value layout for object properties.
+
+Use `.data-list` to present the properties of a single object as simple
+term–value pairs on a `<dl>`. It expects alternating `<dt>` and `<dd>` children
+— one term, one value per property. Use a plain description list for
+relationships that involve multiple terms or descriptions, and a `<table>` to
+compare the same property across several objects.
+
+```html demo
+<dl class="data-list">
+  <dt>Name</dt>
+  <dd>Alice Martin</dd>
+
+  <dt>Email</dt>
+  <dd>alice@example.com</dd>
+
+  <dt>Role</dt>
+  <dd>Administrator</dd>
+</dl>
+```
+
+## Rich values
+
+Values accept inline content such as badges, links, dates, or a `.cluster` of
+related items. Terms and values remain baseline-aligned.
+
+```html demo
+<dl class="data-list">
+  <dt>Status</dt>
+  <dd><span class="badge success">Active</span></dd>
+
+  <dt>Plan</dt>
+  <dd>Professional</dd>
+
+  <dt>Renewal</dt>
+  <dd><time datetime="2026-09-14">14 Sep 2026</time></dd>
+</dl>
+```
+
+## In a card
+
+`.data-list` composes with `.card` and other layout primitives for business
+metadata.
+
+```html demo
+<article class="card stack">
+  <h3>Storage details</h3>
+
+  <dl class="data-list">
+    <dt>Used</dt>
+    <dd>6.7 GB</dd>
+
+    <dt>Available</dt>
+    <dd>1.3 GB</dd>
+
+    <dt>Files</dt>
+    <dd>12,492</dd>
+  </dl>
+</article>
+```
+
+## Contract
+
+`.data-list` styles one `<dt>` followed by one `<dd>` per property. A valid
+`<dl>` may group several terms with one description or the reverse, but that
+markup does not belong in `.data-list` — use a plain description list instead,
+where `.prose` already covers the editorial cases.
+
+Use `.data-list` for the properties of a single object. Use a `<table>` when
+comparing the same properties across multiple objects.

package/docs/pages/components/dialog.md

@@ -2,6 +2,8 @@
 
 > Centered modal overlay for focused tasks, confirmations, or forms, built on the native `<dialog>` element.
 
+**Related terms:** modal, alert dialog, confirmation dialog.
+
 ## Class reference
 
 | Class                  | Kind      | Description                                                                      |

package/docs/pages/components/drawer.md

@@ -2,6 +2,8 @@
 
 > Modal side-sheet that overlays the page for navigation or filters.
 
+**Related terms:** off-canvas, side panel, side sheet, navigation drawer.
+
 ## Class reference
 
 | Class           | Kind      | Description                                                |

package/docs/pages/components/fab.md

@@ -7,6 +7,8 @@ The existing button component owns its size, shape, intent, and interaction.
 As a direct child of `.app-layout`, it instead overlays the main grid area so
 the layout keeps it clear of adaptive application navigation and safe areas.
 
+**Related terms:** fab.
+
 ```html
 <div class="fab">
   <button class="btn circle primary lg icon-only" type="button" aria-label="Create">

package/docs/pages/components/meter.md

@@ -3,6 +3,8 @@
 > Scalar measurement within a known range, not a progress indicator.
 
 - Use native `<meter class="meter">`.
+- Use a segmented `<div class="meter" role="meter">` when the measurement
+  needs a category breakdown.
 - Shares progress styling DNA.
 - Represents a scalar measurement within a known range, not task completion.
 - Use explicit bar height to avoid padding issues.
@@ -18,6 +20,59 @@
 The three standard meter zones (optimum, suboptimum, even-less-good) map to the
 shared `--success`, `--warning`, and `--danger` colors.
 
-## CSS hooks
+Segmented meters keep the overall measurement on the meter itself and expose
+the category breakdown as composition. A segmented `.meter` is a flex container
+whose direct children are weighted by `--meter-value`; child intent classes
+define segment colors. The values are relative weights, so they do not need to
+be converted to percentages. Keep the segments decorative with
+`aria-hidden="true"` and provide category names and values in a nearby legend.
+An unintentional child remains transparent, so the meter background can
+represent an available or otherwise unclassified portion. Match its legend
+marker to that background rather than to the neutral intent.
+
+```html demo
+<div class="stack">
+  <div
+    class="meter"
+    role="meter"
+    aria-label="Storage usage"
+    aria-valuemin="0"
+    aria-valuemax="8192"
+    aria-valuenow="6854.45"
+    aria-valuetext="6854.45 MB used of 8 GB"
+  >
+    <span class="primary" style="--meter-value: 4600" aria-hidden="true"></span>
+    <span class="secondary" style="--meter-value: 1350" aria-hidden="true"></span>
+    <span class="success" style="--meter-value: 904.45" aria-hidden="true"></span>
+    <span style="--meter-value: 1337.55" aria-hidden="true"></span>
+  </div>
+
+  <div class="cluster">
+    <span>
+      <span class="badge primary" aria-hidden="true"></span>
+      Regular <span class="muted">4600 MB</span>
+    </span>
+    <span>
+      <span class="badge secondary" aria-hidden="true"></span>
+      System <span class="muted">1350 MB</span>
+    </span>
+    <span>
+      <span class="badge success" aria-hidden="true"></span>
+      Shared <span class="muted">904.45 MB</span>
+    </span>
+    <span>
+      <span class="badge" style="--intent: var(--surface-subtle)" aria-hidden="true"></span>
+      Free <span class="muted">1337.55 MB</span>
+    </span>
+  </div>
+</div>
+```
+
+### Hooks
 
 - `--bar-height` — bar thickness, shared with `.progress`.
+- `--meter-value` — relative weight of a direct child in a segmented meter.
+
+`.sm` / `.lg` are intentionally not supported: a bar keeps its inline size and only changes
+thickness, and a design asks for a 4px or a 12px bar, not for a "small" one. Set the hook
+on the element, or better, on an application class.

package/docs/pages/components/progress.md

@@ -27,3 +27,13 @@
 - `--progress-track` — unfilled track color.
 - `--progress-value` — filled bar color. Prefer an intent class over setting this directly.
 - `--bar-height` — bar thickness, shared with `.meter`.
+
+`.sm` / `.lg` are intentionally not supported: a bar keeps its inline size and only changes
+thickness, and a design asks for a 4px or a 12px bar, not for a "small" one. Set the hook
+on the element, or better, on an application class.
+
+```css
+.storage-meter {
+  --bar-height: 0.375rem;
+}
+```

package/docs/pages/components/skeleton.md

@@ -8,6 +8,8 @@
 - Use layout utilities for placeholder arrangement.
 - Only relevant for simple placeholders - use more structural solutions like phantom-ui for complex cases.
 
+**Related terms:** skeleton screen, shimmer, loading placeholder.
+
 ## Class reference
 
 | Class        | Kind      | Description                                         |