@editora/ui-core 0.1.8 → 0.1.10

package/dist/breadcrumb.cjs.js

@@ -0,0 +1,288 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-1b301e7f.js"),A=`
+  :host {
+    display: block;
+    --ui-breadcrumb-gap: var(--base-breadcrumb-gap, 8px);
+    --ui-breadcrumb-radius: var(--base-breadcrumb-radius, var(--ui-radius, 4px));
+    --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, #64748b) 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-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-separator-bg: color-mix(in srgb, var(--ui-breadcrumb-accent) 22%, transparent);
+    --ui-breadcrumb-shadow: var(--base-breadcrumb-shadow, none);
+    color-scheme: light dark;
+  }
+
+  :host([tone="neutral"]) {
+    --ui-breadcrumb-accent: color-mix(in srgb, var(--ui-color-muted, #64748b) 74%, var(--ui-color-text, #0f172a) 26%);
+  }
+
+  :host([tone="info"]) {
+    --ui-breadcrumb-accent: var(--ui-color-primary, #2563eb);
+  }
+
+  :host([tone="success"]) {
+    --ui-breadcrumb-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-breadcrumb-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-breadcrumb-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  nav {
+    display: block;
+    width: 100%;
+  }
+
+  ol {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-breadcrumb-gap);
+    font-size: var(--ui-breadcrumb-font-size);
+    color: var(--ui-breadcrumb-color);
+  }
+
+  li {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-breadcrumb-gap);
+    min-height: 30px;
+    min-inline-size: 0;
+  }
+
+  .crumb-action,
+  .crumb-current,
+  .crumb-disabled,
+  .crumb-ellipsis {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    border-radius: var(--ui-breadcrumb-radius);
+    padding: var(--ui-breadcrumb-item-padding-block) var(--ui-breadcrumb-item-padding-inline);
+    line-height: 1.2;
+    min-inline-size: 0;
+    white-space: nowrap;
+    box-shadow: var(--ui-breadcrumb-shadow);
+  }
+
+  .crumb-action {
+    border: none;
+    background: transparent;
+    color: var(--ui-breadcrumb-color);
+    cursor: pointer;
+    text-decoration: none;
+    font: inherit;
+    transition: background-color 150ms ease, color 150ms ease, transform 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;
+  }
+
+  .crumb-current {
+    color: var(--ui-breadcrumb-current);
+    font-weight: 620;
+    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 {
+    color: var(--ui-breadcrumb-muted);
+    opacity: 0.68;
+    cursor: not-allowed;
+  }
+
+  .crumb-ellipsis,
+  .separator {
+    color: var(--ui-breadcrumb-muted);
+  }
+
+  .separator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 10px;
+    padding-inline: 1px;
+    font-size: 0.92em;
+    line-height: 1;
+    opacity: 0.74;
+  }
+
+  :host([size="sm"]) {
+    --ui-breadcrumb-gap: 6px;
+    --ui-breadcrumb-radius: 8px;
+    --ui-breadcrumb-font-size: 13px;
+    --ui-breadcrumb-item-padding-block: 3px;
+    --ui-breadcrumb-item-padding-inline: 7px;
+  }
+
+  :host([size="lg"]) {
+    --ui-breadcrumb-gap: 10px;
+    --ui-breadcrumb-radius: 12px;
+    --ui-breadcrumb-font-size: 15px;
+    --ui-breadcrumb-item-padding-block: 5px;
+    --ui-breadcrumb-item-padding-inline: 11px;
+  }
+
+  :host([variant="surface"]) {
+    --ui-breadcrumb-hover-bg: color-mix(in srgb, var(--ui-breadcrumb-accent) 10%, var(--ui-color-surface, #ffffff));
+    --ui-breadcrumb-current-bg: color-mix(in srgb, var(--ui-breadcrumb-accent) 12%, var(--ui-color-surface, #ffffff));
+  }
+
+  :host([variant="soft"]) {
+    --ui-breadcrumb-hover-bg: color-mix(in srgb, var(--ui-breadcrumb-accent) 8%, var(--ui-color-surface, #ffffff));
+    --ui-breadcrumb-current-bg: color-mix(in srgb, var(--ui-breadcrumb-accent) 16%, var(--ui-color-surface, #ffffff));
+  }
+
+  :host([variant="solid"]) {
+    --ui-breadcrumb-hover-bg: color-mix(in srgb, var(--ui-breadcrumb-accent) 16%, var(--ui-color-surface, #ffffff));
+    --ui-breadcrumb-current-bg: color-mix(in srgb, var(--ui-breadcrumb-accent) 24%, var(--ui-color-surface, #ffffff));
+  }
+
+  :host([variant="outline"]) {
+    --ui-breadcrumb-hover-bg: color-mix(in srgb, var(--ui-breadcrumb-accent) 6%, transparent);
+    --ui-breadcrumb-current-bg: transparent;
+  }
+
+  :host([variant="ghost"]) {
+    --ui-breadcrumb-hover-bg: transparent;
+    --ui-breadcrumb-current-bg: transparent;
+    --ui-breadcrumb-shadow: none;
+  }
+
+  :host([variant="minimal"]) .crumb-action,
+  :host([variant="minimal"]) .crumb-current,
+  :host([variant="minimal"]) .crumb-disabled {
+    padding-inline: 3px;
+  }
+
+  :host([variant="minimal"]) .separator {
+    opacity: 0.5;
+  }
+
+  :host([elevation="low"]) {
+    --ui-breadcrumb-shadow: var(--base-breadcrumb-shadow, none);
+  }
+
+  :host([elevation="high"]) {
+    --ui-breadcrumb-shadow: 0 1px 2px rgba(2, 6, 23, 0.06), 0 8px 20px rgba(2, 6, 23, 0.12);
+  }
+
+  :host([radius="none"]) { --ui-breadcrumb-radius: 0px; }
+  :host([radius="sm"]) { --ui-breadcrumb-radius: 8px; }
+  :host([radius="md"]) { --ui-breadcrumb-radius: 12px; }
+  :host([radius="lg"]) { --ui-breadcrumb-radius: 16px; }
+  :host([radius="full"]) { --ui-breadcrumb-radius: 9999px; }
+
+  :host([state="loading"]) .crumb-action,
+  :host([state="loading"]) .crumb-current {
+    position: relative;
+    overflow: hidden;
+  }
+
+  :host([state="loading"]) .crumb-action::after,
+  :host([state="loading"]) .crumb-current::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      linear-gradient(
+        100deg,
+        color-mix(in srgb, transparent 100%, #ffffff) 0%,
+        color-mix(in srgb, var(--ui-breadcrumb-accent) 16%, transparent) 42%,
+        color-mix(in srgb, transparent 100%, #ffffff) 80%
+      );
+    background-size: 220% 100%;
+    animation: ui-breadcrumb-shimmer 1.2s linear infinite;
+    pointer-events: none;
+  }
+
+  :host([state="error"]) {
+    --ui-breadcrumb-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([state="success"]) {
+    --ui-breadcrumb-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([disabled]) .crumb-action {
+    pointer-events: none;
+    opacity: 0.58;
+    transform: none !important;
+  }
+
+  :host([headless]) nav {
+    display: none;
+  }
+
+  @keyframes ui-breadcrumb-shimmer {
+    from { background-position: 120% 0; }
+    to { background-position: -120% 0; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .crumb-action,
+    .crumb-current {
+      transition: none !important;
+    }
+    :host([state="loading"]) .crumb-action::after,
+    :host([state="loading"]) .crumb-current::after {
+      animation: none;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .crumb-current {
+      box-shadow: inset 0 0 0 2px currentColor;
+    }
+    .separator {
+      color: currentColor;
+      opacity: 1;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-breadcrumb-color: CanvasText;
+      --ui-breadcrumb-muted: CanvasText;
+      --ui-breadcrumb-current: CanvasText;
+      --ui-breadcrumb-hover-bg: Highlight;
+      --ui-breadcrumb-current-bg: Canvas;
+      --ui-breadcrumb-focus-ring: Highlight;
+      --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 i=this.closest("[dir]"),r=i==null?void 0:i.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;const a=this._emitSelect(t,"click");a!=null&&a.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)){const c=this._emitSelect(u,"keyboard");if(c!=null&&c.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(`
+      <style>${A}</style>
+      <nav role="navigation" aria-label="${r}">
+        <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;