@editora/ui-core 0.1.9 → 0.1.12

package/dist/hover-card.esm.js

@@ -0,0 +1,470 @@
+import { E as y } from "./ElementBase-909688f3.mjs";
+const E = `
+  :host {
+    --ui-hover-card-z: 1700;
+    --ui-hover-card-radius: var(--base-card-radius, var(--ui-radius, 4px));
+    --ui-hover-card-bg: var(--base-card-bg, var(--color-panel, var(--ui-color-surface, var(--ui-surface, #ffffff))));
+    --ui-hover-card-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-hover-card-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-hover-card-border: var(--base-card-border, 1px solid var(--ui-hover-card-border-color));
+    --ui-hover-card-shadow: var(--base-card-shadow, var(--shadow-3, none));
+    --ui-hover-card-padding: var(--ui-default-gap, 8px);
+    --ui-hover-card-min-width: 220px;
+    --ui-hover-card-max-width: min(380px, calc(100vw - 16px));
+    --ui-hover-card-backdrop: var(--base-panel-backdrop, var(--backdrop-filter-panel, none));
+    --ui-hover-card-arrow-size: 10px;
+    --ui-hover-card-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
+    --ui-hover-card-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    color-scheme: light dark;
+    position: relative;
+    display: inline-flex;
+    width: fit-content;
+    min-width: 0;
+  }
+
+  .anchor {
+    display: inline-flex;
+    min-width: 0;
+  }
+
+  .panel {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: max-content;
+    min-width: var(--ui-hover-card-min-width);
+    max-width: var(--ui-hover-card-max-width);
+    box-sizing: border-box;
+    border-radius: var(--ui-hover-card-radius);
+    border: var(--ui-hover-card-border);
+    background: var(--ui-hover-card-bg);
+    color: var(--ui-hover-card-color);
+    box-shadow: var(--ui-hover-card-shadow);
+    backdrop-filter: var(--ui-hover-card-backdrop);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateY(6px) scale(0.985);
+    transform-origin: top center;
+    transition:
+      opacity 170ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      transform 170ms cubic-bezier(0.2, 0.9, 0.24, 1),
+      visibility 170ms ease;
+    z-index: var(--ui-hover-card-z);
+    overflow: visible;
+    isolation: isolate;
+  }
+
+  :host([open]) .panel[data-ready="true"] {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0) scale(1);
+  }
+
+  .panel[data-placement="top"] {
+    transform-origin: bottom center;
+  }
+
+  .panel[data-placement="left"] {
+    transform-origin: center right;
+  }
+
+  .panel[data-placement="right"] {
+    transform-origin: center left;
+  }
+
+  .panel-body {
+    position: relative;
+    z-index: 1;
+    min-width: 0;
+    padding: var(--ui-hover-card-padding);
+    display: grid;
+    gap: var(--ui-default-gap, 8px);
+    font: 500 var(--ui-default-font-size, var(--font-size-2, 14px))/var(--ui-default-line-height, var(--line-height-2, 20px)) var(--ui-font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    letter-spacing: var(--ui-default-letter-spacing, var(--letter-spacing-2, 0em));
+  }
+
+  .arrow {
+    position: absolute;
+    width: var(--ui-hover-card-arrow-size);
+    height: var(--ui-hover-card-arrow-size);
+    background: var(--ui-hover-card-bg);
+    border: var(--ui-hover-card-border);
+    transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  .panel[data-placement="bottom"] .arrow {
+    left: calc(var(--ui-hover-card-arrow-x, 24px) - (var(--ui-hover-card-arrow-size) / 2));
+    top: calc(var(--ui-hover-card-arrow-size) * -0.56);
+    border-right: none;
+    border-bottom: none;
+  }
+
+  .panel[data-placement="top"] .arrow {
+    left: calc(var(--ui-hover-card-arrow-x, 24px) - (var(--ui-hover-card-arrow-size) / 2));
+    bottom: calc(var(--ui-hover-card-arrow-size) * -0.56);
+    border-left: none;
+    border-top: none;
+  }
+
+  .panel[data-placement="right"] .arrow {
+    top: calc(var(--ui-hover-card-arrow-y, 24px) - (var(--ui-hover-card-arrow-size) / 2));
+    left: calc(var(--ui-hover-card-arrow-size) * -0.56);
+    border-right: none;
+    border-top: none;
+  }
+
+  .panel[data-placement="left"] .arrow {
+    top: calc(var(--ui-hover-card-arrow-y, 24px) - (var(--ui-hover-card-arrow-size) / 2));
+    right: calc(var(--ui-hover-card-arrow-size) * -0.56);
+    border-left: none;
+    border-bottom: none;
+  }
+
+  :host([variant="line"]) {
+    --ui-hover-card-shadow: none;
+  }
+
+  :host([variant="line"]) .panel {
+    border-color: color-mix(in srgb, var(--ui-hover-card-accent) 26%, var(--ui-hover-card-border-color));
+  }
+
+  :host([variant="glass"]) {
+    --ui-hover-card-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 86%, #ffffff 14%),
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, transparent)
+      ),
+      var(--ui-color-surface, #ffffff);
+    --ui-hover-card-backdrop: blur(12px) saturate(1.08);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-hover-card-bg: #0f172a;
+    --ui-hover-card-color: #e2e8f0;
+    --ui-hover-card-border-color: #334155;
+    --ui-hover-card-focus-ring: #93c5fd;
+    --ui-hover-card-shadow:
+      0 2px 8px rgba(2, 6, 23, 0.24),
+      0 30px 62px rgba(2, 6, 23, 0.4);
+  }
+
+  :host([variant="contrast"]) .arrow {
+    background: #0f172a;
+    border-color: #334155;
+  }
+
+  :host([variant="minimal"]) {
+    --ui-hover-card-shadow: none;
+    --ui-hover-card-border-color: color-mix(in srgb, var(--ui-hover-card-accent) 20%, var(--ui-color-border, #cbd5e1));
+    --ui-hover-card-padding: 10px;
+  }
+
+  :host([variant="elevated"]) {
+    --ui-hover-card-bg: linear-gradient(
+      160deg,
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, #ffffff 8%),
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 99%, transparent)
+    );
+    --ui-hover-card-shadow:
+      0 2px 10px rgba(2, 6, 23, 0.12),
+      0 34px 72px rgba(2, 6, 23, 0.22);
+  }
+
+  :host([tone="success"]) {
+    --ui-hover-card-accent: #16a34a;
+  }
+
+  :host([tone="warning"]) {
+    --ui-hover-card-accent: #d97706;
+  }
+
+  :host([tone="danger"]) {
+    --ui-hover-card-accent: #dc2626;
+  }
+
+  :host([density="compact"]) {
+    --ui-hover-card-padding: 9px;
+  }
+
+  :host([density="compact"]) .panel-body {
+    font-size: 12px;
+    gap: 6px;
+  }
+
+  :host([density="comfortable"]) {
+    --ui-hover-card-padding: 15px;
+  }
+
+  :host([density="comfortable"]) .panel-body {
+    font-size: 14px;
+    gap: 10px;
+  }
+
+  :host([shape="square"]) {
+    --ui-hover-card-radius: 4px;
+  }
+
+  :host([shape="soft"]) {
+    --ui-hover-card-radius: 20px;
+  }
+
+  :host([elevation="none"]) {
+    --ui-hover-card-shadow: none;
+  }
+
+  :host([elevation="low"]) {
+    --ui-hover-card-shadow:
+      0 1px 3px rgba(2, 6, 23, 0.06),
+      0 16px 30px rgba(2, 6, 23, 0.11);
+  }
+
+  :host([elevation="high"]) {
+    --ui-hover-card-shadow:
+      0 2px 10px rgba(2, 6, 23, 0.1),
+      0 36px 74px rgba(2, 6, 23, 0.24);
+  }
+
+  :host([headless]) .panel {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .panel {
+      transition: none !important;
+      transform: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-hover-card-border: 2px solid var(--ui-hover-card-border-color);
+      --ui-hover-card-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-hover-card-bg: Canvas;
+      --ui-hover-card-color: CanvasText;
+      --ui-hover-card-border-color: CanvasText;
+      --ui-hover-card-shadow: none;
+      --ui-hover-card-backdrop: none;
+    }
+
+    .panel,
+    .arrow {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      box-shadow: none;
+    }
+  }
+`;
+function d(h, e, r) {
+  return Math.max(e, Math.min(r, h));
+}
+function C(h) {
+  return h === "top" || h === "left" || h === "right" ? h : "bottom";
+}
+class L extends y {
+  constructor() {
+    super(), this._openTimer = null, this._closeTimer = null, this._positionRaf = null, this._isOpen = !1, this._globalListenersBound = !1, this._onPointerEnter = this._onPointerEnter.bind(this), this._onPointerLeave = this._onPointerLeave.bind(this), this._onFocusIn = this._onFocusIn.bind(this), this._onFocusOut = this._onFocusOut.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onDocumentPointerDown = this._onDocumentPointerDown.bind(this), this._onViewportChange = this._onViewportChange.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "open",
+      "headless",
+      "delay",
+      "close-delay",
+      "placement",
+      "offset",
+      "variant",
+      "tone",
+      "density",
+      "shape",
+      "elevation"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("pointerenter", this._onPointerEnter), this.addEventListener("pointerleave", this._onPointerLeave), this.addEventListener("focusin", this._onFocusIn), this.addEventListener("focusout", this._onFocusOut), this.addEventListener("keydown", this._onKeyDown), this.root.addEventListener("slotchange", this._onSlotChange), this._syncOpenState();
+  }
+  disconnectedCallback() {
+    this.removeEventListener("pointerenter", this._onPointerEnter), this.removeEventListener("pointerleave", this._onPointerLeave), this.removeEventListener("focusin", this._onFocusIn), this.removeEventListener("focusout", this._onFocusOut), this.removeEventListener("keydown", this._onKeyDown), this.root.removeEventListener("slotchange", this._onSlotChange), this._unbindGlobalListeners(), this._clearTimers(), this._positionRaf != null && (cancelAnimationFrame(this._positionRaf), this._positionRaf = null), super.disconnectedCallback();
+  }
+  attributeChangedCallback(e, r, t) {
+    if (r !== t) {
+      if (e === "open" || e === "headless") {
+        this._syncOpenState();
+        return;
+      }
+      this._isOpen && (e === "placement" || e === "offset" || e === "density" || e === "shape") && this._schedulePosition();
+    }
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(e) {
+    e ? this.setAttribute("open", "") : this.removeAttribute("open");
+  }
+  get delay() {
+    const e = Number(this.getAttribute("delay"));
+    return Number.isFinite(e) && e >= 0 ? e : 120;
+  }
+  set delay(e) {
+    this.setAttribute("delay", String(e));
+  }
+  get closeDelay() {
+    const e = Number(this.getAttribute("close-delay"));
+    return Number.isFinite(e) && e >= 0 ? e : this.delay;
+  }
+  set closeDelay(e) {
+    this.setAttribute("close-delay", String(e));
+  }
+  _onSlotChange() {
+    this._isOpen && this._schedulePosition();
+  }
+  _getPanel() {
+    return this.root.querySelector(".panel");
+  }
+  _getAnchor() {
+    const e = this.querySelector('[slot="trigger"]');
+    return e || Array.from(this.children).find((t) => t instanceof HTMLElement ? !t.hasAttribute("slot") || t.getAttribute("slot") === "trigger" : !1) || this;
+  }
+  _isNodeWithinComponent(e) {
+    return e ? !!(e === this || this.contains(e) || this.root.contains(e)) : !1;
+  }
+  _clearTimers() {
+    this._openTimer != null && (window.clearTimeout(this._openTimer), this._openTimer = null), this._closeTimer != null && (window.clearTimeout(this._closeTimer), this._closeTimer = null);
+  }
+  _scheduleOpen(e) {
+    this._clearTimers(), this._openTimer = window.setTimeout(() => {
+      this._openTimer = null, this.open = !0;
+    }, Math.max(0, e));
+  }
+  _scheduleClose(e) {
+    this._clearTimers(), this._closeTimer = window.setTimeout(() => {
+      this._closeTimer = null, this.open = !1;
+    }, Math.max(0, e));
+  }
+  _onPointerEnter() {
+    if (!this.hasAttribute("headless")) {
+      if (this._isOpen) {
+        this._clearTimers();
+        return;
+      }
+      this._scheduleOpen(this.delay);
+    }
+  }
+  _onPointerLeave(e) {
+    const r = e.relatedTarget;
+    this._isNodeWithinComponent(r) || this._scheduleClose(this.closeDelay);
+  }
+  _onFocusIn() {
+    this.hasAttribute("headless") || (this._clearTimers(), this.open = !0);
+  }
+  _onFocusOut(e) {
+    const r = e.relatedTarget;
+    this._isNodeWithinComponent(r) || this._scheduleClose(this.closeDelay);
+  }
+  _onKeyDown(e) {
+    if (!this._isOpen || e.key !== "Escape")
+      return;
+    e.preventDefault(), this.open = !1;
+    const r = this._getAnchor();
+    try {
+      r.focus();
+    } catch {
+    }
+  }
+  _onDocumentPointerDown(e) {
+    !this._isOpen || e.composedPath().includes(this) || (this.open = !1);
+  }
+  _onViewportChange() {
+    this._isOpen && this._schedulePosition();
+  }
+  _syncOpenState() {
+    const e = this.hasAttribute("open") && !this.hasAttribute("headless");
+    if (e === this._isOpen) {
+      this._syncPanelA11y(), e ? (this._bindGlobalListeners(), this._schedulePosition()) : this._unbindGlobalListeners();
+      return;
+    }
+    this._isOpen = e, this._syncPanelA11y();
+    const r = this._getPanel();
+    if (e) {
+      this._bindGlobalListeners(), r && r.setAttribute("data-ready", "false"), this.dispatchEvent(new CustomEvent("open", { bubbles: !0 })), this.dispatchEvent(new CustomEvent("show", { bubbles: !0 })), this.dispatchEvent(new CustomEvent("change", { bubbles: !0, detail: { open: !0 } })), this._schedulePosition();
+      return;
+    }
+    this._unbindGlobalListeners(), this._clearTimers(), this._positionRaf != null && (cancelAnimationFrame(this._positionRaf), this._positionRaf = null), r && r.setAttribute("data-ready", "false"), this.dispatchEvent(new CustomEvent("close", { bubbles: !0 })), this.dispatchEvent(new CustomEvent("hide", { bubbles: !0 })), this.dispatchEvent(new CustomEvent("change", { bubbles: !0, detail: { open: !1 } }));
+  }
+  _syncPanelA11y() {
+    const e = this._getPanel();
+    e && (e.setAttribute("aria-hidden", this._isOpen ? "false" : "true"), this._isOpen || e.setAttribute("data-ready", "false"));
+  }
+  _bindGlobalListeners() {
+    this._globalListenersBound || (document.addEventListener("pointerdown", this._onDocumentPointerDown, !0), window.addEventListener("resize", this._onViewportChange), window.addEventListener("scroll", this._onViewportChange, !0), this._globalListenersBound = !0);
+  }
+  _unbindGlobalListeners() {
+    this._globalListenersBound && (document.removeEventListener("pointerdown", this._onDocumentPointerDown, !0), window.removeEventListener("resize", this._onViewportChange), window.removeEventListener("scroll", this._onViewportChange, !0), this._globalListenersBound = !1);
+  }
+  _schedulePosition() {
+    this._isOpen && (this._positionRaf != null && cancelAnimationFrame(this._positionRaf), this._positionRaf = requestAnimationFrame(() => {
+      this._positionRaf = null, this._positionPanel();
+    }));
+  }
+  _positionPanel() {
+    const e = this._getPanel();
+    if (!e || !this._isOpen)
+      return;
+    const r = this._getAnchor();
+    if (!r || !r.isConnected) {
+      this.open = !1;
+      return;
+    }
+    const t = r.getBoundingClientRect();
+    if (t.width === 0 && t.height === 0) {
+      this.open = !1;
+      return;
+    }
+    const u = e.getBoundingClientRect(), l = u.width || e.offsetWidth || 220, c = u.height || e.offsetHeight || 80, p = window.innerWidth, f = window.innerHeight, o = 8, v = Number(this.getAttribute("offset")), n = Number.isFinite(v) ? v : 10;
+    let i = C(this.getAttribute("placement"));
+    const b = t.top - n - c >= o, m = t.bottom + n + c <= f - o, g = t.left - n - l >= o, _ = t.right + n + l <= p - o;
+    i === "top" && !b && m && (i = "bottom"), i === "bottom" && !m && b && (i = "top"), i === "left" && !g && _ && (i = "right"), i === "right" && !_ && g && (i = "left");
+    let a = 0, s = 0;
+    i === "top" ? (a = t.left + (t.width - l) / 2, s = t.top - c - n) : i === "bottom" ? (a = t.left + (t.width - l) / 2, s = t.bottom + n) : i === "left" ? (a = t.left - l - n, s = t.top + (t.height - c) / 2) : (a = t.right + n, s = t.top + (t.height - c) / 2), a = d(a, o, p - l - o), s = d(s, o, f - c - o), e.style.left = `${Math.round(a)}px`, e.style.top = `${Math.round(s)}px`, e.setAttribute("data-placement", i);
+    const w = d(t.left + t.width / 2 - a, 14, l - 14), x = d(t.top + t.height / 2 - s, 14, c - 14);
+    e.style.setProperty("--ui-hover-card-arrow-x", `${Math.round(w)}px`), e.style.setProperty("--ui-hover-card-arrow-y", `${Math.round(x)}px`), e.setAttribute("data-ready", "true");
+  }
+  render() {
+    this.setContent(`
+      <style>${E}</style>
+      <div class="anchor" part="anchor">
+        <slot name="trigger"></slot>
+        <slot></slot>
+      </div>
+      <div
+        class="panel"
+        part="panel"
+        role="dialog"
+        aria-modal="false"
+        aria-hidden="${this._isOpen ? "false" : "true"}"
+        tabindex="-1"
+        data-placement="bottom"
+        data-ready="false"
+      >
+        <div class="arrow" part="arrow" aria-hidden="true"></div>
+        <div class="panel-body" part="body"><slot name="card"></slot></div>
+      </div>
+    `), this._syncPanelA11y(), this._isOpen && this._schedulePosition();
+  }
+  shouldRenderOnAttributeChange(e, r, t) {
+    return !1;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-hover-card") && customElements.define("ui-hover-card", L);
+export {
+  L as UIHoverCard
+};

package/dist/icon-9e9da03b.js

@@ -0,0 +1,207 @@
+"use strict";const k=require("./ElementBase-1b301e7f.js"),l=require("@editora/icons"),s=new Map,d=new Map;function c(r){return String(r||"").trim().toLowerCase().replace(/\s+/g,"-").replace(/_/g,"-")}function y(r,e){if(!e)return`${r}::default`;const i=e.variant||"outline",t=e.iconWeight||"",n=e.secondaryColor||"",o=e.strokeWidth==null?"":String(e.strokeWidth),a=e.absoluteStrokeWidth?"1":"0",f=e.strokeLinecap||"",m=e.strokeLinejoin||"",p=e.rotate==null?"":String(e.rotate),v=e.flip||"",x=e.rtl?"1":"0";return[r,i,t,n,o,a,f,m,p,v,x].join("::")}function z(r,e){const i=c(r);i&&s.set(i,e)}function w(r){const e=c(r);e&&s.delete(e)}function C(){s.clear()}function I(r){const e=c(r);return e?s.has(e)?!0:l.hasIcon(e):!1}function A(r,e){return u(r,{variant:e})}function u(r,e){const i=c(r);if(!i)return"";const t=s.get(i);if(t)return t;if(!l.hasIcon(i))return"";const n=y(i,e),o=d.get(n);if(o)return o;const a=l.renderIconSvg(i,{variant:(e==null?void 0:e.variant)||"outline",iconWeight:e==null?void 0:e.iconWeight,secondaryColor:e==null?void 0:e.secondaryColor,strokeWidth:e==null?void 0:e.strokeWidth,absoluteStrokeWidth:e==null?void 0:e.absoluteStrokeWidth,strokeLinecap:e==null?void 0:e.strokeLinecap,strokeLinejoin:e==null?void 0:e.strokeLinejoin,rotate:e==null?void 0:e.rotate,flip:e==null?void 0:e.flip,rtl:e==null?void 0:e.rtl,color:"currentColor",decorative:!0});return a&&d.set(n,a),a}const W=`
+  :host {
+    --ui-icon-size: 1em;
+    --ui-icon-color: currentColor;
+    --ui-icon-radius: 8px;
+    --ui-icon-bg: transparent;
+    --ui-icon-border: 1px solid transparent;
+    --ui-icon-shadow: none;
+    --ui-icon-pad: 0;
+    --ui-icon-rotate-duration: 0.9s;
+    --ui-icon-pulse-duration: 1.35s;
+    color-scheme: light dark;
+    display: inline-grid;
+    place-items: center;
+    inline-size: calc(var(--ui-icon-size) + (var(--ui-icon-pad) * 2));
+    block-size: calc(var(--ui-icon-size) + (var(--ui-icon-pad) * 2));
+    color: var(--ui-icon-color);
+    vertical-align: middle;
+  }
+
+  .icon {
+    position: relative;
+    display: grid;
+    place-items: center;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: var(--ui-icon-radius);
+    border: var(--ui-icon-border);
+    background: var(--ui-icon-bg);
+    box-shadow: var(--ui-icon-shadow);
+    transition: transform 170ms ease, box-shadow 170ms ease, background-color 170ms ease, border-color 170ms ease;
+    overflow: hidden;
+    isolation: isolate;
+  }
+
+  .glyph {
+    inline-size: var(--ui-icon-size);
+    block-size: var(--ui-icon-size);
+    display: grid;
+    place-items: center;
+    line-height: 0;
+    color: currentColor;
+  }
+
+  .glyph > svg {
+    inline-size: 100%;
+    block-size: 100%;
+    display: block;
+    fill: currentColor;
+    stroke-width: var(--ui-icon-stroke-width, 1.5);
+    shape-rendering: geometricPrecision;
+  }
+
+  .fallback {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: max(4px, calc(var(--ui-icon-radius) - 3px));
+    font: 700 11px/1 "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.02em;
+    color: color-mix(in srgb, currentColor 74%, transparent);
+    background: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  .badge {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(36%, -36%);
+    min-inline-size: 8px;
+    block-size: 8px;
+    border-radius: 999px;
+    background: var(--ui-icon-badge-bg, #ef4444);
+    border: 2px solid var(--ui-icon-bg, transparent);
+    box-sizing: border-box;
+  }
+
+  :host([size="xs"]) { --ui-icon-size: 12px; }
+  :host([size="sm"]) { --ui-icon-size: 14px; }
+  :host([size="md"]) { --ui-icon-size: 18px; }
+  :host([size="lg"]) { --ui-icon-size: 22px; }
+  :host([size="xl"]) { --ui-icon-size: 28px; }
+
+  :host([variant="surface"]) {
+    --ui-icon-pad: 6px;
+    --ui-icon-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-icon-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-icon-shadow: 0 1px 3px rgba(2, 6, 23, 0.08);
+  }
+
+  :host([variant="soft"]) {
+    --ui-icon-pad: 6px;
+    --ui-icon-bg: color-mix(in srgb, currentColor 8%, transparent);
+    --ui-icon-border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-icon-pad: 6px;
+    --ui-icon-bg: #0f172a;
+    --ui-icon-color: #e2e8f0;
+    --ui-icon-border: 1px solid #334155;
+    --ui-icon-shadow: 0 2px 8px rgba(2, 6, 23, 0.28);
+  }
+
+  :host([variant="minimal"]) {
+    --ui-icon-pad: 0;
+    --ui-icon-bg: transparent;
+    --ui-icon-border: 0;
+    --ui-icon-shadow: none;
+  }
+
+  :host([variant="elevated"]) {
+    --ui-icon-pad: 6px;
+    --ui-icon-bg: linear-gradient(
+      165deg,
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, #ffffff 8%),
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent)
+    );
+    --ui-icon-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent);
+    --ui-icon-shadow:
+      0 1px 4px rgba(2, 6, 23, 0.08),
+      0 10px 20px rgba(2, 6, 23, 0.12);
+  }
+
+  :host([tone="brand"]) { --ui-icon-color: var(--ui-color-primary, var(--ui-primary, #2563eb)); }
+  :host([tone="success"]) { --ui-icon-color: var(--ui-color-success, var(--ui-success, #16a34a)); }
+  :host([tone="warning"]) { --ui-icon-color: var(--ui-color-warning, var(--ui-warning, #d97706)); }
+  :host([tone="danger"]) { --ui-icon-color: var(--ui-color-danger, var(--ui-error, #dc2626)); }
+
+  :host([shape="square"]) { --ui-icon-radius: 4px; }
+  :host([shape="soft"]) { --ui-icon-radius: 13px; }
+
+  :host([spin]) .glyph {
+    animation: spin var(--ui-icon-rotate-duration) linear infinite;
+  }
+
+  :host([pulse]) .icon {
+    animation: pulse var(--ui-icon-pulse-duration) ease-in-out infinite;
+  }
+
+  :host(:not([headless])) .icon:hover {
+    transform: translateY(-0.5px);
+    box-shadow: 0 3px 12px rgba(2, 6, 23, 0.14);
+  }
+
+  :host([headless]) .icon {
+    display: none;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.06); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .icon,
+    .glyph {
+      animation: none !important;
+      transition: none !important;
+      transform: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-icon-border: 2px solid color-mix(in srgb, currentColor 48%, transparent);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-icon-color: CanvasText;
+      --ui-icon-bg: Canvas;
+      --ui-icon-border: 1px solid CanvasText;
+      --ui-icon-shadow: none;
+    }
+
+    .icon,
+    .fallback {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+
+    .badge {
+      background: Highlight;
+      border-color: Canvas;
+    }
+  }
+`;function h(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function S(r){if(!r)return null;const e=r.trim();return e?/^\d+(\.\d+)?$/.test(e)?`${e}px`:e:null}function g(r){if(!r)return;const e=Number(r);return Number.isFinite(e)?e:void 0}class b extends k.ElementBase{constructor(){super(),this._lastName=""}static get observedAttributes(){return["name","size","color","variant","icon-variant","icon-weight","secondary-color","tone","shape","spin","pulse","badge","label","decorative","stroke-width","absolute-stroke-width","stroke-linecap","stroke-linejoin","rotate","flip","rtl","headless"]}_syncDynamicVars(){const e=S(this.getAttribute("size"));e?this.style.setProperty("--ui-icon-size",e):this.style.removeProperty("--ui-icon-size");const i=this.getAttribute("color");i?this.style.setProperty("--ui-icon-color",i):this.style.removeProperty("--ui-icon-color");const t=this.getAttribute("stroke-width");t?this.style.setProperty("--ui-icon-stroke-width",t):this.style.removeProperty("--ui-icon-stroke-width")}render(){if(this._syncDynamicVars(),this.hasAttribute("headless")){this.setContent("<style></style><slot></slot>");return}const e=this.getAttribute("name")||"",i=this.getAttribute("label")||"",t=this.hasAttribute("decorative"),n=e?u(e,{variant:this.getAttribute("icon-variant")||void 0,iconWeight:this.getAttribute("icon-weight")||void 0,secondaryColor:this.getAttribute("secondary-color")||void 0,strokeWidth:g(this.getAttribute("stroke-width")),absoluteStrokeWidth:this.hasAttribute("absolute-stroke-width"),strokeLinecap:this.getAttribute("stroke-linecap")||void 0,strokeLinejoin:this.getAttribute("stroke-linejoin")||void 0,rotate:g(this.getAttribute("rotate")),flip:this.getAttribute("flip")||void 0,rtl:this.hasAttribute("rtl")}):"",o=!!n,a=t?'aria-hidden="true" role="presentation"':`role="img" aria-label="${h(i||e||"icon")}"`;this.setContent(`
+      <style>${W}</style>
+      <span class="icon" part="icon" ${a}>
+        <span class="glyph" part="glyph">
+          ${o?n:`<span class="fallback" part="fallback">${h((e||"?").slice(0,1).toUpperCase())}</span>`}
+          ${o?"":"<slot></slot>"}
+        </span>
+        ${this.hasAttribute("badge")?'<span class="badge" part="badge" aria-hidden="true"></span>':""}
+      </span>
+    `),e!==this._lastName&&(this.dispatchEvent(new CustomEvent("iconchange",{detail:{name:e,found:o},bubbles:!0})),this._lastName=e)}shouldRenderOnAttributeChange(e,i,t){return!0}}typeof customElements<"u"&&!customElements.get("ui-icon")&&customElements.define("ui-icon",b);exports.UIIcon=b;exports.clearCustomIcons=C;exports.getIcon=u;exports.getIconVariant=A;exports.hasIcon=I;exports.registerIcon=z;exports.unregisterIcon=w;