@erplora/outfitkit 0.1.14 → 0.1.16

package/dist/base/icons.d.ts

@@ -0,0 +1,59 @@
+export declare const iconAdd: string;
+export declare const iconAlertCircle: string;
+export declare const iconAlertCircleOutline: string;
+export declare const iconAppsOutline: string;
+export declare const iconArchiveOutline: string;
+export declare const iconArrowRedoOutline: string;
+export declare const iconArrowUndoOutline: string;
+export declare const iconBackspaceOutline: string;
+export declare const iconCalendarOutline: string;
+export declare const iconCheckmarkCircle: string;
+export declare const iconCheckmarkOutline: string;
+export declare const iconChevronBack: string;
+export declare const iconChevronBackOutline: string;
+export declare const iconChevronDownOutline: string;
+export declare const iconChevronForward: string;
+export declare const iconChevronForwardOutline: string;
+export declare const iconChevronUpOutline: string;
+export declare const iconClose: string;
+export declare const iconCloseOutline: string;
+export declare const iconCloudUploadOutline: string;
+export declare const iconCreateOutline: string;
+export declare const iconDocumentAttachOutline: string;
+export declare const iconDocumentOutline: string;
+export declare const iconDocumentTextOutline: string;
+export declare const iconDownloadOutline: string;
+export declare const iconEllipsisVertical: string;
+export declare const iconExpandOutline: string;
+export declare const iconFileTrayOutline: string;
+export declare const iconFolderOpenOutline: string;
+export declare const iconInformationCircle: string;
+export declare const iconMenuOutline: string;
+export declare const iconNotificationsOffOutline: string;
+export declare const iconOpenOutline: string;
+export declare const iconPlayOutline: string;
+export declare const iconRemove: string;
+export declare const iconSearchOutline: string;
+export declare const iconSend: string;
+export declare const iconSwapVerticalOutline: string;
+export declare const iconTrashOutline: string;
+export declare const iconTrendingDown: string;
+export declare const iconTrendingUp: string;
+export declare const iconVolumeHighOutline: string;
+export declare const iconVolumeLowOutline: string;
+export declare const iconVolumeMuteOutline: string;
+export declare const iconWarning: string;
+/**
+ * Normaliza un icono que llega como STRING: el que pasa el consumidor por prop
+ * (`<ok-kpi icon="receipt-outline">`, las rowActions de ok-data-table, los items de un menú) o el
+ * valor por defecto de una prop. Devuelve algo listo para la prop `.icon` de ion-icon:
+ *
+ *   · SVG inline (`<svg …>`)      → lo hornea aquí mismo a data-URI.
+ *   · un nombre que OutfitKit trae  → su SVG horneado (sin red, sin depender del host).
+ *   · cualquier otro nombre         → se devuelve tal cual: ion-icon lo resuelve contra el registro
+ *     global del host (window.Ionicons.map). Es el comportamiento de siempre → no rompe a nadie.
+ *
+ * Usamos `.icon` y no `name` porque la prop `icon` de ion-icon acepta AMBOS (un data-URI lo trata
+ * como src; un nombre lo busca en el registro), mientras que `name` solo acepta nombres.
+ */
+export declare function okIcon(value?: string | null): string | undefined;

package/dist/base/icons.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cdn.d.ts

@@ -73,6 +73,7 @@ import './components/ok-hover-card/ok-hover-card.js';
 import './components/ok-notification-center/ok-notification-center.js';
 import './components/ok-coachmark/ok-coachmark.js';
 import './components/ok-select-card/ok-select-card.js';
+import './components/ok-theme-picker/ok-theme-picker.js';
 import './components/ok-error-page/ok-error-page.js';
 import './components/ok-date-picker/ok-date-picker.js';
 import './components/ok-time-picker/ok-time-picker.js';

package/dist/components/ok-data-table/csv-encoding.d.ts

@@ -0,0 +1,4 @@
+/** BOM UTF-8: al frente del export para que Excel detecte la codificación. */
+export declare const CSV_BOM = "\uFEFF";
+/** Bytes de un fichero CSV → texto: UTF-8 estricto con fallback a Windows-1252 (Excel). */
+export declare function decodeCsvBuffer(buf: ArrayBuffer): string;

package/dist/components/ok-data-table/csv-encoding.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ok-kpi/ok-kpi.d.ts

@@ -12,7 +12,7 @@ export declare class OkKpi extends LitElement {
     trend: OkKpiTrend;
     /** Nombre de un ion-icon opcional mostrado junto al label. */
     icon?: string;
-    /** 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). */
     private trendIcon;
     render(): unknown;
 }

package/dist/components/ok-theme-picker/ok-theme-picker.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+export interface OkThemePickerPalette {
+    /** Id de la paleta (valor de `data-ok-palette`; 'erplora' = default sin atributo). */
+    id: string;
+    /** Nombre visible/accesible. */
+    label: string;
+    /** Color de marca para el swatch. */
+    brand: string;
+}
+/** Paletas canónicas — espejo 1:1 de palettes.css (guard en palettes.test.ts). */
+export declare const DEFAULT_PALETTES: OkThemePickerPalette[];
+/** Único punto que escribe `data-ok-palette`: 'erplora' (o vacío) QUITA el atributo. */
+export declare function applyPalette(root: Element, palette: string): void;
+export type OkThemePickerMode = 'system' | 'light' | 'dark';
+export interface OkThemePickerLabels {
+    /** Encabezado de la sección de paletas. */
+    palette: string;
+    /** Encabezado de la sección de modo. */
+    mode: string;
+    system: string;
+    light: string;
+    dark: string;
+}
+export declare class OkThemePicker extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Paleta activa ('erplora' = marca por defecto). */
+    palette: string;
+    /** Modo de color activo. */
+    mode: OkThemePickerMode;
+    /** Oculta el segmento de modo (para hosts con su propio toggle claro/oscuro). */
+    hideMode: boolean;
+    /** Paletas a mostrar (default: las canónicas de palettes.css). */
+    palettes: OkThemePickerPalette[];
+    /** Textos i18n (parcial; se mezclan sobre los defaults en inglés). */
+    labels: Partial<OkThemePickerLabels>;
+    private get t();
+    private emitChange;
+    private pickPalette;
+    private pickMode;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-theme-picker': OkThemePicker;
+    }
+}

package/dist/components/ok-theme-picker/ok-theme-picker.test.d.ts

@@ -0,0 +1 @@
+import './ok-theme-picker.js';

package/dist/index.d.ts

@@ -51,9 +51,9 @@ export { OkAudio } from './components/ok-audio/ok-audio.js';
 export { OkVideo } from './components/ok-video/ok-video.js';
 export { OkPdf } from './components/ok-pdf/ok-pdf.js';
 export { OkReceipt } from './components/ok-receipt/ok-receipt.js';
-export type { ReceiptData, ReceiptLine, ReceiptTax, ReceiptPayment, ReceiptBusiness, } from './components/ok-receipt/ok-receipt.js';
+export type { ReceiptData, ReceiptLine, ReceiptTax, ReceiptPayment, ReceiptBusiness, OkReceiptLabels, } from './components/ok-receipt/ok-receipt.js';
 export { OkInvoice } from './components/ok-invoice/ok-invoice.js';
-export type { InvoiceData, InvoiceParty, InvoiceLine, InvoiceTaxLine, } from './components/ok-invoice/ok-invoice.js';
+export type { InvoiceData, InvoiceParty, InvoiceLine, InvoiceTaxLine, OkInvoiceLabels, } from './components/ok-invoice/ok-invoice.js';
 export { OkTimeline } from './components/ok-timeline/ok-timeline.js';
 export type { OkTimelineItem } from './components/ok-timeline/ok-timeline.js';
 export { OkQtyStepper } from './components/ok-qty-stepper/ok-qty-stepper.js';
@@ -115,6 +115,8 @@ export { OkCoachmark } from './components/ok-coachmark/ok-coachmark.js';
 export type { OkCoachStep, OkCoachPlacement, OkCoachmarkLabels } from './components/ok-coachmark/ok-coachmark.js';
 export { OkSelectCard } from './components/ok-select-card/ok-select-card.js';
 export type { OkSelectCardChangeDetail } from './components/ok-select-card/ok-select-card.js';
+export { OkThemePicker, DEFAULT_PALETTES, applyPalette } from './components/ok-theme-picker/ok-theme-picker.js';
+export type { OkThemePickerPalette, OkThemePickerMode, OkThemePickerLabels, } from './components/ok-theme-picker/ok-theme-picker.js';
 export { OkErrorPage } from './components/ok-error-page/ok-error-page.js';
 export type { OkErrorPageVariant, OkErrorPageMode, OkErrorCheckStatus, OkErrorShortcut, OkErrorCheck } from './components/ok-error-page/ok-error-page.js';
 export { OkDatePicker } from './components/ok-date-picker/ok-date-picker.js';

package/dist/index.js

@@ -74,6 +74,7 @@ import { OkHoverCard } from "./ok-hover-card.js";
 import { OkNotificationCenter } from "./ok-notification-center.js";
 import { OkCoachmark } from "./ok-coachmark.js";
 import { OkSelectCard } from "./ok-select-card.js";
+import { DEFAULT_PALETTES, OkThemePicker, applyPalette } from "./ok-theme-picker.js";
 import { OkErrorPage } from "./ok-error-page.js";
 import { OkDatePicker } from "./ok-date-picker.js";
 import { OkTimePicker } from "./ok-time-picker.js";
@@ -96,6 +97,7 @@ import { OkAvatarGroup } from "./ok-avatar-group.js";
 import { OkOrgChart } from "./ok-org-chart.js";
 import { OkFileManager } from "./ok-file-manager.js";
 export {
+  DEFAULT_PALETTES,
   OkAppLauncher,
   OkAudio,
   OkAvatar,
@@ -185,6 +187,7 @@ export {
   OkStore,
   OkTagInput,
   OkTestimonial,
+  OkThemePicker,
   OkTimePicker,
   OkTimeline,
   OkTree,
@@ -192,6 +195,7 @@ export {
   OkWidgetBoard,
   OkWizard,
   StoreController,
+  applyPalette,
   createStore,
   store
 };

package/dist/ok-app-launcher.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 { o as okIcon, u as iconAppsOutline, v as iconCloseOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -337,7 +338,7 @@ class OkAppLauncher extends LitElement {
       @click=${() => this.selectApp(app)}
     >
       <span class="box">
-        ${this.isResolvedSvg(icon) ? html`<ion-icon .icon=${icon}></ion-icon>` : html`<ion-icon .name=${icon}></ion-icon>`}
+        ${this.isResolvedSvg(icon) ? html`<ion-icon .icon=${icon}></ion-icon>` : html`<ion-icon .icon=${okIcon(icon)}></ion-icon>`}
       </span>
       <span class="label">${app.label}</span>
     </button>`;
@@ -352,7 +353,7 @@ class OkAppLauncher extends LitElement {
         aria-label=${this.t.apps}
         @click=${() => this.toggle()}
       >
-        <ion-icon name="apps-outline"></ion-icon>
+        <ion-icon .icon=${iconAppsOutline}></ion-icon>
       </button>
     `;
   }
@@ -370,7 +371,7 @@ class OkAppLauncher extends LitElement {
             aria-label=${this.t.close}
             @click=${() => this.close()}
           >
-            <ion-icon name="close-outline"></ion-icon>
+            <ion-icon .icon=${iconCloseOutline}></ion-icon>
           </button>
         </div>
         ${this.apps.length ? html`<div class="grid">${this.apps.map((app) => this.renderApp(app))}</div>` : html`<div class="empty">${this.t.empty}</div>`}

package/dist/ok-audio.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 { E as iconVolumeMuteOutline, F as iconVolumeLowOutline, G as iconVolumeHighOutline, o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -217,7 +218,7 @@ class OkAudio extends LitElement {
   }
   render() {
     const pct = this.duration ? this.current / this.duration * 100 : 0;
-    const volIcon = this.muted || this.volume === 0 ? "volume-mute-outline" : this.volume < 0.5 ? "volume-low-outline" : "volume-high-outline";
+    const volIcon = this.muted || this.volume === 0 ? iconVolumeMuteOutline : this.volume < 0.5 ? iconVolumeLowOutline : iconVolumeHighOutline;
     return html`
       <div class="player">
         ${this.title ? html`<div class="title">${this.title}</div>` : ""}
@@ -240,7 +241,7 @@ class OkAudio extends LitElement {
           >
             <ion-icon
               slot="icon-only"
-              name=${this.playing ? "pause" : "play"}
+              .icon=${okIcon(this.playing ? "pause" : "play")}
             ></ion-icon>
           </ion-button>
 
@@ -258,7 +259,7 @@ class OkAudio 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"

package/dist/ok-calendar.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
+import { g as iconChevronForwardOutline, t as iconChevronBackOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -461,7 +462,7 @@ class OkCalendar extends LitElement {
         (ev) => html`<div class="agenda-item" @click=${(e) => this.clickEvent(ev, e)}>
               <span class="dot" style=${`background:${ev.color || "var(--primary-color)"}`}></span>
               <span class="agenda-title">${ev.title}</span>
-              <ion-icon name="chevron-forward-outline"></ion-icon>
+              <ion-icon .icon=${iconChevronForwardOutline}></ion-icon>
             </div>`
       )}
         </div>`;
@@ -482,7 +483,7 @@ class OkCalendar extends LitElement {
             aria-label=${this.t.prevMonth}
             @click=${() => this.navMonth(-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.monthLabel()}</span>
           <ion-button
@@ -491,7 +492,7 @@ class OkCalendar extends LitElement {
             aria-label=${this.t.nextMonth}
             @click=${() => this.navMonth(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="toggle" role="tablist">

package/dist/ok-carousel.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 { t as iconChevronBackOutline, g as iconChevronForwardOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -272,7 +273,7 @@ class OkCarousel extends LitElement {
           ?disabled=${n <= 1 || !this.loop && atStart}
           @click=${() => this.prev()}
         >
-          <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
+          <ion-icon slot="icon-only" .icon=${iconChevronBackOutline}></ion-icon>
         </ion-button>
 
         <div
@@ -298,7 +299,7 @@ class OkCarousel extends LitElement {
           ?disabled=${n <= 1 || !this.loop && atEnd}
           @click=${() => this.next()}
         >
-          <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
+          <ion-icon slot="icon-only" .icon=${iconChevronForwardOutline}></ion-icon>
         </ion-button>
       </div>
 

package/dist/ok-chat.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { define } from "./define.js";
+import { B as iconSend } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -287,7 +288,7 @@ class OkChat extends LitElement {
               aria-label=${this.t.send}
               @click=${() => this.send()}
             >
-              <ion-icon slot="icon-only" name="send"></ion-icon>
+              <ion-icon slot="icon-only" .icon=${iconSend}></ion-icon>
             </ion-button>
           </div>`}
     `;

package/dist/ok-combo.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
+import { w as iconChevronDownOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -244,7 +245,7 @@ class OkCombo extends LitElement {
         @keydown=${(e) => this.handleKeydown(e)}
       ></ion-input>
       <span class="chevron">
-        <ion-icon name="chevron-down-outline"></ion-icon>
+        <ion-icon .icon=${iconChevronDownOutline}></ion-icon>
       </span>
       ${this.open ? html`<ul class="dropdown" role="listbox">
             ${items.length ? items.map(

package/dist/ok-command-palette.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 { o as okIcon, L as iconSearchOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -367,7 +368,7 @@ class OkCommandPalette extends LitElement {
     }}
     >
       <span class="icon">
-        ${cmd.icon ? html`<ion-icon .name=${cmd.icon}></ion-icon>` : ""}
+        ${cmd.icon ? html`<ion-icon .icon=${okIcon(cmd.icon)}></ion-icon>` : ""}
       </span>
       <span class="body">
         <span class="label">${cmd.label}</span>
@@ -391,7 +392,7 @@ class OkCommandPalette extends LitElement {
     >
       <div class="panel">
         <div class="search">
-          <ion-icon name="search-outline"></ion-icon>
+          <ion-icon .icon=${iconSearchOutline}></ion-icon>
           <input
             type="text"
             .value=${this.queryText}

package/dist/ok-data-table.js

@@ -3,6 +3,17 @@ import { property, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { define } from "./define.js";
+import { N as iconCalendarOutline, s as iconEllipsisVertical, o as okIcon, m as iconClose, a as iconChevronBack, Q as iconChevronForward, R as iconFileTrayOutline, S as iconSwapVerticalOutline, T as iconChevronUpOutline, w as iconChevronDownOutline } from "./shared/icons.js";
+const CSV_BOM = "\uFEFF";
+function decodeCsvBuffer(buf) {
+  let text;
+  try {
+    text = new TextDecoder("utf-8", { fatal: true }).decode(buf);
+  } catch {
+    text = new TextDecoder("windows-1252").decode(buf);
+  }
+  return text.charCodeAt(0) === 65279 ? text.slice(1) : text;
+}
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -407,7 +418,7 @@ class OkDataTable extends LitElement {
     const head = cols.map((c) => this.csvEscape(c.key)).join(",");
     const lines = this.rows.map((r) => cols.map((c) => this.csvEscape(r[c.key])).join(","));
     const csv = [head, ...lines].join("\r\n");
-    const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+    const blob = new Blob([CSV_BOM + csv], { type: "text/csv;charset=utf-8" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
@@ -455,7 +466,7 @@ class OkDataTable extends LitElement {
     const input = ev.target;
     const file = input.files?.[0];
     if (!file) return;
-    const text = await file.text();
+    const text = decodeCsvBuffer(await file.arrayBuffer());
     const { headers, rows } = this.parseCsv(text);
     this.emit("csvImport", { headers, rows });
     this.emit("import", { headers, rows });
@@ -773,7 +784,7 @@ class OkDataTable extends LitElement {
     }
     return html`
       <span class="tk-daterange" role="group" aria-label=${col.header}>
-        <ion-icon name="calendar-outline"></ion-icon>
+        <ion-icon .icon=${iconCalendarOutline}></ion-icon>
         <ion-input type="date" aria-label=${this.t.fromOf.replace("{label}", col.header)} .value=${f?.from ?? ""} @ionChange=${(e) => this.onInlineRange(col, "from", e)}></ion-input>
         <span class="arr">→</span>
         <ion-input type="date" aria-label=${this.t.toOf.replace("{label}", col.header)} .value=${f?.to ?? ""} @ionChange=${(e) => this.onInlineRange(col, "to", e)}></ion-input>
@@ -785,7 +796,7 @@ class OkDataTable extends LitElement {
     if (!this.menuActions.length) return nothing;
     return html`
       <ion-button class="toolbtn" fill="clear" aria-label=${this.t.moreActions} @click=${(e) => this.openMenu(e)}>
-        <ion-icon slot="icon-only" name="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="icon-only" .icon=${iconEllipsisVertical}></ion-icon>
       </ion-button>
       <ion-popover
         .isOpen=${this.menuOpen}
@@ -801,7 +812,7 @@ class OkDataTable extends LitElement {
         this.menuOpen = false;
         this.emit("menuAction", { actionId: a.id });
       }}>
-                  ${a.icon ? html`<ion-icon slot="start" name=${a.icon} color=${a.color ?? nothing}></ion-icon>` : nothing}
+                  ${a.icon ? html`<ion-icon slot="start" .icon=${okIcon(a.icon)} color=${a.color ?? nothing}></ion-icon>` : nothing}
                   <ion-label color=${a.color ?? nothing}>${a.label}</ion-label>
                 </ion-item>
               `
@@ -829,7 +840,7 @@ class OkDataTable extends LitElement {
               aria-disabled=${disabled ? "true" : nothing}
               @click=${() => this.emit("rowAction", { actionId: a.id, row })}
             >
-              ${loading ? html`<ion-spinner slot="icon-only" name="dots"></ion-spinner>` : a.icon ? html`<ion-icon slot="icon-only" name=${a.icon}></ion-icon>` : a.label}
+              ${loading ? html`<ion-spinner slot="icon-only" name="dots"></ion-spinner>` : a.icon ? html`<ion-icon slot="icon-only" .icon=${okIcon(a.icon)}></ion-icon>` : a.label}
             </ion-button>
           `;
       }
@@ -842,7 +853,7 @@ class OkDataTable extends LitElement {
   toolButton(icon, on, onClick, label, badge) {
     return html`
       <ion-button class="toolbtn" size="small" fill=${on ? "solid" : "outline"} title=${label} aria-label=${label} @click=${onClick}>
-        <ion-icon slot="icon-only" name=${icon}></ion-icon>
+        <ion-icon slot="icon-only" .icon=${okIcon(icon)}></ion-icon>
         ${badge && badge > 0 ? html`<span class="badge">${badge}</span>` : nothing}
       </ion-button>
     `;
@@ -958,7 +969,7 @@ class OkDataTable extends LitElement {
                             title=${this.primaryAction.label}
                             aria-label=${this.primaryAction.label}
                             @click=${() => this.emit("primaryAction", {})}
-                          ><ion-icon slot="icon-only" name=${this.primaryAction.icon ?? "add"}></ion-icon></ion-button>
+                          ><ion-icon slot="icon-only" .icon=${okIcon(this.primaryAction.icon ?? "add")}></ion-icon></ion-button>
                         ` : nothing}
                     <!-- El módulo proyecta aquí acciones globales adicionales. -->
                     <slot name="toolbar"></slot>
@@ -967,7 +978,7 @@ class OkDataTable extends LitElement {
                       <div class="selbar">
                         <strong>${this.t.selected.replace("{n}", String(selCount))}</strong>
                         <button class="sel-clear" @click=${() => this.setSelection(/* @__PURE__ */ new Set())}>
-                          <ion-icon name="close" style="font-size:14px"></ion-icon> ${this.t.clear}
+                          <ion-icon .icon=${iconClose} style="font-size:14px"></ion-icon> ${this.t.clear}
                         </button>
                       </div>
                     ` : nothing}
@@ -991,11 +1002,11 @@ class OkDataTable extends LitElement {
                 </div>
                 ${pages > 1 ? html`
                       <div class="nav">
-                        <ion-button size="small" fill="clear" ?disabled=${current === 0} @click=${() => goTo(current - 1)}><ion-icon slot="icon-only" name="chevron-back"></ion-icon></ion-button>
+                        <ion-button size="small" fill="clear" ?disabled=${current === 0} @click=${() => goTo(current - 1)}><ion-icon slot="icon-only" .icon=${iconChevronBack}></ion-icon></ion-button>
                         ${this.pageList(current + 1, pages).map(
       (p) => p === "…" ? html`<span class="pgap">…</span>` : html`<button class=${`pnum${p === current + 1 ? " on" : ""}`} @click=${() => goTo(p - 1)}>${p}</button>`
     )}
-                        <ion-button size="small" fill="clear" ?disabled=${current >= pages - 1} @click=${() => goTo(current + 1)}><ion-icon slot="icon-only" name="chevron-forward"></ion-icon></ion-button>
+                        <ion-button size="small" fill="clear" ?disabled=${current >= pages - 1} @click=${() => goTo(current + 1)}><ion-icon slot="icon-only" .icon=${iconChevronForward}></ion-icon></ion-button>
                       </div>
                     ` : nothing}
               </div>
@@ -1014,7 +1025,7 @@ class OkDataTable extends LitElement {
       <aside class="drawer" role="dialog" aria-label=${isFilters ? this.t.filters : this.t.form}>
         <header class="dh">
           <strong>${isFilters ? this.t.filters : this.t.newRecord}</strong>
-          <ion-button fill="clear" size="small" aria-label=${this.t.close} @click=${() => this.close()}><ion-icon slot="icon-only" name="close"></ion-icon></ion-button>
+          <ion-button fill="clear" size="small" aria-label=${this.t.close} @click=${() => this.close()}><ion-icon slot="icon-only" .icon=${iconClose}></ion-icon></ion-button>
         </header>
         <div class="db">
           ${isFilters ? clientFilters ? this.filterColumns.map((c) => this.renderClientFilter(c)) : this.filterColumns.map((c) => html`<div class="fblock">${this.renderFilterControl(c)}</div>`) : html`<slot name="create"></slot>`}
@@ -1066,7 +1077,7 @@ class OkDataTable extends LitElement {
   emptyState() {
     return html`
       <div class="empty">
-        <span class="empty-ic"><ion-icon name="file-tray-outline"></ion-icon></span>
+        <span class="empty-ic"><ion-icon .icon=${iconFileTrayOutline}></ion-icon></span>
         <span>${this.effEmptyMessage}</span>
       </div>
     `;
@@ -1088,7 +1099,7 @@ class OkDataTable extends LitElement {
       const sortable = this.isSortable(c);
       const active = sortable && (this.serverSide ? this.sort === c.key : this.clientSort === c.key);
       const dir = this.serverSide ? this.sortDir : this.clientSortDir;
-      const caretIcon = !active ? "swap-vertical-outline" : dir === "asc" ? "chevron-up-outline" : "chevron-down-outline";
+      const caretIcon = !active ? iconSwapVerticalOutline : dir === "asc" ? iconChevronUpOutline : iconChevronDownOutline;
       return html`
                 <div
                   class=${`gcell gh ${alignCls(c.align)}${sortable ? " sortable" : ""}`}
@@ -1096,7 +1107,7 @@ class OkDataTable extends LitElement {
                   @click=${() => this.onHeaderClick(c)}
                 >
                   <span>${c.header}</span>
-                  ${sortable ? html`<span class=${`caret${active ? " on" : ""}`}><ion-icon name=${caretIcon}></ion-icon></span>` : nothing}
+                  ${sortable ? html`<span class=${`caret${active ? " on" : ""}`}><ion-icon .icon=${okIcon(caretIcon)}></ion-icon></span>` : nothing}
                 </div>
               `;
     })}
@@ -1141,7 +1152,7 @@ class OkDataTable extends LitElement {
               <ion-card class=${`rcard${selected ? " selected" : ""}`}>
                 ${hasHead ? html`
                       <ion-card-header class="rcard-head">
-                        ${icon != null && icon !== "" ? html`<span class="rc-icon">${typeof icon === "string" ? html`<ion-icon name=${icon}></ion-icon>` : icon}</span>` : nothing}
+                        ${icon != null && icon !== "" ? html`<span class="rc-icon">${typeof icon === "string" ? html`<ion-icon .icon=${okIcon(icon)}></ion-icon>` : icon}</span>` : nothing}
                         <span class="rc-title">${this.cardTitle ? this.cardTitle(row) : nothing}</span>
                         ${this.selectable ? html`<ion-checkbox .checked=${selected} aria-label=${this.t.select} @ionChange=${() => this.toggleRow(key)}></ion-checkbox>` : nothing}
                       </ion-card-header>

package/dist/ok-date-picker.js

@@ -2,6 +2,7 @@ import { LitElement, css, nothing, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
 import { c as computeAnchor } from "./shared/anchor.js";
+import { N as iconCalendarOutline, t as iconChevronBackOutline, g as iconChevronForwardOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -533,7 +534,7 @@ class OkDatePicker extends LitElement {
         aria-label=${label || this.t.open}
         @click=${() => this.toggle()}
       >
-        <ion-icon name="calendar-outline"></ion-icon>
+        <ion-icon .icon=${iconCalendarOutline}></ion-icon>
         <span class="label ${label ? "" : "placeholder"}">${label || this.placeholder}</span>
       </button>
       ${this.open ? html`<div
@@ -573,7 +574,7 @@ class OkDatePicker extends LitElement {
                 aria-label=${this.t.prev}
                 @click=${() => this.prevMonth()}
               >
-                <ion-icon name="chevron-back-outline"></ion-icon>
+                <ion-icon .icon=${iconChevronBackOutline}></ion-icon>
               </button>` : html`<span style="width:28px"></span>`}
           <span class="title">${title}</span>
           ${offset === (this.months === 2 ? 1 : 0) ? html`<button
@@ -582,7 +583,7 @@ class OkDatePicker extends LitElement {
                 aria-label=${this.t.next}
                 @click=${() => this.nextMonth()}
               >
-                <ion-icon name="chevron-forward-outline"></ion-icon>
+                <ion-icon .icon=${iconChevronForwardOutline}></ion-icon>
               </button>` : html`<span style="width:28px"></span>`}
         </div>
         <div class="grid" role="grid">

package/dist/ok-drawer.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { define } from "./define.js";
+import { o as okIcon, v as iconCloseOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -301,7 +302,7 @@ class OkDrawer extends LitElement {
         tabindex="-1"
       >
         <header class="header">
-          ${this.icon ? html`<ion-icon .name=${this.icon} aria-hidden="true"></ion-icon>` : ""}
+          ${this.icon ? html`<ion-icon .icon=${okIcon(this.icon)} aria-hidden="true"></ion-icon>` : ""}
           ${this.heading ? html`<h2 class="heading">${this.heading}</h2>` : html`<span class="heading"></span>`}
           <div class="header-actions">
             <slot name="header-actions"></slot>
@@ -312,7 +313,7 @@ class OkDrawer extends LitElement {
                   title=${this.t.close}
                   @click=${() => this.requestClose("button")}
                 >
-                  <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
+                  <ion-icon .icon=${iconCloseOutline} aria-hidden="true"></ion-icon>
                 </button>` : ""}
           </div>
         </header>