actual-css 0.9.2 → 0.10.0

package/dist/actual.js

@@ -1 +0,0 @@
-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 +0,0 @@
-*, *::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; --font-width: 100%; --font-width-dense: 95%; --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); font-stretch: var(--font-width); 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); font-stretch: var(--font-width-dense); } .spacious { --gap: var(--space-50); --density-space: var(--space-50); --control-size: var(--control-size-lg); font-stretch: var(--font-width); } :where( .btn, .input, .textarea, .select, .color, .file, .field, .choice, .choice-card, .input-icon, .floating-field, .otp, .join, .pagination, .tabs, .tab, .flyout ).sm { --control-size: var(--control-size-sm); --control-font-size: var(--font-size-sm); --control-pad-x: var(--font-size-sm); } :where( .btn, .input, .textarea, .select, .color, .file, .field, .choice, .choice-card, .input-icon, .floating-field, .otp, .join, .pagination, .tabs, .tab, .flyout ).lg { --control-size: var(--control-size-lg); --control-font-size: var(--font-size-lg); --control-pad-x: var(--font-size-lg); } @supports (color: color-mix(in oklch, red, white)) { .soft { --ui-bg: color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral))); --ui-border: color-mix( in oklab, var(--surface) var(--soft-border-mix), var(--intent, var(--neutral)) ); --ui-fg: var( --intent-soft-fg, color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix)) ); } .inverted { --ui-hover-bg: color-mix(in oklch, var(--surface-solid) 88%, black); } } :focus { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } @supports selector(:focus-visible) { :focus:not(:focus-visible) { outline: none; } } @media print { :root, [data-theme][data-theme], body { color-scheme: light; background: #fff; color: #000; } h1, h2, h3, h4, h5, h6 { break-after: avoid; } }