@editora/ui-core 0.2.2 → 0.3.0

package/dist/alert.esm.js

@@ -1,5 +1,5 @@
-import { E as w } from "./ElementBase-BeZT54Hj.mjs";
-const y = `
+import { E as y } from "./ElementBase-D5QsC5Vw.mjs";
+const z = `
   :host {
     display: block;
     --ui-alert-radius: var(--base-alert-radius, var(--ui-radius, 6px));
@@ -339,25 +339,25 @@ const y = `
 function n(r) {
   return String(r).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function z(r) {
+function k(r) {
   return r === "neutral" || r === "success" || r === "warning" || r === "danger" ? r : "info";
 }
-function k(r) {
+function _(r) {
   return r === "surface" || r === "outline" || r === "solid" || r === "soft" ? r : "surface";
 }
-function _(r) {
+function C(r) {
   return r === "sm" || r === "lg" ? r : r === "1" ? "sm" : r === "3" ? "lg" : "md";
 }
-function C(r) {
+function S(r) {
   return r === "banner" ? "banner" : "inline";
 }
-function S(r) {
+function A(r) {
   return r === "none" || r === "low" || r === "high" ? r : "low";
 }
-function A(r) {
+function $(r) {
   return r === "none" ? "none" : "line";
 }
-function $(r, i = "var(--base-alert-radius, var(--ui-radius, 6px))") {
+function E(r, i = "var(--base-alert-radius, var(--ui-radius, 6px))") {
   if (!r || !r.trim()) return i;
   const t = r.trim().toLowerCase();
   return t === "full" || t === "pill" ? "999px" : t === "square" || t === "none" ? "0px" : /^-?\d+(\.\d+)?$/.test(t) ? `${t}px` : r.trim();
@@ -369,15 +369,15 @@ function o(r, i) {
     return i ? e === i : e === "";
   });
 }
-function E(r) {
+function B(r) {
   return r === "success" ? '<svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10.2 8.3 13.4 15 6.8"></path></svg>' : r === "warning" ? '<svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3.6 17 16.4H3L10 3.6Z"></path><path d="M10 8v3.4"></path><circle cx="10" cy="14.1" r="0.9" fill="currentColor" stroke="none"></circle></svg>' : r === "danger" ? '<svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.1"></circle><path d="m7.5 7.5 5 5M12.5 7.5l-5 5"></path></svg>' : '<svg viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.1"></circle><path d="M10 13v-3.8"></path><circle cx="10" cy="6.5" r="0.9" fill="currentColor" stroke="none"></circle></svg>';
 }
-class B extends w {
+class L extends y {
   constructor() {
     super(), this._dismissBtn = null, this._actionsSlot = null, this._onDismiss = this._onDismiss.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
   }
   static get observedAttributes() {
-    return ["title", "description", "dismissible", "tone", "variant", "layout", "headless", "hidden", "size", "radius", "elevation", "indicator"];
+    return ["title", "description", "dismissible", "tone", "variant", "layout", "headless", "hidden", "size", "radius", "elevation", "indicator", "live"];
   }
   disconnectedCallback() {
     this._dismissBtn && (this._dismissBtn.removeEventListener("click", this._onDismiss), this._dismissBtn = null), this._actionsSlot && (this._actionsSlot.removeEventListener("slotchange", this._onSlotChange), this._actionsSlot = null), super.disconnectedCallback();
@@ -414,30 +414,30 @@ class B extends w {
   _syncHostStyles() {
     const i = this.getAttribute("radius");
     if (i && i.trim()) {
-      this.style.setProperty("--ui-alert-radius", $(i));
+      this.style.setProperty("--ui-alert-radius", E(i));
       return;
     }
     this.style.removeProperty("--ui-alert-radius");
   }
   render() {
-    const i = this.getAttribute("title") || "", t = this.getAttribute("description") || "", e = this.hasAttribute("dismissible"), a = z(this.getAttribute("tone")), l = k(this.getAttribute("variant")), u = C(this.getAttribute("layout")), c = _(this.getAttribute("size")), d = S(this.getAttribute("elevation")), h = A(this.getAttribute("indicator")), s = a === "danger" || a === "warning" ? "alert" : "status", p = s === "alert" ? "assertive" : "polite", g = o(this, "title"), b = o(this), f = o(this, "actions"), v = i || g ? `<div class="title" part="title"><slot name="title">${n(i)}</slot></div>` : "", m = t || b ? `<div class="description" part="description"><slot>${n(t)}</slot></div>` : "", x = a === "danger" ? "Dismiss critical alert" : "Dismiss alert";
+    const i = this.getAttribute("title") || "", t = this.getAttribute("description") || "", e = this.hasAttribute("dismissible"), a = k(this.getAttribute("tone")), l = _(this.getAttribute("variant")), u = S(this.getAttribute("layout")), c = C(this.getAttribute("size")), d = A(this.getAttribute("elevation")), h = $(this.getAttribute("indicator")), p = this.getAttribute("live") !== "false", s = a === "danger" || a === "warning" ? "alert" : "status", g = p ? `role="${s}" aria-live="${s === "alert" ? "assertive" : "polite"}" aria-atomic="true"` : "", b = o(this, "title"), f = o(this), v = o(this, "actions"), m = i || b ? `<div class="title" part="title"><slot name="title">${n(i)}</slot></div>` : "", x = t || f ? `<div class="description" part="description"><slot>${n(t)}</slot></div>` : "", w = a === "danger" ? "Dismiss critical alert" : "Dismiss alert";
     this.setContent(`
-      <style>${y}</style>
-      <section class="alert tone-${a} variant-${l} layout-${u} size-${c} elevation-${d} indicator-${h}" part="base" role="${s}" aria-live="${p}" aria-atomic="true">
+      <style>${z}</style>
+      <section class="alert tone-${a} variant-${l} layout-${u} size-${c} elevation-${d} indicator-${h}" part="base" ${g}>
         <div class="row">
           <span class="icon-wrap" part="icon-wrap" aria-hidden="true">
             <span class="icon" part="icon">
-              <slot name="icon">${E(a)}</slot>
+              <slot name="icon">${B(a)}</slot>
             </span>
           </span>
           <div class="content">
-            ${v}
             ${m}
-            <div class="actions" part="actions" data-empty="${f ? "false" : "true"}">
+            ${x}
+            <div class="actions" part="actions" data-empty="${v ? "false" : "true"}">
               <slot name="actions"></slot>
             </div>
           </div>
-          ${e ? `<button class="dismiss" part="dismiss" type="button" aria-label="${x}">
+          ${e ? `<button class="dismiss" part="dismiss" type="button" aria-label="${w}">
                   <svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
                     <path d="m6 6 8 8M14 6l-8 8"></path>
                   </svg>
@@ -450,7 +450,7 @@ class B extends w {
     return i !== "radius";
   }
 }
-typeof customElements < "u" && !customElements.get("ui-alert") && customElements.define("ui-alert", B);
+typeof customElements < "u" && !customElements.get("ui-alert") && customElements.define("ui-alert", L);
 export {
-  B as UIAlert
+  L as UIAlert
 };

package/dist/animated-beam.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const fe=require("./ElementBase-DxbvhLJs.js"),ie=3200,ne=0,oe=0,se=3,re=4,de=.18,me=3,D="#8b5cf6",q="#f59e0b",ge="rgba(148, 163, 184, 0.34)",Q=2,xe=new Set(["none","sm","md","lg","full"]),ue=new Set(["brand","neutral","info","success","warning","danger"]),ye=new Set(["calm","smooth","snappy","surge","pulse","heartbeat"]),Y=new Set(["auto","straight","soft","arc"]),X=new Set(["forward","reverse"]),ve=new Set(["none","glow","pulse","ring","shake"]),K=["node-id","column","row","size","from","to","curve","direction","reverse","duration","delay","tone","color-start","color-end","beam-factor","trail-width","beam-width","id"],c={xxs:{nodeSize:36,hubSize:50,columnGap:72,rowGap:28,padding:12,minHeight:160,radius:16},xs:{nodeSize:46,hubSize:62,columnGap:88,rowGap:36,padding:16,minHeight:190,radius:18},sm:{nodeSize:56,hubSize:74,columnGap:108,rowGap:48,padding:20,minHeight:220,radius:22},md:{nodeSize:84,hubSize:116,columnGap:156,rowGap:72,padding:32,minHeight:320,radius:28},lg:{nodeSize:98,hubSize:132,columnGap:188,rowGap:88,padding:40,minHeight:400,radius:34}},_={calm:{durationScale:1.18,glowOpacity:.26,glowBlur:9,beamFactor:.15,pattern:"progress"},smooth:{durationScale:1,glowOpacity:.34,glowBlur:11,beamFactor:de,pattern:"progress"},snappy:{durationScale:.82,glowOpacity:.38,glowBlur:10,beamFactor:.2,pattern:"progress"},surge:{durationScale:.68,glowOpacity:.44,glowBlur:13,beamFactor:.24,pattern:"progress"},pulse:{durationScale:.92,glowOpacity:.42,glowBlur:14,beamFactor:.22,pattern:"pulse"},heartbeat:{durationScale:.86,glowOpacity:.48,glowBlur:15,beamFactor:.18,pattern:"heartbeat"}},E={brand:{start:D,end:q},neutral:{start:"#64748b",end:"#cbd5e1"},info:{start:"#38bdf8",end:"#6366f1"},success:{start:"#22c55e",end:"#14b8a6"},warning:{start:"#f59e0b",end:"#f97316"},danger:{start:"#ef4444",end:"#f97316"}},_e=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const fe=require("./ElementBase-CbUsP3D6.js"),ie=3200,ne=0,oe=0,se=3,re=4,de=.18,me=3,D="#8b5cf6",q="#f59e0b",ge="rgba(148, 163, 184, 0.34)",Q=2,xe=new Set(["none","sm","md","lg","full"]),ue=new Set(["brand","neutral","info","success","warning","danger"]),ye=new Set(["calm","smooth","snappy","surge","pulse","heartbeat"]),Y=new Set(["auto","straight","soft","arc"]),X=new Set(["forward","reverse"]),ve=new Set(["none","glow","pulse","ring","shake"]),K=["node-id","column","row","size","from","to","curve","direction","reverse","duration","delay","tone","color-start","color-end","beam-factor","trail-width","beam-width","id"],c={xxs:{nodeSize:36,hubSize:50,columnGap:72,rowGap:28,padding:12,minHeight:160,radius:16},xs:{nodeSize:46,hubSize:62,columnGap:88,rowGap:36,padding:16,minHeight:190,radius:18},sm:{nodeSize:56,hubSize:74,columnGap:108,rowGap:48,padding:20,minHeight:220,radius:22},md:{nodeSize:84,hubSize:116,columnGap:156,rowGap:72,padding:32,minHeight:320,radius:28},lg:{nodeSize:98,hubSize:132,columnGap:188,rowGap:88,padding:40,minHeight:400,radius:34}},_={calm:{durationScale:1.18,glowOpacity:.26,glowBlur:9,beamFactor:.15,pattern:"progress"},smooth:{durationScale:1,glowOpacity:.34,glowBlur:11,beamFactor:de,pattern:"progress"},snappy:{durationScale:.82,glowOpacity:.38,glowBlur:10,beamFactor:.2,pattern:"progress"},surge:{durationScale:.68,glowOpacity:.44,glowBlur:13,beamFactor:.24,pattern:"progress"},pulse:{durationScale:.92,glowOpacity:.42,glowBlur:14,beamFactor:.22,pattern:"pulse"},heartbeat:{durationScale:.86,glowOpacity:.48,glowBlur:15,beamFactor:.18,pattern:"heartbeat"}},E={brand:{start:D,end:q},neutral:{start:"#64748b",end:"#cbd5e1"},info:{start:"#38bdf8",end:"#6366f1"},success:{start:"#22c55e",end:"#14b8a6"},warning:{start:"#f59e0b",end:"#f97316"},danger:{start:"#ef4444",end:"#f97316"}},_e=`
   :host {
     --ui-animated-beam-required-width: 0px;
     --ui-animated-beam-duration: ${ie}ms;

package/dist/animated-beam.esm.js

@@ -1,4 +1,4 @@
-import { E as pe } from "./ElementBase-BeZT54Hj.mjs";
+import { E as pe } from "./ElementBase-D5QsC5Vw.mjs";
 const ie = 3200, ne = 0, oe = 0, se = 3, re = 4, de = 0.18, me = 3, D = "#8b5cf6", q = "#f59e0b", fe = "rgba(148, 163, 184, 0.34)", j = 2, ge = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), ue = /* @__PURE__ */ new Set(["brand", "neutral", "info", "success", "warning", "danger"]), xe = /* @__PURE__ */ new Set(["calm", "smooth", "snappy", "surge", "pulse", "heartbeat"]), Y = /* @__PURE__ */ new Set(["auto", "straight", "soft", "arc"]), X = /* @__PURE__ */ new Set(["forward", "reverse"]), ye = /* @__PURE__ */ new Set(["none", "glow", "pulse", "ring", "shake"]), K = [
   "node-id",
   "column",

package/dist/animated-list.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-DxbvhLJs.js"),o="520ms",l="90ms",d="0ms",y=1400,h=.24,x=new Set(["none","sm","md","lg","full"]),v=new Set(["load","visible","manual"]),A=new Set(["calm","smooth","snappy","bouncy"]),S=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-CbUsP3D6.js"),o="520ms",l="90ms",d="0ms",y=1400,h=.24,x=new Set(["none","sm","md","lg","full"]),v=new Set(["load","visible","manual"]),A=new Set(["calm","smooth","snappy","bouncy"]),S=`
   :host {
     --ui-animated-list-duration: ${o};
     --ui-animated-list-stagger: ${l};

package/dist/animated-list.esm.js

@@ -1,4 +1,4 @@
-import { E as b } from "./ElementBase-BeZT54Hj.mjs";
+import { E as b } from "./ElementBase-D5QsC5Vw.mjs";
 const o = "520ms", l = "90ms", d = "0ms", _ = 1400, h = 0.24, y = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), x = /* @__PURE__ */ new Set(["load", "visible", "manual"]), v = /* @__PURE__ */ new Set(["calm", "smooth", "snappy", "bouncy"]), A = `
   :host {
     --ui-animated-list-duration: ${o};

package/dist/animated-text.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./ElementBase-DxbvhLJs.js"),T="720ms",A="55ms",M="0ms",x=1400,S=new Set(["fade-up","fade-down","slide-left","slide-right","blur","blur-up","pop","wave","zoom-in","rotate-in","flip-up","skew-in","glow","typewriter"]),z=new Set(["chars","words","lines"]),C=new Set(["load","visible","manual"]),R=new Set(["none","sm","md","lg","full"]),L=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./ElementBase-CbUsP3D6.js"),T="720ms",A="55ms",M="0ms",x=1400,S=new Set(["fade-up","fade-down","slide-left","slide-right","blur","blur-up","pop","wave","zoom-in","rotate-in","flip-up","skew-in","glow","typewriter"]),z=new Set(["chars","words","lines"]),C=new Set(["load","visible","manual"]),R=new Set(["none","sm","md","lg","full"]),L=`
   :host {
     --ui-animated-text-duration: ${T};
     --ui-animated-text-stagger: ${A};

package/dist/animated-text.esm.js

@@ -1,4 +1,4 @@
-import { E as w } from "./ElementBase-BeZT54Hj.mjs";
+import { E as w } from "./ElementBase-D5QsC5Vw.mjs";
 const k = "720ms", T = "55ms", A = "0ms", x = 1400, M = /* @__PURE__ */ new Set([
   "fade-up",
   "fade-down",

package/dist/app-header.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./ElementBase-DxbvhLJs.js"),p=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./ElementBase-CbUsP3D6.js"),p=`
   :host {
     display: block;
     --ui-app-header-height: var(--base-app-header-height, 64px);
@@ -268,6 +268,18 @@
     display: inline-flex;
   }
 
+  /* show-menu-button="narrow": only where ui-layout turns its sidebar into a drawer (980px, its
+     default drawer-breakpoint). */
+  :host([show-menu-button="narrow"]) .menu-btn {
+    display: none;
+  }
+
+  @media (max-width: 980px) {
+    :host([show-menu-button="narrow"]) .menu-btn {
+      display: inline-flex;
+    }
+  }
+
   .menu-btn svg {
     width: 16px;
     height: 16px;
@@ -337,7 +349,7 @@
       --ui-app-header-muted: CanvasText;
     }
   }
-`;class i extends t.ElementBase{static get observedAttributes(){return["sticky","bordered","dense","headless","show-menu-button","variant","tone","size","radius","elevation"]}constructor(){super(),this._onRootClick=this._onRootClick.bind(this)}_normalizeRadius(e){if(e==null)return"var(--base-app-header-radius, var(--ui-radius, 6px))";const a=e.trim().toLowerCase();return a?a==="full"||a==="pill"?"999px":/^-?\d+(\.\d+)?$/.test(a)?`${a}px`:e:"var(--base-app-header-radius, var(--ui-radius, 6px))"}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.style.setProperty("--ui-app-header-radius",this._normalizeRadius(this.getAttribute("radius")))}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),super.disconnectedCallback()}_onRootClick(e){e.target?.closest(".menu-btn")&&this.dispatchEvent(new CustomEvent("menu-trigger",{bubbles:!0}))}attributeChangedCallback(e,a,r){a!==r&&(e==="radius"&&this.style.setProperty("--ui-app-header-radius",this._normalizeRadius(r)),super.attributeChangedCallback(e,a,r))}render(){this.setContent(`
+`;class i extends t.ElementBase{static get observedAttributes(){return["sticky","bordered","dense","headless","show-menu-button","menu-expanded","variant","tone","size","radius","elevation"]}constructor(){super(),this._onRootClick=this._onRootClick.bind(this)}_normalizeRadius(e){if(e==null)return"var(--base-app-header-radius, var(--ui-radius, 6px))";const a=e.trim().toLowerCase();return a?a==="full"||a==="pill"?"999px":/^-?\d+(\.\d+)?$/.test(a)?`${a}px`:e:"var(--base-app-header-radius, var(--ui-radius, 6px))"}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.style.setProperty("--ui-app-header-radius",this._normalizeRadius(this.getAttribute("radius")))}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),super.disconnectedCallback()}_onRootClick(e){e.target?.closest(".menu-btn")&&this.dispatchEvent(new CustomEvent("menu-trigger",{bubbles:!0,cancelable:!0}))}attributeChangedCallback(e,a,r){if(a!==r){if(e==="radius"&&this.style.setProperty("--ui-app-header-radius",this._normalizeRadius(r)),e==="menu-expanded"){this._syncMenuExpanded();return}super.attributeChangedCallback(e,a,r)}}_syncMenuExpanded(){const e=this.root.querySelector(".menu-btn");if(!e)return;const a=this.getAttribute("menu-expanded");a==="true"||a==="false"?(e.setAttribute("aria-expanded",a),e.setAttribute("aria-label",a==="true"?"Close navigation":"Open navigation")):(e.removeAttribute("aria-expanded"),e.setAttribute("aria-label","Open navigation"))}render(){this.setContent(`
       <style>${p}</style>
       <header role="banner">
         <div class="start">
@@ -367,4 +379,4 @@
           <slot name="end"></slot>
         </div>
       </header>
-    `)}shouldRenderOnAttributeChange(e,a,r){return e==="show-menu-button"}}typeof customElements<"u"&&!customElements.get("ui-app-header")&&customElements.define("ui-app-header",i);exports.UIAppHeader=i;
+    `),this._syncMenuExpanded()}shouldRenderOnAttributeChange(e,a,r){return e==="show-menu-button"}}typeof customElements<"u"&&!customElements.get("ui-app-header")&&customElements.define("ui-app-header",i);exports.UIAppHeader=i;

package/dist/app-header.esm.js

@@ -1,4 +1,4 @@
-import { E as i } from "./ElementBase-BeZT54Hj.mjs";
+import { E as i } from "./ElementBase-D5QsC5Vw.mjs";
 const t = `
   :host {
     display: block;
@@ -269,6 +269,18 @@ const t = `
     display: inline-flex;
   }
 
+  /* show-menu-button="narrow": only where ui-layout turns its sidebar into a drawer (980px, its
+     default drawer-breakpoint). */
+  :host([show-menu-button="narrow"]) .menu-btn {
+    display: none;
+  }
+
+  @media (max-width: 980px) {
+    :host([show-menu-button="narrow"]) .menu-btn {
+      display: inline-flex;
+    }
+  }
+
   .menu-btn svg {
     width: 16px;
     height: 16px;
@@ -347,6 +359,7 @@ class p extends i {
       "dense",
       "headless",
       "show-menu-button",
+      "menu-expanded",
       "variant",
       "tone",
       "size",
@@ -371,12 +384,26 @@ class p extends i {
   _onRootClick(e) {
     e.target?.closest(".menu-btn") && this.dispatchEvent(
       new CustomEvent("menu-trigger", {
-        bubbles: !0
+        bubbles: !0,
+        cancelable: !0
       })
     );
   }
   attributeChangedCallback(e, a, r) {
-    a !== r && (e === "radius" && this.style.setProperty("--ui-app-header-radius", this._normalizeRadius(r)), super.attributeChangedCallback(e, a, r));
+    if (a !== r) {
+      if (e === "radius" && this.style.setProperty("--ui-app-header-radius", this._normalizeRadius(r)), e === "menu-expanded") {
+        this._syncMenuExpanded();
+        return;
+      }
+      super.attributeChangedCallback(e, a, r);
+    }
+  }
+  // ui-layout sets menu-expanded while its drawer is in use, so the button reports the state.
+  _syncMenuExpanded() {
+    const e = this.root.querySelector(".menu-btn");
+    if (!e) return;
+    const a = this.getAttribute("menu-expanded");
+    a === "true" || a === "false" ? (e.setAttribute("aria-expanded", a), e.setAttribute("aria-label", a === "true" ? "Close navigation" : "Open navigation")) : (e.removeAttribute("aria-expanded"), e.setAttribute("aria-label", "Open navigation"));
   }
   render() {
     this.setContent(`
@@ -409,7 +436,7 @@ class p extends i {
           <slot name="end"></slot>
         </div>
       </header>
-    `);
+    `), this._syncMenuExpanded();
   }
   shouldRenderOnAttributeChange(e, a, r) {
     return e === "show-menu-button";

package/dist/aspect-ratio.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("./ElementBase-DxbvhLJs.js"),p=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("./ElementBase-CbUsP3D6.js"),p=`
   :host {
     display: block;
     width: 100%;

package/dist/aspect-ratio.esm.js

@@ -1,4 +1,4 @@
-import { E as o } from "./ElementBase-BeZT54Hj.mjs";
+import { E as o } from "./ElementBase-D5QsC5Vw.mjs";
 const c = `
   :host {
     display: block;

package/dist/avatar.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-DxbvhLJs.js"),y=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-CbUsP3D6.js"),y=`
   :host {
     display: inline-block;
     --ui-avatar-size: var(--base-avatar-size-md, 40px);

package/dist/avatar.esm.js

@@ -1,4 +1,4 @@
-import { E as m } from "./ElementBase-BeZT54Hj.mjs";
+import { E as m } from "./ElementBase-D5QsC5Vw.mjs";
 const x = `
   :host {
     display: inline-block;

package/dist/badge.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./ElementBase-DxbvhLJs.js"),g=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./ElementBase-CbUsP3D6.js"),g=`
   :host {
     display: inline-flex;
     --ui-badge-font-size: var(--base-badge-font-size, 12px);

package/dist/badge.esm.js

@@ -1,4 +1,4 @@
-import { E as u } from "./ElementBase-BeZT54Hj.mjs";
+import { E as u } from "./ElementBase-D5QsC5Vw.mjs";
 const l = `
   :host {
     display: inline-flex;

package/dist/block-controls.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("./ElementBase-DxbvhLJs.js"),k=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("./ElementBase-CbUsP3D6.js"),k=`
   :host {
     display: inline-flex;
     min-inline-size: 0;

package/dist/block-controls.esm.js

@@ -1,4 +1,4 @@
-import { E as x } from "./ElementBase-BeZT54Hj.mjs";
+import { E as x } from "./ElementBase-D5QsC5Vw.mjs";
 const k = `
   :host {
     display: inline-flex;

package/dist/box.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-DxbvhLJs.js"),w={sm:"var(--ui-breakpoint-sm, 640px)",md:"var(--ui-breakpoint-md, 768px)",lg:"var(--ui-breakpoint-lg, 1024px)",xl:"var(--ui-breakpoint-xl, 1280px)"},d=["p","px","py","pt","pr","pb","pl","m","mx","my","mt","mr","mb","ml","width","w","minwidth","minw","maxwidth","maxw","height","h","minheight","minh","maxheight","maxh","background","bg","color","opacity","overflow","overflowx","overflowy","zindex","display","position","inset","top","right","bottom","left","justify","align","alignself","aligncontent","flexbasis","flexgrow","flexshrink","gap","rowgap","columngap","gridarea","gridcolumn","gridcolumnstart","gridcolumnend","gridrow","gridrowstart","gridrowend"],_={none:"0",xxs:"var(--ui-space-2xs, 2px)",xs:"var(--ui-space-xs, 4px)",sm:"var(--ui-space-sm, 8px)",md:"var(--ui-space-md, 12px)",lg:"var(--ui-space-lg, 20px)",xl:"var(--ui-space-xl, 28px)","2xl":"var(--ui-space-2xl, 40px)"},A=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-CbUsP3D6.js"),w={sm:"var(--ui-breakpoint-sm, 640px)",md:"var(--ui-breakpoint-md, 768px)",lg:"var(--ui-breakpoint-lg, 1024px)",xl:"var(--ui-breakpoint-xl, 1280px)"},d=["p","px","py","pt","pr","pb","pl","m","mx","my","mt","mr","mb","ml","width","w","minwidth","minw","maxwidth","maxw","height","h","minheight","minh","maxheight","maxh","background","bg","color","opacity","overflow","overflowx","overflowy","zindex","display","position","inset","top","right","bottom","left","justify","align","alignself","aligncontent","flexbasis","flexgrow","flexshrink","gap","rowgap","columngap","gridarea","gridcolumn","gridcolumnstart","gridcolumnend","gridrow","gridrowstart","gridrowend"],_={none:"0",xxs:"var(--ui-space-2xs, 2px)",xs:"var(--ui-space-xs, 4px)",sm:"var(--ui-space-sm, 8px)",md:"var(--ui-space-md, 12px)",lg:"var(--ui-space-lg, 20px)",xl:"var(--ui-space-xl, 28px)","2xl":"var(--ui-space-2xl, 40px)"},A=`
   :host {
     --ui-box-bg: transparent;
     --ui-box-color: inherit;

package/dist/box.esm.js

@@ -1,4 +1,4 @@
-import { E as v } from "./ElementBase-BeZT54Hj.mjs";
+import { E as v } from "./ElementBase-D5QsC5Vw.mjs";
 const y = {
   sm: "var(--ui-breakpoint-sm, 640px)",
   md: "var(--ui-breakpoint-md, 768px)",

package/dist/breadcrumb.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-DxbvhLJs.js"),A=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-CbUsP3D6.js"),A=require("./number-attribute-C4Rrl7d3.js"),k=require("./navigate-ChJVIIuS.js"),S=`
   :host {
     display: block;
     --ui-breadcrumb-gap: var(--base-breadcrumb-gap, 8px);
@@ -270,11 +270,11 @@
       --ui-breadcrumb-separator-bg: CanvasText;
     }
   }
-`;function v(n){if(!n)return"";const e=n.trim().toLowerCase();return e?e==="none"?"0px":e==="sm"?"8px":e==="md"?"12px":e==="lg"?"16px":e==="full"?"9999px":/^\d+(\.\d+)?$/.test(e)?`${e}px`:n:""}function k(n){if(!n)return"";const e=n.trim().toLowerCase();return e==="1"?"sm":e==="2"?"md":e==="3"?"lg":e==="sm"||e==="md"||e==="lg"?e:""}function b(n){return String(n).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function h(n){if(n==null)return!1;const e=n.trim().toLowerCase();return e===""||e==="true"||e==="1"||e==="yes"}function S(n){return h(n.getAttribute("disabled"))||h(n.getAttribute("data-disabled"))||n.getAttribute("aria-disabled")==="true"}function C(n){const e=n.getAttribute("aria-current");return e&&e!=="false"?!0:h(n.getAttribute("current"))||h(n.getAttribute("data-current"))}class x extends _.ElementBase{constructor(){super(),this._slots=[],this._onRootClick=this._onRootClick.bind(this),this._onRootKeyDown=this._onRootKeyDown.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["separator","max-items","current-index","size","variant","radius","elevation","tone","state","disabled","aria-label","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.root.addEventListener("keydown",this._onRootKeyDown),this._syncBusyState(),this._syncDisabledState(),this._syncSizeState();const e=v(this.getAttribute("radius"));e&&this.style.setProperty("--ui-breadcrumb-radius",e)}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this.root.removeEventListener("keydown",this._onRootKeyDown),this._detachSlotListeners(),super.disconnectedCallback()}attributeChangedCallback(e,i,t){if(i!==t){if(e==="state"&&this._syncBusyState(),e==="disabled"&&this._syncDisabledState(),e==="size"&&this._syncSizeState(),e==="radius"){const r=v(t);r?this.style.setProperty("--ui-breadcrumb-radius",r):this.style.removeProperty("--ui-breadcrumb-radius")}this.isConnected&&this.shouldRenderOnAttributeChange(e,i,t)&&this.requestRender()}}get headless(){return this.hasAttribute("headless")}set headless(e){e!==this.headless&&(e?this.setAttribute("headless",""):this.removeAttribute("headless"))}_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")}_syncSizeState(){const e=k(this.getAttribute("size"));if(e==="sm"){this.style.setProperty("--ui-breadcrumb-gap","6px"),this.style.setProperty("--ui-breadcrumb-font-size","13px"),this.style.setProperty("--ui-breadcrumb-item-padding-block","3px"),this.style.setProperty("--ui-breadcrumb-item-padding-inline","7px");return}if(e==="lg"){this.style.setProperty("--ui-breadcrumb-gap","10px"),this.style.setProperty("--ui-breadcrumb-font-size","15px"),this.style.setProperty("--ui-breadcrumb-item-padding-block","5px"),this.style.setProperty("--ui-breadcrumb-item-padding-inline","11px");return}this.style.removeProperty("--ui-breadcrumb-gap"),this.style.removeProperty("--ui-breadcrumb-font-size"),this.style.removeProperty("--ui-breadcrumb-item-padding-block"),this.style.removeProperty("--ui-breadcrumb-item-padding-inline")}_attachSlotListeners(){this._detachSlotListeners(),this._slots=Array.from(this.root.querySelectorAll("slot")),this._slots.forEach(e=>e.addEventListener("slotchange",this._onSlotChange))}_detachSlotListeners(){this._slots.forEach(e=>e.removeEventListener("slotchange",this._onSlotChange)),this._slots=[]}_onSlotChange(){this.requestRender()}_direction(){const e=this.getAttribute("dir");if(e==="rtl"||e==="ltr")return e;const t=this.closest("[dir]")?.getAttribute("dir");return t==="rtl"||t==="ltr"?t:getComputedStyle(this).direction==="rtl"?"rtl":"ltr"}_getSourceItems(){const e=Array.from(this.querySelectorAll('[slot="item"]'));return e.length>0?e:Array.from(this.children).filter(i=>i instanceof HTMLElement)}_maxItems(){const e=Number(this.getAttribute("max-items"));return Number.isFinite(e)?Math.max(3,Math.floor(e)):Number.POSITIVE_INFINITY}_currentIndex(e){const i=this.getAttribute("current-index");if(i!=null&&i!==""){const r=Number(i);if(Number.isFinite(r)){const a=Math.floor(r);if(a>=0&&a<e.length)return a}}const t=e.findIndex(r=>C(r));return t>=0?t:e.length>0?e.length-1:-1}_visibleIndices(e,i){const t=this._maxItems();if(!Number.isFinite(t)||e.length<=t)return e.map((c,l)=>l);const r=e.length-1,a=i>=0?i:r,s=new Set([0,r,a]);let o=a-1,u=a+1;for(;s.size<t&&(o>0||u<r)&&!(o>0&&(s.add(o),s.size>=t));)u<r&&s.add(u),o-=1,u+=1;for(let c=1;s.size<t&&c<r;c+=1)s.add(c);return Array.from(s).sort((c,l)=>c-l)}_getDisplayTokens(e){const i=this._currentIndex(e),t=this._visibleIndices(e,i),r=[];let a=null;return t.forEach(s=>{a!=null&&s-a>1&&r.push({kind:"ellipsis",key:`ellipsis-${a}-${s}`});const o=e[s];r.push({kind:"item",item:o,sourceIndex:s,current:s===i,disabled:S(o)}),a=s}),r}_renderLabel(e){const i=e.getAttribute("data-label");if(i)return b(i);const t=(e.innerHTML||"").trim();return t||b((e.textContent||"").trim())}_emitSelect(e,i){const r=this._getSourceItems()[e];if(!r)return null;const a=(r.getAttribute("data-label")||r.textContent||"").trim(),s=r.getAttribute("href")||void 0,o={index:e,label:a,href:s,source:i},u=new CustomEvent("select",{detail:o,bubbles:!0,cancelable:!0,composed:!0});return this.dispatchEvent(u),this.dispatchEvent(new CustomEvent("ui-select",{detail:o,bubbles:!0,composed:!0})),u}_onRootClick(e){const t=e.target.closest(".crumb-action");if(!t)return;if(this.hasAttribute("disabled")||t.getAttribute("aria-disabled")==="true"){e.preventDefault();return}const r=Number(t.getAttribute("data-source-index"));if(Number.isNaN(r))return;this._emitSelect(r,"click")?.defaultPrevented&&e.preventDefault()}_onRootKeyDown(e){const t=e.target.closest(".crumb-action");if(!t||this.hasAttribute("disabled"))return;if(e.key===" "&&t.tagName.toLowerCase()==="a"){e.preventDefault();const u=Number(t.getAttribute("data-source-index"));if(!Number.isNaN(u)&&this._emitSelect(u,"keyboard")?.defaultPrevented)return}if(!["ArrowRight","ArrowLeft","Home","End"].includes(e.key))return;const r=Array.from(this.root.querySelectorAll('.crumb-action:not([aria-disabled="true"])'));if(r.length===0)return;const a=r.indexOf(t);if(a<0)return;const s=this._direction()==="rtl";let o=a;e.key==="ArrowRight"&&(o=s?a-1:a+1),e.key==="ArrowLeft"&&(o=s?a+1:a-1),e.key==="Home"&&(o=0),e.key==="End"&&(o=r.length-1),o=(o+r.length)%r.length,r[o].focus(),e.preventDefault()}render(){const e=this._getSourceItems(),i=b(this.getAttribute("separator")||"/"),t=b(this.getAttribute("aria-label")||"Breadcrumb"),r=this._getDisplayTokens(e),a=this.hasAttribute("disabled"),s=this.getAttribute("state")==="loading",o=r.map((u,c)=>{const l=c===r.length-1;let d="";if(u.kind==="ellipsis")d='<span class="crumb-ellipsis" aria-hidden="true">…</span>';else{const m=this._renderLabel(u.item),f=u.item.getAttribute("href"),g=u.item.getAttribute("rel"),p=u.item.getAttribute("target");u.current?d=`<span class="crumb-current" aria-current="page">${m}</span>`:a||u.disabled||s?d=`<span class="crumb-disabled" aria-disabled="true">${m}</span>`:f?d=`<a class="crumb-action crumb-link" data-source-index="${u.sourceIndex}" href="${b(f)}"${p?` target="${b(p)}"`:""}${g?` rel="${b(g)}"`:""}>${m}</a>`:d=`<button type="button" class="crumb-action crumb-btn" data-source-index="${u.sourceIndex}">${m}</button>`}const y=l?"":`<span class="separator" aria-hidden="true" title="${i}">${i}</span>`;return`<li part="item">${d}${y}</li>`}).join("");this.setContent(`
-      <style>${A}</style>
+`;function v(u){if(!u)return"";const e=u.trim().toLowerCase();return e?e==="none"?"0px":e==="sm"?"8px":e==="md"?"12px":e==="lg"?"16px":e==="full"?"9999px":/^\d+(\.\d+)?$/.test(e)?`${e}px`:u:""}function C(u){if(!u)return"";const e=u.trim().toLowerCase();return e==="1"?"sm":e==="2"?"md":e==="3"?"lg":e==="sm"||e==="md"||e==="lg"?e:""}function b(u){return String(u).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function h(u){if(u==null)return!1;const e=u.trim().toLowerCase();return e===""||e==="true"||e==="1"||e==="yes"}function w(u){return h(u.getAttribute("disabled"))||h(u.getAttribute("data-disabled"))||u.getAttribute("aria-disabled")==="true"}function I(u){const e=u.getAttribute("aria-current");return e&&e!=="false"?!0:h(u.getAttribute("current"))||h(u.getAttribute("data-current"))}class x extends _.ElementBase{constructor(){super(),this._slots=[],this._onRootClick=this._onRootClick.bind(this),this._onRootKeyDown=this._onRootKeyDown.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["separator","max-items","current-index","size","variant","radius","elevation","tone","state","disabled","aria-label","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.root.addEventListener("keydown",this._onRootKeyDown),this._syncBusyState(),this._syncDisabledState(),this._syncSizeState();const e=v(this.getAttribute("radius"));e&&this.style.setProperty("--ui-breadcrumb-radius",e)}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this.root.removeEventListener("keydown",this._onRootKeyDown),this._detachSlotListeners(),super.disconnectedCallback()}attributeChangedCallback(e,i,t){if(i!==t){if(e==="state"&&this._syncBusyState(),e==="disabled"&&this._syncDisabledState(),e==="size"&&this._syncSizeState(),e==="radius"){const r=v(t);r?this.style.setProperty("--ui-breadcrumb-radius",r):this.style.removeProperty("--ui-breadcrumb-radius")}this.isConnected&&this.shouldRenderOnAttributeChange(e,i,t)&&this.requestRender()}}get headless(){return this.hasAttribute("headless")}set headless(e){e!==this.headless&&(e?this.setAttribute("headless",""):this.removeAttribute("headless"))}_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")}_syncSizeState(){const e=C(this.getAttribute("size"));if(e==="sm"){this.style.setProperty("--ui-breadcrumb-gap","6px"),this.style.setProperty("--ui-breadcrumb-font-size","13px"),this.style.setProperty("--ui-breadcrumb-item-padding-block","3px"),this.style.setProperty("--ui-breadcrumb-item-padding-inline","7px");return}if(e==="lg"){this.style.setProperty("--ui-breadcrumb-gap","10px"),this.style.setProperty("--ui-breadcrumb-font-size","15px"),this.style.setProperty("--ui-breadcrumb-item-padding-block","5px"),this.style.setProperty("--ui-breadcrumb-item-padding-inline","11px");return}this.style.removeProperty("--ui-breadcrumb-gap"),this.style.removeProperty("--ui-breadcrumb-font-size"),this.style.removeProperty("--ui-breadcrumb-item-padding-block"),this.style.removeProperty("--ui-breadcrumb-item-padding-inline")}_attachSlotListeners(){this._detachSlotListeners(),this._slots=Array.from(this.root.querySelectorAll("slot")),this._slots.forEach(e=>e.addEventListener("slotchange",this._onSlotChange))}_detachSlotListeners(){this._slots.forEach(e=>e.removeEventListener("slotchange",this._onSlotChange)),this._slots=[]}_onSlotChange(){this.requestRender()}_direction(){const e=this.getAttribute("dir");if(e==="rtl"||e==="ltr")return e;const t=this.closest("[dir]")?.getAttribute("dir");return t==="rtl"||t==="ltr"?t:getComputedStyle(this).direction==="rtl"?"rtl":"ltr"}_getSourceItems(){const e=Array.from(this.querySelectorAll('[slot="item"]'));return e.length>0?e:Array.from(this.children).filter(i=>i instanceof HTMLElement)}_maxItems(){const e=A.numberAttribute(this.getAttribute("max-items"),Number.POSITIVE_INFINITY);return Number.isFinite(e)?Math.max(3,Math.floor(e)):Number.POSITIVE_INFINITY}_currentIndex(e){const i=this.getAttribute("current-index");if(i!=null&&i!==""){const r=Number(i);if(Number.isFinite(r)){const a=Math.floor(r);if(a>=0&&a<e.length)return a}}const t=e.findIndex(r=>I(r));return t>=0?t:e.length>0?e.length-1:-1}_visibleIndices(e,i){const t=this._maxItems();if(!Number.isFinite(t)||e.length<=t)return e.map((c,l)=>l);const r=e.length-1,a=i>=0?i:r,s=new Set([0,r,a]);let n=a-1,o=a+1;for(;s.size<t&&(n>0||o<r)&&!(n>0&&(s.add(n),s.size>=t));)o<r&&s.add(o),n-=1,o+=1;for(let c=1;s.size<t&&c<r;c+=1)s.add(c);return Array.from(s).sort((c,l)=>c-l)}_getDisplayTokens(e){const i=this._currentIndex(e),t=this._visibleIndices(e,i),r=[];let a=null;return t.forEach(s=>{a!=null&&s-a>1&&r.push({kind:"ellipsis",key:`ellipsis-${a}-${s}`});const n=e[s];r.push({kind:"item",item:n,sourceIndex:s,current:s===i,disabled:w(n)}),a=s}),r}_renderLabel(e){const i=e.getAttribute("data-label");if(i)return b(i);const t=(e.innerHTML||"").trim();return t||b((e.textContent||"").trim())}_emitSelect(e,i){const r=this._getSourceItems()[e];if(!r)return null;const a=(r.getAttribute("data-label")||r.textContent||"").trim(),s=r.getAttribute("href")||r.getAttribute("data-href")||void 0,n={index:e,label:a,href:s,source:i},o=new CustomEvent("select",{detail:n,bubbles:!0,cancelable:!0,composed:!0});return this.dispatchEvent(o),this.dispatchEvent(new CustomEvent("ui-select",{detail:n,bubbles:!0,composed:!0})),o}_onRootClick(e){const t=e.target.closest(".crumb-action");if(!t)return;if(this.hasAttribute("disabled")||t.getAttribute("aria-disabled")==="true"){e.preventDefault();return}const r=Number(t.getAttribute("data-source-index"));if(Number.isNaN(r))return;if(this._emitSelect(r,"click")?.defaultPrevented){e.preventDefault();return}if(t.tagName.toLowerCase()==="a"){const s=t.getAttribute("href")||"",n=this._getSourceItems()[r],o=(n?.getAttribute("data-label")||n?.textContent||"").trim();k.requestNavigate(this,{index:r,label:o,href:s},e,t.getAttribute("target")||"")&&e.preventDefault()}}_onRootKeyDown(e){const t=e.target.closest(".crumb-action");if(!t||this.hasAttribute("disabled"))return;if(e.key===" "&&t.tagName.toLowerCase()==="a"){e.preventDefault();const o=Number(t.getAttribute("data-source-index"));if(!Number.isNaN(o)&&this._emitSelect(o,"keyboard")?.defaultPrevented)return}if(!["ArrowRight","ArrowLeft","Home","End"].includes(e.key))return;const r=Array.from(this.root.querySelectorAll('.crumb-action:not([aria-disabled="true"])'));if(r.length===0)return;const a=r.indexOf(t);if(a<0)return;const s=this._direction()==="rtl";let n=a;e.key==="ArrowRight"&&(n=s?a-1:a+1),e.key==="ArrowLeft"&&(n=s?a+1:a-1),e.key==="Home"&&(n=0),e.key==="End"&&(n=r.length-1),n=(n+r.length)%r.length,r[n].focus(),e.preventDefault()}render(){const e=this._getSourceItems(),i=b(this.getAttribute("separator")||"/"),t=b(this.getAttribute("aria-label")||"Breadcrumb"),r=this._getDisplayTokens(e),a=this.hasAttribute("disabled"),s=this.getAttribute("state")==="loading",n=r.map((o,c)=>{const l=c===r.length-1;let d="";if(o.kind==="ellipsis")d='<span class="crumb-ellipsis" aria-hidden="true">…</span>';else{const m=this._renderLabel(o.item),f=o.item.getAttribute("href")||o.item.getAttribute("data-href"),g=o.item.getAttribute("rel"),p=o.item.getAttribute("target");o.current?d=`<span class="crumb-current" aria-current="page">${m}</span>`:a||o.disabled||s?d=`<span class="crumb-disabled" aria-disabled="true">${m}</span>`:f?d=`<a class="crumb-action crumb-link" data-source-index="${o.sourceIndex}" href="${b(f)}"${p?` target="${b(p)}"`:""}${g?` rel="${b(g)}"`:""}>${m}</a>`:d=`<button type="button" class="crumb-action crumb-btn" data-source-index="${o.sourceIndex}">${m}</button>`}const y=l?"":`<span class="separator" aria-hidden="true" title="${i}">${i}</span>`;return`<li part="item">${d}${y}</li>`}).join("");this.setContent(`
+      <style>${S}</style>
       <nav role="navigation" aria-label="${t}">
         <ol part="list">
-          ${o}
+          ${n}
         </ol>
       </nav>
       <slot id="slot-item" name="item" hidden></slot>