@editora/ui-core 0.1.24 → 0.2.0

package/dist/block-controls.esm.js

@@ -5,14 +5,14 @@ const k = `
     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;
@@ -78,12 +78,11 @@ const k = `
   .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 {
@@ -98,13 +97,13 @@ const k = `
   :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"]) {
@@ -164,7 +163,7 @@ const k = `
   :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;
@@ -175,7 +174,7 @@ const k = `
   :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;

package/dist/box.cjs.js

@@ -7,7 +7,7 @@
     --ui-box-border-width: 1px;
     --ui-box-border-style: solid;
     --ui-box-shadow: none;
-    --ui-box-radius: var(--base-box-radius, var(--ui-radius, 4px));
+    --ui-box-radius: var(--base-box-radius, var(--ui-radius, 6px));
     --ui-box-backdrop: none;
     --ui-box-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     --ui-box-outline: color-mix(in srgb, var(--ui-box-accent) 30%, transparent);
@@ -125,8 +125,7 @@
   }
 
   :host([interactive]:not([disabled])):hover {
-    transform: translateY(-1px);
-    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.09), 0 22px 44px rgba(2, 6, 23, 0.14);
+    box-shadow: var(--shadow-3, 0 4px 12px rgba(15, 23, 42, 0.12));
   }
 
   :host([interactive]:not([disabled])):active {

package/dist/box.esm.js

@@ -81,7 +81,7 @@ const y = {
     --ui-box-border-width: 1px;
     --ui-box-border-style: solid;
     --ui-box-shadow: none;
-    --ui-box-radius: var(--base-box-radius, var(--ui-radius, 4px));
+    --ui-box-radius: var(--base-box-radius, var(--ui-radius, 6px));
     --ui-box-backdrop: none;
     --ui-box-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     --ui-box-outline: color-mix(in srgb, var(--ui-box-accent) 30%, transparent);
@@ -199,8 +199,7 @@ const y = {
   }
 
   :host([interactive]:not([disabled])):hover {
-    transform: translateY(-1px);
-    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.09), 0 22px 44px rgba(2, 6, 23, 0.14);
+    box-shadow: var(--shadow-3, 0 4px 12px rgba(15, 23, 42, 0.12));
   }
 
   :host([interactive]:not([disabled])):active {

package/dist/breadcrumb.cjs.js

@@ -2,17 +2,17 @@
   :host {
     display: block;
     --ui-breadcrumb-gap: var(--base-breadcrumb-gap, 8px);
-    --ui-breadcrumb-radius: var(--base-breadcrumb-radius, var(--ui-radius, 4px));
+    --ui-breadcrumb-radius: var(--base-breadcrumb-radius, var(--ui-radius, 6px));
     --ui-breadcrumb-font-size: var(--base-breadcrumb-font-size, 14px);
     --ui-breadcrumb-item-padding-block: var(--base-breadcrumb-item-padding-block, 4px);
     --ui-breadcrumb-item-padding-inline: var(--base-breadcrumb-item-padding-inline, 9px);
     --ui-breadcrumb-accent: var(--ui-color-primary, #2563eb);
-    --ui-breadcrumb-color: color-mix(in srgb, var(--ui-color-muted, #526175) 76%, var(--ui-color-text, #0f172a) 24%);
+    --ui-breadcrumb-color: var(--ui-color-text-secondary, color-mix(in srgb, var(--ui-color-muted, #526175) 76%, var(--ui-color-text, #0f172a) 24%));
     --ui-breadcrumb-muted: color-mix(in srgb, var(--ui-color-muted, #94a3b8) 70%, transparent);
-    --ui-breadcrumb-current: var(--ui-color-text, #0f172a);
-    --ui-breadcrumb-hover-bg: color-mix(in srgb, var(--ui-breadcrumb-accent) 10%, var(--ui-color-surface, #ffffff));
+    --ui-breadcrumb-current: var(--ui-color-text-strong, var(--ui-color-text, #0f172a));
+    --ui-breadcrumb-hover-bg: var(--ui-color-fill, color-mix(in srgb, var(--ui-breadcrumb-accent) 10%, var(--ui-color-surface, #ffffff)));
     --ui-breadcrumb-focus-ring: var(--ui-color-focus-ring, #2563eb);
-    --ui-breadcrumb-current-bg: color-mix(in srgb, var(--ui-breadcrumb-accent) 12%, var(--ui-color-surface, #ffffff));
+    --ui-breadcrumb-current-bg: transparent;
     --ui-breadcrumb-separator-bg: color-mix(in srgb, var(--ui-breadcrumb-accent) 22%, transparent);
     --ui-breadcrumb-shadow: var(--base-breadcrumb-shadow, none);
     color-scheme: light dark;
@@ -85,29 +85,23 @@
     cursor: pointer;
     text-decoration: none;
     font: inherit;
-    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
+    transition: background-color 150ms ease, color 150ms ease;
   }
 
   .crumb-action:hover {
     background: var(--ui-breadcrumb-hover-bg);
     color: var(--ui-breadcrumb-current);
-    transform: translateY(-1px);
-  }
-
-  .crumb-action:active {
-    transform: translateY(0);
   }
 
   .crumb-action:focus-visible {
-    outline: 2px solid var(--ui-breadcrumb-focus-ring);
-    outline-offset: 1px;
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-breadcrumb-focus-ring));
+    outline-offset: var(--ui-ring-offset, 2px);
   }
 
   .crumb-current {
     color: var(--ui-breadcrumb-current);
-    font-weight: 620;
+    font-weight: 500;
     background: var(--ui-breadcrumb-current-bg);
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-breadcrumb-accent) 26%, transparent);
   }
 
   .crumb-disabled {
@@ -276,13 +270,13 @@
       --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,r){if(i!==r){if(e==="state"&&this._syncBusyState(),e==="disabled"&&this._syncDisabledState(),e==="size"&&this._syncSizeState(),e==="radius"){const t=v(r);t?this.style.setProperty("--ui-breadcrumb-radius",t):this.style.removeProperty("--ui-breadcrumb-radius")}this.isConnected&&this.shouldRenderOnAttributeChange(e,i,r)&&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 r=this.closest("[dir]")?.getAttribute("dir");return r==="rtl"||r==="ltr"?r: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 t=Number(i);if(Number.isFinite(t)){const a=Math.floor(t);if(a>=0&&a<e.length)return a}}const r=e.findIndex(t=>C(t));return r>=0?r:e.length>0?e.length-1:-1}_visibleIndices(e,i){const r=this._maxItems();if(!Number.isFinite(r)||e.length<=r)return e.map((c,l)=>l);const t=e.length-1,a=i>=0?i:t,s=new Set([0,t,a]);let o=a-1,u=a+1;for(;s.size<r&&(o>0||u<t)&&!(o>0&&(s.add(o),s.size>=r));)u<t&&s.add(u),o-=1,u+=1;for(let c=1;s.size<r&&c<t;c+=1)s.add(c);return Array.from(s).sort((c,l)=>c-l)}_getDisplayTokens(e){const i=this._currentIndex(e),r=this._visibleIndices(e,i),t=[];let a=null;return r.forEach(s=>{a!=null&&s-a>1&&t.push({kind:"ellipsis",key:`ellipsis-${a}-${s}`});const o=e[s];t.push({kind:"item",item:o,sourceIndex:s,current:s===i,disabled:S(o)}),a=s}),t}_renderLabel(e){const i=e.getAttribute("data-label");if(i)return b(i);const r=(e.innerHTML||"").trim();return r||b((e.textContent||"").trim())}_emitSelect(e,i){const t=this._getSourceItems()[e];if(!t)return null;const a=(t.getAttribute("data-label")||t.textContent||"").trim(),s=t.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 r=e.target.closest(".crumb-action");if(!r)return;if(this.hasAttribute("disabled")||r.getAttribute("aria-disabled")==="true"){e.preventDefault();return}const t=Number(r.getAttribute("data-source-index"));if(Number.isNaN(t))return;this._emitSelect(t,"click")?.defaultPrevented&&e.preventDefault()}_onRootKeyDown(e){const r=e.target.closest(".crumb-action");if(!r||this.hasAttribute("disabled"))return;if(e.key===" "&&r.tagName.toLowerCase()==="a"){e.preventDefault();const u=Number(r.getAttribute("data-source-index"));if(!Number.isNaN(u)&&this._emitSelect(u,"keyboard")?.defaultPrevented)return}if(!["ArrowRight","ArrowLeft","Home","End"].includes(e.key))return;const t=Array.from(this.root.querySelectorAll('.crumb-action:not([aria-disabled="true"])'));if(t.length===0)return;const a=t.indexOf(r);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=t.length-1),o=(o+t.length)%t.length,t[o].focus(),e.preventDefault()}render(){const e=this._getSourceItems(),i=b(this.getAttribute("separator")||"/"),r=b(this.getAttribute("aria-label")||"Breadcrumb"),t=this._getDisplayTokens(e),a=this.hasAttribute("disabled"),s=this.getAttribute("state")==="loading",o=t.map((u,c)=>{const l=c===t.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(`
+`;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>
-      <nav role="navigation" aria-label="${r}">
+      <nav role="navigation" aria-label="${t}">
         <ol part="list">
           ${o}
         </ol>
       </nav>
       <slot id="slot-item" name="item" hidden></slot>
       <slot id="slot-default" hidden></slot>
-    `),this._attachSlotListeners(),this._syncBusyState(),this._syncDisabledState()}shouldRenderOnAttributeChange(e,i,r){return i===r?!1:!["size","variant","radius","elevation","tone","state","disabled"].includes(e)}}typeof customElements<"u"&&!customElements.get("ui-breadcrumb")&&customElements.define("ui-breadcrumb",x);exports.UIBreadcrumb=x;
+    `),this._attachSlotListeners(),this._syncBusyState(),this._syncDisabledState()}shouldRenderOnAttributeChange(e,i,t){return i===t?!1:!["size","variant","radius","elevation","tone","state","disabled"].includes(e)}}typeof customElements<"u"&&!customElements.get("ui-breadcrumb")&&customElements.define("ui-breadcrumb",x);exports.UIBreadcrumb=x;

package/dist/breadcrumb.esm.js

@@ -3,17 +3,17 @@ const _ = `
   :host {
     display: block;
     --ui-breadcrumb-gap: var(--base-breadcrumb-gap, 8px);
-    --ui-breadcrumb-radius: var(--base-breadcrumb-radius, var(--ui-radius, 4px));
+    --ui-breadcrumb-radius: var(--base-breadcrumb-radius, var(--ui-radius, 6px));
     --ui-breadcrumb-font-size: var(--base-breadcrumb-font-size, 14px);
     --ui-breadcrumb-item-padding-block: var(--base-breadcrumb-item-padding-block, 4px);
     --ui-breadcrumb-item-padding-inline: var(--base-breadcrumb-item-padding-inline, 9px);
     --ui-breadcrumb-accent: var(--ui-color-primary, #2563eb);
-    --ui-breadcrumb-color: color-mix(in srgb, var(--ui-color-muted, #526175) 76%, var(--ui-color-text, #0f172a) 24%);
+    --ui-breadcrumb-color: var(--ui-color-text-secondary, color-mix(in srgb, var(--ui-color-muted, #526175) 76%, var(--ui-color-text, #0f172a) 24%));
     --ui-breadcrumb-muted: color-mix(in srgb, var(--ui-color-muted, #94a3b8) 70%, transparent);
-    --ui-breadcrumb-current: var(--ui-color-text, #0f172a);
-    --ui-breadcrumb-hover-bg: color-mix(in srgb, var(--ui-breadcrumb-accent) 10%, var(--ui-color-surface, #ffffff));
+    --ui-breadcrumb-current: var(--ui-color-text-strong, var(--ui-color-text, #0f172a));
+    --ui-breadcrumb-hover-bg: var(--ui-color-fill, color-mix(in srgb, var(--ui-breadcrumb-accent) 10%, var(--ui-color-surface, #ffffff)));
     --ui-breadcrumb-focus-ring: var(--ui-color-focus-ring, #2563eb);
-    --ui-breadcrumb-current-bg: color-mix(in srgb, var(--ui-breadcrumb-accent) 12%, var(--ui-color-surface, #ffffff));
+    --ui-breadcrumb-current-bg: transparent;
     --ui-breadcrumb-separator-bg: color-mix(in srgb, var(--ui-breadcrumb-accent) 22%, transparent);
     --ui-breadcrumb-shadow: var(--base-breadcrumb-shadow, none);
     color-scheme: light dark;
@@ -86,29 +86,23 @@ const _ = `
     cursor: pointer;
     text-decoration: none;
     font: inherit;
-    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
+    transition: background-color 150ms ease, color 150ms ease;
   }
 
   .crumb-action:hover {
     background: var(--ui-breadcrumb-hover-bg);
     color: var(--ui-breadcrumb-current);
-    transform: translateY(-1px);
-  }
-
-  .crumb-action:active {
-    transform: translateY(0);
   }
 
   .crumb-action:focus-visible {
-    outline: 2px solid var(--ui-breadcrumb-focus-ring);
-    outline-offset: 1px;
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-breadcrumb-focus-ring));
+    outline-offset: var(--ui-ring-offset, 2px);
   }
 
   .crumb-current {
     color: var(--ui-breadcrumb-current);
-    font-weight: 620;
+    font-weight: 500;
     background: var(--ui-breadcrumb-current-bg);
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-breadcrumb-accent) 26%, transparent);
   }
 
   .crumb-disabled {
@@ -479,8 +473,8 @@ class S extends y {
       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"), p = u.item.getAttribute("rel"), g = 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)}"${g ? ` target="${b(g)}"` : ""}${p ? ` rel="${b(p)}"` : ""}>${m}</a>` : d = `<button type="button" class="crumb-action crumb-btn" data-source-index="${u.sourceIndex}">${m}</button>`;
+        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 x = l ? "" : `<span class="separator" aria-hidden="true" title="${i}">${i}</span>`;
       return `<li part="item">${d}${x}</li>`;

package/dist/button.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ui-button-BPrzJScZ.js");exports.UIButton=e.UIButton;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ui-button-CnLwXBnx.js");exports.UIButton=e.UIButton;

package/dist/button.esm.js

@@ -1,4 +1,4 @@
-import { U as r } from "./ui-button-Co8Sid6t.mjs";
+import { U as r } from "./ui-button-C3OmI7Sn.mjs";
 export {
   r as UIButton
 };