actual-css 0.7.0 → 0.9.0

package/dist/actual.js

@@ -1 +1 @@
-var M=new WeakMap,b=new WeakMap;function N(){return{refresh(){},disconnect(){}}}function T(e){return e?.nodeType===1||e?.nodeType===9||e?.nodeType===11}function _(e){let t=new Set,r="";function n(o){try{if(e.querySelector?.(o),e.nodeType===1)e.matches(o);return!0}catch(c){return console.error(`Invalid enhancer selector "${o}"`,c),!1}}function s(){r=[...t].flatMap((o)=>o.selectors).join(",")}function a(o,c){if(c?.nodeType!==1)return;let i=o.instances.get(c);for(let f of o.selectors){if(!c.matches(f))continue;if(i?.has(f))continue;let d;try{d=o.enhancers[f](c)}catch(U){console.error(`Enhancer failed for selector "${f}"`,U);continue}if(!i)i=new Map,o.instances.set(c,i);i.set(f,typeof d==="function"?d:null)}}function u(o,c){let i=o.instances.get(c);if(!i)return;for(let f of i.values())try{f?.()}catch(d){console.error("Enhancer cleanup failed",d)}o.instances.delete(c)}function l(o,c){if(!T(c))return;if(c.nodeType===1)a(o,c);if(o.selectorString)c.querySelectorAll?.(o.selectorString).forEach((i)=>{a(o,i)})}function p(o){if(!T(o)||!r)return;if(o.nodeType===1)for(let c of t)a(c,o);o.querySelectorAll?.(r).forEach((c)=>{for(let i of t)a(i,c)})}function g(){for(let o of t)for(let c of Array.from(o.instances.keys()))if(!c.isConnected||!e.contains(c))u(o,c)}let h=new MutationObserver((o)=>{let c=!1;for(let i of o){for(let f of i.addedNodes)p(f);if(i.removedNodes.length>0)c=!0}if(c)g()});return h.observe(e,{childList:!0,subtree:!0}),{add(o){let c=Object.keys(o).filter(n);if(!c.length)return null;let f={disconnected:!1,enhancers:Object.fromEntries(c.map((d)=>[d,o[d]])),instances:new Map,selectors:c,selectorString:c.join(",")};return t.add(f),s(),l(f,e),f},refresh(o,c){if(o.disconnected)return;l(o,c)},remove(o){if(o.disconnected)return;o.disconnected=!0;for(let c of Array.from(o.instances.keys()))u(o,c);if(t.delete(o),s(),t.size===0)h.disconnect(),M.delete(e)}}}var A=/^[a-z][a-z0-9-]*$/;function O(e){if(!A.test(e))throw TypeError(`Invalid enhancement name: ${e}`);return`[data-enhance~="${e}"]`}function S(e,t,r){if(typeof document>"u")return N();if(O(e),typeof t!=="function")throw TypeError("registerEnhancement() requires a function init.");r??=document.documentElement;let n=b.get(r);if(!n)n=new Map,b.set(r,n);if(n.has(e))throw Error(`Enhancement "${e}" is already registered on this root.`);let s=E({[O(e)]:t},r);return n.set(e,s),{refresh:(a)=>s.refresh(a),disconnect:()=>{if(s.disconnect(),n.get(e)===s)n.delete(e);if(n.size===0)b.delete(r)}}}function R(e){let t=M.get(e);if(!t)t=_(e),M.set(e,t);return t}function E(e,t){if(typeof document>"u")return N();t??=document.documentElement;let r=R(t),n=r.add(e);if(!n)return N();return{refresh:(s)=>r.refresh(n,s),disconnect:()=>{r.remove(n)}}}function j(e){return e.replace(/([a-zA-Z_$][\w$-]*)\s*:|'((?:\\'|[^'])*)'/g,(t,r,n)=>{if(r)return`"${r}":`;return`"${n.replace(/\\'/g,"'").replace(/"/g,"\\\"")}"`})}function v(e){if(e==null||typeof e!=="string")return{};let t=e.trim();if(t==="")return{};let r=t,n;try{n=JSON.parse(r)}catch{let s=j(r);r=s.startsWith("{")?s:`{${s}}`,n=JSON.parse(r)}if(n===null||typeof n!=="object"||Array.isArray(n))throw TypeError("Enhancement config must be an object");return n}var L='script[type="application/json"][data-enhance-modules]',m=new Map,y=new Map,w=new Map,k=(e)=>import(e);function D(e){let t=new URL(e,document.baseURI).href;if(!y.has(t))y.set(t,new Promise((r,n)=>{let s=document.createElement("script");s.src=t,s.onload=r,s.onerror=()=>{y.delete(t),s.remove(),n(Error(`Unable to load script: ${t}`))},document.head.append(s)}));return y.get(t)}function C(e){let t=new URL(e,document.baseURI).href;if(!w.has(t))w.set(t,new Promise((r,n)=>{let s=document.createElement("link");s.rel="stylesheet",s.href=t,s.onload=r,s.onerror=()=>{w.delete(t),s.remove(),n(Error(`Unable to load style: ${t}`))},document.head.append(s)}));return w.get(t)}function I(e,t){return(r)=>{let n=new AbortController,s=r.getAttribute("data-enhance-config"),a=v(s??""),u=(p,g,h={})=>r.dispatchEvent(new CustomEvent(`actual:${e}:${p}`,{bubbles:!0,detail:g,...h})),l;try{l=t(r,{config:a,signal:n.signal,emit:u})}catch(p){throw n.abort(),p}if(l?.then)throw n.abort(),TypeError(`Enhancement "${e}" returned a Promise. connect() must be synchronous; use prepare() for asynchronous setup.`);if(l!==void 0&&typeof l!=="function")throw n.abort(),TypeError(`Enhancement "${e}" must return a cleanup function or undefined.`);return()=>{n.abort(),l?.()}}}function J(e,t){if(typeof t!=="string"||t.trim()==="")throw TypeError(`Enhancement "${e}" must declare a non-empty module URL.`)}function F(e,t){J(e,t);let r=new URL(t,document.baseURI).href,n=m.get(e);if(n){if(n.url!==r)throw Error(`Enhancement "${e}" is already declared from ${n.url} and cannot be replaced by ${r}.`);return n.promise.then(()=>({name:e,status:"skipped"}))}let s=k(r).then(async(a)=>{if(typeof a.default!=="function")throw TypeError(`Enhancement "${e}" must export a default function.`);if(a.prepare!==void 0){if(typeof a.prepare!=="function")throw TypeError(`Enhancement "${e}" exports an invalid prepare().`);await a.prepare({resolve:(u)=>new URL(u,r).href,loadScript:D,loadStyle:C})}return S(e,I(e,a.default)),{name:e,status:"loaded"}}).catch((a)=>{if(m.get(e)?.promise===s)m.delete(e);throw a});return m.set(e,{url:r,promise:s}),s}async function q(e){let t=Object.entries(e),r=await Promise.allSettled(t.map(([s,a])=>F(s,a))),n={names:[],failed:[],skipped:[]};return r.forEach((s,a)=>{let u=t[a][0];if(s.status==="rejected")n.failed.push({name:u,error:s.reason});else if(s.value.status==="skipped")n.skipped.push(u);else n.names.push(u)}),n}function z(e){let t=JSON.parse(e);if(typeof t!=="object"||t===null||Array.isArray(t))throw TypeError("Manifest must be a JSON object.");return Object.entries(t)}async function P(e){let t=z(e.textContent),r=await q(Object.fromEntries(t));for(let n of r.failed)console.error(`Enhancement "${n.name}" failed to load:`,n.error);if(r.failed.length===0)e.remove();return r}function x(){return E({[L]:(e)=>{P(e).catch((t)=>{console.error("Failed to parse enhancement manifest:",t)})}})}x();
+var g=new WeakMap,w=new WeakMap;function b(){return{refresh(){},disconnect(){}}}function N(e){return e?.nodeType===1||e?.nodeType===9||e?.nodeType===11}function A(e){let n=new Set,r="";function t(o){try{if(e.querySelector?.(o),e.nodeType===1)e.matches(o);return!0}catch(s){return console.error(`Invalid enhancer selector "${o}"`,s),!1}}function c(){r=[...n].flatMap((o)=>o.selectors).join(",")}function a(o,s){if(s?.nodeType!==1)return;let f=o.instances.get(s);for(let u of o.selectors){if(!s.matches(u))continue;if(f?.has(u))continue;let p;try{p=o.enhancers[u](s)}catch(v){console.error(`Enhancer failed for selector "${u}"`,v);continue}if(!f)f=new Map,o.instances.set(s,f);f.set(u,typeof p==="function"?p:null)}}function l(o,s){let f=o.instances.get(s);if(!f)return;for(let u of f.values())try{u?.()}catch(p){console.error("Enhancer cleanup failed",p)}o.instances.delete(s)}function i(o,s){if(!N(s))return;if(s.nodeType===1)a(o,s);if(o.selectorString)s.querySelectorAll?.(o.selectorString).forEach((f)=>{a(o,f)})}function d(o){if(!N(o)||!r)return;if(o.nodeType===1)for(let s of n)a(s,o);o.querySelectorAll?.(r).forEach((s)=>{for(let f of n)a(f,s)})}function y(){for(let o of n)for(let s of Array.from(o.instances.keys()))if(!s.isConnected||!e.contains(s))l(o,s)}let h=new MutationObserver((o)=>{let s=!1;for(let f of o){for(let u of f.addedNodes)d(u);if(f.removedNodes.length>0)s=!0}if(s)y()});return{add(o){let s=Object.keys(o).filter(t);if(!s.length)return null;let u={disconnected:!1,enhancers:Object.fromEntries(s.map((p)=>[p,o[p]])),instances:new Map,selectors:s,selectorString:s.join(",")};if(n.add(u),n.size===1)h.observe(e,{childList:!0,subtree:!0});return c(),i(u,e),u},refresh(o,s){if(o.disconnected)return;i(o,s)},remove(o){if(o.disconnected)return;o.disconnected=!0;for(let s of Array.from(o.instances.keys()))l(o,s);if(n.delete(o),c(),n.size===0)h.disconnect(),g.delete(e)}}}var _=/^[a-z][a-z0-9-]*$/;function M(e){if(!_.test(e))throw TypeError(`Invalid enhancement name: ${e}`);return`[data-enhance~="${e}"]`}function T(e,n,r){if(typeof document>"u")return b();if(M(e),typeof n!=="function")throw TypeError("registerEnhancement() requires a function init.");r??=document.documentElement;let t=w.get(r);if(!t)t=new Map,w.set(r,t);if(t.has(e))throw Error(`Enhancement "${e}" is already registered on this root.`);let c=E({[M(e)]:n},r);return t.set(e,c),{refresh:(a)=>c.refresh(a),disconnect:()=>{if(c.disconnect(),t.get(e)===c)t.delete(e);if(t.size===0)w.delete(r)}}}function U(e){let n=g.get(e);if(!n)n=A(e),g.set(e,n);return n}function E(e,n){if(typeof document>"u")return b();n??=document.documentElement;let r=U(n),t=r.add(e);if(!t)return b();return{refresh:(c)=>r.refresh(t,c),disconnect:()=>{r.remove(t)}}}function D(e){return e.replace(/([a-zA-Z_$][\w$-]*)\s*:|'((?:\\'|[^'])*)'/g,(n,r,t)=>{if(r)return`"${r}":`;return`"${t.replace(/\\'/g,"'").replace(/"/g,"\\\"")}"`})}function O(e){if(e==null||typeof e!=="string")return{};let n=e.trim();if(n==="")return{};let r=n,t;try{t=JSON.parse(r)}catch{let c=D(r);r=c.startsWith("{")?c:`{${c}}`,t=JSON.parse(r)}if(t===null||typeof t!=="object"||Array.isArray(t))throw TypeError("Enhancement config must be an object");return t}var R='script[type="application/json"][data-enhance-modules]',m=new Map,L=new Map,j=new Map,C=(e)=>import(e);function S(e,n,r){let t=new URL(e,document.baseURI).href;if(!n.has(t)){let c=new Promise((a,l)=>{let i=document.createElement(r==="script"?"script":"link");if(r==="script")i.src=t;else i.rel="stylesheet",i.href=t;i.onload=a,i.onerror=()=>{i.remove(),l(Error(`Unable to load ${r}: ${t}`))},document.head.append(i)});n.set(t,c),c.catch(()=>{if(n.get(t)===c)n.delete(t)})}return n.get(t)}function k(e){return S(e,L,"script")}function I(e){return S(e,j,"style")}function J(e,n){return(r)=>{let t=new AbortController,c=r.getAttribute("data-enhance-config"),a=O(c??""),l=(d,y,h={})=>r.dispatchEvent(new CustomEvent(`actual:${e}:${d}`,{bubbles:!0,detail:y,...h})),i;try{i=n(r,{config:a,signal:t.signal,emit:l})}catch(d){throw t.abort(),d}if(i?.then)throw t.abort(),TypeError(`Enhancement "${e}" returned a Promise. connect() must be synchronous; use prepare() for asynchronous setup.`);if(i!==void 0&&typeof i!=="function")throw t.abort(),TypeError(`Enhancement "${e}" must return a cleanup function or undefined.`);return()=>{t.abort(),i?.()}}}function q(e,n){if(typeof n!=="string"||n.trim()==="")throw TypeError(`Enhancement "${e}" must declare a non-empty module URL.`)}function z(e,n){q(e,n);let r=new URL(n,document.baseURI).href,t=m.get(e);if(t){if(t.url!==r)throw Error(`Enhancement "${e}" is already declared from ${t.url} and cannot be replaced by ${r}.`);return t.promise.then(()=>({name:e,status:"skipped"}))}let c=C(r).then(async(a)=>{if(typeof a.default!=="function")throw TypeError(`Enhancement "${e}" must export a default function.`);if(a.prepare!==void 0){if(typeof a.prepare!=="function")throw TypeError(`Enhancement "${e}" exports an invalid prepare().`);await a.prepare({resolve:(l)=>new URL(l,r).href,loadScript:k,loadStyle:I})}return T(e,J(e,a.default)),{name:e,status:"loaded"}}).catch((a)=>{if(m.get(e)?.promise===c)m.delete(e);throw a});return m.set(e,{url:r,promise:c}),c}async function F(e){let n=await Promise.allSettled(e.map(([t,c])=>z(t,c))),r={names:[],failed:[],skipped:[]};return n.forEach((t,c)=>{let a=e[c][0];if(t.status==="rejected")r.failed.push({name:a,error:t.reason});else if(t.value.status==="skipped")r.skipped.push(a);else r.names.push(a)}),r}function P(e){let n=JSON.parse(e);if(typeof n!=="object"||n===null||Array.isArray(n))throw TypeError("Manifest must be a JSON object.");return Object.entries(n)}async function W(e){let n=P(e.textContent),r=await F(n);for(let t of r.failed)console.error(`Enhancement "${t.name}" failed to load:`,t.error);if(r.failed.length===0)e.remove();return r}function x(){return E({[R]:(e)=>{W(e).catch((n)=>{console.error("Failed to parse enhancement manifest:",n)})}})}x();

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

package/docs/design-notes/accessibility-decisions.md

@@ -10,6 +10,39 @@ Actual CSS makes the accessible path the default where CSS and small runtime enh
 - Forced-colors support on controls and visual state indicators.
 - DOM tests for enhancer lifecycle, focus, attributes, and keyboard behavior.
 
+## Linters that reject ARIA patterns
+
+Measured on Biome 2.5.6, in HTML and JSX alike.
+
+`a11y/noNoninteractiveElementToInteractiveRole` reports `<menu role="menu">`,
+and its fix removes the role, which dismantles the composite. It is a port of
+`jsx-a11y/no-noninteractive-element-to-interactive-role` that dropped the source
+rule's default allowlist, so every ARIA composite built on a list is reported —
+`menu`, `listbox`, `tablist`, `menubar`, `tree`, `grid` — even though the source
+documents `<ul role="menu">` as valid. Switch the rule off; a per-element
+suppression would sit above every menu in the markup.
+
+`a11y/useSemanticElements` reports `role="group"` on `.join` and
+`.avatar-stack`, suggesting `<fieldset>`. `<fieldset>` groups form controls
+under a `<legend>`; ARIA's `group` is any labelled set of related objects. This
+rule stays on — it correctly catches `<div role="navigation">`,
+`<div role="button">`, `<div role="separator">` — so suppress it on the wrapper
+instead. A wrapper with no label to give should drop the role rather than
+suppress the rule.
+
+Two decisions these findings settled:
+
+- `.join` keeps `role="group"` rather than `role="toolbar"`, which the rule does
+  not report. Toolbar owes arrow-key navigation with a roving tabindex, and
+  claiming the role without the behaviour is worse than the false positive.
+- `.menu-separator` is a plain `<hr>`. The `role="separator"` these docs used to
+  show is implied by the element, and `a11y/noRedundantRoles` was right to
+  reject it. Nothing in the CSS or the runtime read it.
+
+Only the menu container is ever reported: `role="menuitem"` sits on a `<button>`
+or `<a>`, never on the `<li>`, and an interactive element is a legitimate role
+host. Tabs put `role="tablist"` on a `<div>`, so they are unaffected.
+
 ## Author Responsibilities
 
 - Name icon-only buttons.

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

@@ -5,12 +5,11 @@
 The compatibility contract is expressed in browser versions, not ECMAScript
 edition labels. Each tier is defined by what it guarantees.
 
-| Actual tier  | Firefox |    Safari | Chromium | Contract                                       |
-| ------------ | ------: | --------: | -------: | ---------------------------------------------- |
-| Degraded     |     78+ |       14+ |      88+ | Semantic HTML + core CSS; JS unsupported       |
-| **Minimal**  | **98+** | **15.4+** |  **99+** | Full supported Actual experience, including JS |
-| Intermediate |    121+ |       16+ |     106+ | More modern platform enhancements              |
-| Recommended  |    129+ |     17.5+ |     123+ | Target experience                              |
+| Actual tier |  Firefox |  Safari | Chromium | Contract                                       |
+| ----------- | -------: | ------: | -------: | ---------------------------------------------- |
+| Degraded    |      78+ |     14+ |      88+ | Semantic HTML + core CSS; JS unsupported       |
+| **Minimal** | **125+** | **17+** | **116+** | Full supported Actual experience, including JS |
+| Recommended |     129+ |   17.5+ |     123+ | Target experience                              |
 
 - **Degraded** keeps useful HTML and CSS on older browsers. JavaScript is
   explicitly outside the supported contract there.
@@ -19,33 +18,43 @@ edition labels. Each tier is defined by what it guarantees.
   modern platform primitives available across the whole tier and ships no
   legacy compatibility layer or polyfill.
 
+Only the JavaScript floor is expressed by Minimal. CSS degradation is owed to
+Degraded, so a capability being available across Minimal does not make it CSS
+baseline — `check:compat` audits stylesheets against the Degraded floor.
+
 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.
+Minimal sits exactly where the manual Popover transport lands: Chromium 116,
+Firefox 125, Safari 17. That is what the floor buys, and the whole of what the
+runtime requires:
+
+```text
+popover="manual"
+showPopover()
+hidePopover()
+top-layer promotion + closed-state display: none
+```
 
-| 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` |
+`popovertarget`, `popover="auto"` and `:popover-open` arrive on the same
+engines and are guaranteed too, but the runtime uses none of them — it keeps
+`aria-controls` and drives the lifecycle itself. Newer parts of the API
+(`popover="hint"`, interest invokers) are covered by no tier.
 
-"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 tier | Manual Popover transport | Lifecycle owner                              |
+| ----------- | ------------------------ | -------------------------------------------- |
+| Degraded    | no                       | HTML/CSS fallback only                       |
+| Minimal     | yes                      | `surface.js`, `tooltip.js`                   |
+| Recommended | yes                      | native Popover, or `surface.js`/`tooltip.js` |
 
-Actual's presentation classes compose with either lifecycle from Recommended
-up. The runtime itself depends on Popover at no tier.
+Actual's presentation classes compose with either lifecycle. Both runtimes use
+the transport and never the native lifecycle: `popover="auto"` cannot express
+`data-flyout-auto-close`, and it would put the browser's light dismiss in
+competition with the tooltip's own hover and focus policy. See
+[platform-alignment](platform-alignment.md).
 
 ## JavaScript philosophy
 
@@ -60,9 +69,9 @@ JavaScript support below Minimal.
 
 ### Abortable listeners
 
-Abortable event listeners predate the Minimal floor: Firefox 86, Chrome 88,
-and WebKit (early 2021) all shipped the capability before the Safari 15.4
-threshold. ([Bugzilla][1], [Chrome][2], [WebKit][3])
+Abortable event listeners predate the Minimal floor by a wide margin: Firefox
+86, Chrome 88, and WebKit (early 2021). ([Bugzilla][1], [Chrome][2],
+[WebKit][3])
 
 > `addEventListener({ signal })` is a baseline runtime primitive.
 
@@ -72,11 +81,25 @@ that is already native throughout Minimal.
 
 ### Native `<dialog>`
 
-The Minimal floor sits at the point where Safari 15.4 and Firefox 98 ship
-native `<dialog>`, and Chromium already had it. ([WebKit][4])
+Native `<dialog>` predates the floor on every engine: Safari 15.4, Firefox 98,
+and Chromium earlier still. ([WebKit][4])
 
 > Native dialog is assumed by the runtime; no dialog polyfill is shipped.
 
+### The manual Popover transport
+
+The floor is set by this capability. `surface.js` and `tooltip.js` both promote
+their element with `popover="manual"` instead of moving it in the DOM, which is
+what keeps a surface — and an explicit tooltip — inside every scope that reaches
+it by inheritance. See [surface-reparenting](surface-reparenting.md).
+
+> The manual Popover transport is assumed by the runtime; there is no
+> reparenting fallback.
+
+A capability branch was rejected rather than overlooked: the fallback path is
+the defect, so keeping it would leave the bug in place for exactly the browsers
+the branch would have served.
+
 ### Future-direction invariants
 
 1. **Minimal drives JavaScript compatibility; Degraded does not.**
@@ -120,7 +143,7 @@ different notion from an Actual tier.
 | `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               |
+| Popover transport (`manual`)          | Baseline 2025 | none — runtime requirement           |
 | CSS Anchor Positioning                | Future        | JS positioning (`@lekoala/floating`) |
 
 Core layout and visual tokens work on all Baseline 2023 browsers. Features marked
@@ -155,6 +178,15 @@ background: color-mix(in oklch, var(--surface) 88%, transparent);
 backdrop-filter: blur(1rem);
 ```
 
+`@supports` is the simplest machine-readable boundary for a structural
+enhancement, not a preferred shape in itself. Where an unsupported selector
+already drops the enhancement cleanly and the baseline stays functional, a
+documented why-comment (the one the guard audit recognises) or a `PROGRESSIVE`
+ledger entry is just as valid. A wrapper that is behaviorally redundant is a
+simplification candidate: improve `check:compat` — for example, let one
+justification cover a contiguous group of rules — rather than let the wrapper
+become a framework convention.
+
 ### CSS nesting inside @supports
 
 The no-nesting rule protects browsers that predate CSS nesting (Chrome 112, Firefox 117, Safari 16.5). A block already gated behind a later feature can't be reached by any browser that lacks nesting, so the inspector-friendliness argument no longer applies — nest freely inside it. `appearance: base-select` (Chrome 133+) is the current example: everything inside that `@supports` block in `custom-select.css` uses `&`-nesting instead of repeating the `.select:not(...)` selector.

package/docs/design-notes/column-layout.md

@@ -153,11 +153,11 @@ It does **not** guarantee that arbitrary content will remain usable inside a ver
 
 A two-column span in a narrow container may still be too small for its content. That is an application composition problem, not something the primitive should guess how to solve.
 
-## Gap utilities are exact here
+## Gap is not coupled to the track count
 
-`grid.css` documents a pitfall: `.gap-sm` and `.gap-lg` set the `gap` property without updating `--gap`, and the unwrapped `.grid-N` baseline sizes its tracks from `--gap`, so the two disagree and a bare `.grid-4.gap-lg` stops one column short.
+A grid that sizes its tracks from `--gap` couples spacing and density: setting the `gap` property on its own can make the two disagree. Actual removed its `.gap-sm` / `.gap-md` / `.gap-lg` utilities before 0.8 for exactly that reason — a local gap is now a direct `gap` declaration, and `--gap` is reserved for rebinding an inherited rhythm.
 
-`.column-layout` has no such coupling. Its track template is `repeat(12, minmax(0, 1fr))` and never reads `--gap` for sizing, so `gap` and the track count are independent. Every gap utility is exact at every width.
+`.column-layout` never had that coupling. Its track template is `repeat(12, minmax(0, 1fr))` and never reads `--gap` for sizing, so `gap` and the track count are independent at every width.
 
 This is worth stating explicitly because an author who has read the grid page will reasonably assume the opposite.
 

package/docs/design-notes/css-anchor.md

@@ -1,33 +1,87 @@
-# Future Transition: CSS Anchor Positioning
+# CSS anchor positioning
 
-## Context
+Placement stays in JavaScript. This note records why, so the question is not
+reopened on browser-support figures alone.
 
-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.
+## What owns placement today
 
-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.
+`@lekoala/floating` positions every anchored surface. `surface.js` calls
+`reposition()` for an element anchor and `repositionAt()` for a pointer
+coordinate, both inside an `autoUpdate()` loop.
 
-## Migration Path
+The positioner is not only a placement engine. It writes outputs the components
+read as ordinary CSS:
 
-When global browser support for CSS Anchor Positioning reaches a safe threshold (~95%), the JS positioning engine should be deprecated in favor of a CSS-only approach.
+```text
+left / top              the placement itself
+data-placement          resolved side, after flip
+--arrow-x / --arrow-y   arrow offset along the panel edge
+--available-height      space left for the panel
+```
+
+`tooltip.css` draws its arrow from `data-placement` and `--arrow-x/-y`;
+`flyout.css` caps its panel with `--available-height`. Replacing the engine
+means replacing those, not only the coordinates.
 
-### 1. Element-to-Element Anchoring (Tooltips & Flyouts)
+## The blocker is not support
 
-For elements anchored to physical DOM nodes (like a button triggering a flyout), the JS calculation can be fully replaced by CSS:
+Support is the obvious gate and the wrong one. The blocking output is the one
+that is not CSS at all — the positioner's return value:
 
-```css
-.flyout {
-  position: absolute;
-  position-anchor: --trigger-element;
-  top: anchor(bottom);
-  left: anchor(start);
-  
-  /* Replaces the JS flip/shift logic natively */
-  position-try-fallbacks: flip-block, flip-inline;
-}
+```js
+if (!positionSurface(menu)) closeSurface(menu);   // surface.js
 ```
 
-### 2. The Pointer Coordinates Exception (Context Menus)
+`reposition()` returns `false` when positioning cannot be performed: a hidden
+floating element, a missing reference rect, an anchor outside the boundary, or
+a document with no browsing context. `surface.js` runs that check on every
+`autoUpdate` tick, so an anchor that leaves its boundary **closes** the surface.
+
+CSS anchor positioning offers no equivalent signal. `position-try-fallbacks`
+re-places the box and `position-visibility` can hide it, but hiding is not
+closing: no event fires, `.is-open` stays set, focus is never restored, and the
+Escape stack keeps an entry for a panel the user can no longer see.
+
+This is the boundary the manual Popover transport was adopted on, in the other
+direction — a capability takes one responsibility without being handed the
+neighbouring one. See [platform-alignment](platform-alignment.md).
+
+## The pointer-coordinate case
+
+Context menus open at `clientX`/`clientY`, not at a DOM element
+(`context-menu.js` stores the point, `surface.js` passes it to
+`repositionAt()`). Anchor positioning anchors to elements, so this path needs a
+script layer whatever happens to the element-anchored one. Adoption would split
+the positioner in two rather than delete it.
+
+## The one output with a declarative equivalent
+
+`--surface-anchor-width` is measured from the trigger's rect on every
+reposition, solely so a flyout can match its trigger's width. `anchor-size()`
+expresses that relationship directly and would remove both the measurement and
+the property.
+
+It is not free either: the panel would need an `anchor-name` on its trigger and
+a `position-anchor` written at runtime, which is the same plumbing the
+positioner already does. Worth doing only alongside a wider move, not as a
+standalone saving.
+
+## What would unblock the move
+
+One of:
+
+- a script-observable anchor-visibility signal, so the lifecycle keeps its
+  close decision while CSS takes the geometry; or
+- a deliberate contract change — an out-of-view surface hides instead of
+  closing. That is a component decision, not a transport swap, and it has the
+  same shape as the `popover="auto"` rejection in
+  [popover-manual-poc](popover-manual-poc.md). It has been taken for tooltips,
+  which have no focus restoration, event or Escape entry to lose — see
+  [tooltip-coordinate-space](tooltip-coordinate-space.md).
+
+Browser support is a precondition for either, never the trigger on its own.
 
-CSS Anchor Positioning does not cover 100% of our use cases. Context menus (repositionAt) open at dynamic pointer coordinates (clientX/clientY), not relative to a DOM element.
+## Review trigger
 
-Therefore, the JS engine cannot be entirely deleted. A lightweight JavaScript layer will still be required to capture the pointer event and pass the coordinates to the DOM (either by updating CSS variables --x/--y, or using the upcoming JS Virtual Anchor API).
+Revisit when a script-observable anchor-visibility signal appears, or when a
+project need makes hide-instead-of-close the wanted behavior.

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

@@ -47,6 +47,12 @@ and must match `[a-z][a-z0-9-]*`. Order is irrelevant; duplicates are harmless.
 <form data-enhance="validation autosubmit">  <!-- two behaviors -->
 ```
 
+`applyEnhancement()` is an application-owned authoring convenience: it writes
+the same tokens and refreshes their containing registrations. It does not watch
+presentation classes or establish a second discovery contract. Walking the
+scope's ancestors finds lifecycle owners even when the query scope is narrower
+than the registration root, without crossing shadow boundaries.
+
 ## When a token, when a `data-*`
 
 > `data-enhance` is a generic opt-in for when HTML does not already provide an unambiguous one.
@@ -105,10 +111,10 @@ defeating the split.
 
 ## Design decisions recorded
 
-**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.
+**D2 — `selectors.js` drops its 5 discovery entries and keeps 9 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
@@ -128,8 +134,10 @@ working.
 `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.
+**D9 — An orphaned surface is torn down by a reaper observing
+`data-actual-surface`.** `prepareSurface()` writes the marker; the reaper
+closes and forgets a surface once it leaves the document. A `fix:`, not part
+of the contract itself.
 
 ## Token vocabulary
 

package/docs/design-notes/grid.md

@@ -407,7 +407,8 @@ meaning, rather than a stand-in for a coordinate system.
 
 ## Progressive enhancement
 
-Container queries are newer than Actual's Minimal browser baseline.
+Container queries are guaranteed across Minimal, but not across Degraded — and
+Degraded browsers still receive every stylesheet.
 
 Structural grids must therefore have a usable fallback without them.
 
@@ -780,6 +781,5 @@ A modifier introducing a second density ladder becomes defensible only when
 too conservative while wanting identical balanced-collapse behavior. One
 component in one miscalibrated container is not that evidence. A per-component
 threshold would also collide with the established meaning of `.compact` in
-Actual, which is padding density on a component (`.card.compact`,
-`.table.compact`) and never a layout threshold.
-
+Actual: UI density, including tighter local padding on `.card.compact` and
+`.table.compact`, never a layout threshold.

package/docs/design-notes/naming.md

@@ -47,12 +47,17 @@ never about opting in.
 - **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`).
+  (`.overflow-hidden`, `.padding-context`, `.white-space-normal`).
 
 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.
 
+The `.gap-sm` / `.gap-md` / `.gap-lg` scale was removed before 0.8: it set `gap`
+without `--gap`, which can diverge from `.grid-N` track sizing. A local gap is
+now a direct `gap` declaration; `--gap` is reserved for rebinding an inherited
+rhythm.
+
 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

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

@@ -157,7 +157,44 @@ 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.
+declarative CSS positioning offers no equivalent signal. See
+[css-anchor](css-anchor.md) for what else the positioner writes and what would
+unblock the move.
+
+### Top-layer transport must not imply lifecycle ownership
+
+A capability that solves one problem is not an invitation to hand it the
+neighbouring ones. Popover bundles a transport — promotion to the top layer —
+with a lifecycle, and the two are separable: `popover="manual"` supplies the
+transport and nothing else.
+
+That separation is what lets Actual use the native top layer while remaining
+the owner of:
+
+```text
+.is-open
+Escape ordering
+inside / outside dismissal
+focus restoration
+sheet policy
+```
+
+The slide to guard against is "we are using Popover, so we should use its
+lifecycle too". Those are two decisions, taken on different evidence. The
+transport is judged on what it removes; the lifecycle is judged on whether the
+component contract survives it — and for Flyout it does not, because
+`data-flyout-auto-close` defaults to closing on an inside click, which native
+light-dismiss cannot express.
+
+The rule cuts the other way too, and that is where the boundary actually falls:
+a capability is not obliged to take on a responsibility just because it looks
+adjacent. A native `::backdrop` is painted for a manual popover and even
+inherits custom properties from its originating element, but its UA
+`pointer-events: none` is not overridable from author CSS — not with
+`!important` either, since a UA `!important` outranks an author one. So it
+cannot do the scrim's second job, absorbing the pointer, and the scrim stays an
+Actual element. Adopting the transport did not make the platform responsible
+for everything the old transport happened to carry.
 
 ### Ceding the properties a capability is expressed through
 
@@ -184,10 +221,13 @@ This is checkable rather than aspirational: any Actual class that carries a
 
 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.
+existing one would have left the DOM-reparenting code in place while doubling
+the behavior matrix, which is the opposite of the deletion this note asks for.
+That is why the top-layer transport was adopted by raising the floor rather
+than behind a capability branch: the axis was replaced, not added. Counting
+lines was the weaker half of the criterion — the transport removed one concept
+and a defect while the file grew by five lines. See
+[popover-manual-poc](popover-manual-poc.md).
 
 ## Prefer capabilities over browser generations
 
@@ -237,7 +277,13 @@ Actual already has most of the visual building blocks through buttons, actions,
 
 A toolbar may be a useful small pattern, but its keyboard contract should preferably be built on a shared focus primitive rather than implemented independently.
 
-Do not add `.toolbar` merely as another horizontal flex utility.
+Do not add `.toolbar` merely as another horizontal flex utility. If Toolbar is ever added, it is a semantic and keyboard enhancement over existing layout, with no CSS class of its own:
+
+```html
+<div class="cluster" role="toolbar" aria-label="Formatting" data-enhance="toolbar">
+```
+
+`.cluster` owns the layout, the controls keep their own presentation, `role="toolbar"` carries the semantics, and the enhancement supplies only the roving tab stop — which is `connectFocusGroup` almost exactly as it already exists. APG reserves the pattern for groups of at least three controls; below that the grouping earns nothing.
 
 ### Menu elements
 
@@ -483,7 +529,7 @@ If several widgets need the same roving-focus behavior, extract one reusable pri
 
 Consider a small Toolbar pattern only after the shared focus behavior is clear.
 
-Its value should come from semantics and interaction, not from duplicating `.cluster`.
+Its value should come from semantics and interaction, not from duplicating `.cluster`. It is also not a reason to consolidate the focus primitive: `focus-group` is a documented public export with a real internal consumer in `menu`, so it does not need a second one to justify itself. Tabs in particular are not the missing consumer — they navigate *and* activate, sync `aria-selected`, toggle panels, and treat a valid panel as a candidacy requirement, so folding them in would trade little code for a subtle coupling between the focused item and the selected one. Wait for a third consumer to reveal the shared abstraction instead of designing it from two.
 
 ### Switch