actual-css 0.5.0 → 0.7.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-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; } }
+*, *::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

@@ -23,6 +23,30 @@ Degraded browsers may still run some JavaScript successfully, but that
 behavior is not tested, documented as supported, or preserved when the
 runtime evolves.
 
+### Native Popover and the tiers
+
+Popover is not part of any Actual tier's guarantee below Recommended. It is a
+capability, not a browser generation: the core lifecycle landed around
+Chromium 116, Firefox 125 and Safari 17, which clears Recommended but sits
+above both Minimal and Intermediate on every engine.
+
+| Actual tier  | Core native Popover guaranteed | Recommended lifecycle owner     |
+| ------------ | ------------------------------ | ------------------------------- |
+| Degraded     | no                             | HTML/CSS fallback only          |
+| Minimal      | no                             | `surface.js`                    |
+| Intermediate | no                             | `surface.js`                    |
+| Recommended  | yes, core lifecycle            | native Popover, or `surface.js` |
+
+"Core lifecycle" means `popover="auto"`/`"manual"`, `popovertarget`,
+`showPopover`/`hidePopover` and `:popover-open` — not the entire Popover API.
+`popover="hint"` and interest invokers are much newer and are not covered at
+any tier. Safari coverage here is read as the desktop engine; some iOS versions
+through 18.2 still report partial support for parts of the API, so an
+application targeting iOS should verify the specific pieces it relies on.
+
+Actual's presentation classes compose with either lifecycle from Recommended
+up. The runtime itself depends on Popover at no tier.
+
 ## JavaScript philosophy
 
 > The Degraded tier exists primarily to preserve useful HTML and CSS on older
@@ -83,20 +107,21 @@ 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         |
+| Popover API (core)                    | Baseline 2025 | `surface.js` lifecycle               |
+| CSS Anchor Positioning                | Future        | JS positioning (`@lekoala/floating`) |
 
 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/css-anchor.md

@@ -2,7 +2,7 @@
 
 ## Context
 
-Currently, the positioning logic for tooltips, flyouts, and context menus is handled by a custom JavaScript engine (in `floating.js`). This engine computes absolute coordinates, handles viewport boundaries, and applies "flip" and "shift" heuristics to prevent overflow.
+Currently, the positioning logic for tooltips, flyouts, and context menus is handled by the `@lekoala/floating` JavaScript dependency. This engine computes fixed coordinates, handles viewport boundaries, and applies "flip" and "shift" heuristics to prevent overflow.
 
 As of mid-2024, modern browsers started supporting the **CSS Anchor Positioning API**, which delegates this heavy mathematical lifting directly to the browser's layout engine.
 

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

@@ -138,6 +138,57 @@ Actual class + native HTML
 
 rather than replacing one framework API with another.
 
+## Surface responsibility split
+
+Anchored surfaces are the clearest case where the platform is absorbing one
+responsibility at a time rather than a whole widget. Keeping the axes named
+separately is what lets each be replaced on its own schedule:
+
+```text
+Popover            = where the surface lives
+floating           = where it is placed
+surface.js         = when and how it opens
+flyout / tooltip   = what it looks like
+menu               = how its content behaves
+```
+
+The value of the split is that each line can change owner independently.
+Popover can take over the top layer without touching placement. Anchor
+positioning could later take over placement without touching lifecycle — though
+not yet, because the current positioner also reports *placement validity*, which
+the lifecycle uses to close a surface whose anchor has left the viewport, and
+declarative CSS positioning offers no equivalent signal.
+
+### Ceding the properties a capability is expressed through
+
+Keeping presentation and behavior separate is not enough on its own, because
+CSS expresses some behavior *as* presentation.
+
+> A presentation class that composes with `popover` may own its visible display
+> type, but must not override the platform's hidden-state display.
+
+`.flyout { display: grid }` is entirely legitimate. The problem is that the UA
+closes a popover with `display: none`, and an author declaration beats the UA
+origin whatever the specificity — so that legitimate choice silently leaves a
+closed popover painted on screen. The class was not implementing the lifecycle;
+it was overriding the property the lifecycle is written in.
+
+The general rule, then:
+
+> A class that is advertised as composing with a platform capability must cede
+> the properties that capability uses to express itself, for the states the
+> platform owns.
+
+This is checkable rather than aspirational: any Actual class that carries a
+`[popover]` reset must also restore `display` for `:not(:popover-open)`.
+
+The corresponding trap is adopting a capability in a way that adds an axis
+instead of replacing one. A second surface transport living alongside the
+existing one would leave the DOM-reparenting code in place while doubling the
+behavior matrix, which is the opposite of the deletion this note asks for. The
+acceptance criterion for moving Actual’s own surfaces onto the top layer is
+therefore concrete: the change should remove more surface code than it adds.
+
 ## Prefer capabilities over browser generations
 
 New platform features should not automatically raise Actual's Minimal browser floor.
@@ -287,6 +338,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/popover-manual-poc.md

@@ -0,0 +1,248 @@
+# POC: native popover as the surface transport
+
+A record of an experiment, not a plan of record. It exists so the reasoning
+outlives the branch that produced it — including the parts that came out
+negative, which are the ones a future attempt would otherwise repeat.
+
+Question asked: can `popover="manual"` replace the DOM reparenting in
+`surface.js` without changing anything else?
+
+Answer: yes, and the branch demonstrates it. What blocks shipping is not the
+architecture; it is the browser contract. See
+[browser-support](browser-support.md).
+
+## Branch
+
+`poc/popover-manual-surfaces`, four commits on top of `0f4f8b7`:
+
+| SHA       | Step                                              |
+| --------- | ------------------------------------------------- |
+| `bf1e53d` | Pass 1 — manual transport, reparenting removed    |
+| `4d598dd` | Extract the popover test stub, cut to the minimum |
+| `ececcd6` | Pass 2 — keep a runtime scrim, fix its placement  |
+| `27b34f1` | Finish as a transparent migration                 |
+
+## What the transport actually needs
+
+Derived from the branch, not from a compatibility badge. The distinction between
+the two contracts matters: they fail differently, and only the first gates the
+runtime.
+
+```text
+JS requirement (gates the runtime)
+----------------------------------
+popover="manual"
+showPopover()
+hidePopover()
+top-layer promotion + closed-state display:none
+
+CSS enhancement (already @supports-gated, degrades)
+---------------------------------------------------
+:popover-open
+overlay
+transition-behavior: allow-discrete
+@starting-style
+```
+
+The runtime never reads `:popover-open`. It was removed from `isSurfaceOpen()`
+and from the `autoUpdate` guard because a partially-implemented selector engine
+answers `false` rather than throwing, which is a silent wrong answer (see the
+happy-dom finding below). `.is-open` is the single state the runtime writes and
+reads, and the class the CSS keys on.
+
+Two capabilities that are *not* required, which matters because both are newer
+than Popover and would have pushed the floor much higher:
+
+- `overlay` / `allow-discrete` — the exit fade. Gated; without it the exit is
+  instant and correct.
+- `::backdrop` — proved unusable, see below.
+
+## Findings
+
+**happy-dom implements no Popover element API.** Version 20.11 has the invoker
+attributes (`popoverTargetElement`, `popoverTargetAction` on button and input)
+but not `showPopover` / `hidePopover` / `togglePopover`, and
+`matches(":popover-open")` answers `false` rather than throwing. The silent
+false is the dangerous half: reading the pseudo-class in `isSurfaceOpen()` made
+all 647 unit tests see "never open". Resolved by reading `.is-open` only, plus
+two no-op stubs in `tests/helpers/popover-stub.js`. Transport behavior moved to
+the browser layer, which is where it belonged.
+
+**`::backdrop` cannot replace the sheet scrim.** Negative result, measured, and
+the one most likely to be re-attempted. The native backdrop is painted for a
+manual popover, covers the viewport, and does inherit custom properties from
+its originating element — a scoped `--backdrop-fill` on an ancestor of the
+panel resolved into it, which a body-level div cannot do. But the UA sets
+`pointer-events: none` on an open popover's backdrop and it is not overridable
+from author CSS: both `pointer-events: auto` and `pointer-events: auto
+!important` computed as `none`, since a UA `!important` outranks an author one.
+Measured with a real CDP click on the scrim, the element behind it received the
+click and its handler fired. The scrim has two jobs — painting, and absorbing
+the pointer — and the platform only offers the first, so it stays an Actual
+element.
+
+**The scrim's placement, not the scrim, was what pass 1 broke.**
+`menu.before(backdrop)` put it beside a panel that no longer moves, stranding
+it inside the author's container. It goes to the document root instead, which
+reproduces exactly where it landed before. This is the one fragment of
+`getSurfaceRoot()` that survives, and it is not the reparenting the transport
+removed: the scrim is runtime-created, has no author identity, and nothing
+inherited to preserve.
+
+**A surface inside a modal dialog works.** This was the open question, since a
+modal dialog inerts the rest of the document — which is why the old transport
+moved the panel into the dialog. Measured: the panel is promoted above the
+dialog, stays in the dialog subtree and in its own host element, wins the hit
+test, and takes focus.
+
+**`aria-expanded` is computed natively for a `popovertarget` invoker** —
+`expanded: false` closed, `true` open, on the AX tree. Deliberately not
+exploited: the public contract is `aria-controls`, so `popovertarget` would be
+a markup migration for adopters rather than an internal transport detail, and
+`linkedTriggers()` supports several triggers per panel where `popovertarget`
+covers one.
+
+## Measurements
+
+| Measure                   | `master` |             POC |
+| ------------------------- | -------: | --------------: |
+| `surface.js` code lines   |      358 |         **337** |
+| `surface.js` total lines  |      431 |             436 |
+| Transport concepts        |        4 |           **1** |
+| Inherited contexts broken |      3/3 |         **0/3** |
+| Unit tests                |      647 | **650**, 0 fail |
+| Browser tests             |       50 |  **55**, 0 fail |
+| JS full, brotli           |  16.1 KB |     **16.0 KB** |
+| Public contracts changed  |        — |        **none** |
+
+Removed: `mountedSurfaces`, `getSurfaceRoot()`, `mountSurface()`,
+`restoreSurface()`, `disconnectSurface`'s `{ restore }` option, and the
+`[popover]` conflict warning — the runtime is that owner now.
+
+The total line count *grows* by five. The 21 fewer code lines are outweighed by
+added comments. "Remove more than you add" is a signal, not a rule: what leaves
+is a concept — a component no longer has to leave its place in the DOM to be
+painted above the page — plus a defect with no generic repair and three
+transport abstractions.
+
+## Acceptance criterion
+
+> A transport migration may change assertions about transport markers, but must
+> not require changing behavioral assertions.
+
+This is stricter and more useful than "no public API change". The 57
+`hidden → .is-open` edits qualify: they replace observing a mechanism with
+observing the lifecycle that owns it. If a future attempt has to modify an
+assertion about focus, dismissal, positioning or events to make the transport
+pass, it is no longer a transport swap and the claim does not hold.
+
+## Go / no-go: WebKit verification
+
+Every measurement in this note was taken on Chromium — the browser test harness
+hardcodes `backend: "chrome"`. The floor's most notable step is Safari 17, so
+the transport has no measured evidence on the engine the raise actually buys.
+This is the one open technical gate on the migration, and the only item on the
+checklist below that is not already demonstrated.
+
+A permanent WebKit matrix is disproportionate for a decision taken once. One
+manual pass on a real Safari at the chosen floor, recorded here, is enough:
+
+```text
+1. showPopover() / hidePopover() in manual mode
+2. a closed panel is genuinely invisible and unfocusable
+3. the DOM parent is unchanged before, during and after opening
+4. inherited theme, density and custom properties survive opening
+5. a surface inside <dialog open> and inside a modal dialog
+6. reopening during the exit transition
+7. a context menu at pointer coordinates
+8. the sheet scrim covers and intercepts the click
+```
+
+Record the result in this section:
+
+```text
+Verified manually on:
+  Safari __._ / macOS __
+  iOS Safari __._ / iOS __      (if reachable)
+Date: ____-__-__
+Scenarios: _/8 passed
+```
+
+Scenario 5 deserves the most attention. On Chromium the native top layer solved
+cleanly the problem that motivated `getSurfaceRoot()` in the first place — a
+modal dialog inerts the rest of the document — and that result is what makes
+the transport worth making mandatory. Scenario 2 is the second: the old
+transport used `[hidden]`, which `isElementVisible()` reads in its first
+branch, and the migration shifts the guard onto `checkVisibility()` with
+`getClientRects()` behind it. Which branch actually runs depends on what the
+bottom of the new floor implements, and the third has never been exercised.
+
+## Changelog framing for the raise
+
+State what stops working before what it buys, with versions named. Something
+along these lines:
+
+> **JavaScript browser floor raised** to Safari 17+, Firefox 125+ and
+> Chromium 116+. Interactive surfaces now use the native manual Popover
+> transport (`popover`, `showPopover()`, `hidePopover()`) instead of
+> physically reparenting author DOM. This preserves inherited themes, density
+> and application custom properties while leaving Actual's dismissal, focus
+> and positioning contracts unchanged.
+>
+> Browsers below this JavaScript floor no longer receive the supported full
+> Actual runtime. Core HTML/CSS degradation remains governed separately by the
+> Degraded tier.
+
+Not "Popover is now required": that reads as a dependency on the whole API
+family, when the requirement is the four primitives listed above.
+
+## Migration checklist
+
+For the release that raises Minimal. Items 4–7 are scaffolding built for a floor
+that will no longer exist; a gate outliving its reason is silent dead weight, so
+they belong here rather than being found later.
+
+1. Pass the WebKit verification above and record it. This is the go/no-go.
+2. Raise Minimal to the required subset above. The justification is the defect
+   and the transparent migration, not a download count: npm figures conflate
+   CI, bots, caches and the author, and say nothing about the end browser.
+3. Delete the `Intermediate` tier. It is not merely less useful — with a new
+   Minimal above it on all three engines it is arithmetically absorbed, so its
+   features become floor-guaranteed and no information is lost.
+4. Reclassify those features (`color-mix()`, `oklch()/oklab()`, `dvh/svh/lvh`,
+   `scrollbar-gutter`, `scrollbar-width`, `scrollbar-color`) as Minimal
+   baseline and drop their `check-compat` entries.
+5. Remove the `@supports selector(:popover-open)` gates in `flyout.css` and
+   `tooltip.css`.
+6. Remove the two `popover` entries from `check-compat`'s feature table.
+7. Remove the associated `compat-ok:` pragmas, and `hasPragma()` itself if
+   nothing else consumes it.
+8. Move `surface.js` to the manual transport, with no fallback branch.
+9. Drop `test.failing` from the reparenting tests in
+   `tests/browser/surface-inherited-context.test.js`, keeping the assertions.
+10. Update [surface-reparenting](surface-reparenting.md) from a known limitation
+   to resolved.
+
+Steps 8 and 9 are linked but not enforced. The `test.failing` markers guarantee
+that step 8 becomes unavoidable — they turn red as unexpected passes the moment
+the transport changes — but nothing forces step 9. The test file points at the
+note, and the note points back here; that is as far as documentation can close
+the loop.
+
+## What was deliberately left out
+
+Not attempted, and not because it looked hard:
+
+- **`popover="auto"`.** It cannot express `data-flyout-auto-close`, whose
+  default closes on an inside click; native light-dismiss closes on outside
+  clicks only, and `false` is inexpressible altogether. Adopting it would be a
+  behavior change to the component, not a transport swap.
+- **Nested surfaces.** `openSurface()` closes every other open surface in the
+  document; the runtime is strictly flat and the transport change does not
+  alter that. Nesting is a separate feature decision, and the choice between
+  extending Actual's own stack and adopting the native one is functional before
+  it is technical.
+- **`popover="hint"`, interest invokers, CSS anchor positioning.** Watch.
+- **Further deletion for its own sake.** The branch's value is that it changes
+  the transport and nothing else. Broadening it would cost exactly the property
+  that makes it usable as a migration.

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/