@editora/ui-core 0.1.25 → 0.2.1

package/dist/aspect-ratio.esm.js

@@ -3,7 +3,7 @@ const c = `
   :host {
     display: block;
     width: 100%;
-    --ui-aspect-radius: var(--base-aspect-ratio-radius, var(--ui-radius, 4px));
+    --ui-aspect-radius: var(--base-aspect-ratio-radius, var(--ui-radius, 6px));
     --ui-aspect-border: var(--base-aspect-ratio-border, 1px solid color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.14)) 84%, transparent));
     --ui-aspect-bg-base: var(--base-aspect-ratio-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-aspect-bg: var(--ui-aspect-bg-base);
@@ -24,7 +24,7 @@ const c = `
 
   :host([size='1']),
   :host([size='sm']) {
-    --ui-aspect-radius: max(0px, calc(var(--base-aspect-ratio-radius, var(--ui-radius, 4px)) - 1px));
+    --ui-aspect-radius: max(0px, calc(var(--base-aspect-ratio-radius, var(--ui-radius, 6px)) - 1px));
     --ui-aspect-title-size: 13px;
     --ui-aspect-title-line-height: 18px;
     --ui-aspect-empty-icon-size: 28px;
@@ -37,7 +37,7 @@ const c = `
 
   :host([size='3']),
   :host([size='lg']) {
-    --ui-aspect-radius: max(0px, calc(var(--base-aspect-ratio-radius, var(--ui-radius, 4px)) + 4px));
+    --ui-aspect-radius: max(0px, calc(var(--base-aspect-ratio-radius, var(--ui-radius, 6px)) + 4px));
     --ui-aspect-title-size: 15px;
     --ui-aspect-title-line-height: 22px;
     --ui-aspect-empty-icon-size: 36px;
@@ -114,10 +114,9 @@ const c = `
     position: absolute;
     inset: 0;
     pointer-events: none;
-    background:
-      radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--ui-aspect-highlight) 70%, transparent), transparent 58%),
-      linear-gradient(180deg, color-mix(in srgb, #ffffff 36%, transparent), transparent 28%);
-    opacity: 0.9;
+    /* No sheen: the surface is flat. */
+    background: none;
+    opacity: 0;
   }
 
   .surface::after {
@@ -200,11 +199,11 @@ const c = `
     border-radius: var(--ui-aspect-badge-radius);
     padding: 3px 8px;
     font-size: 10px;
-    font-weight: 700;
+    font-weight: 600;
     letter-spacing: 0.02em;
     text-transform: uppercase;
     line-height: 1.2;
-    color: color-mix(in srgb, var(--ui-aspect-accent) 82%, var(--ui-aspect-color) 18%);
+    color: color-mix(in srgb, var(--ui-aspect-accent) 45%, var(--ui-color-text-strong, var(--ui-aspect-color)));
     background: color-mix(in srgb, var(--ui-aspect-accent) 14%, var(--ui-color-surface, #ffffff));
     box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-aspect-accent) 24%, transparent);
     pointer-events: none;
@@ -230,8 +229,7 @@ const c = `
   }
 
   :host([interactive]):hover .frame {
-    transform: translateY(-2px);
-    box-shadow: 0 3px 6px rgba(15, 23, 42, 0.08), 0 22px 42px rgba(15, 23, 42, 0.14);
+    box-shadow: var(--shadow-3, 0 4px 12px rgba(15, 23, 42, 0.12));
     border-color: color-mix(in srgb, var(--ui-aspect-accent) 34%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
   }
 
@@ -319,9 +317,9 @@ class d extends o {
     ];
   }
   _normalizeRadius(e) {
-    if (e == null) return "var(--base-aspect-ratio-radius, var(--ui-radius, 4px))";
+    if (e == null) return "var(--base-aspect-ratio-radius, var(--ui-radius, 6px))";
     const t = e.trim().toLowerCase();
-    return t ? t === "full" || t === "pill" ? "999px" : /^-?\d+(\.\d+)?$/.test(t) ? `${t}px` : e : "var(--base-aspect-ratio-radius, var(--ui-radius, 4px))";
+    return t ? t === "full" || t === "pill" ? "999px" : /^-?\d+(\.\d+)?$/.test(t) ? `${t}px` : e : "var(--base-aspect-ratio-radius, var(--ui-radius, 6px))";
   }
   connectedCallback() {
     super.connectedCallback(), this.style.setProperty("--ui-aspect-radius", this._normalizeRadius(this.getAttribute("radius"))), this._observeResize(), this._observeContent();

package/dist/avatar.cjs.js

@@ -4,19 +4,19 @@
     --ui-avatar-size: var(--base-avatar-size-md, 40px);
     --ui-avatar-radius: var(--base-avatar-radius, 999px);
     --ui-avatar-bg-base: var(--base-avatar-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
-    --ui-avatar-bg: var(--ui-avatar-bg-base);
-    --ui-avatar-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 78%, var(--ui-color-text, #0f172a) 22%);
+    --ui-avatar-bg: color-mix(in srgb, var(--ui-avatar-accent) 14%, var(--ui-avatar-bg-base));
+    --ui-avatar-color: color-mix(in srgb, var(--ui-avatar-accent) 50%, var(--ui-color-text-strong, var(--ui-color-text, #0f172a)));
     --ui-avatar-muted: var(--ui-color-muted, #526175);
-    --ui-avatar-border: var(--base-avatar-border, 1px solid color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.14)) 82%, transparent));
-    --ui-avatar-ring: var(--base-avatar-shadow, 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.12));
+    --ui-avatar-border: var(--base-avatar-border, 0);
+    --ui-avatar-ring: var(--base-avatar-shadow, none);
     --ui-avatar-font-size: var(--ui-default-font-size, 14px);
-    --ui-avatar-font-weight: 650;
+    --ui-avatar-font-weight: 500;
     --ui-avatar-status-size: 11px;
     --ui-avatar-status-border: var(--base-avatar-status-border, 2px solid var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-avatar-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
     --ui-avatar-accent: var(--ui-color-primary, #2563eb);
     --ui-avatar-badge-bg: color-mix(in srgb, var(--ui-avatar-accent) 14%, var(--ui-color-surface, #ffffff));
-    --ui-avatar-badge-color: color-mix(in srgb, var(--ui-avatar-accent) 82%, var(--ui-color-text, #0f172a) 18%);
+    --ui-avatar-badge-color: color-mix(in srgb, var(--ui-avatar-accent) 45%, var(--ui-color-text-strong, #0f172a));
     --ui-avatar-badge-radius: var(--base-avatar-badge-radius, 999px);
     color-scheme: light dark;
   }
@@ -58,7 +58,7 @@
 
   :host([variant="surface"]) {
     --ui-avatar-bg: var(--ui-avatar-bg-base);
-    --ui-avatar-color: color-mix(in srgb, var(--ui-avatar-accent) 78%, var(--ui-color-text, #0f172a) 22%);
+    --ui-avatar-color: color-mix(in srgb, var(--ui-avatar-accent) 45%, var(--ui-color-text-strong, #0f172a));
   }
 
   :host([variant="soft"]) {
@@ -77,7 +77,7 @@
   :host([variant="outline"]) {
     --ui-avatar-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 88%, transparent);
     --ui-avatar-border: 1px solid color-mix(in srgb, var(--ui-avatar-accent) 45%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
-    --ui-avatar-color: color-mix(in srgb, var(--ui-avatar-accent) 82%, var(--ui-color-text, #0f172a) 18%);
+    --ui-avatar-color: color-mix(in srgb, var(--ui-avatar-accent) 45%, var(--ui-color-text-strong, #0f172a));
     --ui-avatar-ring: none;
   }
 
@@ -122,7 +122,7 @@
   }
 
   :host([ring]) .avatar {
-    --ui-avatar-ring: 0 0 0 3px color-mix(in srgb, var(--ui-avatar-accent) 24%, transparent), 0 10px 24px color-mix(in srgb, var(--ui-avatar-accent) 20%, rgba(15, 23, 42, 0.2));
+    --ui-avatar-ring: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-accent) 45%, transparent), 0 10px 24px color-mix(in srgb, var(--ui-avatar-accent) 20%, rgba(15, 23, 42, 0.2));
   }
 
   :host([interactive]) .avatar {
@@ -135,15 +135,11 @@
 
   :host([interactive]):focus-visible .avatar {
     border-color: color-mix(in srgb, var(--ui-avatar-accent) 52%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
-    box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-avatar-accent) 26%, transparent),
-      0 10px 26px color-mix(in srgb, var(--ui-avatar-accent) 20%, rgba(15, 23, 42, 0.18));
+    box-shadow: 0 0 0 2px var(--ui-color-background, #ffffff), 0 0 0 4px var(--ui-ring-color, var(--ui-color-focus-ring, #2563eb));
   }
 
   :host([interactive]):hover .avatar {
-    transform: translateY(-1px);
-    border-color: color-mix(in srgb, var(--ui-avatar-accent) 32%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
-    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 16px 30px rgba(15, 23, 42, 0.16);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-accent) 30%, transparent);
   }
 
   :host([interactive]:active:not([disabled])) .avatar {
@@ -191,7 +187,7 @@
 
   :host([state="error"]) .avatar {
     border-color: color-mix(in srgb, var(--ui-avatar-accent) 44%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-accent) 18%, transparent), 0 12px 24px rgba(15, 23, 42, 0.12);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-accent) 40%, transparent);
   }
 
   :host([state="success"]) {
@@ -200,7 +196,7 @@
 
   :host([state="success"]) .avatar {
     border-color: color-mix(in srgb, var(--ui-avatar-accent) 46%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-accent) 20%, transparent), 0 12px 24px rgba(15, 23, 42, 0.12);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-accent) 40%, transparent);
   }
 
   :host([shape="rounded"]) .avatar {
@@ -351,12 +347,12 @@
       box-shadow: none;
     }
   }
-`;function n(r){return String(r).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\"/g,"&quot;").replace(/'/g,"&#39;")}function d(r){const a=r.trim().split(/\s+/).filter(Boolean);return a.length===0?"?":a.length===1?a[0].slice(0,2).toUpperCase():`${a[0][0]||""}${a[1][0]||""}`.toUpperCase()}function b(r){if(!r)return"";const a=r.trim().toLowerCase();return a?/^\d+(\.\d+)?$/.test(a)?`${a}px`:a==="xs"?"24px":a==="sm"?"30px":a==="md"?"36px":a==="lg"?"44px":a==="xl"?"56px":a==="2xl"?"64px":r:""}function h(r){if(!r)return"";const a=r.trim().toLowerCase();return a?a==="full"||a==="pill"||a==="circle"?"999px":/^\d+(\.\d+)?$/.test(a)?`${a}px`:r:""}function _(r){if(r==="eager")return"eager";if(r==="lazy"||!r)return"lazy";const a=r.toLowerCase();return a==="true"||a==="1"?"eager":"lazy"}class g extends x.ElementBase{constructor(){super(),this._img=null,this._imgLoaded=!1,this._imgFailed=!1,this._managedRole=!1,this._autoName="",this._managedTabIndex=!1,this._managedAriaDisabled=!1,this._managedAriaBusy=!1,this._onImageLoad=this._onImageLoad.bind(this),this._onImageError=this._onImageError.bind(this),this._onInteractiveKeyDown=this._onInteractiveKeyDown.bind(this)}static get observedAttributes(){return["src","alt","initials","size","bg","color","radius","fontweight","shape","tone","variant","status","badge","ring","interactive","disabled","state","loading","headless","elevation"]}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||(this.setAttribute("role","img"),this._managedRole=!0),this.addEventListener("keydown",this._onInteractiveKeyDown),this._syncInteractiveA11y(),this._syncBusyState();const a=b(this.getAttribute("size"));a&&this.style.setProperty("--ui-avatar-size",a);const e=h(this.getAttribute("radius"));e&&this.style.setProperty("--ui-avatar-radius",e);const t=this.getAttribute("bg");t&&this.style.setProperty("--ui-avatar-bg",t);const i=this.getAttribute("color");i&&this.style.setProperty("--ui-avatar-color",i);const s=this.getAttribute("fontweight");s&&this.style.setProperty("--ui-avatar-font-weight",s)}attributeChangedCallback(a,e,t){if(e!==t){if(a==="src"&&e!==t&&(this._imgLoaded=!1,this._imgFailed=!1),(a==="interactive"||a==="disabled")&&this._syncInteractiveA11y(),a==="state"&&this._syncBusyState(),a==="size"){const i=b(t);i?this.style.setProperty("--ui-avatar-size",i):this.style.removeProperty("--ui-avatar-size")}if(a==="bg"&&(t?this.style.setProperty("--ui-avatar-bg",t):this.style.removeProperty("--ui-avatar-bg")),a==="color"&&(t?this.style.setProperty("--ui-avatar-color",t):this.style.removeProperty("--ui-avatar-color")),a==="radius"){const i=h(t);i?this.style.setProperty("--ui-avatar-radius",i):this.style.removeProperty("--ui-avatar-radius")}a==="fontweight"&&(t?this.style.setProperty("--ui-avatar-font-weight",t):this.style.removeProperty("--ui-avatar-font-weight")),this.isConnected&&this.requestRender()}}disconnectedCallback(){this._detachImageListeners(),this.removeEventListener("keydown",this._onInteractiveKeyDown),super.disconnectedCallback()}_syncInteractiveA11y(){const a=this.hasAttribute("interactive"),e=this.hasAttribute("disabled");if(a){(this._managedRole||this.getAttribute("role")==="img"||!this.hasAttribute("role"))&&(this.setAttribute("role","button"),this._managedRole=!0),this.hasAttribute("tabindex")?this._managedTabIndex&&this.setAttribute("tabindex",e?"-1":"0"):(this.setAttribute("tabindex",e?"-1":"0"),this._managedTabIndex=!0),(!this.hasAttribute("aria-disabled")||this._managedAriaDisabled)&&(this.setAttribute("aria-disabled",e?"true":"false"),this._managedAriaDisabled=!0);return}this._managedRole&&this.setAttribute("role","img"),this._managedTabIndex&&(this.removeAttribute("tabindex"),this._managedTabIndex=!1),this._managedAriaDisabled&&(this.removeAttribute("aria-disabled"),this._managedAriaDisabled=!1)}_syncBusyState(){if(this.getAttribute("state")==="loading"){(!this.hasAttribute("aria-busy")||this._managedAriaBusy)&&(this.setAttribute("aria-busy","true"),this._managedAriaBusy=!0);return}this._managedAriaBusy&&(this.removeAttribute("aria-busy"),this._managedAriaBusy=!1)}_onInteractiveKeyDown(a){!this.hasAttribute("interactive")||this.hasAttribute("disabled")||a.key!=="Enter"&&a.key!==" "||(a.preventDefault(),this.click())}_onImageLoad(){if(this._imgLoaded&&!this._imgFailed)return;this._imgLoaded=!0,this._imgFailed=!1,this.requestRender();const a={src:this.getAttribute("src")||""};this.dispatchEvent(new CustomEvent("avatar-load",{detail:a,bubbles:!0})),this.dispatchEvent(new CustomEvent("load",{detail:a,bubbles:!0}))}_onImageError(){if(this._imgFailed)return;this._imgLoaded=!1,this._imgFailed=!0,this.requestRender();const a={src:this.getAttribute("src")||""};this.dispatchEvent(new CustomEvent("avatar-error",{detail:a,bubbles:!0})),this.dispatchEvent(new CustomEvent("error",{detail:a,bubbles:!0}))}_detachImageListeners(){this._img&&(this._img.removeEventListener("load",this._onImageLoad),this._img.removeEventListener("error",this._onImageError),this._img=null)}render(){this._syncBusyState();const a=this.getAttribute("src")||"",e=this.getAttribute("alt")||"",t=this.getAttribute("initials")||"",i=(this.textContent||"").trim(),s=t.trim()?t.trim().slice(0,2).toUpperCase():e.trim()?d(e):i?d(i):"?",v=!!a&&!this._imgFailed,p=!v||!this._imgLoaded,f=_(this.getAttribute("loading")),m=this.hasAttribute("status"),o=(this.getAttribute("badge")||"").trim(),u=this.getAttribute("aria-label");if(u===null||u===this._autoName){const l=e.trim()||s,c=o&&!l.includes(o)?`${l}, ${o}`:l;c!==u&&this.setAttribute("aria-label",c),this._autoName=c}this._detachImageListeners(),this.setContent(`
+`;function n(r){return String(r).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\"/g,"&quot;").replace(/'/g,"&#39;")}function d(r){const a=r.trim().split(/\s+/).filter(Boolean);return a.length===0?"?":a.length===1?a[0].slice(0,2).toUpperCase():`${a[0][0]||""}${a[1][0]||""}`.toUpperCase()}function b(r){if(!r)return"";const a=r.trim().toLowerCase();return a?/^\d+(\.\d+)?$/.test(a)?`${a}px`:a==="xs"?"24px":a==="sm"?"30px":a==="md"?"36px":a==="lg"?"44px":a==="xl"?"56px":a==="2xl"?"64px":r:""}function h(r){if(!r)return"";const a=r.trim().toLowerCase();return a?a==="full"||a==="pill"||a==="circle"?"999px":/^\d+(\.\d+)?$/.test(a)?`${a}px`:r:""}function _(r){if(r==="eager")return"eager";if(r==="lazy"||!r)return"lazy";const a=r.toLowerCase();return a==="true"||a==="1"?"eager":"lazy"}class g extends x.ElementBase{constructor(){super(),this._img=null,this._imgLoaded=!1,this._imgFailed=!1,this._managedRole=!1,this._autoName="",this._managedTabIndex=!1,this._managedAriaDisabled=!1,this._managedAriaBusy=!1,this._onImageLoad=this._onImageLoad.bind(this),this._onImageError=this._onImageError.bind(this),this._onInteractiveKeyDown=this._onInteractiveKeyDown.bind(this)}static get observedAttributes(){return["src","alt","initials","size","bg","color","radius","fontweight","shape","tone","variant","status","badge","ring","interactive","disabled","state","loading","headless","elevation"]}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||(this.setAttribute("role","img"),this._managedRole=!0),this.addEventListener("keydown",this._onInteractiveKeyDown),this._syncInteractiveA11y(),this._syncBusyState();const a=b(this.getAttribute("size"));a&&this.style.setProperty("--ui-avatar-size",a);const e=h(this.getAttribute("radius"));e&&this.style.setProperty("--ui-avatar-radius",e);const t=this.getAttribute("bg");t&&this.style.setProperty("--ui-avatar-bg",t);const i=this.getAttribute("color");i&&this.style.setProperty("--ui-avatar-color",i);const s=this.getAttribute("fontweight");s&&this.style.setProperty("--ui-avatar-font-weight",s)}attributeChangedCallback(a,e,t){if(e!==t){if(a==="src"&&e!==t&&(this._imgLoaded=!1,this._imgFailed=!1),(a==="interactive"||a==="disabled")&&this._syncInteractiveA11y(),a==="state"&&this._syncBusyState(),a==="size"){const i=b(t);i?this.style.setProperty("--ui-avatar-size",i):this.style.removeProperty("--ui-avatar-size")}if(a==="bg"&&(t?this.style.setProperty("--ui-avatar-bg",t):this.style.removeProperty("--ui-avatar-bg")),a==="color"&&(t?this.style.setProperty("--ui-avatar-color",t):this.style.removeProperty("--ui-avatar-color")),a==="radius"){const i=h(t);i?this.style.setProperty("--ui-avatar-radius",i):this.style.removeProperty("--ui-avatar-radius")}a==="fontweight"&&(t?this.style.setProperty("--ui-avatar-font-weight",t):this.style.removeProperty("--ui-avatar-font-weight")),this.isConnected&&this.requestRender()}}disconnectedCallback(){this._detachImageListeners(),this.removeEventListener("keydown",this._onInteractiveKeyDown),super.disconnectedCallback()}_syncInteractiveA11y(){const a=this.hasAttribute("interactive"),e=this.hasAttribute("disabled");if(a){(this._managedRole||this.getAttribute("role")==="img"||!this.hasAttribute("role"))&&(this.setAttribute("role","button"),this._managedRole=!0),this.hasAttribute("tabindex")?this._managedTabIndex&&this.setAttribute("tabindex",e?"-1":"0"):(this.setAttribute("tabindex",e?"-1":"0"),this._managedTabIndex=!0),(!this.hasAttribute("aria-disabled")||this._managedAriaDisabled)&&(this.setAttribute("aria-disabled",e?"true":"false"),this._managedAriaDisabled=!0);return}this._managedRole&&this.setAttribute("role","img"),this._managedTabIndex&&(this.removeAttribute("tabindex"),this._managedTabIndex=!1),this._managedAriaDisabled&&(this.removeAttribute("aria-disabled"),this._managedAriaDisabled=!1)}_syncBusyState(){if(this.getAttribute("state")==="loading"){(!this.hasAttribute("aria-busy")||this._managedAriaBusy)&&(this.setAttribute("aria-busy","true"),this._managedAriaBusy=!0);return}this._managedAriaBusy&&(this.removeAttribute("aria-busy"),this._managedAriaBusy=!1)}_onInteractiveKeyDown(a){!this.hasAttribute("interactive")||this.hasAttribute("disabled")||a.key!=="Enter"&&a.key!==" "||(a.preventDefault(),this.click())}_onImageLoad(){if(this._imgLoaded&&!this._imgFailed)return;this._imgLoaded=!0,this._imgFailed=!1,this.requestRender();const a={src:this.getAttribute("src")||""};this.dispatchEvent(new CustomEvent("avatar-load",{detail:a,bubbles:!0})),this.dispatchEvent(new CustomEvent("load",{detail:a,bubbles:!0}))}_onImageError(){if(this._imgFailed)return;this._imgLoaded=!1,this._imgFailed=!0,this.requestRender();const a={src:this.getAttribute("src")||""};this.dispatchEvent(new CustomEvent("avatar-error",{detail:a,bubbles:!0})),this.dispatchEvent(new CustomEvent("error",{detail:a,bubbles:!0}))}_detachImageListeners(){this._img&&(this._img.removeEventListener("load",this._onImageLoad),this._img.removeEventListener("error",this._onImageError),this._img=null)}render(){this._syncBusyState();const a=this.getAttribute("src")||"",e=this.getAttribute("alt")||"",t=this.getAttribute("initials")||"",i=(this.textContent||"").trim(),s=t.trim()?t.trim().slice(0,2).toUpperCase():e.trim()?d(e):i?d(i):"?",v=!!a&&!this._imgFailed,f=!v||!this._imgLoaded,p=_(this.getAttribute("loading")),m=this.hasAttribute("status"),o=(this.getAttribute("badge")||"").trim(),u=this.getAttribute("aria-label");if(u===null||u===this._autoName){const l=e.trim()||s,c=o&&!l.includes(o)?`${l}, ${o}`:l;c!==u&&this.setAttribute("aria-label",c),this._autoName=c}this._detachImageListeners(),this.setContent(`
       <style>${y}</style>
       <div class="avatar" part="base">
-        ${v?`<img src="${n(a)}" alt="${n(e)}" loading="${f}" />`:""}
+        ${v?`<img src="${n(a)}" alt="${n(e)}" loading="${p}" />`:""}
         <span class="overlay" part="overlay" aria-hidden="true"></span>
-        <span class="fallback" part="fallback" ${p?"":"hidden"}>
+        <span class="fallback" part="fallback" ${f?"":"hidden"}>
           <slot>${n(s)}</slot>
         </span>
         ${m?'<span class="status" part="status" aria-hidden="true"></span>':""}

package/dist/avatar.esm.js

@@ -5,19 +5,19 @@ const x = `
     --ui-avatar-size: var(--base-avatar-size-md, 40px);
     --ui-avatar-radius: var(--base-avatar-radius, 999px);
     --ui-avatar-bg-base: var(--base-avatar-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
-    --ui-avatar-bg: var(--ui-avatar-bg-base);
-    --ui-avatar-color: color-mix(in srgb, var(--ui-color-primary, #2563eb) 78%, var(--ui-color-text, #0f172a) 22%);
+    --ui-avatar-bg: color-mix(in srgb, var(--ui-avatar-accent) 14%, var(--ui-avatar-bg-base));
+    --ui-avatar-color: color-mix(in srgb, var(--ui-avatar-accent) 50%, var(--ui-color-text-strong, var(--ui-color-text, #0f172a)));
     --ui-avatar-muted: var(--ui-color-muted, #526175);
-    --ui-avatar-border: var(--base-avatar-border, 1px solid color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.14)) 82%, transparent));
-    --ui-avatar-ring: var(--base-avatar-shadow, 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.12));
+    --ui-avatar-border: var(--base-avatar-border, 0);
+    --ui-avatar-ring: var(--base-avatar-shadow, none);
     --ui-avatar-font-size: var(--ui-default-font-size, 14px);
-    --ui-avatar-font-weight: 650;
+    --ui-avatar-font-weight: 500;
     --ui-avatar-status-size: 11px;
     --ui-avatar-status-border: var(--base-avatar-status-border, 2px solid var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-avatar-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
     --ui-avatar-accent: var(--ui-color-primary, #2563eb);
     --ui-avatar-badge-bg: color-mix(in srgb, var(--ui-avatar-accent) 14%, var(--ui-color-surface, #ffffff));
-    --ui-avatar-badge-color: color-mix(in srgb, var(--ui-avatar-accent) 82%, var(--ui-color-text, #0f172a) 18%);
+    --ui-avatar-badge-color: color-mix(in srgb, var(--ui-avatar-accent) 45%, var(--ui-color-text-strong, #0f172a));
     --ui-avatar-badge-radius: var(--base-avatar-badge-radius, 999px);
     color-scheme: light dark;
   }
@@ -59,7 +59,7 @@ const x = `
 
   :host([variant="surface"]) {
     --ui-avatar-bg: var(--ui-avatar-bg-base);
-    --ui-avatar-color: color-mix(in srgb, var(--ui-avatar-accent) 78%, var(--ui-color-text, #0f172a) 22%);
+    --ui-avatar-color: color-mix(in srgb, var(--ui-avatar-accent) 45%, var(--ui-color-text-strong, #0f172a));
   }
 
   :host([variant="soft"]) {
@@ -78,7 +78,7 @@ const x = `
   :host([variant="outline"]) {
     --ui-avatar-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 88%, transparent);
     --ui-avatar-border: 1px solid color-mix(in srgb, var(--ui-avatar-accent) 45%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
-    --ui-avatar-color: color-mix(in srgb, var(--ui-avatar-accent) 82%, var(--ui-color-text, #0f172a) 18%);
+    --ui-avatar-color: color-mix(in srgb, var(--ui-avatar-accent) 45%, var(--ui-color-text-strong, #0f172a));
     --ui-avatar-ring: none;
   }
 
@@ -123,7 +123,7 @@ const x = `
   }
 
   :host([ring]) .avatar {
-    --ui-avatar-ring: 0 0 0 3px color-mix(in srgb, var(--ui-avatar-accent) 24%, transparent), 0 10px 24px color-mix(in srgb, var(--ui-avatar-accent) 20%, rgba(15, 23, 42, 0.2));
+    --ui-avatar-ring: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-accent) 45%, transparent), 0 10px 24px color-mix(in srgb, var(--ui-avatar-accent) 20%, rgba(15, 23, 42, 0.2));
   }
 
   :host([interactive]) .avatar {
@@ -136,15 +136,11 @@ const x = `
 
   :host([interactive]):focus-visible .avatar {
     border-color: color-mix(in srgb, var(--ui-avatar-accent) 52%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
-    box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-avatar-accent) 26%, transparent),
-      0 10px 26px color-mix(in srgb, var(--ui-avatar-accent) 20%, rgba(15, 23, 42, 0.18));
+    box-shadow: 0 0 0 2px var(--ui-color-background, #ffffff), 0 0 0 4px var(--ui-ring-color, var(--ui-color-focus-ring, #2563eb));
   }
 
   :host([interactive]):hover .avatar {
-    transform: translateY(-1px);
-    border-color: color-mix(in srgb, var(--ui-avatar-accent) 32%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
-    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 16px 30px rgba(15, 23, 42, 0.16);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-accent) 30%, transparent);
   }
 
   :host([interactive]:active:not([disabled])) .avatar {
@@ -192,7 +188,7 @@ const x = `
 
   :host([state="error"]) .avatar {
     border-color: color-mix(in srgb, var(--ui-avatar-accent) 44%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-accent) 18%, transparent), 0 12px 24px rgba(15, 23, 42, 0.12);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-accent) 40%, transparent);
   }
 
   :host([state="success"]) {
@@ -201,7 +197,7 @@ const x = `
 
   :host([state="success"]) .avatar {
     border-color: color-mix(in srgb, var(--ui-avatar-accent) 46%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-accent) 20%, transparent), 0 12px 24px rgba(15, 23, 42, 0.12);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-avatar-accent) 40%, transparent);
   }
 
   :host([shape="rounded"]) .avatar {
@@ -468,7 +464,7 @@ class _ extends m {
   }
   render() {
     this._syncBusyState();
-    const a = this.getAttribute("src") || "", i = this.getAttribute("alt") || "", t = this.getAttribute("initials") || "", e = (this.textContent || "").trim(), s = t.trim() ? t.trim().slice(0, 2).toUpperCase() : i.trim() ? d(i) : e ? d(e) : "?", v = !!a && !this._imgFailed, g = !v || !this._imgLoaded, p = y(this.getAttribute("loading")), f = this.hasAttribute("status"), o = (this.getAttribute("badge") || "").trim(), u = this.getAttribute("aria-label");
+    const a = this.getAttribute("src") || "", i = this.getAttribute("alt") || "", t = this.getAttribute("initials") || "", e = (this.textContent || "").trim(), s = t.trim() ? t.trim().slice(0, 2).toUpperCase() : i.trim() ? d(i) : e ? d(e) : "?", v = !!a && !this._imgFailed, g = !v || !this._imgLoaded, f = y(this.getAttribute("loading")), p = this.hasAttribute("status"), o = (this.getAttribute("badge") || "").trim(), u = this.getAttribute("aria-label");
     if (u === null || u === this._autoName) {
       const l = i.trim() || s, c = o && !l.includes(o) ? `${l}, ${o}` : l;
       c !== u && this.setAttribute("aria-label", c), this._autoName = c;
@@ -476,12 +472,12 @@ class _ extends m {
     this._detachImageListeners(), this.setContent(`
       <style>${x}</style>
       <div class="avatar" part="base">
-        ${v ? `<img src="${n(a)}" alt="${n(i)}" loading="${p}" />` : ""}
+        ${v ? `<img src="${n(a)}" alt="${n(i)}" loading="${f}" />` : ""}
         <span class="overlay" part="overlay" aria-hidden="true"></span>
         <span class="fallback" part="fallback" ${g ? "" : "hidden"}>
           <slot>${n(s)}</slot>
         </span>
-        ${f ? '<span class="status" part="status" aria-hidden="true"></span>' : ""}
+        ${p ? '<span class="status" part="status" aria-hidden="true"></span>' : ""}
         <span class="badge" part="badge" ${o ? "" : "hidden"}>${n(o)}</span>
       </div>
     `), this._img = this.root.querySelector("img"), this._img && (this._img.addEventListener("load", this._onImageLoad), this._img.addEventListener("error", this._onImageError), this._img.complete && (this._img.naturalWidth > 0 ? this._onImageLoad() : this._onImageError()));

package/dist/badge.cjs.js

@@ -1,19 +1,20 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-DxbvhLJs.js"),g=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./ElementBase-DxbvhLJs.js"),g=`
   :host {
     display: inline-flex;
     --ui-badge-font-size: var(--base-badge-font-size, 12px);
-    --ui-badge-font-weight: var(--base-badge-font-weight, 600);
+    --ui-badge-font-weight: var(--base-badge-font-weight, 500);
     --ui-badge-line-height: 1.2;
-    --ui-badge-gap: var(--base-badge-gap, 6px);
-    --ui-badge-radius: var(--base-badge-radius, 999px);
-    --ui-badge-padding-block: var(--base-badge-padding-block, 5px);
-    --ui-badge-padding-inline: var(--base-badge-padding-inline, 10px);
+    --ui-badge-gap: var(--base-badge-gap, 4px);
+    --ui-badge-radius: var(--base-badge-radius, calc(var(--ui-radius, 6px) - 2px));
+    --ui-badge-padding-block: var(--base-badge-padding-block, 2px);
+    --ui-badge-padding-inline: var(--base-badge-padding-inline, 8px);
     --ui-badge-border-width: var(--base-badge-border-width, 1px);
     --ui-badge-accent: var(--ui-color-primary, #2563eb);
-    --ui-badge-bg-base: color-mix(in srgb, var(--ui-badge-accent) 10%, var(--ui-color-surface, #ffffff));
+    --ui-badge-on-accent: var(--ui-color-foreground-on-primary, #ffffff);
+    --ui-badge-bg-base: color-mix(in srgb, var(--ui-badge-accent) 14%, var(--ui-color-surface, #ffffff));
     --ui-badge-bg: var(--ui-badge-bg-base);
-    --ui-badge-color: color-mix(in srgb, var(--ui-badge-accent) 78%, var(--ui-color-text, #0f172a) 22%);
-    --ui-badge-border: color-mix(in srgb, var(--ui-badge-accent) 20%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-badge-color: color-mix(in srgb, var(--ui-badge-accent) 50%, var(--ui-color-text-strong, var(--ui-color-text, #0f172a)));
+    --ui-badge-border: transparent;
     --ui-badge-shadow: var(--base-badge-shadow, none);
     --ui-badge-dot-size: 7px;
     --ui-badge-dot-color: currentColor;
@@ -37,14 +38,19 @@
 
   :host([tone="success"]) {
     --ui-badge-accent: var(--ui-color-success, #15803d);
+    --ui-badge-fill: color-mix(in srgb, var(--ui-badge-accent) 76%, #000000);
+    --ui-badge-on-accent: #ffffff;
   }
 
   :host([tone="warning"]) {
     --ui-badge-accent: var(--ui-color-warning, #b45309);
+    --ui-badge-on-accent: var(--ui-color-foreground-on-warning, #ffffff);
   }
 
   :host([tone="danger"]) {
     --ui-badge-accent: var(--ui-color-danger, #dc2626);
+    --ui-badge-fill: color-mix(in srgb, var(--ui-badge-accent) 80%, #000000);
+    --ui-badge-on-accent: #ffffff;
   }
 
   :host([tone="purple"]) {
@@ -93,11 +99,11 @@
   }
 
   :host([variant="solid"]) {
-    --ui-badge-bg: var(--ui-badge-accent);
-    --ui-badge-color: #ffffff;
-    --ui-badge-border: color-mix(in srgb, var(--ui-badge-accent) 72%, #0f172a);
-    --ui-badge-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 10px 20px color-mix(in srgb, var(--ui-badge-accent) 28%, rgba(15, 23, 42, 0.22));
-    --ui-badge-dot-color: #ffffff;
+    --ui-badge-bg: var(--ui-badge-fill, var(--ui-badge-accent));
+    --ui-badge-color: var(--ui-badge-on-accent);
+    --ui-badge-border: transparent;
+    --ui-badge-shadow: none;
+    --ui-badge-dot-color: var(--ui-badge-on-accent);
   }
 
   :host([variant="outline"]) {
@@ -190,12 +196,11 @@
   :host([interactive]):focus-visible .badge {
     border-color: color-mix(in srgb, var(--ui-badge-accent) 52%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-badge-accent) 26%, transparent),
+      0 0 0 2px color-mix(in srgb, var(--ui-badge-accent) 45%, transparent),
       0 10px 22px rgba(15, 23, 42, 0.14);
   }
 
   :host([interactive]:not([disabled])):hover .badge {
-    transform: translateY(-1px);
     border-color: color-mix(in srgb, var(--ui-badge-accent) 36%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
     box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 14px 26px rgba(15, 23, 42, 0.14);
   }
@@ -229,7 +234,7 @@
     height: var(--ui-badge-dot-size);
     border-radius: 999px;
     background: var(--ui-badge-dot-color);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-badge-dot-color) 24%, transparent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-badge-dot-color) 45%, transparent);
     flex: 0 0 auto;
   }
 
@@ -406,13 +411,13 @@
       outline-offset: 2px;
     }
   }
-`;function c(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function o(t){if(!t)return"";const e=t.trim().toLowerCase();return e?e==="none"?"0px":e==="sm"?"8px":e==="md"||e==="large"?"12px":e==="lg"?"16px":e==="full"||e==="pill"?"9999px":/^\d+(\.\d+)?$/.test(e)?`${e}px`:t:""}class n extends u.ElementBase{constructor(){super(),this._removeBtn=null,this._managedRole=!1,this._managedTabIndex=!1,this._managedAriaDisabled=!1,this._managedAriaBusy=!1,this._managedAriaLabel=!1,this._lastLabelText="",this._onRemoveClick=this._onRemoveClick.bind(this),this._onHostKeyDown=this._onHostKeyDown.bind(this)}static get observedAttributes(){return["text","tone","variant","size","pill","dot","radius","disabled","interactive","removable","auto-remove","icon-only","truncate","max-width","state","headless","elevation"]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this._onHostKeyDown),this._syncInteractiveA11y(),this._syncBusyState();const e=o(this.getAttribute("radius"));e&&this.style.setProperty("--ui-badge-radius",e);const i=this.getAttribute("max-width");i&&this.style.setProperty("--ui-badge-max-inline-size",i)}disconnectedCallback(){this._detachListeners(),this.removeEventListener("keydown",this._onHostKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,i,a){if(i!==a){if((e==="interactive"||e==="disabled")&&this._syncInteractiveA11y(),e==="state"&&this._syncBusyState(),e==="radius"){const r=o(a);r?this.style.setProperty("--ui-badge-radius",r):this.style.removeProperty("--ui-badge-radius")}e==="max-width"&&(a?this.style.setProperty("--ui-badge-max-inline-size",a):this.style.removeProperty("--ui-badge-max-inline-size")),this.isConnected&&this.shouldRenderOnAttributeChange(e,i,a)&&this.requestRender()}}render(){this._syncInteractiveA11y(),this._syncBusyState();const e=(this.getAttribute("text")||"").trim(),i=this.hasAttribute("dot"),a=this.hasAttribute("removable"),r=this.hasAttribute("icon-only"),s=this.getAttribute("state")==="loading",d=this.querySelector('[slot="icon"]')!==null,b=(this.textContent||"").trim().length>0,l=!r&&(e.length>0||b);this._lastLabelText=e||(this.textContent||"").trim(),r&&!this.hasAttribute("aria-label")?(this.setAttribute("aria-label",this._lastLabelText||"Badge"),this._managedAriaLabel=!0):!r&&this._managedAriaLabel&&(this.removeAttribute("aria-label"),this._managedAriaLabel=!1),this.setContent(`
+`;function c(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function s(t){if(!t)return"";const e=t.trim().toLowerCase();return e?e==="none"?"0px":e==="sm"?"8px":e==="md"||e==="large"?"12px":e==="lg"?"16px":e==="full"||e==="pill"?"9999px":/^\d+(\.\d+)?$/.test(e)?`${e}px`:t:""}class n extends l.ElementBase{constructor(){super(),this._removeBtn=null,this._managedRole=!1,this._managedTabIndex=!1,this._managedAriaDisabled=!1,this._managedAriaBusy=!1,this._managedAriaLabel=!1,this._lastLabelText="",this._onRemoveClick=this._onRemoveClick.bind(this),this._onHostKeyDown=this._onHostKeyDown.bind(this)}static get observedAttributes(){return["text","tone","variant","size","pill","dot","radius","disabled","interactive","removable","auto-remove","icon-only","truncate","max-width","state","headless","elevation"]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this._onHostKeyDown),this._syncInteractiveA11y(),this._syncBusyState();const e=s(this.getAttribute("radius"));e&&this.style.setProperty("--ui-badge-radius",e);const i=this.getAttribute("max-width");i&&this.style.setProperty("--ui-badge-max-inline-size",i)}disconnectedCallback(){this._detachListeners(),this.removeEventListener("keydown",this._onHostKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,i,a){if(i!==a){if((e==="interactive"||e==="disabled")&&this._syncInteractiveA11y(),e==="state"&&this._syncBusyState(),e==="radius"){const r=s(a);r?this.style.setProperty("--ui-badge-radius",r):this.style.removeProperty("--ui-badge-radius")}e==="max-width"&&(a?this.style.setProperty("--ui-badge-max-inline-size",a):this.style.removeProperty("--ui-badge-max-inline-size")),this.isConnected&&this.shouldRenderOnAttributeChange(e,i,a)&&this.requestRender()}}render(){this._syncInteractiveA11y(),this._syncBusyState();const e=(this.getAttribute("text")||"").trim(),i=this.hasAttribute("dot"),a=this.hasAttribute("removable"),r=this.hasAttribute("icon-only"),o=this.getAttribute("state")==="loading",d=this.querySelector('[slot="icon"]')!==null,b=(this.textContent||"").trim().length>0,u=!r&&(e.length>0||b);this._lastLabelText=e||(this.textContent||"").trim(),r&&!this.hasAttribute("aria-label")?(this.setAttribute("aria-label",this._lastLabelText||"Badge"),this._managedAriaLabel=!0):!r&&this._managedAriaLabel&&(this.removeAttribute("aria-label"),this._managedAriaLabel=!1),this.setContent(`
       <style>${g}</style>
       <span class="badge" part="base">
         <span class="dot" part="dot" aria-hidden="true" ${i?"":"hidden"}></span>
-        <span class="spinner" part="spinner" aria-hidden="true" ${s?"":"hidden"}></span>
+        <span class="spinner" part="spinner" aria-hidden="true" ${o?"":"hidden"}></span>
         <span class="icon-slot" part="icon" ${d?"":"hidden"}><slot name="icon"></slot></span>
-        <span class="label-wrap" part="label-wrap" ${l?"":"hidden"}>
+        <span class="label-wrap" part="label-wrap" ${u?"":"hidden"}>
           <span class="label" part="label"><slot>${c(e)}</slot></span>
         </span>
         <button
@@ -421,12 +426,12 @@
           part="remove"
           aria-label="Remove badge"
           ${a?"":"hidden"}
-          ${this.hasAttribute("disabled")||s?"disabled":""}
+          ${this.hasAttribute("disabled")||o?"disabled":""}
         >
           <svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
             <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
           </svg>
         </button>
-        <span class="visually-hidden" aria-live="polite" ${s?"":"hidden"}>Loading</span>
+        <span class="visually-hidden" aria-live="polite" ${o?"":"hidden"}>Loading</span>
       </span>
     `),this._detachListeners(),this._removeBtn=this.root.querySelector(".remove-btn"),this._removeBtn&&this._removeBtn.addEventListener("click",this._onRemoveClick)}_syncInteractiveA11y(){const e=this.hasAttribute("interactive"),i=this.hasAttribute("disabled");if(e){this.hasAttribute("role")||(this.setAttribute("role","button"),this._managedRole=!0),this.hasAttribute("tabindex")?this._managedTabIndex&&this.setAttribute("tabindex",i?"-1":"0"):(this.setAttribute("tabindex",i?"-1":"0"),this._managedTabIndex=!0),(!this.hasAttribute("aria-disabled")||this._managedAriaDisabled)&&(this.setAttribute("aria-disabled",i?"true":"false"),this._managedAriaDisabled=!0);return}this._managedRole&&(this.removeAttribute("role"),this._managedRole=!1),this._managedTabIndex&&(this.removeAttribute("tabindex"),this._managedTabIndex=!1),this._managedAriaDisabled&&(this.removeAttribute("aria-disabled"),this._managedAriaDisabled=!1)}_syncBusyState(){if(this.getAttribute("state")==="loading"){(!this.hasAttribute("aria-busy")||this._managedAriaBusy)&&(this.setAttribute("aria-busy","true"),this._managedAriaBusy=!0);return}this._managedAriaBusy&&(this.removeAttribute("aria-busy"),this._managedAriaBusy=!1)}_detachListeners(){this._removeBtn&&(this._removeBtn.removeEventListener("click",this._onRemoveClick),this._removeBtn=null)}_onHostKeyDown(e){if(!this.hasAttribute("interactive")||this.hasAttribute("disabled"))return;const i=e.target;i&&typeof i.closest=="function"&&i.closest(".remove-btn")||e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.click())}_onRemoveClick(e){if(e.preventDefault(),e.stopPropagation(),this.hasAttribute("disabled")||this.getAttribute("state")==="loading")return;const i={text:this._lastLabelText,source:"button"},a=new CustomEvent("remove",{detail:i,bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(a),this.dispatchEvent(new CustomEvent("ui-remove",{detail:i,bubbles:!0,composed:!0})),!a.defaultPrevented&&this.hasAttribute("auto-remove")&&this.remove()}shouldRenderOnAttributeChange(e,i,a){return i===a?!1:!["tone","variant","size","pill","radius","disabled","interactive","truncate","max-width","headless","elevation"].includes(e)}}typeof customElements<"u"&&!customElements.get("ui-badge")&&customElements.define("ui-badge",n);exports.UIBadge=n;

package/dist/badge.esm.js

@@ -1,20 +1,21 @@
-import { E as l } from "./ElementBase-BeZT54Hj.mjs";
-const u = `
+import { E as u } from "./ElementBase-BeZT54Hj.mjs";
+const l = `
   :host {
     display: inline-flex;
     --ui-badge-font-size: var(--base-badge-font-size, 12px);
-    --ui-badge-font-weight: var(--base-badge-font-weight, 600);
+    --ui-badge-font-weight: var(--base-badge-font-weight, 500);
     --ui-badge-line-height: 1.2;
-    --ui-badge-gap: var(--base-badge-gap, 6px);
-    --ui-badge-radius: var(--base-badge-radius, 999px);
-    --ui-badge-padding-block: var(--base-badge-padding-block, 5px);
-    --ui-badge-padding-inline: var(--base-badge-padding-inline, 10px);
+    --ui-badge-gap: var(--base-badge-gap, 4px);
+    --ui-badge-radius: var(--base-badge-radius, calc(var(--ui-radius, 6px) - 2px));
+    --ui-badge-padding-block: var(--base-badge-padding-block, 2px);
+    --ui-badge-padding-inline: var(--base-badge-padding-inline, 8px);
     --ui-badge-border-width: var(--base-badge-border-width, 1px);
     --ui-badge-accent: var(--ui-color-primary, #2563eb);
-    --ui-badge-bg-base: color-mix(in srgb, var(--ui-badge-accent) 10%, var(--ui-color-surface, #ffffff));
+    --ui-badge-on-accent: var(--ui-color-foreground-on-primary, #ffffff);
+    --ui-badge-bg-base: color-mix(in srgb, var(--ui-badge-accent) 14%, var(--ui-color-surface, #ffffff));
     --ui-badge-bg: var(--ui-badge-bg-base);
-    --ui-badge-color: color-mix(in srgb, var(--ui-badge-accent) 78%, var(--ui-color-text, #0f172a) 22%);
-    --ui-badge-border: color-mix(in srgb, var(--ui-badge-accent) 20%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-badge-color: color-mix(in srgb, var(--ui-badge-accent) 50%, var(--ui-color-text-strong, var(--ui-color-text, #0f172a)));
+    --ui-badge-border: transparent;
     --ui-badge-shadow: var(--base-badge-shadow, none);
     --ui-badge-dot-size: 7px;
     --ui-badge-dot-color: currentColor;
@@ -38,14 +39,19 @@ const u = `
 
   :host([tone="success"]) {
     --ui-badge-accent: var(--ui-color-success, #15803d);
+    --ui-badge-fill: color-mix(in srgb, var(--ui-badge-accent) 76%, #000000);
+    --ui-badge-on-accent: #ffffff;
   }
 
   :host([tone="warning"]) {
     --ui-badge-accent: var(--ui-color-warning, #b45309);
+    --ui-badge-on-accent: var(--ui-color-foreground-on-warning, #ffffff);
   }
 
   :host([tone="danger"]) {
     --ui-badge-accent: var(--ui-color-danger, #dc2626);
+    --ui-badge-fill: color-mix(in srgb, var(--ui-badge-accent) 80%, #000000);
+    --ui-badge-on-accent: #ffffff;
   }
 
   :host([tone="purple"]) {
@@ -94,11 +100,11 @@ const u = `
   }
 
   :host([variant="solid"]) {
-    --ui-badge-bg: var(--ui-badge-accent);
-    --ui-badge-color: #ffffff;
-    --ui-badge-border: color-mix(in srgb, var(--ui-badge-accent) 72%, #0f172a);
-    --ui-badge-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 10px 20px color-mix(in srgb, var(--ui-badge-accent) 28%, rgba(15, 23, 42, 0.22));
-    --ui-badge-dot-color: #ffffff;
+    --ui-badge-bg: var(--ui-badge-fill, var(--ui-badge-accent));
+    --ui-badge-color: var(--ui-badge-on-accent);
+    --ui-badge-border: transparent;
+    --ui-badge-shadow: none;
+    --ui-badge-dot-color: var(--ui-badge-on-accent);
   }
 
   :host([variant="outline"]) {
@@ -191,12 +197,11 @@ const u = `
   :host([interactive]):focus-visible .badge {
     border-color: color-mix(in srgb, var(--ui-badge-accent) 52%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-badge-accent) 26%, transparent),
+      0 0 0 2px color-mix(in srgb, var(--ui-badge-accent) 45%, transparent),
       0 10px 22px rgba(15, 23, 42, 0.14);
   }
 
   :host([interactive]:not([disabled])):hover .badge {
-    transform: translateY(-1px);
     border-color: color-mix(in srgb, var(--ui-badge-accent) 36%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
     box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 14px 26px rgba(15, 23, 42, 0.14);
   }
@@ -230,7 +235,7 @@ const u = `
     height: var(--ui-badge-dot-size);
     border-radius: 999px;
     background: var(--ui-badge-dot-color);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-badge-dot-color) 24%, transparent);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-badge-dot-color) 45%, transparent);
     flex: 0 0 auto;
   }
 
@@ -411,12 +416,12 @@ const u = `
 function g(t) {
   return String(t).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function o(t) {
+function s(t) {
   if (!t) return "";
   const e = t.trim().toLowerCase();
   return e ? e === "none" ? "0px" : e === "sm" ? "8px" : e === "md" || e === "large" ? "12px" : e === "lg" ? "16px" : e === "full" || e === "pill" ? "9999px" : /^\d+(\.\d+)?$/.test(e) ? `${e}px` : t : "";
 }
-class c extends l {
+class c extends u {
   constructor() {
     super(), this._removeBtn = null, this._managedRole = !1, this._managedTabIndex = !1, this._managedAriaDisabled = !1, this._managedAriaBusy = !1, this._managedAriaLabel = !1, this._lastLabelText = "", this._onRemoveClick = this._onRemoveClick.bind(this), this._onHostKeyDown = this._onHostKeyDown.bind(this);
   }
@@ -443,7 +448,7 @@ class c extends l {
   }
   connectedCallback() {
     super.connectedCallback(), this.addEventListener("keydown", this._onHostKeyDown), this._syncInteractiveA11y(), this._syncBusyState();
-    const e = o(this.getAttribute("radius"));
+    const e = s(this.getAttribute("radius"));
     e && this.style.setProperty("--ui-badge-radius", e);
     const i = this.getAttribute("max-width");
     i && this.style.setProperty("--ui-badge-max-inline-size", i);
@@ -454,7 +459,7 @@ class c extends l {
   attributeChangedCallback(e, i, a) {
     if (i !== a) {
       if ((e === "interactive" || e === "disabled") && this._syncInteractiveA11y(), e === "state" && this._syncBusyState(), e === "radius") {
-        const r = o(a);
+        const r = s(a);
         r ? this.style.setProperty("--ui-badge-radius", r) : this.style.removeProperty("--ui-badge-radius");
       }
       e === "max-width" && (a ? this.style.setProperty("--ui-badge-max-inline-size", a) : this.style.removeProperty("--ui-badge-max-inline-size")), this.isConnected && this.shouldRenderOnAttributeChange(e, i, a) && this.requestRender();
@@ -462,12 +467,12 @@ class c extends l {
   }
   render() {
     this._syncInteractiveA11y(), this._syncBusyState();
-    const e = (this.getAttribute("text") || "").trim(), i = this.hasAttribute("dot"), a = this.hasAttribute("removable"), r = this.hasAttribute("icon-only"), s = this.getAttribute("state") === "loading", n = this.querySelector('[slot="icon"]') !== null, d = (this.textContent || "").trim().length > 0, b = !r && (e.length > 0 || d);
+    const e = (this.getAttribute("text") || "").trim(), i = this.hasAttribute("dot"), a = this.hasAttribute("removable"), r = this.hasAttribute("icon-only"), o = this.getAttribute("state") === "loading", n = this.querySelector('[slot="icon"]') !== null, d = (this.textContent || "").trim().length > 0, b = !r && (e.length > 0 || d);
     this._lastLabelText = e || (this.textContent || "").trim(), r && !this.hasAttribute("aria-label") ? (this.setAttribute("aria-label", this._lastLabelText || "Badge"), this._managedAriaLabel = !0) : !r && this._managedAriaLabel && (this.removeAttribute("aria-label"), this._managedAriaLabel = !1), this.setContent(`
-      <style>${u}</style>
+      <style>${l}</style>
       <span class="badge" part="base">
         <span class="dot" part="dot" aria-hidden="true" ${i ? "" : "hidden"}></span>
-        <span class="spinner" part="spinner" aria-hidden="true" ${s ? "" : "hidden"}></span>
+        <span class="spinner" part="spinner" aria-hidden="true" ${o ? "" : "hidden"}></span>
         <span class="icon-slot" part="icon" ${n ? "" : "hidden"}><slot name="icon"></slot></span>
         <span class="label-wrap" part="label-wrap" ${b ? "" : "hidden"}>
           <span class="label" part="label"><slot>${g(e)}</slot></span>
@@ -478,13 +483,13 @@ class c extends l {
           part="remove"
           aria-label="Remove badge"
           ${a ? "" : "hidden"}
-          ${this.hasAttribute("disabled") || s ? "disabled" : ""}
+          ${this.hasAttribute("disabled") || o ? "disabled" : ""}
         >
           <svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
             <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
           </svg>
         </button>
-        <span class="visually-hidden" aria-live="polite" ${s ? "" : "hidden"}>Loading</span>
+        <span class="visually-hidden" aria-live="polite" ${o ? "" : "hidden"}>Loading</span>
       </span>
     `), this._detachListeners(), this._removeBtn = this.root.querySelector(".remove-btn"), this._removeBtn && this._removeBtn.addEventListener("click", this._onRemoveClick);
   }