@erplora/outfitkit 0.1.14 → 0.1.15

package/dist/ok-kpi.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
+import { v as iconTrendingUp, w as iconTrendingDown, x as iconRemove, o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -104,22 +105,22 @@ class OkKpi extends LitElement {
     }
   `;
   }
-  /** Devuelve el ion-icon de flecha según la tendencia. */
+  /** Devuelve el icono de flecha según la tendencia (SVG horneado, ver base/icons.ts). */
   trendIcon() {
-    if (this.trend === "up") return "trending-up";
-    if (this.trend === "down") return "trending-down";
-    return "remove";
+    if (this.trend === "up") return iconTrendingUp;
+    if (this.trend === "down") return iconTrendingDown;
+    return iconRemove;
   }
   render() {
     return html`
       <div class="card">
         <div class="top">
           ${this.label ? html`<p class="label">${this.label}</p>` : null}
-          ${this.icon ? html`<ion-icon class="label-icon" name=${this.icon} aria-hidden="true"></ion-icon>` : null}
+          ${this.icon ? html`<ion-icon class="label-icon" .icon=${okIcon(this.icon)} aria-hidden="true"></ion-icon>` : null}
         </div>
         ${this.value ? html`<p class="value">${this.value}</p>` : null}
         ${this.delta ? html`<span class="delta ${this.trend}">
-              <ion-icon name=${this.trendIcon()} aria-hidden="true"></ion-icon>${this.delta}
+              <ion-icon .icon=${this.trendIcon()} aria-hidden="true"></ion-icon>${this.delta}
             </span>` : null}
         <slot></slot>
       </div>

package/dist/ok-lightbox.js

@@ -1,6 +1,7 @@
 import { LitElement, css, render, nothing, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
+import { M as iconExpandOutline, B as iconCloseOutline, z as iconChevronBackOutline, q as iconChevronForwardOutline, I as iconDownloadOutline, S as iconPlayOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -388,7 +389,7 @@ class OkLightbox extends LitElement {
                   rel="noopener"
                   aria-label=${this.t.download}
                 >
-                  <ion-icon name="download-outline"></ion-icon>
+                  <ion-icon .icon=${iconDownloadOutline}></ion-icon>
                 </a>` : null}
             <button
               type="button"
@@ -396,7 +397,7 @@ class OkLightbox extends LitElement {
               aria-label=${this.t.fullscreen}
               @click=${() => this.toggleFullscreen()}
             >
-              <ion-icon name="expand-outline"></ion-icon>
+              <ion-icon .icon=${iconExpandOutline}></ion-icon>
             </button>
             <button
               type="button"
@@ -404,7 +405,7 @@ class OkLightbox extends LitElement {
               aria-label=${this.t.close}
               @click=${() => this.requestClose()}
             >
-              <ion-icon name="close-outline"></ion-icon>
+              <ion-icon .icon=${iconCloseOutline}></ion-icon>
             </button>
           </div>
         </div>
@@ -417,7 +418,7 @@ class OkLightbox extends LitElement {
             ?disabled=${i <= 0}
             @click=${() => this.go(-1)}
           >
-            <ion-icon name="chevron-back-outline"></ion-icon>
+            <ion-icon .icon=${iconChevronBackOutline}></ion-icon>
           </button>
 
           ${current ? isVideo ? html`<video
@@ -435,7 +436,7 @@ class OkLightbox extends LitElement {
             ?disabled=${i >= total - 1}
             @click=${() => this.go(1)}
           >
-            <ion-icon name="chevron-forward-outline"></ion-icon>
+            <ion-icon .icon=${iconChevronForwardOutline}></ion-icon>
           </button>
         </div>
 
@@ -455,7 +456,7 @@ class OkLightbox extends LitElement {
       aria-label=${this.fileName(item)}
       @click=${() => this.setIndex(idx)}
     >
-      ${isVideo ? html`<span class="vid"><ion-icon name="play-outline"></ion-icon></span>` : html`<img src=${item.thumb ?? item.src} alt="" loading="lazy" />`}
+      ${isVideo ? html`<span class="vid"><ion-icon .icon=${iconPlayOutline}></ion-icon></span>` : html`<img src=${item.thumb ?? item.src} alt="" loading="lazy" />`}
     </button>`;
   }
   // Pantalla completa nativa sobre el overlay portado (con fallback silencioso si no se concede).

package/dist/ok-mail.js

@@ -2,6 +2,7 @@ import { LitElement, css, nothing, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { define } from "./define.js";
+import { j as iconCreateOutline, o as okIcon, c as iconChevronBack, k as iconArrowUndoOutline, l as iconArrowRedoOutline, m as iconArchiveOutline, n as iconTrashOutline, p as iconDocumentAttachOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -389,7 +390,7 @@ class OkMail extends LitElement {
     return html`
       <div class="topbar">
         <ion-button @click=${() => this.emit("ok-compose", {})}>
-          <ion-icon slot="start" name="create-outline"></ion-icon>
+          <ion-icon slot="start" .icon=${iconCreateOutline}></ion-icon>
           ${this.t.compose}
         </ion-button>
         ${this.searchable ? html`<ion-searchbar
@@ -415,7 +416,7 @@ class OkMail extends LitElement {
               aria-selected=${f.id === this.activeFolder ? "true" : "false"}
               @click=${() => this.onFolderSelect(f.id)}
             >
-              ${f.icon ? html`<ion-icon name=${f.icon}></ion-icon>` : nothing}
+              ${f.icon ? html`<ion-icon .icon=${okIcon(f.icon)}></ion-icon>` : nothing}
               <span class="tlabel">${f.label}</span>
               ${f.count ? html`<ion-badge>${f.count}</ion-badge>` : nothing}
             </button>
@@ -453,7 +454,7 @@ class OkMail extends LitElement {
                         aria-label=${m.starred ? this.t.unstar : this.t.star}
                         @click=${(e) => this.onStar(e, m)}
                       >
-                        <ion-icon name=${m.starred ? "star" : "star-outline"}></ion-icon>
+                        <ion-icon .icon=${okIcon(m.starred ? "star" : "star-outline")}></ion-icon>
                       </button>
                     </article>
                   `;
@@ -482,20 +483,20 @@ class OkMail extends LitElement {
             <ion-button fill="clear" size="small" aria-label=${this.t.back} @click=${() => {
       this.activeMessage = "";
     }}>
-              <ion-icon slot="icon-only" name="chevron-back"></ion-icon>
+              <ion-icon slot="icon-only" .icon=${iconChevronBack}></ion-icon>
             </ion-button>
           </span>
           <ion-button fill="clear" size="small" aria-label=${this.t.reply} @click=${() => this.emit("ok-reply", { id: m.id })}>
-            <ion-icon slot="icon-only" name="arrow-undo-outline"></ion-icon>
+            <ion-icon slot="icon-only" .icon=${iconArrowUndoOutline}></ion-icon>
           </ion-button>
           <ion-button fill="clear" size="small" aria-label=${this.t.forward} @click=${() => this.emit("ok-forward", { id: m.id })}>
-            <ion-icon slot="icon-only" name="arrow-redo-outline"></ion-icon>
+            <ion-icon slot="icon-only" .icon=${iconArrowRedoOutline}></ion-icon>
           </ion-button>
           <ion-button fill="clear" size="small" aria-label=${this.t.archive} @click=${() => this.emit("ok-archive", { id: m.id })}>
-            <ion-icon slot="icon-only" name="archive-outline"></ion-icon>
+            <ion-icon slot="icon-only" .icon=${iconArchiveOutline}></ion-icon>
           </ion-button>
           <ion-button fill="clear" size="small" color="danger" aria-label=${this.t.delete} @click=${() => this.emit("ok-delete", { id: m.id })}>
-            <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
+            <ion-icon slot="icon-only" .icon=${iconTrashOutline}></ion-icon>
           </ion-button>
         </div>
         <div class="reader-body">
@@ -515,7 +516,7 @@ class OkMail extends LitElement {
                   ${m.attachments.map(
       (a) => html`
                       <span class="att-chip">
-                        <ion-icon name="document-attach-outline"></ion-icon>
+                        <ion-icon .icon=${iconDocumentAttachOutline}></ion-icon>
                         <span>${a.name}</span>
                         ${a.size != null ? html`<span class="att-size">${this.fmtSize(a.size)}</span>` : nothing}
                       </span>

package/dist/ok-menu.js

@@ -2,6 +2,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
 import { c as computeAnchor } from "./shared/anchor.js";
+import { o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -409,7 +410,7 @@ class OkMenu extends LitElement {
     return /^\s*</.test(icon) || icon.startsWith("data:");
   }
   renderIcon(icon) {
-    return this.isResolvedSvg(icon) ? html`<ion-icon .icon=${icon}></ion-icon>` : html`<ion-icon .name=${icon}></ion-icon>`;
+    return this.isResolvedSvg(icon) ? html`<ion-icon .icon=${icon}></ion-icon>` : html`<ion-icon .icon=${okIcon(icon)}></ion-icon>`;
   }
   renderEntry(entry, key) {
     if (entry.divider) return html`<li><div class="divider" role="separator"></div></li>`;

package/dist/ok-menubar.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
+import { o as okIcon, q as iconChevronForwardOutline, H as iconMenuOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -504,10 +505,10 @@ class OkMenubar extends LitElement {
         aria-disabled=${item.disabled ? "true" : "false"}
         @click=${() => hasChildren ? this.openSub(item.id, level) : this.selectItem(item)}
       >
-        <span class="icon">${item.icon ? html`<ion-icon .name=${item.icon}></ion-icon>` : ""}</span>
+        <span class="icon">${item.icon ? html`<ion-icon .icon=${okIcon(item.icon)}></ion-icon>` : ""}</span>
         <span class="label">${item.label ?? ""}</span>
         ${item.shortcut ? html`<span class="shortcut">${item.shortcut}</span>` : ""}
-        ${hasChildren ? html`<span class="caret"><ion-icon name="chevron-forward-outline"></ion-icon></span>` : ""}
+        ${hasChildren ? html`<span class="caret"><ion-icon .icon=${iconChevronForwardOutline}></ion-icon></span>` : ""}
       </button>
       ${subOpen ? html`<div class="panel sub" role="menu">
             ${item.children.map((child) => this.renderItem(child, level + 1))}
@@ -551,7 +552,7 @@ class OkMenubar extends LitElement {
         aria-disabled=${item.disabled ? "true" : "false"}
         @click=${() => this.selectItem(item)}
       >
-        <span class="icon">${item.icon ? html`<ion-icon .name=${item.icon}></ion-icon>` : ""}</span>
+        <span class="icon">${item.icon ? html`<ion-icon .icon=${okIcon(item.icon)}></ion-icon>` : ""}</span>
         <span class="label">${item.label ?? ""}</span>
         ${item.shortcut ? html`<span class="shortcut">${item.shortcut}</span>` : ""}
       </button>
@@ -568,7 +569,7 @@ class OkMenubar extends LitElement {
         aria-label=${this.t.menu}
         @click=${() => this.toggleMobile()}
       >
-        <ion-icon name="menu-outline"></ion-icon>
+        <ion-icon .icon=${iconMenuOutline}></ion-icon>
         <span>${this.t.menu}</span>
       </button>
       ${this.mobileOpen ? html`<div class="accordion" role="menu">
@@ -582,7 +583,7 @@ class OkMenubar extends LitElement {
                   @click=${() => this.toggleAccordion(menu.id)}
                 >
                   <span class="label">${menu.label}</span>
-                  <span class="caret"><ion-icon name="chevron-forward-outline"></ion-icon></span>
+                  <span class="caret"><ion-icon .icon=${iconChevronForwardOutline}></ion-icon></span>
                 </button>
                 ${expanded ? menu.items.map((item) => this.renderAccItem(item, 0)) : ""}
               `;

package/dist/ok-notification-center.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
+import { o as okIcon, R as iconNotificationsOffOutline, B as iconCloseOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -434,7 +435,7 @@ class OkNotificationCenter extends LitElement {
       ${this.isResolvedSvg(icon) ? (
       // SVG resuelto: lo pinta ion-icon vía prop `icon`.
       html`<ion-icon .icon=${icon}></ion-icon>`
-    ) : html`<ion-icon .name=${icon}></ion-icon>`}
+    ) : html`<ion-icon .icon=${okIcon(icon)}></ion-icon>`}
     </span>`;
   }
   // Pinta el texto principal interpretando SOLO <b>…</b> (sin HTML arbitrario, seguro para CSP).
@@ -467,7 +468,7 @@ class OkNotificationCenter extends LitElement {
   }
   renderEmpty() {
     return html`<div class="empty">
-      <span class="ic" aria-hidden="true"><ion-icon name="notifications-off-outline"></ion-icon></span>
+      <span class="ic" aria-hidden="true"><ion-icon .icon=${iconNotificationsOffOutline}></ion-icon></span>
       <span class="e-title">${this.t.emptyTitle}</span>
       <span class="e-text">${this.t.emptyText}</span>
     </div>`;
@@ -493,7 +494,7 @@ class OkNotificationCenter extends LitElement {
             aria-label=${this.t.close}
             @click=${() => this.requestClose("button")}
           >
-            <ion-icon name="close-outline"></ion-icon>
+            <ion-icon .icon=${iconCloseOutline}></ion-icon>
           </button>
         </header>
 

package/dist/ok-pdf.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
+import { N as iconOpenOutline, O as iconDocumentTextOutline, I as iconDownloadOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -121,7 +122,7 @@ class OkPdf extends LitElement {
             aria-label=${this.t.openAria}
             @click=${this.open}
           >
-            <ion-icon slot="start" name="open-outline"></ion-icon>
+            <ion-icon slot="start" .icon=${iconOpenOutline}></ion-icon>
             ${this.t.open}
           </ion-button>
         </div>
@@ -129,10 +130,10 @@ class OkPdf extends LitElement {
           <object data=${this.src} type="application/pdf">
             <!-- Fallback: el navegador no pudo incrustar el PDF → enlace de descarga. -->
             <div class="fallback">
-              <ion-icon name="document-text-outline"></ion-icon>
+              <ion-icon .icon=${iconDocumentTextOutline}></ion-icon>
               <span>${this.t.cannotDisplay}</span>
               <ion-button fill="solid" size="small" @click=${this.open}>
-                <ion-icon slot="start" name="download-outline"></ion-icon>
+                <ion-icon slot="start" .icon=${iconDownloadOutline}></ion-icon>
                 ${this.t.download}
               </ion-button>
             </div>

package/dist/ok-pinpad.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
+import { C as iconBackspaceOutline, o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -160,7 +161,7 @@ class OkPinpad extends LitElement {
   // Botón de borrado (reutilizado en ambos layouts).
   renderBackspace() {
     return html`<ion-button fill="clear" aria-label=${this.t.backspace} @click=${() => this.backspace()}>
-      <ion-icon slot="icon-only" name="backspace-outline"></ion-icon>
+      <ion-icon slot="icon-only" .icon=${iconBackspaceOutline}></ion-icon>
     </ion-button>`;
   }
   // Pinta la pantalla: dots si `masked`, dígitos si no, placeholder si vacío.
@@ -203,7 +204,7 @@ class OkPinpad extends LitElement {
               fill="clear"
               aria-label=${this.secondaryLabel ?? this.secondaryIcon}
               @click=${() => this.secondary()}
-            ><ion-icon slot="icon-only" name=${this.secondaryIcon}></ion-icon></ion-button>` : html`<span class="spacer" aria-hidden="true"></span>`}
+            ><ion-icon slot="icon-only" .icon=${okIcon(this.secondaryIcon)}></ion-icon></ion-button>` : html`<span class="spacer" aria-hidden="true"></span>`}
         <ion-button fill="outline" aria-label="0" @click=${() => this.press("0")}>0</ion-button>
         ${this.renderBackspace()}
       </div>

package/dist/ok-qty-stepper.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
+import { x as iconRemove, P as iconAdd } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -161,7 +162,7 @@ class OkQtyStepper extends LitElement {
         ?disabled=${this.disabled || atMin}
         @click=${() => this.decrement()}
       >
-        <ion-icon slot="icon-only" name="remove"></ion-icon>
+        <ion-icon slot="icon-only" .icon=${iconRemove}></ion-icon>
       </ion-button>
       <input
         class="field"
@@ -183,7 +184,7 @@ class OkQtyStepper extends LitElement {
         ?disabled=${this.disabled || atMax}
         @click=${() => this.increment()}
       >
-        <ion-icon slot="icon-only" name="add"></ion-icon>
+        <ion-icon slot="icon-only" .icon=${iconAdd}></ion-icon>
       </ion-button>
     </div>`;
   }

package/dist/ok-rating.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
+import { o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -137,7 +138,7 @@ class OkRating extends LitElement {
   renderHalfStar(index) {
     const filled = this.displayValue >= index - 0.5;
     return html`<span class=${`star half-mode ${filled ? "filled" : ""}`}>
-      <ion-icon .name=${this.iconFor(index)}></ion-icon>
+      <ion-icon .icon=${okIcon(this.iconFor(index))}></ion-icon>
       ${this.readonly ? "" : html`<span
               class="half-zone left"
               @mouseenter=${() => this.onEnter(index - 0.5)}
@@ -161,7 +162,7 @@ class OkRating extends LitElement {
       @mouseenter=${() => this.onEnter(index)}
       @click=${() => this.setValue(index)}
     >
-      <ion-icon .name=${this.iconFor(index)}></ion-icon>
+      <ion-icon .icon=${okIcon(this.iconFor(index))}></ion-icon>
     </button>`;
   }
   render() {

package/dist/ok-scheduler.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
+import { z as iconChevronBackOutline, q as iconChevronForwardOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -462,7 +463,7 @@ class OkScheduler extends LitElement {
           aria-label=${this.t.prevDay}
           @click=${() => this.navDay(-1)}
         >
-          <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
+          <ion-icon slot="icon-only" .icon=${iconChevronBackOutline}></ion-icon>
         </ion-button>
         <span class="title">${this.dayLabel()}</span>
         <ion-button
@@ -471,7 +472,7 @@ class OkScheduler extends LitElement {
           aria-label=${this.t.nextDay}
           @click=${() => this.navDay(1)}
         >
-          <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
+          <ion-icon slot="icon-only" .icon=${iconChevronForwardOutline}></ion-icon>
         </ion-button>
       </div>
       <div class="scroll">

package/dist/ok-select-card.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
+import { o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -191,7 +192,7 @@ class OkSelectCard extends LitElement {
         @keydown=${this.onKeydown}
       >
         ${control}
-        ${this.icon ? html`<span class="icon"><ion-icon name=${this.icon}></ion-icon></span>` : null}
+        ${this.icon ? html`<span class="icon"><ion-icon .icon=${okIcon(this.icon)}></ion-icon></span>` : null}
         <div class="body">
           ${this.label ? html`<p class="label">${this.label}</p>` : null}
           ${this.description ? html`<p class="description">${this.description}</p>` : null}

package/dist/ok-signature.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { define } from "./define.js";
+import { n as iconTrashOutline, I as iconDownloadOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -216,7 +217,7 @@ class OkSignature extends LitElement {
       </div>
       <div class="actions">
         <ion-button fill="clear" size="small" @click=${() => this.clear()}>
-          <ion-icon slot="start" name="trash-outline"></ion-icon>
+          <ion-icon slot="start" .icon=${iconTrashOutline}></ion-icon>
           ${this.t.clear}
         </ion-button>
         ${this.showExport ? html`<ion-button
@@ -224,7 +225,7 @@ class OkSignature extends LitElement {
               size="small"
               @click=${() => this.onExport()}
             >
-              <ion-icon slot="start" name="download-outline"></ion-icon>
+              <ion-icon slot="start" .icon=${iconDownloadOutline}></ion-icon>
               ${this.t.export}
             </ion-button>` : ""}
       </div>

package/dist/ok-split-button.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
+import { o as okIcon, h as iconChevronDownOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -194,7 +195,7 @@ class OkSplitButton extends LitElement {
       role="menuitem"
       @click=${() => this.selectItem(item)}
     >
-      ${item.icon ? html`<ion-icon .name=${item.icon}></ion-icon>` : ""}
+      ${item.icon ? html`<ion-icon .icon=${okIcon(item.icon)}></ion-icon>` : ""}
       <span class="label">${item.label}</span>
     </button>`;
   }
@@ -218,7 +219,7 @@ class OkSplitButton extends LitElement {
           aria-label=${this.t.more}
           @click=${() => this.toggle()}
         >
-          <ion-icon slot="icon-only" name="chevron-down-outline"></ion-icon>
+          <ion-icon slot="icon-only" .icon=${iconChevronDownOutline}></ion-icon>
         </ion-button>
       </div>
       ${this.open ? html`<div class="menu" role="menu" aria-label=${this.t.menu}>

package/dist/ok-status-pill.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
+import { o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -96,7 +97,7 @@ class OkStatusPill extends LitElement {
   render() {
     return html`
       <span class="pill" part="pill">
-        ${this.dot ? html`<span class="dot" part="dot" aria-hidden="true"></span>` : this.icon ? html`<ion-icon name=${this.icon} aria-hidden="true"></ion-icon>` : null}
+        ${this.dot ? html`<span class="dot" part="dot" aria-hidden="true"></span>` : this.icon ? html`<ion-icon .icon=${okIcon(this.icon)} aria-hidden="true"></ion-icon>` : null}
         <slot>${this.label ?? ""}</slot>
       </span>
     `;

package/dist/ok-stepper.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
+import { y as iconCheckmarkOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -259,7 +260,7 @@ class OkStepper extends LitElement {
             >
               <span class="circle-row">
                 <span class="circle">
-                  ${i < this.current ? html`<ion-icon name="checkmark-outline" aria-hidden="true"></ion-icon>` : html`${i + 1}`}
+                  ${i < this.current ? html`<ion-icon .icon=${iconCheckmarkOutline} aria-hidden="true"></ion-icon>` : html`${i + 1}`}
                 </span>
               </span>
               <span class="labels">

package/dist/ok-tag-input.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
+import { B as iconCloseOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -304,7 +305,7 @@ class OkTagInput extends LitElement {
         this.removeAt(i);
       }}
           >
-            <ion-icon name="close-outline"></ion-icon>
+            <ion-icon .icon=${iconCloseOutline}></ion-icon>
           </button>
         </span>`
     )}

package/dist/ok-timeline.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
+import { o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -216,7 +217,7 @@ class OkTimeline extends LitElement {
     return html`<li class=${classes}>
       <span class="marker">
         <span class="dot" style=${dotStyle}>
-          ${item.icon ? html`<ion-icon .name=${item.icon}></ion-icon>` : ""}
+          ${item.icon ? html`<ion-icon .icon=${okIcon(item.icon)}></ion-icon>` : ""}
         </span>
       </span>
       <button

package/dist/ok-tree.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
+import { q as iconChevronForwardOutline, o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -225,9 +226,9 @@ class OkTree extends LitElement {
       this.toggle(node);
     }}
         >
-          <ion-icon name="chevron-forward-outline"></ion-icon>
+          <ion-icon .icon=${iconChevronForwardOutline}></ion-icon>
         </button>
-        ${node.icon ? html`<span class="icon"><ion-icon .name=${node.icon}></ion-icon></span>` : ""}
+        ${node.icon ? html`<span class="icon"><ion-icon .icon=${okIcon(node.icon)}></ion-icon></span>` : ""}
         <span class="label" @click=${() => this.select(node)}>${node.label}</span>
       </div>
       ${expanded ? html`<ul role="group">

package/dist/ok-video.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state, query } from "lit/decorators.js";
 import { define } from "./define.js";
+import { M as iconExpandOutline, o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -272,7 +273,7 @@ class OkVideo extends LitElement {
           @click=${this.togglePlay}
         >
           <span class="big">
-            <ion-icon name=${this.playing ? "pause" : "play"}></ion-icon>
+            <ion-icon .icon=${okIcon(this.playing ? "pause" : "play")}></ion-icon>
           </span>
         </button>
 
@@ -283,7 +284,7 @@ class OkVideo extends LitElement {
             aria-label=${this.playing ? this.t.pause : this.t.play}
             @click=${this.togglePlay}
           >
-            <ion-icon slot="icon-only" name=${this.playing ? "pause" : "play"}></ion-icon>
+            <ion-icon slot="icon-only" .icon=${okIcon(this.playing ? "pause" : "play")}></ion-icon>
           </ion-button>
 
           <div class="progress" @click=${this.seek}>
@@ -300,7 +301,7 @@ class OkVideo extends LitElement {
               aria-label=${this.muted ? this.t.unmute : this.t.mute}
               @click=${this.toggleMute}
             >
-              <ion-icon slot="icon-only" name=${volIcon}></ion-icon>
+              <ion-icon slot="icon-only" .icon=${okIcon(volIcon)}></ion-icon>
             </ion-button>
             <input
               type="range"
@@ -319,7 +320,7 @@ class OkVideo extends LitElement {
             aria-label=${this.t.fullscreen}
             @click=${this.toggleFullscreen}
           >
-            <ion-icon slot="icon-only" name="expand-outline"></ion-icon>
+            <ion-icon slot="icon-only" .icon=${iconExpandOutline}></ion-icon>
           </ion-button>
         </div>
       </div>

package/dist/ok-widget-board.js

@@ -2,6 +2,7 @@ import { LitElement, css, nothing, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { define } from "./define.js";
+import { a as iconEllipsisVertical } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -97,7 +98,7 @@ class OkWidgetBoard extends LitElement {
       <div class="bar">
         <slot name="title"><span class="title"></span></slot>
         ${this.editable ? html`<ion-button fill="clear" size="small" aria-label=${this.t.customize} @click=${this.openConfig}>
-              <ion-icon slot="icon-only" name="ellipsis-vertical"></ion-icon>
+              <ion-icon slot="icon-only" .icon=${iconEllipsisVertical}></ion-icon>
             </ion-button>` : nothing}
       </div>
       <div class="grid">