@editora/ui-core 0.2.1 → 0.3.0

package/dist/hover-card.esm.js

@@ -1,6 +1,7 @@
-import { E as d } from "./ElementBase-BeZT54Hj.mjs";
-import { e as u } from "./positioner-BE8Nbho2.mjs";
-const p = `
+import { E as u } from "./ElementBase-D5QsC5Vw.mjs";
+import { n as h } from "./number-attribute-BAF07JrU.mjs";
+import { e as p } from "./positioner-BE8Nbho2.mjs";
+const v = `
   :host {
     --ui-hover-card-z: 1700;
     --ui-hover-card-radius: var(--base-card-radius, calc(var(--ui-radius, 6px) + 2px));
@@ -147,7 +148,7 @@ const p = `
     --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-focus-ring: var(--ui-color-accent-on-dark, #93c5fd);
     --ui-hover-card-shadow:
       0 2px 8px rgba(2, 6, 23, 0.24),
       0 30px 62px rgba(2, 6, 23, 0.4);
@@ -265,10 +266,10 @@ const p = `
     }
   }
 `;
-function v(i) {
+function f(i) {
   return i === "top" || i === "left" || i === "right" ? i : "bottom";
 }
-class f extends d {
+class b extends u {
   constructor() {
     super(), this._openTimer = null, this._closeTimer = null, this._positionRaf = null, this._positioner = null, this._positionerPlacement = null, this._positionerOffset = 0, 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);
   }
@@ -309,14 +310,14 @@ class f extends d {
     e ? this.setAttribute("open", "") : this.removeAttribute("open");
   }
   get delay() {
-    const e = Number(this.getAttribute("delay"));
+    const e = h(this.getAttribute("delay"), 120);
     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"));
+    const e = h(this.getAttribute("close-delay"), Number.NaN);
     return Number.isFinite(e) && e >= 0 ? e : this.delay;
   }
   set closeDelay(e) {
@@ -428,9 +429,9 @@ class f extends d {
       this.open = !1;
       return;
     }
-    const o = Number(this.getAttribute("offset")), s = Number.isFinite(o) ? o : 10, a = v(this.getAttribute("placement")), l = e.querySelector(".arrow");
+    const o = h(this.getAttribute("offset"), 10), s = Number.isFinite(o) ? o : 10, a = f(this.getAttribute("placement")), c = e.querySelector(".arrow");
     if (!this._positioner || this._positionerPlacement !== a || this._positionerOffset !== s) {
-      this._positioner?.destroy(), this._positioner = u({
+      this._positioner?.destroy(), this._positioner = p({
         anchor: t,
         floating: e,
         placement: a,
@@ -439,7 +440,7 @@ class f extends d {
         flip: !0,
         shift: !0,
         boundaryPadding: 8,
-        arrow: l,
+        arrow: c,
         observeWindowResize: !1,
         observeScroll: !1,
         observeAncestorScroll: !1,
@@ -447,10 +448,10 @@ class f extends d {
         observeLayoutShift: !1,
         observeAnchorResize: !1,
         observeFloatingResize: !1,
-        onUpdate: (h) => {
-          const c = h.placement.split("-")[0];
-          e.setAttribute("data-placement", c);
-          const n = h.middlewareData?.arrow;
+        onUpdate: (l) => {
+          const d = l.placement.split("-")[0];
+          e.setAttribute("data-placement", d);
+          const n = l.middlewareData?.arrow;
           typeof n?.x == "number" && e.style.setProperty("--ui-hover-card-arrow-x", `${Math.round(n.x)}px`), typeof n?.y == "number" && e.style.setProperty("--ui-hover-card-arrow-y", `${Math.round(n.y)}px`), e.setAttribute("data-ready", "true");
         }
       }), this._positionerPlacement = a, this._positionerOffset = s;
@@ -460,7 +461,7 @@ class f extends d {
   }
   render() {
     this.setContent(`
-      <style>${p}</style>
+      <style>${v}</style>
       <div class="anchor" part="anchor">
         <slot name="trigger"></slot>
         <slot></slot>
@@ -484,7 +485,7 @@ class f extends d {
     return !1;
   }
 }
-typeof customElements < "u" && !customElements.get("ui-hover-card") && customElements.define("ui-hover-card", f);
+typeof customElements < "u" && !customElements.get("ui-hover-card") && customElements.define("ui-hover-card", b);
 export {
-  f as UIHoverCard
+  b as UIHoverCard
 };

package/dist/icon-cloud.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("./ElementBase-DxbvhLJs.js"),z="920px",x=.86,O=1,R="20px",$="118px",S="40px",E="118px",N=new Set(["clockwise","counterclockwise"]),D=new Set(["surface","soft","solid","glass","contrast","minimal"]),I=new Set(["brand","neutral","info","success","warning","danger"]),X=new Set(["sm","md","lg","xl","1","2","3","4"]),Y=new Set(["none","low","high"]),c={sm:{radius:"90px",radiusPx:90,itemSize:"32px",itemSizePx:32,centerSize:"84px",padding:"14px",shellRadius:"24px"},md:{radius:$,radiusPx:118,itemSize:S,itemSizePx:40,centerSize:E,padding:"18px",shellRadius:"28px"},lg:{radius:"140px",radiusPx:140,itemSize:"46px",itemSizePx:46,centerSize:"132px",padding:"22px",shellRadius:"32px"},xl:{radius:"164px",radiusPx:164,itemSize:"54px",itemSizePx:54,centerSize:"152px",padding:"26px",shellRadius:"36px"}},q=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("./ElementBase-CbUsP3D6.js"),z="920px",x=.86,O=1,R="20px",$="118px",S="40px",E="118px",N=new Set(["clockwise","counterclockwise"]),D=new Set(["surface","soft","solid","glass","contrast","minimal"]),I=new Set(["brand","neutral","info","success","warning","danger"]),X=new Set(["sm","md","lg","xl","1","2","3","4"]),Y=new Set(["none","low","high"]),c={sm:{radius:"90px",radiusPx:90,itemSize:"32px",itemSizePx:32,centerSize:"84px",padding:"14px",shellRadius:"24px"},md:{radius:$,radiusPx:118,itemSize:S,itemSizePx:40,centerSize:E,padding:"18px",shellRadius:"28px"},lg:{radius:"140px",radiusPx:140,itemSize:"46px",itemSizePx:46,centerSize:"132px",padding:"22px",shellRadius:"32px"},xl:{radius:"164px",radiusPx:164,itemSize:"54px",itemSizePx:54,centerSize:"152px",padding:"26px",shellRadius:"36px"}},q=`
   :host {
     --ui-icon-cloud-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-icon-cloud-item-size: ${S};

package/dist/icon-cloud.esm.js

@@ -1,4 +1,4 @@
-import { E as L } from "./ElementBase-BeZT54Hj.mjs";
+import { E as L } from "./ElementBase-D5QsC5Vw.mjs";
 const z = "920px", x = 0.86, C = 1, O = "20px", R = "118px", S = "40px", E = "118px", $ = /* @__PURE__ */ new Set(["clockwise", "counterclockwise"]), N = /* @__PURE__ */ new Set(["surface", "soft", "solid", "glass", "contrast", "minimal"]), D = /* @__PURE__ */ new Set(["brand", "neutral", "info", "success", "warning", "danger"]), I = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "1", "2", "3", "4"]), X = /* @__PURE__ */ new Set(["none", "low", "high"]), c = {
   sm: {
     radius: "90px",

package/dist/icon.cjs.js

@@ -1 +1,207 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ui-icon-D3avtxX_.js");exports.UIIcon=e.UIIcon;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("./ElementBase-CbUsP3D6.js"),n=require("./icons-CpCpPXV5.js"),h=`
+  :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, #15803d)); }
+  :host([tone="warning"]) { --ui-icon-color: var(--ui-color-warning, var(--ui-warning, #b45309)); }
+  :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 c(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function b(e){if(!e)return null;const i=e.trim();return i?/^\d+(\.\d+)?$/.test(i)?`${i}px`:i:null}function l(e){if(!e)return;const i=Number(e);return Number.isFinite(i)?i:void 0}class u extends p.ElementBase{constructor(){super(),this._lastName="",this._waitingForIcons=!1}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 i=b(this.getAttribute("size"));i?this.style.setProperty("--ui-icon-size",i):this.style.removeProperty("--ui-icon-size");const o=this.getAttribute("color");o?this.style.setProperty("--ui-icon-color",o):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 i=this.getAttribute("name")||"",o=this.getAttribute("label")||"",t=this.hasAttribute("decorative"),a=i?n.getIcon(i,{variant:this.getAttribute("icon-variant")||void 0,iconWeight:this.getAttribute("icon-weight")||void 0,secondaryColor:this.getAttribute("secondary-color")||void 0,strokeWidth:l(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:l(this.getAttribute("rotate")),flip:this.getAttribute("flip")||void 0,rtl:this.hasAttribute("rtl")}):"",r=!!a,s=!!i&&!r&&!n.iconsLoaded();s&&!this._waitingForIcons&&(this._waitingForIcons=!0,n.whenIconsLoaded(()=>{this._waitingForIcons=!1,this.isConnected&&this.requestRender()}));const d=t?'aria-hidden="true" role="presentation"':`role="img" aria-label="${c(o||i||"icon")}"`;this.setContent(`
+      <style>${h}</style>
+      <span class="icon" part="icon" ${d}>
+        <span class="glyph" part="glyph">
+          ${r?a:s?"":`<span class="fallback" part="fallback">${c((i||"?").slice(0,1).toUpperCase())}</span>`}
+          ${!r&&!s?"<slot></slot>":""}
+        </span>
+        ${this.hasAttribute("badge")?'<span class="badge" part="badge" aria-hidden="true"></span>':""}
+      </span>
+    `),i!==this._lastName&&!s&&(this.dispatchEvent(new CustomEvent("iconchange",{detail:{name:i,found:r},bubbles:!0})),this._lastName=i)}shouldRenderOnAttributeChange(i,o,t){return!0}}typeof customElements<"u"&&!customElements.get("ui-icon")&&customElements.define("ui-icon",u);exports.UIIcon=u;

package/dist/icon.esm.js

@@ -1,4 +1,296 @@
-import { U as I } from "./ui-icon-DLhB08Fo.mjs";
+import { E as u } from "./ElementBase-D5QsC5Vw.mjs";
+import { g as d, w as p, i as h } from "./icons-DWYbbhb0.mjs";
+const b = `
+  :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, #15803d)); }
+  :host([tone="warning"]) { --ui-icon-color: var(--ui-color-warning, var(--ui-warning, #b45309)); }
+  :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 a(o) {
+  return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function g(o) {
+  if (!o) return null;
+  const i = o.trim();
+  return i ? /^\d+(\.\d+)?$/.test(i) ? `${i}px` : i : null;
+}
+function c(o) {
+  if (!o) return;
+  const i = Number(o);
+  return Number.isFinite(i) ? i : void 0;
+}
+class m extends u {
+  constructor() {
+    super(), this._lastName = "", this._waitingForIcons = !1;
+  }
+  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 i = g(this.getAttribute("size"));
+    i ? this.style.setProperty("--ui-icon-size", i) : this.style.removeProperty("--ui-icon-size");
+    const e = this.getAttribute("color");
+    e ? this.style.setProperty("--ui-icon-color", e) : this.style.removeProperty("--ui-icon-color");
+    const r = this.getAttribute("stroke-width");
+    r ? this.style.setProperty("--ui-icon-stroke-width", r) : this.style.removeProperty("--ui-icon-stroke-width");
+  }
+  render() {
+    if (this._syncDynamicVars(), this.hasAttribute("headless")) {
+      this.setContent("<style></style><slot></slot>");
+      return;
+    }
+    const i = this.getAttribute("name") || "", e = this.getAttribute("label") || "", r = this.hasAttribute("decorative"), n = i ? d(i, {
+      variant: this.getAttribute("icon-variant") || void 0,
+      iconWeight: this.getAttribute("icon-weight") || void 0,
+      secondaryColor: this.getAttribute("secondary-color") || void 0,
+      strokeWidth: c(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: c(this.getAttribute("rotate")),
+      flip: this.getAttribute("flip") || void 0,
+      rtl: this.hasAttribute("rtl")
+    }) : "", t = !!n, s = !!i && !t && !h();
+    s && !this._waitingForIcons && (this._waitingForIcons = !0, p(() => {
+      this._waitingForIcons = !1, this.isConnected && this.requestRender();
+    }));
+    const l = r ? 'aria-hidden="true" role="presentation"' : `role="img" aria-label="${a(e || i || "icon")}"`;
+    this.setContent(`
+      <style>${b}</style>
+      <span class="icon" part="icon" ${l}>
+        <span class="glyph" part="glyph">
+          ${t ? n : s ? "" : `<span class="fallback" part="fallback">${a((i || "?").slice(0, 1).toUpperCase())}</span>`}
+          ${!t && !s ? "<slot></slot>" : ""}
+        </span>
+        ${this.hasAttribute("badge") ? '<span class="badge" part="badge" aria-hidden="true"></span>' : ""}
+      </span>
+    `), i !== this._lastName && !s && (this.dispatchEvent(
+      new CustomEvent("iconchange", {
+        detail: { name: i, found: t },
+        bubbles: !0
+      })
+    ), this._lastName = i);
+  }
+  shouldRenderOnAttributeChange(i, e, r) {
+    return !0;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-icon") && customElements.define("ui-icon", m);
 export {
-  I as UIIcon
+  m as UIIcon
 };

package/dist/icons-CpCpPXV5.js

@@ -0,0 +1 @@
+"use strict";var w=Object.create;var L=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var R=(n,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of j(e))!M.call(n,r)&&r!==t&&L(n,r,{get:()=>e[r],enumerable:!(o=z(e,r))||o.enumerable});return n};var D=(n,e,t)=>(t=n!=null?w(b(n)):{},R(e||!n||!n.__esModule?L(t,"default",{value:n,enumerable:!0}):t,n));let c=null,a=null;const h=new Set;function k(){return c?Promise.resolve():(a||(a=import("@editora/icons").then(n=>{c=n,g.clear();const e=Array.from(h);return h.clear(),e.forEach(t=>{try{t()}catch{}}),n}),a.catch(()=>{a=null})),a.then(()=>{}))}function V(){return!!c}function A(n){return c?(n(),()=>{}):(h.add(n),k(),()=>h.delete(n))}function W(n){return c?c.hasIcon(n):(k(),!1)}const s=new Map,m=new Map;let I=null;function E(n,e){I=e;for(const t of n)for(const o of[t.name,...t.aliases||[]]){const r=l(o);r&&m.set(r,t)}g.clear()}const g=new Map;function l(n){return String(n||"").trim().toLowerCase().replace(/\s+/g,"-").replace(/_/g,"-")}function K(n,e){if(!e)return`${n}::default`;const t=e.variant||"outline",o=e.iconWeight||"",r=e.secondaryColor||"",u=e.strokeWidth==null?"":String(e.strokeWidth),f=e.absoluteStrokeWidth?"1":"0",d=e.strokeLinecap||"",i=e.strokeLinejoin||"",y=e.rotate==null?"":String(e.rotate),C=e.flip||"",S=e.rtl?"1":"0";return[n,t,o,r,u,f,d,i,y,C,S].join("::")}function N(n,e){const t=l(n);t&&s.set(t,e)}function O(n){const e=l(n);e&&s.delete(e)}function P(){s.clear()}function _(n){const e=l(n);return e?s.has(e)||m.has(e)?!0:W(e):!1}function $(n,e){return v(n,{variant:e})}function v(n,e){const t=l(n);if(!t)return"";const o=s.get(t);if(o)return o;const r=m.get(t);if(!r&&!W(t))return"";const u=K(t,e),f=g.get(u);if(f)return f;if(!r&&!c)return"";const d={variant:e?.variant||"outline",iconWeight:e?.iconWeight,secondaryColor:e?.secondaryColor,strokeWidth:e?.strokeWidth,absoluteStrokeWidth:e?.absoluteStrokeWidth,strokeLinecap:e?.strokeLinecap,strokeLinejoin:e?.strokeLinejoin,rotate:e?.rotate,flip:e?.flip,rtl:e?.rtl,color:"currentColor",decorative:!0},i=r&&I?I(r,d):c.renderIconSvg(t,d);return i&&g.set(u,i),i}exports.clearCustomIcons=P;exports.getIcon=v;exports.getIconVariant=$;exports.hasIcon=_;exports.iconsLoaded=V;exports.loadIcons=k;exports.registerIcon=N;exports.registerIconDefinitions=E;exports.unregisterIcon=O;exports.whenIconsLoaded=A;