@editora/ui-core 0.2.0 → 0.2.2

package/README.md

@@ -541,6 +541,12 @@ argument:
 Apply the theme early, before the first render. To theme one part of the page, call
 `applyTheme(tokens, element)`.
 
+Theme a part of the page with `applyTheme(tokens, element)` (or `ThemeProvider` in `@editora/ui-react`), not by
+setting a few `--ui-color-*` variables yourself. The fills, lines and soft accent colours that components read
+(`--ui-color-fill`, `--ui-color-line`, `--ui-color-accent-fill` and the like) are derived from the whole theme, so
+overriding only `--ui-color-text` and `--ui-color-surface` on an element leaves them at the page theme. If you need
+plain CSS, spread `themeToVariables(tokens)` (below) onto the element instead.
+
 ### Follow the system light/dark setting
 
 ```js
@@ -573,6 +579,8 @@ stay on theme.
 | `--ui-color-surface-elevated`, `--ui-color-info` | raised surface (menus, popovers) and the informational colour |
 | `--ui-color-placeholder` | placeholder text (62% of the text colour, 4.5:1 or better on the field) |
 | `--ui-color-foreground-on-warning` | text on a solid warning fill: dark when the warning colour is light (amber) |
+| `--ui-color-danger-text`, `-success-text`, `-warning-text`, `-info-text`, `-accent-text` | the status and accent hues as text: pulled toward the text colour until they read at 4.5:1 or better on the surface and on their own tint. The plain `--ui-color-danger` and the like are fill and icon colours (about 3-4:1 as text on white) |
+| `--ui-color-danger-solid`, `-success-solid`, `--ui-color-foreground-on-danger`, `-on-success` | a solid fill that white text reads on, and that text colour |
 | `--ui-ring-color`, `--ui-ring-width`, `--ui-ring-offset` | the focus ring |
 | `--ui-control-height-{1..4}`, `--ui-control-font-size-{1..4}`, `--ui-control-padding-inline-{1..4}`, `--ui-control-radius-{1..4}` | the control scale: 24, 32, 40 and 48px (see below) |
 | `--ui-motion-enter-easing`, `--ui-motion-exit-easing` | easing for things that appear and disappear |

package/dist/accordion.cjs.js

@@ -240,7 +240,7 @@
     text-transform: uppercase;
     line-height: 1.2;
     background: color-mix(in srgb, var(--ui-accordion-accent) 14%, transparent);
-    color: color-mix(in srgb, var(--ui-accordion-accent) 45%, var(--ui-color-text-strong, var(--ui-accordion-text)));
+    color: color-mix(in srgb, var(--ui-accordion-accent) 32%, var(--ui-color-text-strong, var(--ui-accordion-text)));
   }
 
   ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-chevron] {

package/dist/accordion.esm.js

@@ -241,7 +241,7 @@ const p = `
     text-transform: uppercase;
     line-height: 1.2;
     background: color-mix(in srgb, var(--ui-accordion-accent) 14%, transparent);
-    color: color-mix(in srgb, var(--ui-accordion-accent) 45%, var(--ui-color-text-strong, var(--ui-accordion-text)));
+    color: color-mix(in srgb, var(--ui-accordion-accent) 32%, var(--ui-color-text-strong, var(--ui-accordion-text)));
   }
 
   ui-accordion[data-ui-accordion-root="true"] [data-ui-accordion-chevron] {

package/dist/alert-dialog.cjs.js

@@ -18,7 +18,10 @@
     --ui-alert-z: 1301;
     --ui-alert-backdrop-z: 1300;
     --ui-alert-focus: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
-    --ui-alert-danger: var(--ui-color-danger, #dc2626);
+    --ui-alert-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
+    /* A solid dialog: the fill, and the text colour that reads on it. */
+    --ui-alert-solid-bg: var(--ui-alert-accent);
+    --ui-alert-on-accent: var(--ui-color-foreground-on-primary, #ffffff);
     --ui-alert-backdrop: var(--base-alert-dialog-backdrop, var(--color-overlay, rgba(2, 6, 23, 0.52)));
     --ui-alert-btn-bg: color-mix(in srgb, var(--ui-alert-bg-base) 90%, var(--ui-color-background, #ffffff) 10%);
     --ui-alert-btn-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
@@ -46,18 +49,23 @@
 
   :host([tone='success']) {
     --ui-alert-accent: var(--ui-color-success, #15803d);
+    --ui-alert-solid-bg: var(--ui-color-success-solid, var(--ui-alert-accent));
+    --ui-alert-on-accent: var(--ui-color-foreground-on-success, #ffffff);
     --ui-alert-confirm-bg: color-mix(in srgb, var(--ui-alert-accent) 76%, #000000);
     --ui-alert-confirm-color: #ffffff;
   }
 
   :host([tone='warning']) {
     --ui-alert-accent: var(--ui-color-warning, #b45309);
+    --ui-alert-on-accent: var(--ui-color-foreground-on-warning, #ffffff);
     --ui-alert-confirm-bg: var(--ui-alert-accent);
     --ui-alert-confirm-color: var(--ui-color-foreground-on-warning, #ffffff);
   }
 
   :host([tone='danger']) {
     --ui-alert-accent: var(--ui-color-danger, #dc2626);
+    --ui-alert-solid-bg: var(--ui-color-danger-solid, var(--ui-alert-accent));
+    --ui-alert-on-accent: var(--ui-color-foreground-on-danger, #ffffff);
     --ui-alert-confirm-bg: color-mix(in srgb, var(--ui-alert-accent) 80%, #000000);
     --ui-alert-confirm-color: #ffffff;
   }
@@ -108,17 +116,17 @@
   }
 
   :host([variant='solid']) {
-    --ui-alert-bg: var(--ui-alert-accent);
+    --ui-alert-bg: var(--ui-alert-solid-bg);
     --ui-alert-border: 1px solid color-mix(in srgb, #000000 16%, transparent);
-    --ui-alert-text: #ffffff;
-    --ui-alert-muted: color-mix(in srgb, #ffffff 98%, transparent);
+    --ui-alert-text: var(--ui-alert-on-accent);
+    --ui-alert-muted: color-mix(in srgb, var(--ui-alert-on-accent) 98%, transparent);
     --ui-alert-btn-bg: color-mix(in srgb, #000000 14%, transparent);
-    --ui-alert-btn-border: color-mix(in srgb, #ffffff 30%, transparent);
+    --ui-alert-btn-border: color-mix(in srgb, var(--ui-alert-on-accent) 30%, transparent);
     --ui-alert-btn-hover: color-mix(in srgb, #000000 22%, transparent);
     --ui-alert-confirm-bg: color-mix(in srgb, #000000 30%, transparent);
-    --ui-alert-confirm-color: #ffffff;
-    --ui-alert-icon-bg: color-mix(in srgb, #ffffff 18%, transparent);
-    --ui-alert-icon-color: #ffffff;
+    --ui-alert-confirm-color: var(--ui-alert-on-accent);
+    --ui-alert-icon-bg: color-mix(in srgb, var(--ui-alert-on-accent) 18%, transparent);
+    --ui-alert-icon-color: var(--ui-alert-on-accent);
   }
 
   :host([elevation='none']) {
@@ -528,17 +536,17 @@
       border: 1px solid CanvasText;
     }
   }
-`,J='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function b(i,t){if(i==null)return t;const e=i.trim().toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}function o(i){return String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function Q(i){return i==="info"||i==="success"||i==="warning"||i==="danger"?i:"neutral"}function X(i){return i==="sm"||i==="1"?"sm":i==="lg"||i==="3"?"lg":"md"}function tt(i){return i==="soft"||i==="outline"||i==="solid"?i:"surface"}function et(i){return i==="none"||i==="high"?i:"low"}function it(i){return i==="none"?"none":"line"}function rt(i,t="var(--base-alert-dialog-radius, var(--ui-radius, 6px))"){if(i==null)return t;const e=i.trim().toLowerCase();return e?e==="full"||e==="pill"?"999px":/^-?\d+(\.\d+)?$/.test(e)?`${e}px`:i:t}const st=new Set(["tone","size","variant","elevation","indicator","radius"]);function ot(i){return i==="success"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10.2 8.3 13.4 15 6.8"></path></svg>':i==="warning"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.6 17 16.4H3L10 3.6Z"></path><path d="M10 8v3.4"></path><circle cx="10" cy="14.1" r="0.9" fill="currentColor" stroke="none"></circle></svg>':i==="danger"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.1"></circle><path d="m7.5 7.5 5 5M12.5 7.5l-5 5"></path></svg>':i==="info"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.1"></circle><path d="M10 13v-3.8"></path><circle cx="10" cy="6.5" r="0.9" fill="currentColor" stroke="none"></circle></svg>':'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M6 10h8"></path><circle cx="10" cy="10" r="7.1"></circle></svg>'}function u(){return typeof window<"u"&&typeof document<"u"}function T(){if(!u())return null;const i=document.activeElement;return i instanceof HTMLElement?i:null}function w(i){return typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>i()):window.setTimeout(i,16)}function p(i){if(i){if(typeof cancelAnimationFrame=="function"){cancelAnimationFrame(i);return}window.clearTimeout(i)}}const c="data-ui-auto-name",l=class l extends Z.ElementBase{constructor(){super(),this._lastActive=null,this._active=!1,this._terminalEmitted=!1,this._closeMeta=null,this._uid=Math.random().toString(36).slice(2,10),this._dialogId="",this._config={},this._inputValue="",this._checked=!1,this._runtimeError="",this._activeHeadless=!1,this._focusInitialFrame=0,this._restoreFocusFrame=0,this._presented=!1,this._finishClose=null,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onInput=this._onInput.bind(this),this._dialogId=this._uid}static get observedAttributes(){return["open","headless","dismissible","close-on-esc","close-on-backdrop","lock-while-loading","role","tone","size","variant","elevation","indicator","radius","state","aria-label","aria-labelledby","aria-describedby","initial-focus","title","description","confirm-text","cancel-text","loading-text","error-message"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.root.addEventListener("input",this._onInput),this._syncFromAttributes(),this._syncVisualTokens(),this._syncOpenState()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this.root.removeEventListener("input",this._onInput),this._focusInitialFrame&&(p(this._focusInitialFrame),this._focusInitialFrame=0),this._restoreFocusFrame&&(p(this._restoreFocusFrame),this._restoreFocusFrame=0),this._active&&!this._terminalEmitted&&this.close("dismiss","unmount"),this._deactivate(),super.disconnectedCallback()}attributeChangedCallback(t,e,r){if(e!==r){if(st.has(t)){this._syncVisualTokens();return}if(t==="headless"){this._syncActiveEnvironment(),this.requestRender();return}if(t==="open"){this._syncOpenState();return}t==="state"&&r!=="error"&&(this._runtimeError=""),this._syncFromAttributes(),this.isConnected&&this.requestRender()}}get open(){return this.hasAttribute("open")}set open(t){t?this.setAttribute("open",""):this.close("dismiss","programmatic")}get headless(){return this.hasAttribute("headless")}set headless(t){t?this.setAttribute("headless",""):this.removeAttribute("headless")}get dismissible(){return b(this.getAttribute("dismissible"),!0)}set dismissible(t){this.setAttribute("dismissible",String(t))}get closeOnEsc(){return b(this.getAttribute("close-on-esc"),this.dismissible)}set closeOnEsc(t){this.setAttribute("close-on-esc",String(t))}get closeOnBackdrop(){return b(this.getAttribute("close-on-backdrop"),this.dismissible)}set closeOnBackdrop(t){this.setAttribute("close-on-backdrop",String(t))}get lockWhileLoading(){return b(this.getAttribute("lock-while-loading"),!0)}set lockWhileLoading(t){this.setAttribute("lock-while-loading",String(t))}get roleType(){return this.getAttribute("role")==="dialog"?"dialog":"alertdialog"}set roleType(t){this.setAttribute("role",t)}get tone(){return Q(this.getAttribute("tone"))}set tone(t){if(t==="neutral"){this.removeAttribute("tone");return}this.setAttribute("tone",t)}get size(){return X(this.getAttribute("size"))}set size(t){if(t==="md"){this.removeAttribute("size");return}this.setAttribute("size",t)}get variant(){return tt(this.getAttribute("variant"))}set variant(t){if(t==="surface"){this.removeAttribute("variant");return}this.setAttribute("variant",t)}get elevation(){return et(this.getAttribute("elevation"))}set elevation(t){if(t==="low"){this.removeAttribute("elevation");return}this.setAttribute("elevation",t)}get indicator(){return it(this.getAttribute("indicator"))}set indicator(t){if(t==="line"){this.removeAttribute("indicator");return}this.setAttribute("indicator",t)}get radius(){return this.getAttribute("radius")||""}set radius(t){if(!t){this.removeAttribute("radius");return}this.setAttribute("radius",t)}get state(){const t=this.getAttribute("state");return t==="loading"||t==="error"?t:"idle"}set state(t){if(t==="idle"){this.removeAttribute("state");return}this.setAttribute("state",t)}get initialFocus(){return this.getAttribute("initial-focus")||this._config.initialFocus||""}set initialFocus(t){if(!t){this.removeAttribute("initial-focus");return}this.setAttribute("initial-focus",t)}get dialogId(){return this._dialogId}set dialogId(t){this._dialogId=t||this._uid,this.requestRender()}get config(){return this._config}set config(t){this._config=t||{},this._config.id&&(this._dialogId=this._config.id),this._config.dismissible!=null&&(this.dismissible=!!this._config.dismissible),this._config.closeOnEsc!=null&&(this.closeOnEsc=!!this._config.closeOnEsc),this._config.closeOnBackdrop!=null&&(this.closeOnBackdrop=!!this._config.closeOnBackdrop),this._config.lockWhileLoading!=null&&(this.lockWhileLoading=!!this._config.lockWhileLoading),this._config.role&&(this.roleType=this._config.role),this._config.tone&&(this.tone=this._config.tone),this._config.size&&(this.size=this._config.size),this._config.variant&&(this.variant=this._config.variant),this._config.elevation&&(this.elevation=this._config.elevation),this._config.indicator&&(this.indicator=this._config.indicator),this._config.radius!=null&&(this.radius=String(this._config.radius)),this._config.ariaLabel&&this.setAttribute("aria-label",this._config.ariaLabel),this._config.ariaLabelledby&&this.setAttribute("aria-labelledby",this._config.ariaLabelledby),this._config.ariaDescribedby&&this.setAttribute("aria-describedby",this._config.ariaDescribedby),this._config.initialFocus&&(this.initialFocus=this._config.initialFocus),this._config.headless!=null&&(this.headless=!!this._config.headless),this._inputValue=this._config.input?.value??this._inputValue,this._checked=this._config.checkbox?.checked??this._checked,this._runtimeError=this._config.errorMessage||"",this._syncVisualTokens(),this.requestRender()}getInputValue(){return this.root.querySelector(".input")?.value??this._inputValue}setInputValue(t){this._inputValue=t;const e=this.root.querySelector(".input");e&&(e.value=t)}getChecked(){return this.root.querySelector(".checkbox-input")?.checked??this._checked}setChecked(t){this._checked=t;const e=this.root.querySelector(".checkbox-input");e&&(e.checked=t)}setError(t){this._runtimeError=t,this.state=t?"error":"idle",this.requestRender()}clearError(){this._runtimeError="",this.state==="error"&&(this.state="idle"),this.requestRender()}close(t="dismiss",e,r){this._terminalEmitted||(this._closeMeta={action:t,source:e,reason:r},this.hasAttribute("open")&&this.removeAttribute("open"),this._syncOpenState())}_syncFromAttributes(){this.hasAttribute("role")||this.setAttribute("role","alertdialog")}_syncVisualTokens(){this.style.setProperty("--ui-alert-radius",rt(this.getAttribute("radius")))}_syncOpenState(){const t=this.hasAttribute("open");if(t&&!this._active){this._activate();return}!t&&this._active&&this._deactivate()}_activate(){this._active=!0,this._activeHeadless=this.headless,this._terminalEmitted=!1,this._closeMeta=null,l._openStack.includes(this)||l._openStack.push(this),this._lastActive=this.headless?null:T(),this.headless||f.acquireBodyScrollLock(),u()&&!this.headless&&document.addEventListener("focusin",this._onFocusIn,!0);const t=this.dialogId||this._uid;this._dispatchWithLegacy("ui-open","open",{id:t}),this.headless||(this._focusInitialFrame&&p(this._focusInitialFrame),this._focusInitialFrame=w(()=>{this._focusInitialFrame=0,this._focusInitial()})),this.requestRender()}_deactivate(){if(!this._active)return;this._active=!1;const t=l._openStack.lastIndexOf(this);if(t>=0&&l._openStack.splice(t,1),u()&&!this._activeHeadless&&document.removeEventListener("focusin",this._onFocusIn,!0),this._activeHeadless||f.releaseBodyScrollLock(),!this._terminalEmitted){const r=this._closeMeta||{action:"dismiss",source:"abort"},s=this.dialogId||this._uid;r.action==="cancel"?this._dispatchWithLegacy("ui-cancel","cancel",{id:s}):r.action==="dismiss"&&this._dispatchWithLegacy("ui-dismiss","dismiss",{id:s,source:r.source||"abort",reason:r.reason}),this._dispatchWithLegacy("ui-close","close",{id:s,action:r.action,source:r.source,reason:r.reason}),this._terminalEmitted=!0,this._closeMeta=null}const e=this._lastActive;this._lastActive=null,e&&!this._activeHeadless&&(this._restoreFocusFrame&&p(this._restoreFocusFrame),this._restoreFocusFrame=w(()=>{this._restoreFocusFrame=0;try{e.focus()}catch{}})),this._activeHeadless=!1,this.requestRender()}_syncActiveEnvironment(){if(this._active&&this.headless!==this._activeHeadless){if(this.headless){u()&&document.removeEventListener("focusin",this._onFocusIn,!0),f.releaseBodyScrollLock(),this._lastActive=null,this._activeHeadless=!0;return}this._lastActive=T(),f.acquireBodyScrollLock(),u()&&document.addEventListener("focusin",this._onFocusIn,!0),this._activeHeadless=!1,this._focusInitialFrame&&p(this._focusInitialFrame),this._focusInitialFrame=w(()=>{this._focusInitialFrame=0,this._focusInitial()})}}_dispatchWithLegacy(t,e,r,s=!1){const a=new CustomEvent(t,{detail:r,bubbles:!0,composed:!0,cancelable:s});this.dispatchEvent(a);const n=new CustomEvent(e,{detail:r,bubbles:!0,composed:!0,cancelable:s});return this.dispatchEvent(n),a}_isTopMost(){if(!this._active)return!1;const t=l._openStack;return t.length>0&&t[t.length-1]===this}_queryPanel(){return this.root.querySelector(".dialog")}_collectFocusable(t){return Array.from(t.querySelectorAll(J)).filter(e=>{if(e.disabled||e.getAttribute("aria-hidden")==="true")return!1;const s=u()?window.getComputedStyle(e):null;return!(s&&(s.display==="none"||s.visibility==="hidden"))})}_focusInitial(){if(!this.open)return;const t=this._queryPanel();if(!t)return;const e=this.initialFocus;if(e){const n=t.querySelector(e);if(n&&typeof n.focus=="function"){n.focus();return}}const r=this._collectFocusable(t),a=r.find(n=>n.hasAttribute("autofocus"))||r[0]||t;!a.hasAttribute("tabindex")&&a===t&&a.setAttribute("tabindex","-1");try{a.focus()}catch{}}_handleTab(t){if(t.key!=="Tab")return;const e=this._queryPanel();if(!e)return;const r=this._collectFocusable(e);if(!r.length){t.preventDefault(),e.focus();return}const s=this.root.activeElement||document.activeElement,a=r[0],n=r[r.length-1];if(t.shiftKey){(s===a||!s||!e.contains(s))&&(t.preventDefault(),n.focus());return}s===n&&(t.preventDefault(),a.focus())}_onFocusIn(t){if(!this.open||!this._isTopMost())return;const e=this._queryPanel();if(!e)return;const r=t.target;(typeof t.composedPath=="function"?t.composedPath():[]).includes(e)||r&&e.contains(r)||this._focusInitial()}_onInput(t){const e=t.target;e&&(e.classList.contains("input")&&(this._inputValue=e.value),e.classList.contains("checkbox-input")&&(this._checked=e.checked),this._dispatchWithLegacy("ui-change","change",{id:this.dialogId||this._uid,inputValue:this._inputValue,checked:this._checked}))}_isInteractionLocked(){return this.state==="loading"&&this.lockWhileLoading}_requestDismiss(t,e){this._isInteractionLocked()||this.close("dismiss",t,e)}_handleConfirm(){const t={id:this.dialogId||this._uid,inputValue:this.getInputValue(),checked:this.getChecked()};this._dispatchWithLegacy("ui-confirm","confirm",t,!0).defaultPrevented||this.close("confirm")}_handleCancel(){this._isInteractionLocked()||this.close("cancel")}_onClick(t){if(!this.open||!this._isTopMost())return;const e=t.target;if(e){if(e.classList.contains("backdrop")&&this.closeOnBackdrop){this._requestDismiss("backdrop");return}if(e.closest(".close")){this._requestDismiss("close-icon");return}if(e.closest(".btn-confirm")){this._handleConfirm();return}e.closest(".btn-cancel")&&this._handleCancel()}}_onKeyDown(t){if(!(!this.open||!this._isTopMost())){if(t.key==="Escape"){if(!this.closeOnEsc)return;t.preventDefault(),t.stopPropagation(),this._requestDismiss("esc");return}this._handleTab(t)}}_syncHostSemantics(t,e="",r=!1){if(!t){this.getAttribute("aria-hidden")!=="true"&&this.setAttribute("aria-hidden","true"),this.hasAttribute(c)&&(this.removeAttribute("aria-label"),this.removeAttribute(c));return}if(this.hasAttribute("aria-hidden")&&this.removeAttribute("aria-hidden"),r){this.hasAttribute(c)&&this.removeAttribute(c);return}this.getAttribute("aria-label")!==e&&this.setAttribute("aria-label",e),this.hasAttribute(c)||this.setAttribute(c,"")}render(){if(!this.open){this._syncHostSemantics(!1);const y=this.root.querySelector(".backdrop");if(this._presented&&y){this._presented=!1,y.removeAttribute("data-instant"),this._finishClose=L.closeOverlay(y,()=>{this._finishClose=null,this.setContent("")});return}if(this._finishClose)return;this.setContent("");return}this._finishClose?.(),this._finishClose=null;const t=this._config.title??this.getAttribute("title")??"",e=this._config.description??this.getAttribute("description")??"",r=this._config.confirmText??this.getAttribute("confirm-text")??"Confirm",s=this._config.cancelText??this.getAttribute("cancel-text")??"Cancel",a=this._config.loadingText??this.getAttribute("loading-text")??"Working...",n=!!this._config.input?.enabled,B=this._config.input?.label||"Value",$=this._config.input?.placeholder||"",q=!!this._config.input?.required,M=!!this._config.checkbox?.enabled,O=this._config.checkbox?.label||"Remember this choice",D=this.state,m=this._runtimeError||this._config.errorMessage||this.getAttribute("error-message")||"",A=`ui-alert-title-${this._uid}`,z=`ui-alert-description-${this._uid}`,F=`ui-alert-error-${this._uid}`,H=!!this.querySelector('[slot="title"]'),V=!!this.querySelector('[slot="description"]'),R=!!this.querySelector('[slot="icon"]'),W=!!this.querySelector('[slot="footer"]'),P=!!this.querySelector('[slot="content"]'),v=H||!!t,x=V||!!e,j=R||v||x,K=this._config.showCancel??this.dismissible,Y=this._config.showClose??this.dismissible,N=this.tone,_=this.hasAttribute(c)?"":this.getAttribute("aria-label")||"",C=this.getAttribute("aria-labelledby")||"",E=this.getAttribute("aria-describedby")||"",k=C||(v?A:""),S=_||(k?"":t||e||"Dialog"),U=(this.querySelector('[slot="title"]')?.textContent||"").replace(/\s+/g," ").trim();this._syncHostSemantics(!0,_||U||t||e||"Dialog",!!_||!!C);const d=[];E?d.push(E):(x&&d.push(z),m&&d.push(F));const h=D==="loading";this.setContent(`
+`,J='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';function b(i,t){if(i==null)return t;const e=i.trim().toLowerCase();return e!=="false"&&e!=="0"&&e!=="off"}function s(i){return String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function Q(i){return i==="info"||i==="success"||i==="warning"||i==="danger"?i:"neutral"}function X(i){return i==="sm"||i==="1"?"sm":i==="lg"||i==="3"?"lg":"md"}function tt(i){return i==="soft"||i==="outline"||i==="solid"?i:"surface"}function et(i){return i==="none"||i==="high"?i:"low"}function it(i){return i==="none"?"none":"line"}function rt(i,t="var(--base-alert-dialog-radius, var(--ui-radius, 6px))"){if(i==null)return t;const e=i.trim().toLowerCase();return e?e==="full"||e==="pill"?"999px":/^-?\d+(\.\d+)?$/.test(e)?`${e}px`:i:t}const at=new Set(["tone","size","variant","elevation","indicator","radius"]);function st(i){return i==="success"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10.2 8.3 13.4 15 6.8"></path></svg>':i==="warning"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.6 17 16.4H3L10 3.6Z"></path><path d="M10 8v3.4"></path><circle cx="10" cy="14.1" r="0.9" fill="currentColor" stroke="none"></circle></svg>':i==="danger"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.1"></circle><path d="m7.5 7.5 5 5M12.5 7.5l-5 5"></path></svg>':i==="info"?'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.1"></circle><path d="M10 13v-3.8"></path><circle cx="10" cy="6.5" r="0.9" fill="currentColor" stroke="none"></circle></svg>':'<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M6 10h8"></path><circle cx="10" cy="10" r="7.1"></circle></svg>'}function u(){return typeof window<"u"&&typeof document<"u"}function T(){if(!u())return null;const i=document.activeElement;return i instanceof HTMLElement?i:null}function w(i){return typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>i()):window.setTimeout(i,16)}function p(i){if(i){if(typeof cancelAnimationFrame=="function"){cancelAnimationFrame(i);return}window.clearTimeout(i)}}const c="data-ui-auto-name",l=class l extends Z.ElementBase{constructor(){super(),this._lastActive=null,this._active=!1,this._terminalEmitted=!1,this._closeMeta=null,this._uid=Math.random().toString(36).slice(2,10),this._dialogId="",this._config={},this._inputValue="",this._checked=!1,this._runtimeError="",this._activeHeadless=!1,this._focusInitialFrame=0,this._restoreFocusFrame=0,this._presented=!1,this._finishClose=null,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onInput=this._onInput.bind(this),this._dialogId=this._uid}static get observedAttributes(){return["open","headless","dismissible","close-on-esc","close-on-backdrop","lock-while-loading","role","tone","size","variant","elevation","indicator","radius","state","aria-label","aria-labelledby","aria-describedby","initial-focus","title","description","confirm-text","cancel-text","loading-text","error-message"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.root.addEventListener("input",this._onInput),this._syncFromAttributes(),this._syncVisualTokens(),this._syncOpenState()}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),this.root.removeEventListener("input",this._onInput),this._focusInitialFrame&&(p(this._focusInitialFrame),this._focusInitialFrame=0),this._restoreFocusFrame&&(p(this._restoreFocusFrame),this._restoreFocusFrame=0),this._active&&!this._terminalEmitted&&this.close("dismiss","unmount"),this._deactivate(),super.disconnectedCallback()}attributeChangedCallback(t,e,r){if(e!==r){if(at.has(t)){this._syncVisualTokens();return}if(t==="headless"){this._syncActiveEnvironment(),this.requestRender();return}if(t==="open"){this._syncOpenState();return}t==="state"&&r!=="error"&&(this._runtimeError=""),this._syncFromAttributes(),this.isConnected&&this.requestRender()}}get open(){return this.hasAttribute("open")}set open(t){t?this.setAttribute("open",""):this.close("dismiss","programmatic")}get headless(){return this.hasAttribute("headless")}set headless(t){t?this.setAttribute("headless",""):this.removeAttribute("headless")}get dismissible(){return b(this.getAttribute("dismissible"),!0)}set dismissible(t){this.setAttribute("dismissible",String(t))}get closeOnEsc(){return b(this.getAttribute("close-on-esc"),this.dismissible)}set closeOnEsc(t){this.setAttribute("close-on-esc",String(t))}get closeOnBackdrop(){return b(this.getAttribute("close-on-backdrop"),this.dismissible)}set closeOnBackdrop(t){this.setAttribute("close-on-backdrop",String(t))}get lockWhileLoading(){return b(this.getAttribute("lock-while-loading"),!0)}set lockWhileLoading(t){this.setAttribute("lock-while-loading",String(t))}get roleType(){return this.getAttribute("role")==="dialog"?"dialog":"alertdialog"}set roleType(t){this.setAttribute("role",t)}get tone(){return Q(this.getAttribute("tone"))}set tone(t){if(t==="neutral"){this.removeAttribute("tone");return}this.setAttribute("tone",t)}get size(){return X(this.getAttribute("size"))}set size(t){if(t==="md"){this.removeAttribute("size");return}this.setAttribute("size",t)}get variant(){return tt(this.getAttribute("variant"))}set variant(t){if(t==="surface"){this.removeAttribute("variant");return}this.setAttribute("variant",t)}get elevation(){return et(this.getAttribute("elevation"))}set elevation(t){if(t==="low"){this.removeAttribute("elevation");return}this.setAttribute("elevation",t)}get indicator(){return it(this.getAttribute("indicator"))}set indicator(t){if(t==="line"){this.removeAttribute("indicator");return}this.setAttribute("indicator",t)}get radius(){return this.getAttribute("radius")||""}set radius(t){if(!t){this.removeAttribute("radius");return}this.setAttribute("radius",t)}get state(){const t=this.getAttribute("state");return t==="loading"||t==="error"?t:"idle"}set state(t){if(t==="idle"){this.removeAttribute("state");return}this.setAttribute("state",t)}get initialFocus(){return this.getAttribute("initial-focus")||this._config.initialFocus||""}set initialFocus(t){if(!t){this.removeAttribute("initial-focus");return}this.setAttribute("initial-focus",t)}get dialogId(){return this._dialogId}set dialogId(t){this._dialogId=t||this._uid,this.requestRender()}get config(){return this._config}set config(t){this._config=t||{},this._config.id&&(this._dialogId=this._config.id),this._config.dismissible!=null&&(this.dismissible=!!this._config.dismissible),this._config.closeOnEsc!=null&&(this.closeOnEsc=!!this._config.closeOnEsc),this._config.closeOnBackdrop!=null&&(this.closeOnBackdrop=!!this._config.closeOnBackdrop),this._config.lockWhileLoading!=null&&(this.lockWhileLoading=!!this._config.lockWhileLoading),this._config.role&&(this.roleType=this._config.role),this._config.tone&&(this.tone=this._config.tone),this._config.size&&(this.size=this._config.size),this._config.variant&&(this.variant=this._config.variant),this._config.elevation&&(this.elevation=this._config.elevation),this._config.indicator&&(this.indicator=this._config.indicator),this._config.radius!=null&&(this.radius=String(this._config.radius)),this._config.ariaLabel&&this.setAttribute("aria-label",this._config.ariaLabel),this._config.ariaLabelledby&&this.setAttribute("aria-labelledby",this._config.ariaLabelledby),this._config.ariaDescribedby&&this.setAttribute("aria-describedby",this._config.ariaDescribedby),this._config.initialFocus&&(this.initialFocus=this._config.initialFocus),this._config.headless!=null&&(this.headless=!!this._config.headless),this._inputValue=this._config.input?.value??this._inputValue,this._checked=this._config.checkbox?.checked??this._checked,this._runtimeError=this._config.errorMessage||"",this._syncVisualTokens(),this.requestRender()}getInputValue(){return this.root.querySelector(".input")?.value??this._inputValue}setInputValue(t){this._inputValue=t;const e=this.root.querySelector(".input");e&&(e.value=t)}getChecked(){return this.root.querySelector(".checkbox-input")?.checked??this._checked}setChecked(t){this._checked=t;const e=this.root.querySelector(".checkbox-input");e&&(e.checked=t)}setError(t){this._runtimeError=t,this.state=t?"error":"idle",this.requestRender()}clearError(){this._runtimeError="",this.state==="error"&&(this.state="idle"),this.requestRender()}close(t="dismiss",e,r){this._terminalEmitted||(this._closeMeta={action:t,source:e,reason:r},this.hasAttribute("open")&&this.removeAttribute("open"),this._syncOpenState())}_syncFromAttributes(){this.hasAttribute("role")||this.setAttribute("role","alertdialog")}_syncVisualTokens(){this.style.setProperty("--ui-alert-radius",rt(this.getAttribute("radius")))}_syncOpenState(){const t=this.hasAttribute("open");if(t&&!this._active){this._activate();return}!t&&this._active&&this._deactivate()}_activate(){this._active=!0,this._activeHeadless=this.headless,this._terminalEmitted=!1,this._closeMeta=null,l._openStack.includes(this)||l._openStack.push(this),this._lastActive=this.headless?null:T(),this.headless||f.acquireBodyScrollLock(),u()&&!this.headless&&document.addEventListener("focusin",this._onFocusIn,!0);const t=this.dialogId||this._uid;this._dispatchWithLegacy("ui-open","open",{id:t}),this.headless||(this._focusInitialFrame&&p(this._focusInitialFrame),this._focusInitialFrame=w(()=>{this._focusInitialFrame=0,this._focusInitial()})),this.requestRender()}_deactivate(){if(!this._active)return;this._active=!1;const t=l._openStack.lastIndexOf(this);if(t>=0&&l._openStack.splice(t,1),u()&&!this._activeHeadless&&document.removeEventListener("focusin",this._onFocusIn,!0),this._activeHeadless||f.releaseBodyScrollLock(),!this._terminalEmitted){const r=this._closeMeta||{action:"dismiss",source:"abort"},a=this.dialogId||this._uid;r.action==="cancel"?this._dispatchWithLegacy("ui-cancel","cancel",{id:a}):r.action==="dismiss"&&this._dispatchWithLegacy("ui-dismiss","dismiss",{id:a,source:r.source||"abort",reason:r.reason}),this._dispatchWithLegacy("ui-close","close",{id:a,action:r.action,source:r.source,reason:r.reason}),this._terminalEmitted=!0,this._closeMeta=null}const e=this._lastActive;this._lastActive=null,e&&!this._activeHeadless&&(this._restoreFocusFrame&&p(this._restoreFocusFrame),this._restoreFocusFrame=w(()=>{this._restoreFocusFrame=0;try{e.focus()}catch{}})),this._activeHeadless=!1,this.requestRender()}_syncActiveEnvironment(){if(this._active&&this.headless!==this._activeHeadless){if(this.headless){u()&&document.removeEventListener("focusin",this._onFocusIn,!0),f.releaseBodyScrollLock(),this._lastActive=null,this._activeHeadless=!0;return}this._lastActive=T(),f.acquireBodyScrollLock(),u()&&document.addEventListener("focusin",this._onFocusIn,!0),this._activeHeadless=!1,this._focusInitialFrame&&p(this._focusInitialFrame),this._focusInitialFrame=w(()=>{this._focusInitialFrame=0,this._focusInitial()})}}_dispatchWithLegacy(t,e,r,a=!1){const o=new CustomEvent(t,{detail:r,bubbles:!0,composed:!0,cancelable:a});this.dispatchEvent(o);const n=new CustomEvent(e,{detail:r,bubbles:!0,composed:!0,cancelable:a});return this.dispatchEvent(n),o}_isTopMost(){if(!this._active)return!1;const t=l._openStack;return t.length>0&&t[t.length-1]===this}_queryPanel(){return this.root.querySelector(".dialog")}_collectFocusable(t){return Array.from(t.querySelectorAll(J)).filter(e=>{if(e.disabled||e.getAttribute("aria-hidden")==="true")return!1;const a=u()?window.getComputedStyle(e):null;return!(a&&(a.display==="none"||a.visibility==="hidden"))})}_focusInitial(){if(!this.open)return;const t=this._queryPanel();if(!t)return;const e=this.initialFocus;if(e){const n=t.querySelector(e);if(n&&typeof n.focus=="function"){n.focus();return}}const r=this._collectFocusable(t),o=r.find(n=>n.hasAttribute("autofocus"))||r[0]||t;!o.hasAttribute("tabindex")&&o===t&&o.setAttribute("tabindex","-1");try{o.focus()}catch{}}_handleTab(t){if(t.key!=="Tab")return;const e=this._queryPanel();if(!e)return;const r=this._collectFocusable(e);if(!r.length){t.preventDefault(),e.focus();return}const a=this.root.activeElement||document.activeElement,o=r[0],n=r[r.length-1];if(t.shiftKey){(a===o||!a||!e.contains(a))&&(t.preventDefault(),n.focus());return}a===n&&(t.preventDefault(),o.focus())}_onFocusIn(t){if(!this.open||!this._isTopMost())return;const e=this._queryPanel();if(!e)return;const r=t.target;(typeof t.composedPath=="function"?t.composedPath():[]).includes(e)||r&&e.contains(r)||this._focusInitial()}_onInput(t){const e=t.target;e&&(e.classList.contains("input")&&(this._inputValue=e.value),e.classList.contains("checkbox-input")&&(this._checked=e.checked),this._dispatchWithLegacy("ui-change","change",{id:this.dialogId||this._uid,inputValue:this._inputValue,checked:this._checked}))}_isInteractionLocked(){return this.state==="loading"&&this.lockWhileLoading}_requestDismiss(t,e){this._isInteractionLocked()||this.close("dismiss",t,e)}_handleConfirm(){const t={id:this.dialogId||this._uid,inputValue:this.getInputValue(),checked:this.getChecked()};this._dispatchWithLegacy("ui-confirm","confirm",t,!0).defaultPrevented||this.close("confirm")}_handleCancel(){this._isInteractionLocked()||this.close("cancel")}_onClick(t){if(!this.open||!this._isTopMost())return;const e=t.target;if(e){if(e.classList.contains("backdrop")&&this.closeOnBackdrop){this._requestDismiss("backdrop");return}if(e.closest(".close")){this._requestDismiss("close-icon");return}if(e.closest(".btn-confirm")){this._handleConfirm();return}e.closest(".btn-cancel")&&this._handleCancel()}}_onKeyDown(t){if(!(!this.open||!this._isTopMost())){if(t.key==="Escape"){if(!this.closeOnEsc)return;t.preventDefault(),t.stopPropagation(),this._requestDismiss("esc");return}this._handleTab(t)}}_syncHostSemantics(t,e="",r=!1){if(!t){this.getAttribute("aria-hidden")!=="true"&&this.setAttribute("aria-hidden","true"),this.hasAttribute(c)&&(this.removeAttribute("aria-label"),this.removeAttribute(c));return}if(this.hasAttribute("aria-hidden")&&this.removeAttribute("aria-hidden"),r){this.hasAttribute(c)&&this.removeAttribute(c);return}this.getAttribute("aria-label")!==e&&this.setAttribute("aria-label",e),this.hasAttribute(c)||this.setAttribute(c,"")}render(){if(!this.open){this._syncHostSemantics(!1);const y=this.root.querySelector(".backdrop");if(this._presented&&y){this._presented=!1,y.removeAttribute("data-instant"),this._finishClose=L.closeOverlay(y,()=>{this._finishClose=null,this.setContent("")});return}if(this._finishClose)return;this.setContent("");return}this._finishClose?.(),this._finishClose=null;const t=this._config.title??this.getAttribute("title")??"",e=this._config.description??this.getAttribute("description")??"",r=this._config.confirmText??this.getAttribute("confirm-text")??"Confirm",a=this._config.cancelText??this.getAttribute("cancel-text")??"Cancel",o=this._config.loadingText??this.getAttribute("loading-text")??"Working...",n=!!this._config.input?.enabled,B=this._config.input?.label||"Value",$=this._config.input?.placeholder||"",q=!!this._config.input?.required,M=!!this._config.checkbox?.enabled,O=this._config.checkbox?.label||"Remember this choice",D=this.state,m=this._runtimeError||this._config.errorMessage||this.getAttribute("error-message")||"",A=`ui-alert-title-${this._uid}`,z=`ui-alert-description-${this._uid}`,F=`ui-alert-error-${this._uid}`,H=!!this.querySelector('[slot="title"]'),V=!!this.querySelector('[slot="description"]'),R=!!this.querySelector('[slot="icon"]'),W=!!this.querySelector('[slot="footer"]'),P=!!this.querySelector('[slot="content"]'),v=H||!!t,x=V||!!e,j=R||v||x,K=this._config.showCancel??this.dismissible,Y=this._config.showClose??this.dismissible,N=this.tone,_=this.hasAttribute(c)?"":this.getAttribute("aria-label")||"",C=this.getAttribute("aria-labelledby")||"",E=this.getAttribute("aria-describedby")||"",k=C||(v?A:""),S=_||(k?"":t||e||"Dialog"),U=(this.querySelector('[slot="title"]')?.textContent||"").replace(/\s+/g," ").trim();this._syncHostSemantics(!0,_||U||t||e||"Dialog",!!_||!!C);const d=[];E?d.push(E):(x&&d.push(z),m&&d.push(F));const h=D==="loading";this.setContent(`
       <style>${G}</style>
       <div class="backdrop" part="backdrop" role="presentation" data-open="${String(this.open)}" data-state="open" ${this._presented?"data-instant":""}>
         <section
           class="dialog"
           part="dialog"
-          role="${o(this.roleType)}"
+          role="${s(this.roleType)}"
           aria-modal="true"
-          ${S?`aria-label="${o(S)}"`:""}
-          ${k?`aria-labelledby="${o(k)}"`:""}
-          ${d.length?`aria-describedby="${o(d.join(" "))}"`:""}
+          ${S?`aria-label="${s(S)}"`:""}
+          ${k?`aria-labelledby="${s(k)}"`:""}
+          ${d.length?`aria-describedby="${s(d.join(" "))}"`:""}
           tabindex="-1"
         >
           ${Y?`<button class="close" part="close" aria-label="Close dialog">
@@ -551,12 +559,12 @@
                 <div class="header-main">
                   <span class="icon-wrap" part="icon-wrap" aria-hidden="true">
                     <span class="icon" part="icon">
-                      <slot name="icon">${ot(N)}</slot>
+                      <slot name="icon">${st(N)}</slot>
                     </span>
                   </span>
                   <div class="heading">
-                    ${v?`<h2 id="${A}" class="title" part="title"><slot name="title">${o(t)}</slot></h2>`:""}
-                    ${x?`<p id="${z}" class="description" part="description"><slot name="description">${o(e)}</slot></p>`:""}
+                    ${v?`<h2 id="${A}" class="title" part="title"><slot name="title">${s(t)}</slot></h2>`:""}
+                    ${x?`<p id="${z}" class="description" part="description"><slot name="description">${s(e)}</slot></p>`:""}
                   </div>
                 </div>
               </header>`:""}
@@ -565,13 +573,13 @@
             ${P?'<slot name="content"></slot>':"<slot></slot>"}
 
             ${n?`<label class="input-wrap">
-                  <span class="label">${o(B)}</span>
+                  <span class="label">${s(B)}</span>
                   <input
                     class="input"
                     part="input"
                     type="text"
-                    value="${o(this.getInputValue())}"
-                    placeholder="${o($)}"
+                    value="${s(this.getInputValue())}"
+                    placeholder="${s($)}"
                     ${q?"required":""}
                     ${h?"disabled":""}
                   />
@@ -580,18 +588,18 @@
             ${M?`<label class="checkbox" part="checkbox">
                   <span class="checkbox-line">
                     <input class="checkbox-input" type="checkbox" ${this.getChecked()?"checked":""} ${h?"disabled":""} />
-                    <span>${o(O)}</span>
+                    <span>${s(O)}</span>
                   </span>
                 </label>`:""}
           </div>
 
-          <div class="error" id="${F}" part="error" aria-live="polite" data-empty="${String(!m)}">${o(m)}</div>
+          <div class="error" id="${F}" part="error" aria-live="polite" data-empty="${String(!m)}">${s(m)}</div>
 
           <footer class="footer" part="footer">
-            ${h?`<span class="loading"><span class="spinner" aria-hidden="true"></span><span>${o(a)}</span></span>`:'<span aria-hidden="true"></span>'}
+            ${h?`<span class="loading"><span class="spinner" aria-hidden="true"></span><span>${s(o)}</span></span>`:'<span aria-hidden="true"></span>'}
 
-            ${W?'<slot name="footer"></slot>':`${K?`<button class="btn btn-cancel" part="cancel" type="button" ${h?"disabled":""}>${o(s)}</button>`:""}
-                 <button class="btn btn-confirm" part="confirm" type="button" ${h?"disabled":""}>${o(r)}</button>`}
+            ${W?'<slot name="footer"></slot>':`${K?`<button class="btn btn-cancel" part="cancel" type="button" ${h?"disabled":""}>${s(a)}</button>`:""}
+                 <button class="btn btn-confirm" part="confirm" type="button" ${h?"disabled":""}>${s(r)}</button>`}
           </footer>
         </section>
       </div>

package/dist/alert-dialog.esm.js

@@ -21,7 +21,10 @@ const Q = `
     --ui-alert-z: 1301;
     --ui-alert-backdrop-z: 1300;
     --ui-alert-focus: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
-    --ui-alert-danger: var(--ui-color-danger, #dc2626);
+    --ui-alert-danger: var(--ui-color-danger-text, var(--ui-color-danger, #dc2626));
+    /* A solid dialog: the fill, and the text colour that reads on it. */
+    --ui-alert-solid-bg: var(--ui-alert-accent);
+    --ui-alert-on-accent: var(--ui-color-foreground-on-primary, #ffffff);
     --ui-alert-backdrop: var(--base-alert-dialog-backdrop, var(--color-overlay, rgba(2, 6, 23, 0.52)));
     --ui-alert-btn-bg: color-mix(in srgb, var(--ui-alert-bg-base) 90%, var(--ui-color-background, #ffffff) 10%);
     --ui-alert-btn-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
@@ -49,18 +52,23 @@ const Q = `
 
   :host([tone='success']) {
     --ui-alert-accent: var(--ui-color-success, #15803d);
+    --ui-alert-solid-bg: var(--ui-color-success-solid, var(--ui-alert-accent));
+    --ui-alert-on-accent: var(--ui-color-foreground-on-success, #ffffff);
     --ui-alert-confirm-bg: color-mix(in srgb, var(--ui-alert-accent) 76%, #000000);
     --ui-alert-confirm-color: #ffffff;
   }
 
   :host([tone='warning']) {
     --ui-alert-accent: var(--ui-color-warning, #b45309);
+    --ui-alert-on-accent: var(--ui-color-foreground-on-warning, #ffffff);
     --ui-alert-confirm-bg: var(--ui-alert-accent);
     --ui-alert-confirm-color: var(--ui-color-foreground-on-warning, #ffffff);
   }
 
   :host([tone='danger']) {
     --ui-alert-accent: var(--ui-color-danger, #dc2626);
+    --ui-alert-solid-bg: var(--ui-color-danger-solid, var(--ui-alert-accent));
+    --ui-alert-on-accent: var(--ui-color-foreground-on-danger, #ffffff);
     --ui-alert-confirm-bg: color-mix(in srgb, var(--ui-alert-accent) 80%, #000000);
     --ui-alert-confirm-color: #ffffff;
   }
@@ -111,17 +119,17 @@ const Q = `
   }
 
   :host([variant='solid']) {
-    --ui-alert-bg: var(--ui-alert-accent);
+    --ui-alert-bg: var(--ui-alert-solid-bg);
     --ui-alert-border: 1px solid color-mix(in srgb, #000000 16%, transparent);
-    --ui-alert-text: #ffffff;
-    --ui-alert-muted: color-mix(in srgb, #ffffff 98%, transparent);
+    --ui-alert-text: var(--ui-alert-on-accent);
+    --ui-alert-muted: color-mix(in srgb, var(--ui-alert-on-accent) 98%, transparent);
     --ui-alert-btn-bg: color-mix(in srgb, #000000 14%, transparent);
-    --ui-alert-btn-border: color-mix(in srgb, #ffffff 30%, transparent);
+    --ui-alert-btn-border: color-mix(in srgb, var(--ui-alert-on-accent) 30%, transparent);
     --ui-alert-btn-hover: color-mix(in srgb, #000000 22%, transparent);
     --ui-alert-confirm-bg: color-mix(in srgb, #000000 30%, transparent);
-    --ui-alert-confirm-color: #ffffff;
-    --ui-alert-icon-bg: color-mix(in srgb, #ffffff 18%, transparent);
-    --ui-alert-icon-color: #ffffff;
+    --ui-alert-confirm-color: var(--ui-alert-on-accent);
+    --ui-alert-icon-bg: color-mix(in srgb, var(--ui-alert-on-accent) 18%, transparent);
+    --ui-alert-icon-color: var(--ui-alert-on-accent);
   }
 
   :host([elevation='none']) {
@@ -537,7 +545,7 @@ function f(i, t) {
   const e = i.trim().toLowerCase();
   return e !== "false" && e !== "0" && e !== "off";
 }
-function a(i) {
+function s(i) {
   return String(i).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function tt(i) {
@@ -552,10 +560,10 @@ function it(i) {
 function rt(i) {
   return i === "none" || i === "high" ? i : "low";
 }
-function st(i) {
+function at(i) {
   return i === "none" ? "none" : "line";
 }
-function at(i, t = "var(--base-alert-dialog-radius, var(--ui-radius, 6px))") {
+function st(i, t = "var(--base-alert-dialog-radius, var(--ui-radius, 6px))") {
   if (i == null) return t;
   const e = i.trim().toLowerCase();
   return e ? e === "full" || e === "pill" ? "999px" : /^-?\d+(\.\d+)?$/.test(e) ? `${e}px` : i : t;
@@ -722,7 +730,7 @@ const c = "data-ui-auto-name", l = class l extends Z {
     this.setAttribute("elevation", t);
   }
   get indicator() {
-    return st(this.getAttribute("indicator"));
+    return at(this.getAttribute("indicator"));
   }
   set indicator(t) {
     if (t === "line") {
@@ -803,7 +811,7 @@ const c = "data-ui-auto-name", l = class l extends Z {
     this.hasAttribute("role") || this.setAttribute("role", "alertdialog");
   }
   _syncVisualTokens() {
-    this.style.setProperty("--ui-alert-radius", at(this.getAttribute("radius")));
+    this.style.setProperty("--ui-alert-radius", st(this.getAttribute("radius")));
   }
   _syncOpenState() {
     const t = this.hasAttribute("open");
@@ -825,13 +833,13 @@ const c = "data-ui-auto-name", l = class l extends Z {
     this._active = !1;
     const t = l._openStack.lastIndexOf(this);
     if (t >= 0 && l._openStack.splice(t, 1), u() && !this._activeHeadless && document.removeEventListener("focusin", this._onFocusIn, !0), this._activeHeadless || L(), !this._terminalEmitted) {
-      const r = this._closeMeta || { action: "dismiss", source: "abort" }, s = this.dialogId || this._uid;
-      r.action === "cancel" ? this._dispatchWithLegacy("ui-cancel", "cancel", { id: s }) : r.action === "dismiss" && this._dispatchWithLegacy("ui-dismiss", "dismiss", {
-        id: s,
+      const r = this._closeMeta || { action: "dismiss", source: "abort" }, a = this.dialogId || this._uid;
+      r.action === "cancel" ? this._dispatchWithLegacy("ui-cancel", "cancel", { id: a }) : r.action === "dismiss" && this._dispatchWithLegacy("ui-dismiss", "dismiss", {
+        id: a,
         source: r.source || "abort",
         reason: r.reason
       }), this._dispatchWithLegacy("ui-close", "close", {
-        id: s,
+        id: a,
         action: r.action,
         source: r.source,
         reason: r.reason
@@ -857,19 +865,19 @@ const c = "data-ui-auto-name", l = class l extends Z {
       });
     }
   }
-  _dispatchWithLegacy(t, e, r, s = !1) {
+  _dispatchWithLegacy(t, e, r, a = !1) {
     const o = new CustomEvent(t, {
       detail: r,
       bubbles: !0,
       composed: !0,
-      cancelable: s
+      cancelable: a
     });
     this.dispatchEvent(o);
     const n = new CustomEvent(e, {
       detail: r,
       bubbles: !0,
       composed: !0,
-      cancelable: s
+      cancelable: a
     });
     return this.dispatchEvent(n), o;
   }
@@ -884,8 +892,8 @@ const c = "data-ui-auto-name", l = class l extends Z {
   _collectFocusable(t) {
     return Array.from(t.querySelectorAll(X)).filter((e) => {
       if (e.disabled || e.getAttribute("aria-hidden") === "true") return !1;
-      const s = u() ? window.getComputedStyle(e) : null;
-      return !(s && (s.display === "none" || s.visibility === "hidden"));
+      const a = u() ? window.getComputedStyle(e) : null;
+      return !(a && (a.display === "none" || a.visibility === "hidden"));
     });
   }
   _focusInitial() {
@@ -916,12 +924,12 @@ const c = "data-ui-auto-name", l = class l extends Z {
       t.preventDefault(), e.focus();
       return;
     }
-    const s = this.root.activeElement || document.activeElement, o = r[0], n = r[r.length - 1];
+    const a = this.root.activeElement || document.activeElement, o = r[0], n = r[r.length - 1];
     if (t.shiftKey) {
-      (s === o || !s || !e.contains(s)) && (t.preventDefault(), n.focus());
+      (a === o || !a || !e.contains(a)) && (t.preventDefault(), n.focus());
       return;
     }
-    s === n && (t.preventDefault(), o.focus());
+    a === n && (t.preventDefault(), o.focus());
   }
   _onFocusIn(t) {
     if (!this.open || !this._isTopMost()) return;
@@ -1013,7 +1021,7 @@ const c = "data-ui-auto-name", l = class l extends Z {
       return;
     }
     this._finishClose?.(), this._finishClose = null;
-    const t = this._config.title ?? this.getAttribute("title") ?? "", e = this._config.description ?? this.getAttribute("description") ?? "", r = this._config.confirmText ?? this.getAttribute("confirm-text") ?? "Confirm", s = this._config.cancelText ?? this.getAttribute("cancel-text") ?? "Cancel", o = this._config.loadingText ?? this.getAttribute("loading-text") ?? "Working...", n = !!this._config.input?.enabled, $ = this._config.input?.label || "Value", B = this._config.input?.placeholder || "", q = !!this._config.input?.required, O = !!this._config.checkbox?.enabled, D = this._config.checkbox?.label || "Remember this choice", M = this.state, b = this._runtimeError || this._config.errorMessage || this.getAttribute("error-message") || "", w = `ui-alert-title-${this._uid}`, A = `ui-alert-description-${this._uid}`, z = `ui-alert-error-${this._uid}`, H = !!this.querySelector('[slot="title"]'), V = !!this.querySelector('[slot="description"]'), R = !!this.querySelector('[slot="icon"]'), W = !!this.querySelector('[slot="footer"]'), P = !!this.querySelector('[slot="content"]'), g = H || !!t, m = V || !!e, j = R || g || m, K = this._config.showCancel ?? this.dismissible, Y = this._config.showClose ?? this.dismissible, N = this.tone, v = this.hasAttribute(c) ? "" : this.getAttribute("aria-label") || "", F = this.getAttribute("aria-labelledby") || "", C = this.getAttribute("aria-describedby") || "", x = F || (g ? w : ""), E = v || (x ? "" : t || e || "Dialog"), U = (this.querySelector('[slot="title"]')?.textContent || "").replace(/\s+/g, " ").trim();
+    const t = this._config.title ?? this.getAttribute("title") ?? "", e = this._config.description ?? this.getAttribute("description") ?? "", r = this._config.confirmText ?? this.getAttribute("confirm-text") ?? "Confirm", a = this._config.cancelText ?? this.getAttribute("cancel-text") ?? "Cancel", o = this._config.loadingText ?? this.getAttribute("loading-text") ?? "Working...", n = !!this._config.input?.enabled, $ = this._config.input?.label || "Value", B = this._config.input?.placeholder || "", q = !!this._config.input?.required, O = !!this._config.checkbox?.enabled, D = this._config.checkbox?.label || "Remember this choice", M = this.state, b = this._runtimeError || this._config.errorMessage || this.getAttribute("error-message") || "", w = `ui-alert-title-${this._uid}`, A = `ui-alert-description-${this._uid}`, z = `ui-alert-error-${this._uid}`, H = !!this.querySelector('[slot="title"]'), V = !!this.querySelector('[slot="description"]'), R = !!this.querySelector('[slot="icon"]'), W = !!this.querySelector('[slot="footer"]'), P = !!this.querySelector('[slot="content"]'), g = H || !!t, m = V || !!e, j = R || g || m, K = this._config.showCancel ?? this.dismissible, Y = this._config.showClose ?? this.dismissible, N = this.tone, v = this.hasAttribute(c) ? "" : this.getAttribute("aria-label") || "", F = this.getAttribute("aria-labelledby") || "", C = this.getAttribute("aria-describedby") || "", x = F || (g ? w : ""), E = v || (x ? "" : t || e || "Dialog"), U = (this.querySelector('[slot="title"]')?.textContent || "").replace(/\s+/g, " ").trim();
     this._syncHostSemantics(
       !0,
       v || U || t || e || "Dialog",
@@ -1028,11 +1036,11 @@ const c = "data-ui-auto-name", l = class l extends Z {
         <section
           class="dialog"
           part="dialog"
-          role="${a(this.roleType)}"
+          role="${s(this.roleType)}"
           aria-modal="true"
-          ${E ? `aria-label="${a(E)}"` : ""}
-          ${x ? `aria-labelledby="${a(x)}"` : ""}
-          ${d.length ? `aria-describedby="${a(d.join(" "))}"` : ""}
+          ${E ? `aria-label="${s(E)}"` : ""}
+          ${x ? `aria-labelledby="${s(x)}"` : ""}
+          ${d.length ? `aria-describedby="${s(d.join(" "))}"` : ""}
           tabindex="-1"
         >
           ${Y ? `<button class="close" part="close" aria-label="Close dialog">
@@ -1049,8 +1057,8 @@ const c = "data-ui-auto-name", l = class l extends Z {
                     </span>
                   </span>
                   <div class="heading">
-                    ${g ? `<h2 id="${w}" class="title" part="title"><slot name="title">${a(t)}</slot></h2>` : ""}
-                    ${m ? `<p id="${A}" class="description" part="description"><slot name="description">${a(e)}</slot></p>` : ""}
+                    ${g ? `<h2 id="${w}" class="title" part="title"><slot name="title">${s(t)}</slot></h2>` : ""}
+                    ${m ? `<p id="${A}" class="description" part="description"><slot name="description">${s(e)}</slot></p>` : ""}
                   </div>
                 </div>
               </header>` : ""}
@@ -1059,13 +1067,13 @@ const c = "data-ui-auto-name", l = class l extends Z {
             ${P ? '<slot name="content"></slot>' : "<slot></slot>"}
 
             ${n ? `<label class="input-wrap">
-                  <span class="label">${a($)}</span>
+                  <span class="label">${s($)}</span>
                   <input
                     class="input"
                     part="input"
                     type="text"
-                    value="${a(this.getInputValue())}"
-                    placeholder="${a(B)}"
+                    value="${s(this.getInputValue())}"
+                    placeholder="${s(B)}"
                     ${q ? "required" : ""}
                     ${h ? "disabled" : ""}
                   />
@@ -1074,18 +1082,18 @@ const c = "data-ui-auto-name", l = class l extends Z {
             ${O ? `<label class="checkbox" part="checkbox">
                   <span class="checkbox-line">
                     <input class="checkbox-input" type="checkbox" ${this.getChecked() ? "checked" : ""} ${h ? "disabled" : ""} />
-                    <span>${a(D)}</span>
+                    <span>${s(D)}</span>
                   </span>
                 </label>` : ""}
           </div>
 
-          <div class="error" id="${z}" part="error" aria-live="polite" data-empty="${String(!b)}">${a(b)}</div>
+          <div class="error" id="${z}" part="error" aria-live="polite" data-empty="${String(!b)}">${s(b)}</div>
 
           <footer class="footer" part="footer">
-            ${h ? `<span class="loading"><span class="spinner" aria-hidden="true"></span><span>${a(o)}</span></span>` : '<span aria-hidden="true"></span>'}
+            ${h ? `<span class="loading"><span class="spinner" aria-hidden="true"></span><span>${s(o)}</span></span>` : '<span aria-hidden="true"></span>'}
 
-            ${W ? '<slot name="footer"></slot>' : `${K ? `<button class="btn btn-cancel" part="cancel" type="button" ${h ? "disabled" : ""}>${a(s)}</button>` : ""}
-                 <button class="btn btn-confirm" part="confirm" type="button" ${h ? "disabled" : ""}>${a(r)}</button>`}
+            ${W ? '<slot name="footer"></slot>' : `${K ? `<button class="btn btn-cancel" part="cancel" type="button" ${h ? "disabled" : ""}>${s(a)}</button>` : ""}
+                 <button class="btn btn-confirm" part="confirm" type="button" ${h ? "disabled" : ""}>${s(r)}</button>`}
           </footer>
         </section>
       </div>

package/dist/alert.cjs.js

@@ -209,7 +209,7 @@
   :host([variant="solid"]) .alert {
     --ui-alert-bg: var(--ui-alert-accent);
     --ui-alert-color: #ffffff;
-    --ui-alert-muted: color-mix(in srgb, #ffffff 82%, transparent);
+    --ui-alert-muted: color-mix(in srgb, #ffffff 92%, transparent);
     --ui-alert-border: 1px solid color-mix(in srgb, #000000 18%, transparent);
     --ui-alert-icon-bg: color-mix(in srgb, #ffffff 20%, transparent);
     --ui-alert-icon-color: #ffffff;
@@ -258,7 +258,7 @@
 
   /* The tone rules above set a tinted fill; a solid alert must win over them, so these come last. */
   :host([variant="solid"]) .alert {
-    --ui-alert-bg: color-mix(in srgb, var(--ui-alert-accent) 84%, #000000);
+    --ui-alert-bg: color-mix(in srgb, var(--ui-alert-accent) 78%, #000000);
     --ui-alert-border: 1px solid color-mix(in srgb, #000000 18%, transparent);
   }
 

package/dist/alert.esm.js

@@ -210,7 +210,7 @@ const y = `
   :host([variant="solid"]) .alert {
     --ui-alert-bg: var(--ui-alert-accent);
     --ui-alert-color: #ffffff;
-    --ui-alert-muted: color-mix(in srgb, #ffffff 82%, transparent);
+    --ui-alert-muted: color-mix(in srgb, #ffffff 92%, transparent);
     --ui-alert-border: 1px solid color-mix(in srgb, #000000 18%, transparent);
     --ui-alert-icon-bg: color-mix(in srgb, #ffffff 20%, transparent);
     --ui-alert-icon-color: #ffffff;
@@ -259,7 +259,7 @@ const y = `
 
   /* The tone rules above set a tinted fill; a solid alert must win over them, so these come last. */
   :host([variant="solid"]) .alert {
-    --ui-alert-bg: color-mix(in srgb, var(--ui-alert-accent) 84%, #000000);
+    --ui-alert-bg: color-mix(in srgb, var(--ui-alert-accent) 78%, #000000);
     --ui-alert-border: 1px solid color-mix(in srgb, #000000 18%, transparent);
   }
 

package/dist/animated-text.cjs.js

@@ -96,7 +96,7 @@
 
   :host([variant="soft"]) {
     --ui-animated-text-color:
-      color-mix(in srgb, var(--ui-animated-text-accent) 72%, var(--ui-color-text, var(--ui-text, #0f172a)));
+      color-mix(in srgb, var(--ui-animated-text-accent) 62%, var(--ui-color-text, var(--ui-text, #0f172a)));
     --ui-animated-text-bg:
       color-mix(in srgb, var(--ui-animated-text-accent) 8%, var(--ui-color-surface, #ffffff));
     --ui-animated-text-border:
@@ -106,7 +106,7 @@
   }
 
   :host([variant="solid"]) {
-    --ui-animated-text-color: color-mix(in srgb, var(--ui-animated-text-accent) 88%, #061221);
+    --ui-animated-text-color: color-mix(in srgb, var(--ui-animated-text-accent) 45%, var(--ui-color-text-strong, #0f172a));
     --ui-animated-text-bg:
       linear-gradient(
         180deg,
@@ -149,7 +149,7 @@
 
   :host([variant="minimal"]) {
     --ui-animated-text-color:
-      color-mix(in srgb, var(--ui-animated-text-accent) 84%, var(--ui-color-text, var(--ui-text, #0f172a)));
+      color-mix(in srgb, var(--ui-animated-text-accent) 45%, var(--ui-color-text-strong, var(--ui-color-text, var(--ui-text, #0f172a))));
     --ui-animated-text-bg: transparent;
     --ui-animated-text-border: none;
     --ui-animated-text-shadow: none;
@@ -396,8 +396,8 @@
     background:
       linear-gradient(
         135deg,
-        color-mix(in srgb, var(--ui-animated-text-accent) 96%, #ffffff 4%),
-        color-mix(in srgb, var(--ui-animated-text-accent) 58%, #0f172a 42%)
+        color-mix(in srgb, var(--ui-animated-text-accent) 62%, var(--ui-color-text-strong, #0f172a)),
+        color-mix(in srgb, var(--ui-animated-text-accent) 40%, var(--ui-color-text-strong, #0f172a))
       );
     -webkit-background-clip: text;
     background-clip: text;