@erplora/outfitkit 0.1.13 → 0.1.15

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/components/ok-data-table/ok-data-table.d.ts

@@ -39,6 +39,13 @@ export interface DataTableAction {
     icon?: string;
     /** Color Ionic del botón (p.ej. 'danger', 'primary'). */
     color?: string;
+    /** (opcional, por fila) Si devuelve `true` para una fila, el botón de esa acción se renderiza
+     *  deshabilitado (`?disabled` + `aria-disabled="true"`). */
+    disabled?: (row: Record<string, unknown>) => boolean;
+    /** (opcional, por fila) Si devuelve `true` para una fila, el botón muestra un
+     *  `<ion-spinner name="dots">` en lugar del icono/label Y queda deshabilitado
+     *  (una acción en curso no debe ser re-clicable). */
+    loading?: (row: Record<string, unknown>) => boolean;
 }
 /** Acción primaria de la topbar (botón destacado). Emite el evento `primaryAction`. */
 export interface DataTablePrimaryAction {

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/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, A as iconAppsOutline, B 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 { J as iconVolumeMuteOutline, K as iconVolumeLowOutline, L 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 { q as iconChevronForwardOutline, z 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 { z as iconChevronBackOutline, q 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 { G 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 { h 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, Q 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,7 @@ 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 { i as iconCalendarOutline, a as iconEllipsisVertical, o as okIcon, b as iconClose, c as iconChevronBack, d as iconChevronForward, e as iconFileTrayOutline, f as iconSwapVerticalOutline, g as iconChevronUpOutline, h as iconChevronDownOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -304,6 +305,10 @@ class OkDataTable extends LitElement {
     .empty .empty-ic { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 999px; background: var(--header-background); font-size: 26px; }
 
     .actions { display: flex; gap: 0.25rem; justify-content: flex-end; }
+    /* Spinner de acción en curso (loading): contenido dentro del ion-button small (Ionic lo fija
+     * a 28px en el :host, por eso width/height y no font-size). Cubre tabla y tarjetas: los
+     * botones de fila siempre van dentro de .actions. */
+    .actions ion-spinner { width: 18px; height: 18px; }
 
     /* ── Pie: contador + paginación ──────────────────────────────────────────────────────── */
     .pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 1rem; border-top: 1px solid var(--border-color); background: var(--header-background); font-size: 12.5px; color: var(--color-muted); }
@@ -769,7 +774,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>
@@ -781,7 +786,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}
@@ -797,7 +802,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>
               `
@@ -813,16 +818,22 @@ class OkDataTable extends LitElement {
     return html`
       <div class="actions">
         ${this.actions.map(
-      (a) => html`
+      (a) => {
+        const loading = a.loading?.(row) === true;
+        const disabled = loading || a.disabled?.(row) === true;
+        return html`
             <ion-button
               size="small"
               fill="clear"
               color=${a.color ?? "medium"}
+              ?disabled=${disabled}
+              aria-disabled=${disabled ? "true" : nothing}
               @click=${() => this.emit("rowAction", { actionId: a.id, row })}
             >
-              ${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>
-          `
+          `;
+      }
     )}
       </div>
     `;
@@ -832,7 +843,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>
     `;
@@ -948,7 +959,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>
@@ -957,7 +968,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}
@@ -981,11 +992,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>
@@ -1004,7 +1015,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>`}
@@ -1056,7 +1067,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>
     `;
@@ -1078,7 +1089,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" : ""}`}
@@ -1086,7 +1097,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>
               `;
     })}
@@ -1131,7 +1142,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 { i as iconCalendarOutline, z as iconChevronBackOutline, q 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, B 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>

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 { D as iconCloudUploadOutline, E as iconAlertCircleOutline, F as iconDocumentOutline, B 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 { q as iconChevronForwardOutline, o as okIcon, T 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;