@editora/ui-core 0.1.9 → 0.1.10

package/dist/badge.cjs.js

@@ -0,0 +1,432 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("./ElementBase-1b301e7f.js"),g=`
+  :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 c(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 n extends u.ElementBase{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",d=this.querySelector('[slot="icon"]')!==null,b=(this.textContent||"").trim().length>0,l=!r&&(e.length>0||b);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>${g}</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" ${d?"":"hidden"}><slot name="icon"></slot></span>
+        <span class="label-wrap" part="label-wrap" ${l?"":"hidden"}>
+          <span class="label" part="label"><slot>${c(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",n);exports.UIBadge=n;