@editora/ui-core 0.1.25 → 0.2.1

package/dist/alert.cjs.js

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-DxbvhLJs.js"),z=`
   :host {
     display: block;
-    --ui-alert-radius: var(--base-alert-radius, var(--ui-radius, 4px));
+    --ui-alert-radius: var(--base-alert-radius, var(--ui-radius, 6px));
     --ui-alert-padding-y: var(--base-alert-padding-y, 14px);
     --ui-alert-padding-x: var(--base-alert-padding-x, 16px);
     --ui-alert-gap: var(--base-alert-gap, var(--ui-default-gap, 8px));
@@ -20,10 +20,10 @@
     --ui-alert-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
     --ui-alert-title-size: var(--ui-default-font-size, 14px);
     --ui-alert-title-line-height: var(--ui-default-line-height, 20px);
-    --ui-alert-title-weight: 650;
+    --ui-alert-title-weight: 600;
     --ui-alert-description-size: 13px;
     --ui-alert-description-line-height: 20px;
-    --ui-alert-icon-size: var(--base-alert-icon-size, 26px);
+    --ui-alert-icon-size: var(--base-alert-icon-size, 20px);
     --ui-alert-dismiss-size: var(--base-alert-dismiss-size, 28px);
     --ui-alert-duration: var(--ui-motion-base, 180ms);
     --ui-alert-easing: var(--ui-motion-easing, cubic-bezier(0.2, 0.8, 0.2, 1));
@@ -39,7 +39,7 @@
     --ui-alert-title-line-height: 18px;
     --ui-alert-description-size: 12px;
     --ui-alert-description-line-height: 18px;
-    --ui-alert-icon-size: 24px;
+    --ui-alert-icon-size: 18px;
     --ui-alert-dismiss-size: 26px;
   }
 
@@ -59,7 +59,7 @@
     --ui-alert-title-line-height: 22px;
     --ui-alert-description-size: 14px;
     --ui-alert-description-line-height: 22px;
-    --ui-alert-icon-size: 30px;
+    --ui-alert-icon-size: 22px;
     --ui-alert-dismiss-size: 30px;
   }
 
@@ -68,6 +68,11 @@
   }
 
   .alert {
+    /* A hairline in the tone colour, no shadow. These are set here, not on the host, so they follow the tone. */
+    --ui-alert-border: var(--base-alert-border, 1px solid color-mix(in srgb, var(--ui-alert-accent) 28%, transparent));
+    --ui-alert-shadow: var(--base-alert-shadow, none);
+    --ui-alert-icon-bg: transparent;
+    --ui-alert-icon-color: color-mix(in srgb, var(--ui-alert-accent) 55%, var(--ui-color-text-strong, var(--ui-alert-color)));
     position: relative;
     border-radius: var(--ui-alert-radius);
     border: var(--ui-alert-border);
@@ -88,11 +93,12 @@
     inset-block: 0;
     inset-inline-start: 0;
     width: 3px;
-    background: linear-gradient(180deg, var(--ui-alert-accent) 0%, color-mix(in srgb, var(--ui-alert-accent) 72%, #0f172a) 100%);
+    background: var(--ui-alert-accent);
     pointer-events: none;
   }
 
-  :host([indicator="none"]) .alert::before {
+  /* The coloured bar on the leading edge is opt-in: indicator="line". */
+  :host(:not([indicator="line"])) .alert::before {
     display: none;
   }
 
@@ -104,7 +110,7 @@
   }
 
   .icon-wrap {
-    margin-top: 1px;
+    margin-top: 0;
     width: var(--ui-alert-icon-size);
     min-width: var(--ui-alert-icon-size);
     height: var(--ui-alert-icon-size);
@@ -114,7 +120,6 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-alert-accent) 24%, transparent);
   }
 
   .icon {
@@ -204,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;
@@ -232,41 +237,45 @@
 
   :host([tone="info"]) .alert {
     --ui-alert-accent: var(--ui-color-primary, #2563eb);
-    --ui-alert-bg: linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, var(--ui-color-surface, #ffffff)) 0%,
-      color-mix(in srgb, var(--ui-color-primary, #2563eb) 7%, var(--ui-color-surface, #ffffff)) 100%
-    );
+    --ui-alert-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 12%, var(--ui-alert-surface-base));
     --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-color-primary, #2563eb) 28%, var(--ui-color-border, rgba(15, 23, 42, 0.2)));
   }
   :host([tone="success"]) .alert {
     --ui-alert-accent: var(--ui-color-success, #15803d);
-    --ui-alert-bg: linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--ui-color-success, #15803d) 14%, var(--ui-color-surface, #ffffff)) 0%,
-      color-mix(in srgb, var(--ui-color-success, #15803d) 10%, var(--ui-color-surface, #ffffff)) 100%
-    );
+    --ui-alert-bg: color-mix(in srgb, var(--ui-color-success, #15803d) 12%, var(--ui-alert-surface-base));
     --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-color-success, #15803d) 30%, var(--ui-color-border, rgba(15, 23, 42, 0.2)));
   }
   :host([tone="warning"]) .alert {
     --ui-alert-accent: var(--ui-color-warning, #b45309);
-    --ui-alert-bg: linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--ui-color-warning, #f59e0b) 16%, var(--ui-color-surface, #ffffff)) 0%,
-      color-mix(in srgb, var(--ui-color-warning, #f59e0b) 12%, var(--ui-color-surface, #ffffff)) 100%
-    );
+    --ui-alert-bg: color-mix(in srgb, var(--ui-color-warning, #f59e0b) 12%, var(--ui-alert-surface-base));
     --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-color-warning, #f59e0b) 34%, var(--ui-color-border, rgba(15, 23, 42, 0.2)));
   }
   :host([tone="danger"]) .alert {
     --ui-alert-accent: var(--ui-color-danger, #dc2626);
-    --ui-alert-bg: linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--ui-color-danger, #dc2626) 13%, var(--ui-color-surface, #ffffff)) 0%,
-      color-mix(in srgb, var(--ui-color-danger, #dc2626) 10%, var(--ui-color-surface, #ffffff)) 100%
-    );
+    --ui-alert-bg: color-mix(in srgb, var(--ui-color-danger, #dc2626) 12%, var(--ui-alert-surface-base));
     --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-color-danger, #dc2626) 30%, var(--ui-color-border, rgba(15, 23, 42, 0.2)));
   }
 
+  /* 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) 78%, #000000);
+    --ui-alert-border: 1px solid color-mix(in srgb, #000000 18%, transparent);
+  }
+
+  :host([variant="solid"][tone="info"]) .alert {
+    --ui-alert-bg: var(--ui-color-primary, #2563eb);
+    --ui-alert-color: var(--ui-color-foreground-on-primary, #ffffff);
+    --ui-alert-muted: color-mix(in srgb, var(--ui-color-foreground-on-primary, #ffffff) 82%, transparent);
+    --ui-alert-icon-color: var(--ui-color-foreground-on-primary, #ffffff);
+  }
+
+  :host([variant="solid"][tone="warning"]) .alert {
+    --ui-alert-bg: var(--ui-color-warning, #f59e0b);
+    --ui-alert-color: var(--ui-color-foreground-on-warning, #1f1300);
+    --ui-alert-muted: color-mix(in srgb, var(--ui-color-foreground-on-warning, #1f1300) 82%, transparent);
+    --ui-alert-icon-color: var(--ui-color-foreground-on-warning, #1f1300);
+  }
+
   :host([layout="banner"][variant="solid"]) .alert {
     border-top: 0;
   }
@@ -325,9 +334,9 @@
       border-color: Highlight;
     }
   }
-`;function n(i){return String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function k(i){return i==="neutral"||i==="success"||i==="warning"||i==="danger"?i:"info"}function _(i){return i==="surface"||i==="outline"||i==="solid"||i==="soft"?i:"surface"}function C(i){return i==="sm"||i==="lg"?i:i==="1"?"sm":i==="3"?"lg":"md"}function S(i){return i==="banner"?"banner":"inline"}function A(i){return i==="none"||i==="low"||i==="high"?i:"low"}function $(i){return i==="none"?"none":"line"}function B(i,r="var(--base-alert-radius, var(--ui-radius, 4px))"){if(!i||!i.trim())return r;const t=i.trim().toLowerCase();return t==="full"||t==="pill"?"999px":t==="square"||t==="none"?"0px":/^-?\d+(\.\d+)?$/.test(t)?`${t}px`:i.trim()}function s(i,r){return Array.from(i.children).some(t=>{if(!(t instanceof HTMLElement))return!1;const e=t.getAttribute("slot")||"";return r?e===r:e===""})}function E(i){return i==="success"?'<svg viewBox="0 0 20 20" width="16" height="16" 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 viewBox="0 0 20 20" width="16" height="16" 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 viewBox="0 0 20 20" width="16" height="16" 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>':'<svg viewBox="0 0 20 20" width="16" height="16" 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>'}class l extends y.ElementBase{constructor(){super(),this._dismissBtn=null,this._actionsSlot=null,this._onDismiss=this._onDismiss.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["title","description","dismissible","tone","variant","layout","headless","hidden","size","radius","elevation","indicator"]}disconnectedCallback(){this._dismissBtn&&(this._dismissBtn.removeEventListener("click",this._onDismiss),this._dismissBtn=null),this._actionsSlot&&(this._actionsSlot.removeEventListener("slotchange",this._onSlotChange),this._actionsSlot=null),super.disconnectedCallback()}get open(){return!this.hasAttribute("hidden")}set open(r){r?this.removeAttribute("hidden"):this.setAttribute("hidden","")}connectedCallback(){super.connectedCallback(),this._syncHostStyles()}attributeChangedCallback(r,t,e){if(t!==e){if(r==="radius"){this._syncHostStyles();return}super.attributeChangedCallback(r,t,e)}}_onDismiss(r){r.preventDefault();const t=new CustomEvent("close",{bubbles:!0,cancelable:!0});this.dispatchEvent(t),t.defaultPrevented||(this.open=!1)}_onSlotChange(){const r=this.root.querySelector(".actions");if(!r||!this._actionsSlot)return;const t=this._actionsSlot.assignedNodes({flatten:!0}).length>0;r.setAttribute("data-empty",t?"false":"true")}_syncHostStyles(){const r=this.getAttribute("radius");if(r&&r.trim()){this.style.setProperty("--ui-alert-radius",B(r));return}this.style.removeProperty("--ui-alert-radius")}render(){const r=this.getAttribute("title")||"",t=this.getAttribute("description")||"",e=this.hasAttribute("dismissible"),a=k(this.getAttribute("tone")),c=_(this.getAttribute("variant")),u=S(this.getAttribute("layout")),d=C(this.getAttribute("size")),p=A(this.getAttribute("elevation")),g=$(this.getAttribute("indicator")),o=a==="danger"||a==="warning"?"alert":"status",h=o==="alert"?"assertive":"polite",f=s(this,"title"),b=s(this),v=s(this,"actions"),m=r||f?`<div class="title" part="title"><slot name="title">${n(r)}</slot></div>`:"",x=t||b?`<div class="description" part="description"><slot>${n(t)}</slot></div>`:"",w=a==="danger"?"Dismiss critical alert":"Dismiss alert";this.setContent(`
+`;function n(r){return String(r).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function k(r){return r==="neutral"||r==="success"||r==="warning"||r==="danger"?r:"info"}function _(r){return r==="surface"||r==="outline"||r==="solid"||r==="soft"?r:"surface"}function C(r){return r==="sm"||r==="lg"?r:r==="1"?"sm":r==="3"?"lg":"md"}function S(r){return r==="banner"?"banner":"inline"}function A(r){return r==="none"||r==="low"||r==="high"?r:"low"}function $(r){return r==="none"?"none":"line"}function B(r,i="var(--base-alert-radius, var(--ui-radius, 6px))"){if(!r||!r.trim())return i;const t=r.trim().toLowerCase();return t==="full"||t==="pill"?"999px":t==="square"||t==="none"?"0px":/^-?\d+(\.\d+)?$/.test(t)?`${t}px`:r.trim()}function o(r,i){return Array.from(r.children).some(t=>{if(!(t instanceof HTMLElement))return!1;const e=t.getAttribute("slot")||"";return i?e===i:e===""})}function E(r){return r==="success"?'<svg viewBox="0 0 20 20" width="16" height="16" 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>':r==="warning"?'<svg viewBox="0 0 20 20" width="16" height="16" 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>':r==="danger"?'<svg viewBox="0 0 20 20" width="16" height="16" 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>':'<svg viewBox="0 0 20 20" width="16" height="16" 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>'}class l extends y.ElementBase{constructor(){super(),this._dismissBtn=null,this._actionsSlot=null,this._onDismiss=this._onDismiss.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["title","description","dismissible","tone","variant","layout","headless","hidden","size","radius","elevation","indicator"]}disconnectedCallback(){this._dismissBtn&&(this._dismissBtn.removeEventListener("click",this._onDismiss),this._dismissBtn=null),this._actionsSlot&&(this._actionsSlot.removeEventListener("slotchange",this._onSlotChange),this._actionsSlot=null),super.disconnectedCallback()}get open(){return!this.hasAttribute("hidden")}set open(i){i?this.removeAttribute("hidden"):this.setAttribute("hidden","")}connectedCallback(){super.connectedCallback(),this._syncHostStyles()}attributeChangedCallback(i,t,e){if(t!==e){if(i==="radius"){this._syncHostStyles();return}super.attributeChangedCallback(i,t,e)}}_onDismiss(i){i.preventDefault();const t=new CustomEvent("close",{bubbles:!0,cancelable:!0});this.dispatchEvent(t),t.defaultPrevented||(this.open=!1)}_onSlotChange(){const i=this.root.querySelector(".actions");if(!i||!this._actionsSlot)return;const t=this._actionsSlot.assignedNodes({flatten:!0}).length>0;i.setAttribute("data-empty",t?"false":"true")}_syncHostStyles(){const i=this.getAttribute("radius");if(i&&i.trim()){this.style.setProperty("--ui-alert-radius",B(i));return}this.style.removeProperty("--ui-alert-radius")}render(){const i=this.getAttribute("title")||"",t=this.getAttribute("description")||"",e=this.hasAttribute("dismissible"),a=k(this.getAttribute("tone")),u=_(this.getAttribute("variant")),c=S(this.getAttribute("layout")),d=C(this.getAttribute("size")),h=A(this.getAttribute("elevation")),p=$(this.getAttribute("indicator")),s=a==="danger"||a==="warning"?"alert":"status",g=s==="alert"?"assertive":"polite",b=o(this,"title"),f=o(this),v=o(this,"actions"),m=i||b?`<div class="title" part="title"><slot name="title">${n(i)}</slot></div>`:"",x=t||f?`<div class="description" part="description"><slot>${n(t)}</slot></div>`:"",w=a==="danger"?"Dismiss critical alert":"Dismiss alert";this.setContent(`
       <style>${z}</style>
-      <section class="alert tone-${a} variant-${c} layout-${u} size-${d} elevation-${p} indicator-${g}" part="base" role="${o}" aria-live="${h}" aria-atomic="true">
+      <section class="alert tone-${a} variant-${u} layout-${c} size-${d} elevation-${h} indicator-${p}" part="base" role="${s}" aria-live="${g}" aria-atomic="true">
         <div class="row">
           <span class="icon-wrap" part="icon-wrap" aria-hidden="true">
             <span class="icon" part="icon">
@@ -348,4 +357,4 @@
                 </button>`:""}
         </div>
       </section>
-    `),this._dismissBtn&&this._dismissBtn.removeEventListener("click",this._onDismiss),this._dismissBtn=this.root.querySelector(".dismiss"),this._dismissBtn&&this._dismissBtn.addEventListener("click",this._onDismiss),this._actionsSlot&&this._actionsSlot.removeEventListener("slotchange",this._onSlotChange),this._actionsSlot=this.root.querySelector('slot[name="actions"]'),this._actionsSlot&&(this._actionsSlot.addEventListener("slotchange",this._onSlotChange),this._onSlotChange())}shouldRenderOnAttributeChange(r,t,e){return r!=="radius"}}typeof customElements<"u"&&!customElements.get("ui-alert")&&customElements.define("ui-alert",l);exports.UIAlert=l;
+    `),this._dismissBtn&&this._dismissBtn.removeEventListener("click",this._onDismiss),this._dismissBtn=this.root.querySelector(".dismiss"),this._dismissBtn&&this._dismissBtn.addEventListener("click",this._onDismiss),this._actionsSlot&&this._actionsSlot.removeEventListener("slotchange",this._onSlotChange),this._actionsSlot=this.root.querySelector('slot[name="actions"]'),this._actionsSlot&&(this._actionsSlot.addEventListener("slotchange",this._onSlotChange),this._onSlotChange())}shouldRenderOnAttributeChange(i,t,e){return i!=="radius"}}typeof customElements<"u"&&!customElements.get("ui-alert")&&customElements.define("ui-alert",l);exports.UIAlert=l;

package/dist/alert.esm.js

@@ -2,7 +2,7 @@ import { E as w } from "./ElementBase-BeZT54Hj.mjs";
 const y = `
   :host {
     display: block;
-    --ui-alert-radius: var(--base-alert-radius, var(--ui-radius, 4px));
+    --ui-alert-radius: var(--base-alert-radius, var(--ui-radius, 6px));
     --ui-alert-padding-y: var(--base-alert-padding-y, 14px);
     --ui-alert-padding-x: var(--base-alert-padding-x, 16px);
     --ui-alert-gap: var(--base-alert-gap, var(--ui-default-gap, 8px));
@@ -21,10 +21,10 @@ const y = `
     --ui-alert-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
     --ui-alert-title-size: var(--ui-default-font-size, 14px);
     --ui-alert-title-line-height: var(--ui-default-line-height, 20px);
-    --ui-alert-title-weight: 650;
+    --ui-alert-title-weight: 600;
     --ui-alert-description-size: 13px;
     --ui-alert-description-line-height: 20px;
-    --ui-alert-icon-size: var(--base-alert-icon-size, 26px);
+    --ui-alert-icon-size: var(--base-alert-icon-size, 20px);
     --ui-alert-dismiss-size: var(--base-alert-dismiss-size, 28px);
     --ui-alert-duration: var(--ui-motion-base, 180ms);
     --ui-alert-easing: var(--ui-motion-easing, cubic-bezier(0.2, 0.8, 0.2, 1));
@@ -40,7 +40,7 @@ const y = `
     --ui-alert-title-line-height: 18px;
     --ui-alert-description-size: 12px;
     --ui-alert-description-line-height: 18px;
-    --ui-alert-icon-size: 24px;
+    --ui-alert-icon-size: 18px;
     --ui-alert-dismiss-size: 26px;
   }
 
@@ -60,7 +60,7 @@ const y = `
     --ui-alert-title-line-height: 22px;
     --ui-alert-description-size: 14px;
     --ui-alert-description-line-height: 22px;
-    --ui-alert-icon-size: 30px;
+    --ui-alert-icon-size: 22px;
     --ui-alert-dismiss-size: 30px;
   }
 
@@ -69,6 +69,11 @@ const y = `
   }
 
   .alert {
+    /* A hairline in the tone colour, no shadow. These are set here, not on the host, so they follow the tone. */
+    --ui-alert-border: var(--base-alert-border, 1px solid color-mix(in srgb, var(--ui-alert-accent) 28%, transparent));
+    --ui-alert-shadow: var(--base-alert-shadow, none);
+    --ui-alert-icon-bg: transparent;
+    --ui-alert-icon-color: color-mix(in srgb, var(--ui-alert-accent) 55%, var(--ui-color-text-strong, var(--ui-alert-color)));
     position: relative;
     border-radius: var(--ui-alert-radius);
     border: var(--ui-alert-border);
@@ -89,11 +94,12 @@ const y = `
     inset-block: 0;
     inset-inline-start: 0;
     width: 3px;
-    background: linear-gradient(180deg, var(--ui-alert-accent) 0%, color-mix(in srgb, var(--ui-alert-accent) 72%, #0f172a) 100%);
+    background: var(--ui-alert-accent);
     pointer-events: none;
   }
 
-  :host([indicator="none"]) .alert::before {
+  /* The coloured bar on the leading edge is opt-in: indicator="line". */
+  :host(:not([indicator="line"])) .alert::before {
     display: none;
   }
 
@@ -105,7 +111,7 @@ const y = `
   }
 
   .icon-wrap {
-    margin-top: 1px;
+    margin-top: 0;
     width: var(--ui-alert-icon-size);
     min-width: var(--ui-alert-icon-size);
     height: var(--ui-alert-icon-size);
@@ -115,7 +121,6 @@ const y = `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-alert-accent) 24%, transparent);
   }
 
   .icon {
@@ -205,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;
@@ -233,41 +238,45 @@ const y = `
 
   :host([tone="info"]) .alert {
     --ui-alert-accent: var(--ui-color-primary, #2563eb);
-    --ui-alert-bg: linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, var(--ui-color-surface, #ffffff)) 0%,
-      color-mix(in srgb, var(--ui-color-primary, #2563eb) 7%, var(--ui-color-surface, #ffffff)) 100%
-    );
+    --ui-alert-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 12%, var(--ui-alert-surface-base));
     --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-color-primary, #2563eb) 28%, var(--ui-color-border, rgba(15, 23, 42, 0.2)));
   }
   :host([tone="success"]) .alert {
     --ui-alert-accent: var(--ui-color-success, #15803d);
-    --ui-alert-bg: linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--ui-color-success, #15803d) 14%, var(--ui-color-surface, #ffffff)) 0%,
-      color-mix(in srgb, var(--ui-color-success, #15803d) 10%, var(--ui-color-surface, #ffffff)) 100%
-    );
+    --ui-alert-bg: color-mix(in srgb, var(--ui-color-success, #15803d) 12%, var(--ui-alert-surface-base));
     --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-color-success, #15803d) 30%, var(--ui-color-border, rgba(15, 23, 42, 0.2)));
   }
   :host([tone="warning"]) .alert {
     --ui-alert-accent: var(--ui-color-warning, #b45309);
-    --ui-alert-bg: linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--ui-color-warning, #f59e0b) 16%, var(--ui-color-surface, #ffffff)) 0%,
-      color-mix(in srgb, var(--ui-color-warning, #f59e0b) 12%, var(--ui-color-surface, #ffffff)) 100%
-    );
+    --ui-alert-bg: color-mix(in srgb, var(--ui-color-warning, #f59e0b) 12%, var(--ui-alert-surface-base));
     --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-color-warning, #f59e0b) 34%, var(--ui-color-border, rgba(15, 23, 42, 0.2)));
   }
   :host([tone="danger"]) .alert {
     --ui-alert-accent: var(--ui-color-danger, #dc2626);
-    --ui-alert-bg: linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--ui-color-danger, #dc2626) 13%, var(--ui-color-surface, #ffffff)) 0%,
-      color-mix(in srgb, var(--ui-color-danger, #dc2626) 10%, var(--ui-color-surface, #ffffff)) 100%
-    );
+    --ui-alert-bg: color-mix(in srgb, var(--ui-color-danger, #dc2626) 12%, var(--ui-alert-surface-base));
     --ui-alert-border: 1px solid color-mix(in srgb, var(--ui-color-danger, #dc2626) 30%, var(--ui-color-border, rgba(15, 23, 42, 0.2)));
   }
 
+  /* 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) 78%, #000000);
+    --ui-alert-border: 1px solid color-mix(in srgb, #000000 18%, transparent);
+  }
+
+  :host([variant="solid"][tone="info"]) .alert {
+    --ui-alert-bg: var(--ui-color-primary, #2563eb);
+    --ui-alert-color: var(--ui-color-foreground-on-primary, #ffffff);
+    --ui-alert-muted: color-mix(in srgb, var(--ui-color-foreground-on-primary, #ffffff) 82%, transparent);
+    --ui-alert-icon-color: var(--ui-color-foreground-on-primary, #ffffff);
+  }
+
+  :host([variant="solid"][tone="warning"]) .alert {
+    --ui-alert-bg: var(--ui-color-warning, #f59e0b);
+    --ui-alert-color: var(--ui-color-foreground-on-warning, #1f1300);
+    --ui-alert-muted: color-mix(in srgb, var(--ui-color-foreground-on-warning, #1f1300) 82%, transparent);
+    --ui-alert-icon-color: var(--ui-color-foreground-on-warning, #1f1300);
+  }
+
   :host([layout="banner"][variant="solid"]) .alert {
     border-top: 0;
   }
@@ -327,41 +336,41 @@ const y = `
     }
   }
 `;
-function n(i) {
-  return String(i).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function n(r) {
+  return String(r).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function z(i) {
-  return i === "neutral" || i === "success" || i === "warning" || i === "danger" ? i : "info";
+function z(r) {
+  return r === "neutral" || r === "success" || r === "warning" || r === "danger" ? r : "info";
 }
-function k(i) {
-  return i === "surface" || i === "outline" || i === "solid" || i === "soft" ? i : "surface";
+function k(r) {
+  return r === "surface" || r === "outline" || r === "solid" || r === "soft" ? r : "surface";
 }
-function _(i) {
-  return i === "sm" || i === "lg" ? i : i === "1" ? "sm" : i === "3" ? "lg" : "md";
+function _(r) {
+  return r === "sm" || r === "lg" ? r : r === "1" ? "sm" : r === "3" ? "lg" : "md";
 }
-function C(i) {
-  return i === "banner" ? "banner" : "inline";
+function C(r) {
+  return r === "banner" ? "banner" : "inline";
 }
-function S(i) {
-  return i === "none" || i === "low" || i === "high" ? i : "low";
+function S(r) {
+  return r === "none" || r === "low" || r === "high" ? r : "low";
 }
-function A(i) {
-  return i === "none" ? "none" : "line";
+function A(r) {
+  return r === "none" ? "none" : "line";
 }
-function $(i, r = "var(--base-alert-radius, var(--ui-radius, 4px))") {
-  if (!i || !i.trim()) return r;
-  const t = i.trim().toLowerCase();
-  return t === "full" || t === "pill" ? "999px" : t === "square" || t === "none" ? "0px" : /^-?\d+(\.\d+)?$/.test(t) ? `${t}px` : i.trim();
+function $(r, i = "var(--base-alert-radius, var(--ui-radius, 6px))") {
+  if (!r || !r.trim()) return i;
+  const t = r.trim().toLowerCase();
+  return t === "full" || t === "pill" ? "999px" : t === "square" || t === "none" ? "0px" : /^-?\d+(\.\d+)?$/.test(t) ? `${t}px` : r.trim();
 }
-function s(i, r) {
-  return Array.from(i.children).some((t) => {
+function o(r, i) {
+  return Array.from(r.children).some((t) => {
     if (!(t instanceof HTMLElement)) return !1;
     const e = t.getAttribute("slot") || "";
-    return r ? e === r : e === "";
+    return i ? e === i : e === "";
   });
 }
-function E(i) {
-  return i === "success" ? '<svg viewBox="0 0 20 20" width="16" height="16" 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 viewBox="0 0 20 20" width="16" height="16" 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 viewBox="0 0 20 20" width="16" height="16" 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>' : '<svg viewBox="0 0 20 20" width="16" height="16" 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>';
+function E(r) {
+  return r === "success" ? '<svg viewBox="0 0 20 20" width="16" height="16" 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>' : r === "warning" ? '<svg viewBox="0 0 20 20" width="16" height="16" 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>' : r === "danger" ? '<svg viewBox="0 0 20 20" width="16" height="16" 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>' : '<svg viewBox="0 0 20 20" width="16" height="16" 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>';
 }
 class B extends w {
   constructor() {
@@ -376,45 +385,45 @@ class B extends w {
   get open() {
     return !this.hasAttribute("hidden");
   }
-  set open(r) {
-    r ? this.removeAttribute("hidden") : this.setAttribute("hidden", "");
+  set open(i) {
+    i ? this.removeAttribute("hidden") : this.setAttribute("hidden", "");
   }
   connectedCallback() {
     super.connectedCallback(), this._syncHostStyles();
   }
-  attributeChangedCallback(r, t, e) {
+  attributeChangedCallback(i, t, e) {
     if (t !== e) {
-      if (r === "radius") {
+      if (i === "radius") {
         this._syncHostStyles();
         return;
       }
-      super.attributeChangedCallback(r, t, e);
+      super.attributeChangedCallback(i, t, e);
     }
   }
-  _onDismiss(r) {
-    r.preventDefault();
+  _onDismiss(i) {
+    i.preventDefault();
     const t = new CustomEvent("close", { bubbles: !0, cancelable: !0 });
     this.dispatchEvent(t), t.defaultPrevented || (this.open = !1);
   }
   _onSlotChange() {
-    const r = this.root.querySelector(".actions");
-    if (!r || !this._actionsSlot) return;
+    const i = this.root.querySelector(".actions");
+    if (!i || !this._actionsSlot) return;
     const t = this._actionsSlot.assignedNodes({ flatten: !0 }).length > 0;
-    r.setAttribute("data-empty", t ? "false" : "true");
+    i.setAttribute("data-empty", t ? "false" : "true");
   }
   _syncHostStyles() {
-    const r = this.getAttribute("radius");
-    if (r && r.trim()) {
-      this.style.setProperty("--ui-alert-radius", $(r));
+    const i = this.getAttribute("radius");
+    if (i && i.trim()) {
+      this.style.setProperty("--ui-alert-radius", $(i));
       return;
     }
     this.style.removeProperty("--ui-alert-radius");
   }
   render() {
-    const r = this.getAttribute("title") || "", t = this.getAttribute("description") || "", e = this.hasAttribute("dismissible"), a = z(this.getAttribute("tone")), l = k(this.getAttribute("variant")), c = C(this.getAttribute("layout")), u = _(this.getAttribute("size")), d = S(this.getAttribute("elevation")), p = A(this.getAttribute("indicator")), o = a === "danger" || a === "warning" ? "alert" : "status", h = o === "alert" ? "assertive" : "polite", g = s(this, "title"), f = s(this), b = s(this, "actions"), v = r || g ? `<div class="title" part="title"><slot name="title">${n(r)}</slot></div>` : "", m = t || f ? `<div class="description" part="description"><slot>${n(t)}</slot></div>` : "", x = a === "danger" ? "Dismiss critical alert" : "Dismiss alert";
+    const i = this.getAttribute("title") || "", t = this.getAttribute("description") || "", e = this.hasAttribute("dismissible"), a = z(this.getAttribute("tone")), l = k(this.getAttribute("variant")), u = C(this.getAttribute("layout")), c = _(this.getAttribute("size")), d = S(this.getAttribute("elevation")), h = A(this.getAttribute("indicator")), s = a === "danger" || a === "warning" ? "alert" : "status", p = s === "alert" ? "assertive" : "polite", g = o(this, "title"), b = o(this), f = o(this, "actions"), v = i || g ? `<div class="title" part="title"><slot name="title">${n(i)}</slot></div>` : "", m = t || b ? `<div class="description" part="description"><slot>${n(t)}</slot></div>` : "", x = a === "danger" ? "Dismiss critical alert" : "Dismiss alert";
     this.setContent(`
       <style>${y}</style>
-      <section class="alert tone-${a} variant-${l} layout-${c} size-${u} elevation-${d} indicator-${p}" part="base" role="${o}" aria-live="${h}" aria-atomic="true">
+      <section class="alert tone-${a} variant-${l} layout-${u} size-${c} elevation-${d} indicator-${h}" part="base" role="${s}" aria-live="${p}" aria-atomic="true">
         <div class="row">
           <span class="icon-wrap" part="icon-wrap" aria-hidden="true">
             <span class="icon" part="icon">
@@ -424,7 +433,7 @@ class B extends w {
           <div class="content">
             ${v}
             ${m}
-            <div class="actions" part="actions" data-empty="${b ? "false" : "true"}">
+            <div class="actions" part="actions" data-empty="${f ? "false" : "true"}">
               <slot name="actions"></slot>
             </div>
           </div>
@@ -437,8 +446,8 @@ class B extends w {
       </section>
     `), this._dismissBtn && this._dismissBtn.removeEventListener("click", this._onDismiss), this._dismissBtn = this.root.querySelector(".dismiss"), this._dismissBtn && this._dismissBtn.addEventListener("click", this._onDismiss), this._actionsSlot && this._actionsSlot.removeEventListener("slotchange", this._onSlotChange), this._actionsSlot = this.root.querySelector('slot[name="actions"]'), this._actionsSlot && (this._actionsSlot.addEventListener("slotchange", this._onSlotChange), this._onSlotChange());
   }
-  shouldRenderOnAttributeChange(r, t, e) {
-    return r !== "radius";
+  shouldRenderOnAttributeChange(i, t, e) {
+    return i !== "radius";
   }
 }
 typeof customElements < "u" && !customElements.get("ui-alert") && customElements.define("ui-alert", B);