@editora/ui-core 0.1.8 → 0.1.10

package/dist/breadcrumb.esm.js

@@ -0,0 +1,523 @@
+import { E as y } from "./ElementBase-909688f3.mjs";
+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-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 A(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 k(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 S extends y {
+  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 = A(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 = /* @__PURE__ */ 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: k(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 x = l ? "" : `<span class="separator" aria-hidden="true" title="${i}">${i}</span>`;
+      return `<li part="item">${d}${x}</li>`;
+    }).join("");
+    this.setContent(`
+      <style>${_}</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", S);
+export {
+  S as UIBreadcrumb
+};