@editora/ui-core 0.1.24 → 0.2.0

package/dist/avatar.cjs.js

@@ -4,13 +4,13 @@
     --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);
@@ -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,13 +5,13 @@ 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);
@@ -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);
   }

package/dist/block-controls.cjs.js

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./ElementBase-DxbvhLJs.js"),v=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("./ElementBase-DxbvhLJs.js"),k=`
   :host {
     display: inline-flex;
     min-inline-size: 0;
     --ui-block-controls-gap: var(--base-block-controls-gap, 6px);
     --ui-block-controls-padding: var(--base-block-controls-padding, 8px);
-    --ui-block-controls-radius: var(--base-block-controls-radius, var(--ui-radius, 4px));
+    --ui-block-controls-radius: var(--base-block-controls-radius, var(--ui-radius, 6px));
     --ui-block-controls-border: var(--base-block-controls-border, 1px solid color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 88%, transparent));
-    --ui-block-controls-bg: var(--base-block-controls-bg, var(--color-panel, var(--ui-color-surface, #ffffff)));
+    --ui-block-controls-bg: var(--base-block-controls-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-block-controls-shadow: var(--base-block-controls-shadow, var(--shadow-2, none));
     --ui-block-controls-accent: var(--ui-color-primary, #2563eb);
     --ui-block-controls-focus-ring: var(--ui-color-focus-ring, #2563eb);
     --ui-block-controls-duration: 170ms;
-    --ui-block-controls-item-radius: var(--base-block-controls-item-radius, var(--ui-radius, 4px));
+    --ui-block-controls-item-radius: var(--base-block-controls-item-radius, var(--ui-radius, 6px));
     --ui-control-radius: var(--ui-block-controls-item-radius);
     --ui-control-min-height: 32px;
     --ui-control-padding-inline: 10px;
@@ -77,12 +77,11 @@
   .toolbar:focus-within {
     border-color: color-mix(in srgb, var(--ui-block-controls-focus-ring) 52%, transparent);
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-block-controls-focus-ring) 22%, transparent),
+      0 0 0 2px var(--ui-ring-color, var(--ui-block-controls-focus-ring)),
       0 14px 30px rgba(15, 23, 42, 0.14);
   }
 
   :host(:not([disabled])):hover .toolbar {
-    transform: translateY(-1px);
   }
 
   :host([orientation="vertical"]) .toolbar {
@@ -97,13 +96,13 @@
   :host([density="compact"]) {
     --ui-block-controls-gap: 4px;
     --ui-block-controls-padding: 6px;
-    --ui-block-controls-radius: calc(var(--ui-radius, 4px) + 2px);
+    --ui-block-controls-radius: calc(var(--ui-radius, 6px) + 2px);
   }
 
   :host([density="comfortable"]) {
     --ui-block-controls-gap: 8px;
     --ui-block-controls-padding: 10px;
-    --ui-block-controls-radius: calc(var(--ui-radius, 4px) + 6px);
+    --ui-block-controls-radius: calc(var(--ui-radius, 6px) + 6px);
   }
 
   :host([variant="surface"]) {
@@ -163,7 +162,7 @@
   :host([size="1"]) {
     --ui-block-controls-gap: 4px;
     --ui-block-controls-padding: 6px;
-    --ui-block-controls-item-radius: calc(var(--ui-radius, 4px) + 2px);
+    --ui-block-controls-item-radius: calc(var(--ui-radius, 6px) + 2px);
     --ui-control-min-height: 28px;
     --ui-control-padding-inline: 8px;
     --ui-control-gap: 5px;
@@ -174,7 +173,7 @@
   :host([size="3"]) {
     --ui-block-controls-gap: 8px;
     --ui-block-controls-padding: 10px;
-    --ui-block-controls-item-radius: calc(var(--ui-radius, 4px) + 4px);
+    --ui-block-controls-item-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-control-min-height: 36px;
     --ui-control-padding-inline: 12px;
     --ui-control-gap: 7px;
@@ -331,8 +330,8 @@
       box-shadow: none;
     }
   }
-`,u=["button:not([disabled])","a[href]",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])','[role="button"]','[role="menuitem"]'].join(", ");function m(i){return String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function f(i){if(!i)return"";const o=i.trim().toLowerCase();return o?o==="none"?"0px":o==="sm"?"8px":o==="md"||o==="large"?"12px":o==="lg"?"16px":o==="full"||o==="pill"?"9999px":/^\d+(\.\d+)?$/.test(o)?`${o}px`:i:""}function b(i){if(i.hasAttribute("disabled"))return!0;const o=i.getAttribute("aria-disabled");return o==="true"||o==="1"}function d(i){return i.hidden||i.getAttribute("aria-hidden")==="true"||i.closest('[hidden], [aria-hidden="true"]')?!0:i.getClientRects().length===0}function y(i){if(!(i instanceof HTMLElement))return!1;if(i.isContentEditable||i.closest('[contenteditable="true"], textarea, select, [role="textbox"]'))return!0;const o=i.closest("input");if(!o)return!1;const t=(o.type||"").toLowerCase();return!["button","submit","reset","checkbox","radio"].includes(t)}class g extends k.ElementBase{constructor(){super(),this._slots=[],this._onKeyDown=this._onKeyDown.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["orientation","headless","density","size","variant","tone","state","elevation","radius","wrap","loop","no-loop","disabled","active-index","aria-label"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("keydown",this._onKeyDown),this.root.addEventListener("focusin",this._onFocusIn),this._syncBusyState(),this._syncDisabledState();const o=f(this.getAttribute("radius"));o&&this.style.setProperty("--ui-block-controls-radius",o)}disconnectedCallback(){this.root.removeEventListener("keydown",this._onKeyDown),this.root.removeEventListener("focusin",this._onFocusIn),this._detachSlotListeners(),super.disconnectedCallback()}attributeChangedCallback(o,t,e){if(t!==e){if(o==="disabled"&&this._syncDisabledState(),o==="state"&&this._syncBusyState(),o==="active-index"&&this._applyRovingTabIndex(),o==="radius"){const r=f(e);r?this.style.setProperty("--ui-block-controls-radius",r):this.style.removeProperty("--ui-block-controls-radius")}this.isConnected&&["orientation","headless","aria-label"].includes(o)&&this.requestRender()}}_orientation(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}_direction(){const o=this.getAttribute("dir");if(o==="rtl"||o==="ltr")return o;const e=this.closest("[dir]")?.getAttribute("dir");return e==="rtl"||e==="ltr"?e:getComputedStyle(this).direction==="rtl"?"rtl":"ltr"}_loops(){return!this.hasAttribute("no-loop")}_syncBusyState(){this.getAttribute("state")==="loading"?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy")}_syncDisabledState(){this.hasAttribute("disabled")?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")}_resolveFocusable(o){if(!o||b(o)||d(o)||o.hasAttribute("data-separator")||o.tagName.toLowerCase()==="hr")return null;if(o.matches(u)||o.tabIndex>=0)return o;const e=o.shadowRoot?.querySelector(u);if(e&&!b(e)&&!d(e))return e;const r=o.querySelector(u);return r&&!b(r)&&!d(r)?r:null}_focusEntries(){const o=this._slots;if(o.length===0)return[];const t=o.flatMap(n=>n.assignedElements({flatten:!0})),e=new Set,r=[];return t.forEach(n=>{const a=this._resolveFocusable(n);!a||e.has(a)||(e.add(a),r.push({root:n,focusTarget:a}))}),r}_parseActiveIndex(o){const t=Number(this.getAttribute("active-index")||"");return!Number.isFinite(t)||o<=0||t<0?0:t>o-1?o-1:Math.floor(t)}_applyRovingTabIndex(o){const t=this._focusEntries();if(t.length===0)return;if(this.hasAttribute("disabled")){t.forEach(r=>r.focusTarget.setAttribute("tabindex","-1"));return}let e=t.findIndex(r=>r.focusTarget===o);e<0&&(e=t.findIndex(r=>r.focusTarget.getAttribute("tabindex")==="0")),e<0&&(e=this._parseActiveIndex(t.length)),t.forEach((r,n)=>{r.focusTarget.setAttribute("tabindex",n===e?"0":"-1")})}_attachSlotListeners(){this._detachSlotListeners(),this._slots=Array.from(this.root.querySelectorAll("slot")),this._slots.forEach(o=>o.addEventListener("slotchange",this._onSlotChange))}_detachSlotListeners(){this._slots.forEach(o=>o.removeEventListener("slotchange",this._onSlotChange)),this._slots=[]}_onSlotChange(){this._applyRovingTabIndex()}_onFocusIn(o){const t=o.target;if(!t)return;const r=this._focusEntries().find(n=>t===n.focusTarget||n.root.contains(t));r&&this._applyRovingTabIndex(r.focusTarget)}_onKeyDown(o){if(this.hasAttribute("disabled")||o.defaultPrevented||o.altKey||o.ctrlKey||o.metaKey||y(o.target))return;const t=this._focusEntries();if(t.length<2)return;const e=o.composedPath(),r=t.findIndex(p=>e.includes(p.root)||e.includes(p.focusTarget));if(r<0)return;const n=this._orientation()==="horizontal",a=this._direction()==="rtl",x=this._loops();let s=r,l=!1;if(n?o.key==="ArrowRight"?(s=a?r-1:r+1,l=!0):o.key==="ArrowLeft"&&(s=a?r+1:r-1,l=!0):o.key==="ArrowDown"?(s=r+1,l=!0):o.key==="ArrowUp"&&(s=r-1,l=!0),o.key==="Home"?(s=0,l=!0):o.key==="End"&&(s=t.length-1,l=!0),!l)return;if(x?s=(s+t.length)%t.length:(s<0&&(s=0),s>t.length-1&&(s=t.length-1)),s===r){o.preventDefault();return}o.preventDefault();const c=t[s].focusTarget;this._applyRovingTabIndex(c);try{c.focus({preventScroll:!0})}catch{c.focus()}const h={fromIndex:r,toIndex:s,total:t.length,key:o.key,orientation:this._orientation()};this.dispatchEvent(new CustomEvent("ui-navigate",{detail:h,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("navigate",{detail:h,bubbles:!0,composed:!0}))}render(){const o=this._orientation(),t=m(this.getAttribute("aria-label")||"Block controls"),e=this.getAttribute("state")==="loading"?"true":"false",r=this.hasAttribute("disabled")?"true":"false";this.setContent(`
-      <style>${v}</style>
+`,u=["button:not([disabled])","a[href]",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])','[role="button"]','[role="menuitem"]'].join(", ");function m(i){return String(i).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function f(i){if(!i)return"";const o=i.trim().toLowerCase();return o?o==="none"?"0px":o==="sm"?"8px":o==="md"||o==="large"?"12px":o==="lg"?"16px":o==="full"||o==="pill"?"9999px":/^\d+(\.\d+)?$/.test(o)?`${o}px`:i:""}function d(i){if(i.hasAttribute("disabled"))return!0;const o=i.getAttribute("aria-disabled");return o==="true"||o==="1"}function b(i){return i.hidden||i.getAttribute("aria-hidden")==="true"||i.closest('[hidden], [aria-hidden="true"]')?!0:i.getClientRects().length===0}function y(i){if(!(i instanceof HTMLElement))return!1;if(i.isContentEditable||i.closest('[contenteditable="true"], textarea, select, [role="textbox"]'))return!0;const o=i.closest("input");if(!o)return!1;const t=(o.type||"").toLowerCase();return!["button","submit","reset","checkbox","radio"].includes(t)}class g extends v.ElementBase{constructor(){super(),this._slots=[],this._onKeyDown=this._onKeyDown.bind(this),this._onFocusIn=this._onFocusIn.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["orientation","headless","density","size","variant","tone","state","elevation","radius","wrap","loop","no-loop","disabled","active-index","aria-label"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("keydown",this._onKeyDown),this.root.addEventListener("focusin",this._onFocusIn),this._syncBusyState(),this._syncDisabledState();const o=f(this.getAttribute("radius"));o&&this.style.setProperty("--ui-block-controls-radius",o)}disconnectedCallback(){this.root.removeEventListener("keydown",this._onKeyDown),this.root.removeEventListener("focusin",this._onFocusIn),this._detachSlotListeners(),super.disconnectedCallback()}attributeChangedCallback(o,t,e){if(t!==e){if(o==="disabled"&&this._syncDisabledState(),o==="state"&&this._syncBusyState(),o==="active-index"&&this._applyRovingTabIndex(),o==="radius"){const r=f(e);r?this.style.setProperty("--ui-block-controls-radius",r):this.style.removeProperty("--ui-block-controls-radius")}this.isConnected&&["orientation","headless","aria-label"].includes(o)&&this.requestRender()}}_orientation(){return this.getAttribute("orientation")==="vertical"?"vertical":"horizontal"}_direction(){const o=this.getAttribute("dir");if(o==="rtl"||o==="ltr")return o;const e=this.closest("[dir]")?.getAttribute("dir");return e==="rtl"||e==="ltr"?e:getComputedStyle(this).direction==="rtl"?"rtl":"ltr"}_loops(){return!this.hasAttribute("no-loop")}_syncBusyState(){this.getAttribute("state")==="loading"?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy")}_syncDisabledState(){this.hasAttribute("disabled")?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")}_resolveFocusable(o){if(!o||d(o)||b(o)||o.hasAttribute("data-separator")||o.tagName.toLowerCase()==="hr")return null;if(o.matches(u)||o.tabIndex>=0)return o;const e=o.shadowRoot?.querySelector(u);if(e&&!d(e)&&!b(e))return e;const r=o.querySelector(u);return r&&!d(r)&&!b(r)?r:null}_focusEntries(){const o=this._slots;if(o.length===0)return[];const t=o.flatMap(n=>n.assignedElements({flatten:!0})),e=new Set,r=[];return t.forEach(n=>{const a=this._resolveFocusable(n);!a||e.has(a)||(e.add(a),r.push({root:n,focusTarget:a}))}),r}_parseActiveIndex(o){const t=Number(this.getAttribute("active-index")||"");return!Number.isFinite(t)||o<=0||t<0?0:t>o-1?o-1:Math.floor(t)}_applyRovingTabIndex(o){const t=this._focusEntries();if(t.length===0)return;if(this.hasAttribute("disabled")){t.forEach(r=>r.focusTarget.setAttribute("tabindex","-1"));return}let e=t.findIndex(r=>r.focusTarget===o);e<0&&(e=t.findIndex(r=>r.focusTarget.getAttribute("tabindex")==="0")),e<0&&(e=this._parseActiveIndex(t.length)),t.forEach((r,n)=>{r.focusTarget.setAttribute("tabindex",n===e?"0":"-1")})}_attachSlotListeners(){this._detachSlotListeners(),this._slots=Array.from(this.root.querySelectorAll("slot")),this._slots.forEach(o=>o.addEventListener("slotchange",this._onSlotChange))}_detachSlotListeners(){this._slots.forEach(o=>o.removeEventListener("slotchange",this._onSlotChange)),this._slots=[]}_onSlotChange(){this._applyRovingTabIndex()}_onFocusIn(o){const t=o.target;if(!t)return;const r=this._focusEntries().find(n=>t===n.focusTarget||n.root.contains(t));r&&this._applyRovingTabIndex(r.focusTarget)}_onKeyDown(o){if(this.hasAttribute("disabled")||o.defaultPrevented||o.altKey||o.ctrlKey||o.metaKey||y(o.target))return;const t=this._focusEntries();if(t.length<2)return;const e=o.composedPath(),r=t.findIndex(p=>e.includes(p.root)||e.includes(p.focusTarget));if(r<0)return;const n=this._orientation()==="horizontal",a=this._direction()==="rtl",x=this._loops();let s=r,l=!1;if(n?o.key==="ArrowRight"?(s=a?r-1:r+1,l=!0):o.key==="ArrowLeft"&&(s=a?r+1:r-1,l=!0):o.key==="ArrowDown"?(s=r+1,l=!0):o.key==="ArrowUp"&&(s=r-1,l=!0),o.key==="Home"?(s=0,l=!0):o.key==="End"&&(s=t.length-1,l=!0),!l)return;if(x?s=(s+t.length)%t.length:(s<0&&(s=0),s>t.length-1&&(s=t.length-1)),s===r){o.preventDefault();return}o.preventDefault();const c=t[s].focusTarget;this._applyRovingTabIndex(c);try{c.focus({preventScroll:!0})}catch{c.focus()}const h={fromIndex:r,toIndex:s,total:t.length,key:o.key,orientation:this._orientation()};this.dispatchEvent(new CustomEvent("ui-navigate",{detail:h,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("navigate",{detail:h,bubbles:!0,composed:!0}))}render(){const o=this._orientation(),t=m(this.getAttribute("aria-label")||"Block controls"),e=this.getAttribute("state")==="loading"?"true":"false",r=this.hasAttribute("disabled")?"true":"false";this.setContent(`
+      <style>${k}</style>
       <div
         class="toolbar"
         part="base toolbar"