@editora/ui-core 0.1.9 → 0.1.10

package/dist/badge.esm.js

@@ -0,0 +1,554 @@
+import { E as l } from "./ElementBase-909688f3.mjs";
+const u = `
+  :host {
+    display: inline-flex;
+    --ui-badge-font-size: var(--base-badge-font-size, 12px);
+    --ui-badge-font-weight: var(--base-badge-font-weight, 600);
+    --ui-badge-line-height: 1.2;
+    --ui-badge-gap: var(--base-badge-gap, 6px);
+    --ui-badge-radius: var(--base-badge-radius, 999px);
+    --ui-badge-padding-block: var(--base-badge-padding-block, 5px);
+    --ui-badge-padding-inline: var(--base-badge-padding-inline, 10px);
+    --ui-badge-border-width: var(--base-badge-border-width, 1px);
+    --ui-badge-accent: var(--ui-color-primary, #2563eb);
+    --ui-badge-bg-base: color-mix(in srgb, var(--ui-badge-accent) 10%, var(--ui-color-surface, #ffffff));
+    --ui-badge-bg: var(--ui-badge-bg-base);
+    --ui-badge-color: color-mix(in srgb, var(--ui-badge-accent) 78%, var(--ui-color-text, #0f172a) 22%);
+    --ui-badge-border: color-mix(in srgb, var(--ui-badge-accent) 20%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-badge-shadow: var(--base-badge-shadow, none);
+    --ui-badge-dot-size: 7px;
+    --ui-badge-dot-color: currentColor;
+    --ui-badge-remove-size: 16px;
+    --ui-badge-remove-bg: color-mix(in srgb, var(--ui-badge-color) 10%, transparent);
+    --ui-badge-remove-bg-hover: color-mix(in srgb, var(--ui-badge-color) 18%, transparent);
+    --ui-badge-remove-color: currentColor;
+    --ui-badge-duration: 160ms;
+    --ui-badge-max-inline-size: none;
+    color-scheme: light dark;
+  }
+
+  :host([tone="neutral"]) {
+    --ui-badge-accent: color-mix(in srgb, var(--ui-color-muted, #64748b) 74%, var(--ui-color-text, #0f172a) 26%);
+  }
+
+  :host([tone="brand"]),
+  :host([tone="info"]) {
+    --ui-badge-accent: var(--ui-color-primary, #2563eb);
+  }
+
+  :host([tone="success"]) {
+    --ui-badge-accent: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-badge-accent: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-badge-accent: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([tone="purple"]) {
+    --ui-badge-accent: #7c3aed;
+  }
+
+  .badge {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    min-inline-size: 0;
+    gap: var(--ui-badge-gap);
+    font-size: var(--ui-badge-font-size);
+    font-weight: var(--ui-badge-font-weight);
+    line-height: var(--ui-badge-line-height);
+    border-radius: var(--ui-badge-radius);
+    border: var(--ui-badge-border-width) solid var(--ui-badge-border);
+    background: var(--ui-badge-bg);
+    color: var(--ui-badge-color);
+    padding: var(--ui-badge-padding-block) var(--ui-badge-padding-inline);
+    box-shadow: var(--ui-badge-shadow);
+    white-space: nowrap;
+    user-select: none;
+    letter-spacing: 0.01em;
+    transition:
+      transform var(--ui-badge-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+      box-shadow var(--ui-badge-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+      border-color var(--ui-badge-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+      background-color var(--ui-badge-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+      opacity var(--ui-badge-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .badge::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    background:
+      linear-gradient(180deg, color-mix(in srgb, #ffffff 34%, transparent), transparent 42%),
+      radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--ui-badge-accent) 20%, transparent), transparent 62%);
+  }
+
+  :host([variant="surface"]) {
+    --ui-badge-bg: var(--ui-badge-bg-base);
+  }
+
+  :host([variant="solid"]) {
+    --ui-badge-bg: var(--ui-badge-accent);
+    --ui-badge-color: #ffffff;
+    --ui-badge-border: color-mix(in srgb, var(--ui-badge-accent) 72%, #0f172a);
+    --ui-badge-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 10px 20px color-mix(in srgb, var(--ui-badge-accent) 28%, rgba(15, 23, 42, 0.22));
+    --ui-badge-dot-color: #ffffff;
+  }
+
+  :host([variant="outline"]) {
+    --ui-badge-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 84%, transparent);
+    --ui-badge-border: color-mix(in srgb, var(--ui-badge-accent) 42%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    --ui-badge-shadow: none;
+  }
+
+  :host([variant="ghost"]) {
+    --ui-badge-bg: transparent;
+    --ui-badge-border: color-mix(in srgb, var(--ui-badge-accent) 24%, transparent);
+    --ui-badge-shadow: none;
+  }
+
+  :host([elevation="none"]) {
+    --ui-badge-shadow: none;
+  }
+
+  :host([elevation="low"]) {
+    --ui-badge-shadow: var(--base-badge-shadow, none);
+  }
+
+  :host([elevation="high"]) {
+    --ui-badge-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 14px 26px rgba(15, 23, 42, 0.14);
+  }
+
+  :host([size="xs"]),
+  :host([size="1"]),
+  :host([size="sm"]) {
+    --ui-badge-font-size: 11px;
+    --ui-badge-padding-block: 3px;
+    --ui-badge-padding-inline: 8px;
+    --ui-badge-gap: 5px;
+    --ui-badge-dot-size: 6px;
+    --ui-badge-remove-size: 14px;
+  }
+
+  :host([size="lg"]),
+  :host([size="3"]) {
+    --ui-badge-font-size: 13px;
+    --ui-badge-padding-block: 6px;
+    --ui-badge-padding-inline: 12px;
+    --ui-badge-gap: 7px;
+    --ui-badge-dot-size: 8px;
+    --ui-badge-remove-size: 18px;
+  }
+
+  :host([size="xl"]) {
+    --ui-badge-font-size: 14px;
+    --ui-badge-padding-block: 8px;
+    --ui-badge-padding-inline: 14px;
+    --ui-badge-gap: 8px;
+    --ui-badge-dot-size: 9px;
+    --ui-badge-remove-size: 20px;
+  }
+
+  :host([pill]) {
+    --ui-badge-radius: 9999px;
+  }
+
+  :host([radius="none"]) {
+    --ui-badge-radius: 0;
+  }
+
+  :host([radius="sm"]) {
+    --ui-badge-radius: 8px;
+  }
+
+  :host([radius="md"]),
+  :host([radius="large"]) {
+    --ui-badge-radius: 12px;
+  }
+
+  :host([radius="lg"]) {
+    --ui-badge-radius: 16px;
+  }
+
+  :host([radius="full"]) {
+    --ui-badge-radius: 9999px;
+  }
+
+  :host([interactive]) {
+    cursor: pointer;
+  }
+
+  :host([interactive]):focus-visible {
+    outline: none;
+  }
+
+  :host([interactive]):focus-visible .badge {
+    border-color: color-mix(in srgb, var(--ui-badge-accent) 52%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    box-shadow:
+      0 0 0 3px color-mix(in srgb, var(--ui-badge-accent) 26%, transparent),
+      0 10px 22px rgba(15, 23, 42, 0.14);
+  }
+
+  :host([interactive]:not([disabled])):hover .badge {
+    transform: translateY(-1px);
+    border-color: color-mix(in srgb, var(--ui-badge-accent) 36%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 14px 26px rgba(15, 23, 42, 0.14);
+  }
+
+  :host([interactive]:not([disabled])):active .badge {
+    transform: translateY(0) scale(0.985);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 16px rgba(15, 23, 42, 0.14);
+  }
+
+  :host([state="loading"]) {
+    --ui-badge-border: color-mix(in srgb, var(--ui-badge-accent) 44%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+  }
+
+  :host([state="error"]) {
+    --ui-badge-accent: var(--ui-color-danger, #dc2626);
+    --ui-badge-border: color-mix(in srgb, var(--ui-badge-accent) 46%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+  }
+
+  :host([state="success"]) {
+    --ui-badge-accent: var(--ui-color-success, #16a34a);
+    --ui-badge-border: color-mix(in srgb, var(--ui-badge-accent) 46%, var(--ui-color-border, rgba(15, 23, 42, 0.16)));
+  }
+
+  :host([state="error"]) .badge,
+  :host([state="success"]) .badge {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-badge-accent) 18%, transparent), var(--ui-badge-shadow);
+  }
+
+  .dot {
+    width: var(--ui-badge-dot-size);
+    height: var(--ui-badge-dot-size);
+    border-radius: 999px;
+    background: var(--ui-badge-dot-color);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-badge-dot-color) 24%, transparent);
+    flex: 0 0 auto;
+  }
+
+  :host([state="loading"]) .dot {
+    animation: ui-badge-pulse 1s ease-in-out infinite;
+  }
+
+  .spinner {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
+    border-top-color: currentColor;
+    box-sizing: border-box;
+    animation: ui-badge-spin 820ms linear infinite;
+    flex: 0 0 auto;
+  }
+
+  .icon-slot,
+  .label-wrap {
+    display: inline-flex;
+    align-items: center;
+    min-inline-size: 0;
+    position: relative;
+    z-index: 1;
+  }
+
+  .icon-slot[hidden],
+  .label-wrap[hidden],
+  .dot[hidden],
+  .spinner[hidden],
+  .remove-btn[hidden] {
+    display: none;
+  }
+
+  .icon-slot {
+    line-height: 1;
+    font-size: 0.95em;
+  }
+
+  .label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-inline-size: var(--ui-badge-max-inline-size);
+  }
+
+  :host([truncate]) .label {
+    max-inline-size: var(--ui-badge-max-inline-size, 20ch);
+  }
+
+  :host([icon-only]) .badge {
+    justify-content: center;
+    min-inline-size: calc(2 * var(--ui-badge-padding-inline) + 1em);
+  }
+
+  .remove-btn {
+    position: relative;
+    z-index: 1;
+    border: none;
+    inline-size: var(--ui-badge-remove-size);
+    block-size: var(--ui-badge-remove-size);
+    border-radius: 999px;
+    padding: 0;
+    margin-inline-start: 2px;
+    background: var(--ui-badge-remove-bg);
+    color: var(--ui-badge-remove-color);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    line-height: 1;
+    transition: background-color var(--ui-badge-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .remove-btn:hover {
+    background: var(--ui-badge-remove-bg-hover);
+  }
+
+  .remove-btn:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-badge-accent) 60%, var(--ui-color-focus-ring, #2563eb));
+    outline-offset: 1px;
+  }
+
+  .remove-btn svg {
+    inline-size: 10px;
+    block-size: 10px;
+    pointer-events: none;
+  }
+
+  .visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  :host([disabled]) .badge {
+    opacity: 0.55;
+    filter: saturate(0.76);
+    box-shadow: none;
+    transform: none !important;
+  }
+
+  :host([disabled]) .remove-btn {
+    opacity: 0.65;
+  }
+
+  :host([headless]) .badge {
+    display: none;
+  }
+
+  @keyframes ui-badge-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes ui-badge-pulse {
+    0%, 100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.45;
+      transform: scale(0.88);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .badge,
+    .remove-btn,
+    .spinner,
+    .dot {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .badge {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .badge,
+    .remove-btn {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border: 1px solid CanvasText;
+      box-shadow: none;
+    }
+    .dot {
+      background: CanvasText;
+      box-shadow: none;
+    }
+    .spinner {
+      border-color: CanvasText;
+      border-top-color: Highlight;
+    }
+    :host([interactive]):focus-visible .badge {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+`;
+function g(t) {
+  return String(t).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function s(t) {
+  if (!t)
+    return "";
+  const e = t.trim().toLowerCase();
+  return e ? e === "none" ? "0px" : e === "sm" ? "8px" : e === "md" || e === "large" ? "12px" : e === "lg" ? "16px" : e === "full" || e === "pill" ? "9999px" : /^\d+(\.\d+)?$/.test(e) ? `${e}px` : t : "";
+}
+class c extends l {
+  constructor() {
+    super(), this._removeBtn = null, this._managedRole = !1, this._managedTabIndex = !1, this._managedAriaDisabled = !1, this._managedAriaBusy = !1, this._managedAriaLabel = !1, this._lastLabelText = "", this._onRemoveClick = this._onRemoveClick.bind(this), this._onHostKeyDown = this._onHostKeyDown.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "text",
+      "tone",
+      "variant",
+      "size",
+      "pill",
+      "dot",
+      "radius",
+      "disabled",
+      "interactive",
+      "removable",
+      "auto-remove",
+      "icon-only",
+      "truncate",
+      "max-width",
+      "state",
+      "headless",
+      "elevation"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this._onHostKeyDown), this._syncInteractiveA11y(), this._syncBusyState();
+    const e = s(this.getAttribute("radius"));
+    e && this.style.setProperty("--ui-badge-radius", e);
+    const i = this.getAttribute("max-width");
+    i && this.style.setProperty("--ui-badge-max-inline-size", i);
+  }
+  disconnectedCallback() {
+    this._detachListeners(), this.removeEventListener("keydown", this._onHostKeyDown), super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, i, a) {
+    if (i !== a) {
+      if ((e === "interactive" || e === "disabled") && this._syncInteractiveA11y(), e === "state" && this._syncBusyState(), e === "radius") {
+        const r = s(a);
+        r ? this.style.setProperty("--ui-badge-radius", r) : this.style.removeProperty("--ui-badge-radius");
+      }
+      e === "max-width" && (a ? this.style.setProperty("--ui-badge-max-inline-size", a) : this.style.removeProperty("--ui-badge-max-inline-size")), this.isConnected && this.requestRender();
+    }
+  }
+  render() {
+    this._syncInteractiveA11y(), this._syncBusyState();
+    const e = (this.getAttribute("text") || "").trim(), i = this.hasAttribute("dot"), a = this.hasAttribute("removable"), r = this.hasAttribute("icon-only"), o = this.getAttribute("state") === "loading", n = this.querySelector('[slot="icon"]') !== null, d = (this.textContent || "").trim().length > 0, b = !r && (e.length > 0 || d);
+    this._lastLabelText = e || (this.textContent || "").trim(), r && !this.hasAttribute("aria-label") ? (this.setAttribute("aria-label", this._lastLabelText || "Badge"), this._managedAriaLabel = !0) : !r && this._managedAriaLabel && (this.removeAttribute("aria-label"), this._managedAriaLabel = !1), this.setContent(`
+      <style>${u}</style>
+      <span class="badge" part="base">
+        <span class="dot" part="dot" aria-hidden="true" ${i ? "" : "hidden"}></span>
+        <span class="spinner" part="spinner" aria-hidden="true" ${o ? "" : "hidden"}></span>
+        <span class="icon-slot" part="icon" ${n ? "" : "hidden"}><slot name="icon"></slot></span>
+        <span class="label-wrap" part="label-wrap" ${b ? "" : "hidden"}>
+          <span class="label" part="label"><slot>${g(e)}</slot></span>
+        </span>
+        <button
+          type="button"
+          class="remove-btn"
+          part="remove"
+          aria-label="Remove badge"
+          ${a ? "" : "hidden"}
+          ${this.hasAttribute("disabled") || o ? "disabled" : ""}
+        >
+          <svg viewBox="0 0 12 12" fill="none" aria-hidden="true">
+            <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          </svg>
+        </button>
+        <span class="visually-hidden" aria-live="polite" ${o ? "" : "hidden"}>Loading</span>
+      </span>
+    `), this._detachListeners(), this._removeBtn = this.root.querySelector(".remove-btn"), this._removeBtn && this._removeBtn.addEventListener("click", this._onRemoveClick);
+  }
+  _syncInteractiveA11y() {
+    const e = this.hasAttribute("interactive"), i = this.hasAttribute("disabled");
+    if (e) {
+      this.hasAttribute("role") || (this.setAttribute("role", "button"), this._managedRole = !0), this.hasAttribute("tabindex") ? this._managedTabIndex && this.setAttribute("tabindex", i ? "-1" : "0") : (this.setAttribute("tabindex", i ? "-1" : "0"), this._managedTabIndex = !0), (!this.hasAttribute("aria-disabled") || this._managedAriaDisabled) && (this.setAttribute("aria-disabled", i ? "true" : "false"), this._managedAriaDisabled = !0);
+      return;
+    }
+    this._managedRole && (this.removeAttribute("role"), this._managedRole = !1), this._managedTabIndex && (this.removeAttribute("tabindex"), this._managedTabIndex = !1), this._managedAriaDisabled && (this.removeAttribute("aria-disabled"), this._managedAriaDisabled = !1);
+  }
+  _syncBusyState() {
+    if (this.getAttribute("state") === "loading") {
+      (!this.hasAttribute("aria-busy") || this._managedAriaBusy) && (this.setAttribute("aria-busy", "true"), this._managedAriaBusy = !0);
+      return;
+    }
+    this._managedAriaBusy && (this.removeAttribute("aria-busy"), this._managedAriaBusy = !1);
+  }
+  _detachListeners() {
+    this._removeBtn && (this._removeBtn.removeEventListener("click", this._onRemoveClick), this._removeBtn = null);
+  }
+  _onHostKeyDown(e) {
+    if (!this.hasAttribute("interactive") || this.hasAttribute("disabled"))
+      return;
+    const i = e.target;
+    i && typeof i.closest == "function" && i.closest(".remove-btn") || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), this.click());
+  }
+  _onRemoveClick(e) {
+    if (e.preventDefault(), e.stopPropagation(), this.hasAttribute("disabled") || this.getAttribute("state") === "loading")
+      return;
+    const i = {
+      text: this._lastLabelText,
+      source: "button"
+    }, a = new CustomEvent("remove", {
+      detail: i,
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    });
+    this.dispatchEvent(a), this.dispatchEvent(
+      new CustomEvent("ui-remove", {
+        detail: i,
+        bubbles: !0,
+        composed: !0
+      })
+    ), !a.defaultPrevented && this.hasAttribute("auto-remove") && this.remove();
+  }
+  shouldRenderOnAttributeChange(e, i, a) {
+    return i === a ? !1 : ![
+      "tone",
+      "variant",
+      "size",
+      "pill",
+      "radius",
+      "disabled",
+      "interactive",
+      "truncate",
+      "max-width",
+      "elevation"
+    ].includes(e);
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-badge") && customElements.define("ui-badge", c);
+export {
+  c as UIBadge
+};