@erplora/outfitkit 0.1.14 → 0.1.16

package/dist/ok-dropzone.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 { y as iconCloudUploadOutline, z as iconAlertCircleOutline, A as iconDocumentOutline, v as iconCloseOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -302,7 +303,7 @@ class OkDropzone extends LitElement {
         @dragleave=${this.onDragLeave}
         @drop=${this.onDrop}
       >
-        <ion-icon class="big-icon" name="cloud-upload-outline"></ion-icon>
+        <ion-icon class="big-icon" .icon=${iconCloudUploadOutline}></ion-icon>
         <span class="title">
           ${titleBefore}<span class="link">${this.t.browse}</span>${titleAfter}
         </span>
@@ -316,12 +317,12 @@ class OkDropzone extends LitElement {
         @change=${this.onInputChange}
       />
 
-      ${this.error ? html`<div class="error"><ion-icon name="alert-circle-outline"></ion-icon>${this.error}</div>` : ""}
+      ${this.error ? html`<div class="error"><ion-icon .icon=${iconAlertCircleOutline}></ion-icon>${this.error}</div>` : ""}
 
       ${this.files.length ? html`<ul class="files">
             ${this.files.map(
       (file, i) => html`<li class="file">
-                <ion-icon class="file-icon" name="document-outline"></ion-icon>
+                <ion-icon class="file-icon" .icon=${iconDocumentOutline}></ion-icon>
                 <span class="meta">
                   <span class="name">${file.name}</span>
                   <span class="size">${this.formatSize(file.size)}</span>
@@ -335,7 +336,7 @@ class OkDropzone extends LitElement {
         this.removeAt(i);
       }}
                 >
-                  <ion-icon name="close-outline"></ion-icon>
+                  <ion-icon .icon=${iconCloseOutline}></ion-icon>
                 </button>
               </li>`
     )}

package/dist/ok-empty-state.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;
@@ -78,7 +79,7 @@ class OkEmptyState extends LitElement {
   render() {
     return html`
       <div class="wrap">
-        <ion-icon name=${this.icon} aria-hidden="true"></ion-icon>
+        <ion-icon .icon=${okIcon(this.icon)} aria-hidden="true"></ion-icon>
         ${this.heading ? html`<h2 class="heading">${this.heading}</h2>` : null}
         ${this.message ? html`<p class="message">${this.message}</p>` : null}
         <slot></slot>

package/dist/ok-error-page.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;
@@ -406,7 +407,7 @@ class OkErrorPage extends LitElement {
       <div class="shortcuts" role="list">
         ${this.shortcuts.map((s) => {
       const body = html`
-            ${s.icon ? html`<ion-icon name=${s.icon} aria-hidden="true"></ion-icon>` : null}
+            ${s.icon ? html`<ion-icon .icon=${okIcon(s.icon)} aria-hidden="true"></ion-icon>` : null}
             <span class="shortcut-body">
               <span class="shortcut-title">${s.title}</span>
               ${s.desc ? html`<span class="shortcut-desc">${s.desc}</span>` : null}

package/dist/ok-file-manager.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 { g as iconChevronForwardOutline, o as okIcon, P as iconFolderOpenOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -770,10 +771,10 @@ class OkFileManager extends LitElement {
       this.toggle(folder);
     }}
         >
-          <ion-icon name="chevron-forward-outline"></ion-icon>
+          <ion-icon .icon=${iconChevronForwardOutline}></ion-icon>
         </button>
         <span class="ticon"
-          ><ion-icon name=${folder.icon || "folder-outline"}></ion-icon
+          ><ion-icon .icon=${okIcon(folder.icon || "folder-outline")}></ion-icon
         ></span>
         <span class="tlabel" title=${folder.label}>${folder.label}</span>
         ${folder.count != null ? html`<span class="tcount">${folder.count}</span>` : ""}
@@ -829,7 +830,7 @@ class OkFileManager extends LitElement {
         ${crumbs.map((c, i) => {
       const isLast = i === crumbs.length - 1;
       return html`${i > 0 ? html`<span class="crumb-sep" aria-hidden="true"
-                  ><ion-icon name="chevron-forward-outline"></ion-icon
+                  ><ion-icon .icon=${iconChevronForwardOutline}></ion-icon
                 ></span>` : ""}<button
               type="button"
               class=${`crumb ${isLast ? "current" : ""}`.trim()}
@@ -973,7 +974,7 @@ class OkFileManager extends LitElement {
     }
     if (!this.files.length) {
       return html`<div class="empty">
-        <ion-icon name="folder-open-outline"></ion-icon>
+        <ion-icon .icon=${iconFolderOpenOutline}></ion-icon>
         <span>${this.t.empty}</span>
       </div>`;
     }

package/dist/ok-icon-tile.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;
@@ -86,7 +87,7 @@ class OkIconTile extends LitElement {
     if (this.icon.includes(":")) {
       return html`<iconify-icon icon=${this.icon} aria-hidden="true"></iconify-icon>`;
     }
-    return html`<ion-icon name=${this.icon} aria-hidden="true"></ion-icon>`;
+    return html`<ion-icon .icon=${okIcon(this.icon)} aria-hidden="true"></ion-icon>`;
   }
   render() {
     const decorative = !this.label;

package/dist/ok-inline-feedback.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
+import { h as iconInformationCircle, j as iconAlertCircle, k as iconWarning, l as iconCheckmarkCircle, o as okIcon, m as iconClose } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -152,16 +153,16 @@ class OkInlineFeedback extends LitElement {
   defaultIcon() {
     switch (this.tone) {
       case "success":
-        return "checkmark-circle";
+        return iconCheckmarkCircle;
       case "warning":
-        return "warning";
+        return iconWarning;
       case "danger":
-        return "alert-circle";
+        return iconAlertCircle;
       case "neutral":
-        return "information-circle";
+        return iconInformationCircle;
       case "info":
       default:
-        return "information-circle";
+        return iconInformationCircle;
     }
   }
   // Oculta el banner y avisa al consumidor; éste puede revertir restaurando `hidden=false`.
@@ -173,7 +174,7 @@ class OkInlineFeedback extends LitElement {
     const iconName = this.icon ?? this.defaultIcon();
     return html`
       <div class="box" role="status">
-        <ion-icon class="icon" name=${iconName} aria-hidden="true"></ion-icon>
+        <ion-icon class="icon" .icon=${okIcon(iconName)} aria-hidden="true"></ion-icon>
         <div class="content">
           <div class="row">
             <div class="text">
@@ -187,7 +188,7 @@ class OkInlineFeedback extends LitElement {
         </div>
         ${this.dismissible ? html`
               <button class="close" aria-label=${this.t.dismiss} @click=${this.dismiss}>
-                <ion-icon name="close" aria-hidden="true"></ion-icon>
+                <ion-icon .icon=${iconClose} aria-hidden="true"></ion-icon>
               </button>
             ` : null}
       </div>

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 { n as iconTrendingUp, p as iconTrendingDown, q 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 { H as iconExpandOutline, v as iconCloseOutline, t as iconChevronBackOutline, g as iconChevronForwardOutline, D as iconDownloadOutline, O 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 { i as iconCreateOutline, o as okIcon, a as iconChevronBack, b as iconArrowUndoOutline, c as iconArrowRedoOutline, d as iconArchiveOutline, e as iconTrashOutline, f 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, g as iconChevronForwardOutline, C 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, M as iconNotificationsOffOutline, v 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 { I as iconOpenOutline, J as iconDocumentTextOutline, D 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 { x 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 { q as iconRemove, K 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 { t as iconChevronBackOutline, g 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 { e as iconTrashOutline, D 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>