@erplora/outfitkit 0.1.12 → 0.1.14

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 {
@@ -181,6 +188,11 @@ export declare class OkDataTable extends LitElement {
      *  vistas. La presencia de 'cards' (o 'card') habilita la vista tarjetas. Compatibilidad: el
      *  antiguo valor booleano sigue funcionando. */
     views: boolean | string[];
+    /** (NUEVO) Vista inicial al montar: 'cards' | 'table'. Por defecto 'table' (compatibilidad). Solo
+     *  aplica una vez, en el primer render; el usuario puede luego conmutar con el toggle. Si pide
+     *  'cards' pero la vista tarjetas no está habilitada (`views`), se ignora. Evita el hack de fijar
+     *  `viewMode` por referencia tras montar (frágil si la tabla monta detrás de un `v-if`/loading). */
+    defaultView?: 'table' | 'cards';
     /** (NUEVO, alias documentado) Habilita import/export CSV (equivalente a `exportable`+`importable`
      *  / `csv`). Mostrar el botón de Exportar. */
     exportable: boolean;
@@ -250,7 +262,7 @@ export declare class OkDataTable extends LitElement {
     private onImportFile;
     private toggle;
     private cloneFilters;
-    private toggleFilterValue;
+    private setFilterValues;
     private setFilterRange;
     private applyFilters;
     private clearFilters;
@@ -286,6 +298,7 @@ export declare class OkDataTable extends LitElement {
     private onFilterSelect;
     private onInlineRange;
     private openMenu;
+    firstUpdated(): void;
     private setViewMode;
     private renderFilterControl;
     private renderInlineFilters;

package/dist/ok-data-table.js

@@ -149,13 +149,7 @@ class OkDataTable extends LitElement {
     .fblock { display: flex; flex-direction: column; gap: 0.45rem; }
     .flabel { font-size: 13px; font-weight: 500; color: var(--color); }
     .frange { display: flex; gap: 0.5rem; }
-    /* Filtros cliente: chips multi-select (estilo Hub) + rango de fechas. */
-    .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
-    .chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.6rem; border: 1px solid var(--border-color); border-radius: 999px; background: var(--background); color: var(--color-muted); font-size: 12px; cursor: pointer; transition: color 0.12s, background 0.12s, border-color 0.12s; }
-    .chip:hover { color: var(--color); }
-    .chip.on { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, transparent); }
-    .chip ion-icon { font-size: 12px; }
-    .chip-empty { font-size: 12px; color: var(--color-muted); }
+    /* Filtros cliente: multi-select con ion-select (ventana flotante de Ionic) + rango de fechas. */
     .daterange { display: flex; gap: 0.6rem; }
     .daterange ion-input { flex: 1; }
     /* Pie del drawer de filtros: Limpiar / Aplicar. */
@@ -275,33 +269,45 @@ class OkDataTable extends LitElement {
     .range { display: flex; gap: 0.25rem; }
 
     /* ── Vista tarjetas ──────────────────────────────────────────────────────────────────── */
-    .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.75rem; padding: 1rem; }
-    /* Flat: sin borde ni elevación — las tarjetas se delimitan por la superficie (no por sombra). */
-    .rcard { display: flex; flex-direction: column; border: 0; border-radius: 12px; overflow: hidden; background: var(--header-background); box-shadow: none; transition: background-color var(--ok-transition, 150ms ease), color var(--ok-transition, 150ms ease), box-shadow var(--ok-transition, 150ms ease), transform 120ms ease; }
-    @media (hover: hover) {
-      .rcard:hover { background: var(--row-hover); }
-    }
-    .rcard:active { transform: scale(0.995); }
+    /* Cada tarjeta mide SU contenido (no se estira al alto de la fila ni del contenedor):
+       - grid-auto-rows: max-content → cada fila implícita = alto de su contenido. CLAVE: sin esto,
+         en modo fill (grid de alto fijo + align-content:start) cuando las tarjetas no caben el
+         navegador encoge los tracks de fila y las tarjetas se solapan.
+       - align-content: start → empaqueta las filas arriba (no reparte el hueco sobrante estirando).
+       - align-items: start → en una fila multi-columna cada tarjeta mide su propio contenido.
+       En modo fill el grid es flex-child con overflow:auto → cuando las tarjetas no caben aparece el
+       scroll DENTRO de la tabla (no crece hacia fuera). */
+    .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.75rem; padding: 1rem; grid-auto-rows: max-content; align-content: start; align-items: start; }
+    /* Tarjeta = ion-card NATIVO de Ionic: su fondo, radio, elevación y padding son los de Ionic y NO
+       se sobrescriben. Aquí solo se ajusta lo que el contexto de rejilla exige (margin) y los huecos
+       que Ionic no trae (cabecera en fila, filas clave-valor, barra de acciones, resalte de selección). */
+    ion-card.rcard { margin: 0; } /* la rejilla aporta el gap → sin esto el margin por defecto de ion-card lo duplica */
+    ion-card.rcard.selected { outline: 2px solid var(--primary); outline-offset: -2px; }
     @media (prefers-reduced-motion: reduce) {
       .gh.sortable:hover, .gh.sortable:active,
-      .grow-data:hover, .grow-data:active,
-      .rcard:hover, .rcard:active { transform: none; }
+      .grow-data:hover, .grow-data:active { transform: none; }
     }
-    .rcard.selected { background: color-mix(in srgb, var(--primary) 12%, var(--header-background)); }
-    .rcard-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border-color); background: var(--header-background); }
+    /* Cabecera: ion-card-header en fila (icono + título + checkbox); se conserva su padding Ionic. */
+    ion-card-header.rcard-head { display: flex; align-items: center; gap: 0.5rem; }
     .rcard-head .rc-icon { display: inline-flex; color: var(--primary); }
     .rcard-head .rc-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
-    .rcard-body { flex: 1; padding: 0.6rem 0.85rem; display: flex; flex-direction: column; gap: 0.4rem; }
+    /* Cuerpo: ion-card-content (padding Ionic por defecto) con las filas clave-valor apiladas. */
+    ion-card-content.rcard-body { display: flex; flex-direction: column; gap: 0.4rem; }
     .rrow { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 13px; }
     .rrow .rk { color: var(--color-muted); }
-    .rrow .rv { font-weight: 500; text-align: right; }
-    .ractions { display: flex; justify-content: flex-end; gap: 0.25rem; padding: 0.25rem 0.5rem; border-top: 1px solid var(--border-color-soft); background: var(--header-background); }
+    .rrow .rv { font-weight: 500; text-align: right; color: var(--color); }
+    /* Barra de acciones (Ionic no trae "card actions"): pie alineado a la derecha, fondo transparente. */
+    .ractions { display: flex; justify-content: flex-end; gap: 0.25rem; padding: 0 0.5rem 0.5rem; }
 
     /* ── Estado vacío ────────────────────────────────────────────────────────────────────── */
     .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 3.5rem 1rem; text-align: center; color: var(--color-muted); }
     .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); }
@@ -469,12 +475,12 @@ class OkDataTable extends LitElement {
     }
     return out;
   }
-  toggleFilterValue(key, value) {
+  // Fija el conjunto de valores seleccionados de una columna (multi-select del drawer = ion-select).
+  setFilterValues(key, values) {
     const next = this.cloneFilters(this.filterDraft);
-    const values = new Set(next[key]?.values ?? []);
-    if (values.has(value)) values.delete(value);
-    else values.add(value);
-    next[key] = { ...next[key], values };
+    const clean = (values ?? []).filter((v) => v != null && v !== "");
+    if (clean.length) next[key] = { ...next[key], values: new Set(clean) };
+    else next[key] = { ...next[key], values: void 0 };
     this.filterDraft = next;
   }
   setFilterRange(key, edge, value) {
@@ -669,6 +675,13 @@ class OkDataTable extends LitElement {
     this.menuEv = ev;
     this.menuOpen = true;
   }
+  // Aplica la vista inicial declarada (`default-view`) una sola vez, tras el primer render. Es la
+  // forma robusta de arrancar en tarjetas sin depender de fijar `viewMode` por referencia (que
+  // falla si la tabla monta detrás de un `v-if`/loading y el ref aún es null).
+  firstUpdated() {
+    if (this.defaultView === "cards" && this.cardViewEnabled) this.viewMode = "cards";
+    else if (this.defaultView === "table") this.viewMode = "table";
+  }
   setViewMode(mode) {
     if (this.viewMode === mode) return;
     this.viewMode = mode;
@@ -804,16 +817,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" name=${a.icon}></ion-icon>` : a.label}
             </ion-button>
-          `
+          `;
+      }
     )}
       </div>
     `;
@@ -1024,21 +1043,23 @@ class OkDataTable extends LitElement {
         </div>
       `;
     }
-    const distinct = this.distinctValues(col);
-    const selected = this.filterDraft[col.key]?.values ?? /* @__PURE__ */ new Set();
+    const opts = col.options ?? this.distinctValues(col).map((v) => ({ value: v, label: v }));
+    const selected = [...this.filterDraft[col.key]?.values ?? /* @__PURE__ */ new Set()];
     return html`
       <div class="fblock">
-        <span class="flabel">${label}</span>
-        <div class="chips">
-          ${distinct.length === 0 ? html`<span class="chip-empty">${this.t.noValues}</span>` : distinct.map((v) => {
-      const on = selected.has(v);
-      return html`
-                  <button class=${`chip${on ? " on" : ""}`} @click=${() => this.toggleFilterValue(col.key, v)}>
-                    ${on ? html`<ion-icon name="checkmark-outline"></ion-icon>` : nothing}${v}
-                  </button>
-                `;
-    })}
-        </div>
+        <ion-select
+          label=${label}
+          label-placement="stacked"
+          fill="outline"
+          multiple
+          interface="modal"
+          .interfaceOptions=${{ cssClass: "ok-overlay" }}
+          placeholder=${this.t.select}
+          .value=${selected}
+          @ionChange=${(e) => this.setFilterValues(col.key, e.detail.value ?? [])}
+        >
+          ${opts.length === 0 ? html`<ion-select-option .disabled=${true} value="">${this.t.noValues}</ion-select-option>` : opts.map((o) => html`<ion-select-option value=${o.value}>${o.label}</ion-select-option>`)}
+        </ion-select>
       </div>
     `;
   }
@@ -1117,21 +1138,21 @@ class OkDataTable extends LitElement {
         const selected = this.selectable && this.selection.has(key);
         const icon = this.cardIcon?.(row);
         return html`
-              <div class=${`rcard${selected ? " selected" : ""}`}>
+              <ion-card class=${`rcard${selected ? " selected" : ""}`}>
                 ${hasHead ? html`
-                      <header class="rcard-head">
+                      <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}
                         <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}
-                      </header>
+                      </ion-card-header>
                     ` : nothing}
-                <div class="rcard-body">
+                <ion-card-content class="rcard-body">
                   ${this.renderCard ? this.renderCard(row) : this.visibleColumns.map(
           (c) => html`<div class="rrow"><span class="rk">${c.header}</span><span class="rv">${c.render ? c.render(row) : this.cell(c, row)}</span></div>`
         )}
-                </div>
+                </ion-card-content>
                 ${this.actions.length ? html`<div class="ractions">${this.actionButtons(row)}</div>` : nothing}
-              </div>
+              </ion-card>
             `;
       }
     )}
@@ -1211,6 +1232,9 @@ __decorateClass([
 __decorateClass([
   property({ attribute: false })
 ], OkDataTable.prototype, "views");
+__decorateClass([
+  property({ attribute: "default-view" })
+], OkDataTable.prototype, "defaultView");
 __decorateClass([
   property({ type: Boolean })
 ], OkDataTable.prototype, "exportable");

package/dist/outfitkit.bundle.js

@@ -264,7 +264,7 @@ Yt.elementStyles = [], Yt.shadowRootOptions = { mode: "open" }, Yt[Cr("elementPr
  */
 const Wo = globalThis, ya = (n) => n, no = Wo.trustedTypes, ka = no ? no.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, Go = "$lit$", xe = `lit$${Math.random().toFixed(9).slice(2)}$`, Qo = "?" + xe, bi = `<${Qo}>`, gt = document, Er = () => gt.createComment(""), Pr = (n) => n === null || typeof n != "object" && typeof n != "function", Zo = Array.isArray, Ra = (n) => Zo(n) || typeof n?.[Symbol.iterator] == "function", Oo = `[ 	
 \f\r]`, kr = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, wa = /-->/g, $a = />/g, mt = RegExp(`>|${Oo}(?:([^\\s"'>=/]+)(${Oo}*=${Oo}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), za = /'/g, _a = /"/g, Na = /^(?:script|style|textarea|title)$/i, Jo = (n) => (e, ...t) => ({ _$litType$: n, strings: e, values: t }), s = Jo(1), P = Jo(2), Id = Jo(3), ye = Symbol.for("lit-noChange"), m = Symbol.for("lit-nothing"), Ca = /* @__PURE__ */ new WeakMap(), ft = gt.createTreeWalker(gt, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), za = /'/g, _a = /"/g, Na = /^(?:script|style|textarea|title)$/i, Jo = (n) => (e, ...t) => ({ _$litType$: n, strings: e, values: t }), s = Jo(1), P = Jo(2), Ld = Jo(3), ye = Symbol.for("lit-noChange"), m = Symbol.for("lit-nothing"), Ca = /* @__PURE__ */ new WeakMap(), ft = gt.createTreeWalker(gt, 129);
 function qa(n, e) {
   if (!Zo(n) || !n.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return ka !== void 0 ? ka.createHTML(e) : e;
@@ -585,7 +585,7 @@ const Sa = (n, e, t) => (t.configurable = !0, t.enumerable = !0, Reflect.decorat
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function I(n, e) {
+function L(n, e) {
   return (t, r, o) => {
     const a = (i) => i.renderRoot?.querySelector(n) ?? null;
     if (e) {
@@ -976,10 +976,10 @@ const Qa = "important", ji = " !" + Qa, Ma = ra(class extends oa {
     return ye;
   }
 });
-var Li = Object.defineProperty, Ii = Object.getOwnPropertyDescriptor, C = (n, e, t, r) => {
-  for (var o = r > 1 ? void 0 : r ? Ii(e, t) : e, a = n.length - 1, i; a >= 0; a--)
+var Ii = Object.defineProperty, Li = Object.getOwnPropertyDescriptor, C = (n, e, t, r) => {
+  for (var o = r > 1 ? void 0 : r ? Li(e, t) : e, a = n.length - 1, i; a >= 0; a--)
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
-  return r && o && Li(e, t, o), o;
+  return r && o && Ii(e, t, o), o;
 };
 const Ti = {
   search: "Search…",
@@ -1074,13 +1074,7 @@ class _ extends g {
     .fblock { display: flex; flex-direction: column; gap: 0.45rem; }
     .flabel { font-size: 13px; font-weight: 500; color: var(--color); }
     .frange { display: flex; gap: 0.5rem; }
-    /* Filtros cliente: chips multi-select (estilo Hub) + rango de fechas. */
-    .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
-    .chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.6rem; border: 1px solid var(--border-color); border-radius: 999px; background: var(--background); color: var(--color-muted); font-size: 12px; cursor: pointer; transition: color 0.12s, background 0.12s, border-color 0.12s; }
-    .chip:hover { color: var(--color); }
-    .chip.on { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, transparent); }
-    .chip ion-icon { font-size: 12px; }
-    .chip-empty { font-size: 12px; color: var(--color-muted); }
+    /* Filtros cliente: multi-select con ion-select (ventana flotante de Ionic) + rango de fechas. */
     .daterange { display: flex; gap: 0.6rem; }
     .daterange ion-input { flex: 1; }
     /* Pie del drawer de filtros: Limpiar / Aplicar. */
@@ -1200,33 +1194,45 @@ class _ extends g {
     .range { display: flex; gap: 0.25rem; }
 
     /* ── Vista tarjetas ──────────────────────────────────────────────────────────────────── */
-    .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.75rem; padding: 1rem; }
-    /* Flat: sin borde ni elevación — las tarjetas se delimitan por la superficie (no por sombra). */
-    .rcard { display: flex; flex-direction: column; border: 0; border-radius: 12px; overflow: hidden; background: var(--header-background); box-shadow: none; transition: background-color var(--ok-transition, 150ms ease), color var(--ok-transition, 150ms ease), box-shadow var(--ok-transition, 150ms ease), transform 120ms ease; }
-    @media (hover: hover) {
-      .rcard:hover { background: var(--row-hover); }
-    }
-    .rcard:active { transform: scale(0.995); }
+    /* Cada tarjeta mide SU contenido (no se estira al alto de la fila ni del contenedor):
+       - grid-auto-rows: max-content → cada fila implícita = alto de su contenido. CLAVE: sin esto,
+         en modo fill (grid de alto fijo + align-content:start) cuando las tarjetas no caben el
+         navegador encoge los tracks de fila y las tarjetas se solapan.
+       - align-content: start → empaqueta las filas arriba (no reparte el hueco sobrante estirando).
+       - align-items: start → en una fila multi-columna cada tarjeta mide su propio contenido.
+       En modo fill el grid es flex-child con overflow:auto → cuando las tarjetas no caben aparece el
+       scroll DENTRO de la tabla (no crece hacia fuera). */
+    .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.75rem; padding: 1rem; grid-auto-rows: max-content; align-content: start; align-items: start; }
+    /* Tarjeta = ion-card NATIVO de Ionic: su fondo, radio, elevación y padding son los de Ionic y NO
+       se sobrescriben. Aquí solo se ajusta lo que el contexto de rejilla exige (margin) y los huecos
+       que Ionic no trae (cabecera en fila, filas clave-valor, barra de acciones, resalte de selección). */
+    ion-card.rcard { margin: 0; } /* la rejilla aporta el gap → sin esto el margin por defecto de ion-card lo duplica */
+    ion-card.rcard.selected { outline: 2px solid var(--primary); outline-offset: -2px; }
     @media (prefers-reduced-motion: reduce) {
       .gh.sortable:hover, .gh.sortable:active,
-      .grow-data:hover, .grow-data:active,
-      .rcard:hover, .rcard:active { transform: none; }
+      .grow-data:hover, .grow-data:active { transform: none; }
     }
-    .rcard.selected { background: color-mix(in srgb, var(--primary) 12%, var(--header-background)); }
-    .rcard-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border-color); background: var(--header-background); }
+    /* Cabecera: ion-card-header en fila (icono + título + checkbox); se conserva su padding Ionic. */
+    ion-card-header.rcard-head { display: flex; align-items: center; gap: 0.5rem; }
     .rcard-head .rc-icon { display: inline-flex; color: var(--primary); }
     .rcard-head .rc-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
-    .rcard-body { flex: 1; padding: 0.6rem 0.85rem; display: flex; flex-direction: column; gap: 0.4rem; }
+    /* Cuerpo: ion-card-content (padding Ionic por defecto) con las filas clave-valor apiladas. */
+    ion-card-content.rcard-body { display: flex; flex-direction: column; gap: 0.4rem; }
     .rrow { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 13px; }
     .rrow .rk { color: var(--color-muted); }
-    .rrow .rv { font-weight: 500; text-align: right; }
-    .ractions { display: flex; justify-content: flex-end; gap: 0.25rem; padding: 0.25rem 0.5rem; border-top: 1px solid var(--border-color-soft); background: var(--header-background); }
+    .rrow .rv { font-weight: 500; text-align: right; color: var(--color); }
+    /* Barra de acciones (Ionic no trae "card actions"): pie alineado a la derecha, fondo transparente. */
+    .ractions { display: flex; justify-content: flex-end; gap: 0.25rem; padding: 0 0.5rem 0.5rem; }
 
     /* ── Estado vacío ────────────────────────────────────────────────────────────────────── */
     .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 3.5rem 1rem; text-align: center; color: var(--color-muted); }
     .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); }
@@ -1342,9 +1348,10 @@ class _ extends g {
       t[r] = { values: o.values ? new Set(o.values) : void 0, from: o.from, to: o.to };
     return t;
   }
-  toggleFilterValue(e, t) {
-    const r = this.cloneFilters(this.filterDraft), o = new Set(r[e]?.values ?? []);
-    o.has(t) ? o.delete(t) : o.add(t), r[e] = { ...r[e], values: o }, this.filterDraft = r;
+  // Fija el conjunto de valores seleccionados de una columna (multi-select del drawer = ion-select).
+  setFilterValues(e, t) {
+    const r = this.cloneFilters(this.filterDraft), o = (t ?? []).filter((a) => a != null && a !== "");
+    o.length ? r[e] = { ...r[e], values: new Set(o) } : r[e] = { ...r[e], values: void 0 }, this.filterDraft = r;
   }
   setFilterRange(e, t, r) {
     const o = this.cloneFilters(this.filterDraft);
@@ -1504,6 +1511,12 @@ class _ extends g {
   openMenu(e) {
     this.menuEv = e, this.menuOpen = !0;
   }
+  // Aplica la vista inicial declarada (`default-view`) una sola vez, tras el primer render. Es la
+  // forma robusta de arrancar en tarjetas sin depender de fijar `viewMode` por referencia (que
+  // falla si la tabla monta detrás de un `v-if`/loading y el ref aún es null).
+  firstUpdated() {
+    this.defaultView === "cards" && this.cardViewEnabled ? this.viewMode = "cards" : this.defaultView === "table" && (this.viewMode = "table");
+  }
   setViewMode(e) {
     this.viewMode !== e && (this.viewMode = e, this.emit("viewChange", e));
   }
@@ -1627,16 +1640,21 @@ class _ extends g {
     return this.actions.length ? s`
       <div class="actions">
         ${this.actions.map(
-      (t) => s`
+      (t) => {
+        const r = t.loading?.(e) === !0, o = r || t.disabled?.(e) === !0;
+        return s`
             <ion-button
               size="small"
               fill="clear"
               color=${t.color ?? "medium"}
+              ?disabled=${o}
+              aria-disabled=${o ? "true" : m}
               @click=${() => this.emit("rowAction", { actionId: t.id, row: e })}
             >
-              ${t.icon ? s`<ion-icon slot="icon-only" name=${t.icon}></ion-icon>` : t.label}
+              ${r ? s`<ion-spinner slot="icon-only" name="dots"></ion-spinner>` : t.icon ? s`<ion-icon slot="icon-only" name=${t.icon}></ion-icon>` : t.label}
             </ion-button>
-          `
+          `;
+      }
     )}
       </div>
     ` : m;
@@ -1823,20 +1841,22 @@ class _ extends g {
         </div>
       `;
     }
-    const r = this.distinctValues(e), o = this.filterDraft[e.key]?.values ?? /* @__PURE__ */ new Set();
+    const r = e.options ?? this.distinctValues(e).map((a) => ({ value: a, label: a })), o = [...this.filterDraft[e.key]?.values ?? /* @__PURE__ */ new Set()];
     return s`
       <div class="fblock">
-        <span class="flabel">${t}</span>
-        <div class="chips">
-          ${r.length === 0 ? s`<span class="chip-empty">${this.t.noValues}</span>` : r.map((a) => {
-      const i = o.has(a);
-      return s`
-                  <button class=${`chip${i ? " on" : ""}`} @click=${() => this.toggleFilterValue(e.key, a)}>
-                    ${i ? s`<ion-icon name="checkmark-outline"></ion-icon>` : m}${a}
-                  </button>
-                `;
-    })}
-        </div>
+        <ion-select
+          label=${t}
+          label-placement="stacked"
+          fill="outline"
+          multiple
+          interface="modal"
+          .interfaceOptions=${{ cssClass: "ok-overlay" }}
+          placeholder=${this.t.select}
+          .value=${o}
+          @ionChange=${(a) => this.setFilterValues(e.key, a.detail.value ?? [])}
+        >
+          ${r.length === 0 ? s`<ion-select-option .disabled=${!0} value="">${this.t.noValues}</ion-select-option>` : r.map((a) => s`<ion-select-option value=${a.value}>${a.label}</ion-select-option>`)}
+        </ion-select>
       </div>
     `;
   }
@@ -1906,21 +1926,21 @@ class _ extends g {
       (r) => {
         const o = this.keyOf(r), a = this.selectable && this.selection.has(o), i = this.cardIcon?.(r);
         return s`
-              <div class=${`rcard${a ? " selected" : ""}`}>
+              <ion-card class=${`rcard${a ? " selected" : ""}`}>
                 ${t ? s`
-                      <header class="rcard-head">
+                      <ion-card-header class="rcard-head">
                         ${i != null && i !== "" ? s`<span class="rc-icon">${typeof i == "string" ? s`<ion-icon name=${i}></ion-icon>` : i}</span>` : m}
                         <span class="rc-title">${this.cardTitle ? this.cardTitle(r) : m}</span>
                         ${this.selectable ? s`<ion-checkbox .checked=${a} aria-label=${this.t.select} @ionChange=${() => this.toggleRow(o)}></ion-checkbox>` : m}
-                      </header>
+                      </ion-card-header>
                     ` : m}
-                <div class="rcard-body">
+                <ion-card-content class="rcard-body">
                   ${this.renderCard ? this.renderCard(r) : this.visibleColumns.map(
           (c) => s`<div class="rrow"><span class="rk">${c.header}</span><span class="rv">${c.render ? c.render(r) : this.cell(c, r)}</span></div>`
         )}
-                </div>
+                </ion-card-content>
                 ${this.actions.length ? s`<div class="ractions">${this.actionButtons(r)}</div>` : m}
-              </div>
+              </ion-card>
             `;
       }
     )}
@@ -2000,6 +2020,9 @@ C([
 C([
   l({ attribute: !1 })
 ], _.prototype, "views", 2);
+C([
+  l({ attribute: "default-view" })
+], _.prototype, "defaultView", 2);
 C([
   l({ type: Boolean })
 ], _.prototype, "exportable", 2);
@@ -3612,7 +3635,7 @@ sa([
   l({ attribute: !1 })
 ], uo.prototype, "labels", 2);
 y("ok-stepper", uo);
-var rs = Object.defineProperty, os = Object.getOwnPropertyDescriptor, Lr = (n, e, t, r) => {
+var rs = Object.defineProperty, os = Object.getOwnPropertyDescriptor, Ir = (n, e, t, r) => {
   for (var o = r > 1 ? void 0 : r ? os(e, t) : e, a = n.length - 1, i; a >= 0; a--)
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
   return r && o && rs(e, t, o), o;
@@ -3728,19 +3751,19 @@ class Jt extends g {
     `;
   }
 }
-Lr([
+Ir([
   l({ attribute: !1 })
 ], Jt.prototype, "steps", 2);
-Lr([
+Ir([
   l({ type: Number })
 ], Jt.prototype, "current", 2);
-Lr([
+Ir([
   l()
 ], Jt.prototype, "backLabel", 2);
-Lr([
+Ir([
   l()
 ], Jt.prototype, "nextLabel", 2);
-Lr([
+Ir([
   l()
 ], Jt.prototype, "finishLabel", 2);
 y("ok-wizard", Jt);
@@ -5059,7 +5082,7 @@ const xs = {
   empty: "No apps",
   close: "Close"
 };
-class Ir extends g {
+class Lr extends g {
   constructor() {
     super(...arguments), this.apps = [], this.labels = {}, this.open = !1, this.shown = !1, this.onKeydown = (e) => {
       e.key === "Escape" && this.close();
@@ -5397,17 +5420,17 @@ class Ir extends g {
 }
 mo([
   l({ attribute: !1 })
-], Ir.prototype, "apps", 2);
+], Lr.prototype, "apps", 2);
 mo([
   l({ attribute: !1 })
-], Ir.prototype, "labels", 2);
+], Lr.prototype, "labels", 2);
 mo([
   v()
-], Ir.prototype, "open", 2);
+], Lr.prototype, "open", 2);
 mo([
   v()
-], Ir.prototype, "shown", 2);
-y("ok-app-launcher", Ir);
+], Lr.prototype, "shown", 2);
+y("ok-app-launcher", Lr);
 var ys = Object.defineProperty, ks = Object.getOwnPropertyDescriptor, er = (n, e, t, r) => {
   for (var o = r > 1 ? void 0 : r ? ks(e, t) : e, a = n.length - 1, i; a >= 0; a--)
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
@@ -6531,13 +6554,13 @@ vo([
   l({ attribute: !1 })
 ], Tr.prototype, "labels", 2);
 vo([
-  I("input")
+  L("input")
 ], Tr.prototype, "firstInput", 2);
 y("ok-otp", Tr);
-var Ls = Object.defineProperty, Is = Object.getOwnPropertyDescriptor, Ge = (n, e, t, r) => {
-  for (var o = r > 1 ? void 0 : r ? Is(e, t) : e, a = n.length - 1, i; a >= 0; a--)
+var Is = Object.defineProperty, Ls = Object.getOwnPropertyDescriptor, Ge = (n, e, t, r) => {
+  for (var o = r > 1 ? void 0 : r ? Ls(e, t) : e, a = n.length - 1, i; a >= 0; a--)
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
-  return r && o && Ls(e, t, o), o;
+  return r && o && Is(e, t, o), o;
 };
 const Ts = {
   keypad: "Number pad",
@@ -7420,7 +7443,7 @@ ze([
   v()
 ], ie.prototype, "error", 2);
 ze([
-  I('input[type="file"]')
+  L('input[type="file"]')
 ], ie.prototype, "input", 2);
 y("ok-dropzone", ie);
 var Ys = Object.defineProperty, Xs = Object.getOwnPropertyDescriptor, rr = (n, e, t, r) => {
@@ -7819,10 +7842,10 @@ Mt([
   l({ attribute: !1 })
 ], Je.prototype, "labels", 2);
 Mt([
-  I(".log")
+  L(".log")
 ], Je.prototype, "logEl", 2);
 Mt([
-  I("ion-textarea")
+  L("ion-textarea")
 ], Je.prototype, "textareaEl", 2);
 y("ok-chat", Je);
 var Zs = Object.defineProperty, Js = Object.getOwnPropertyDescriptor, _e = (n, e, t, r) => {
@@ -9144,7 +9167,7 @@ Dt([
   v()
 ], tt.prototype, "slottedCount", 2);
 Dt([
-  I(".track")
+  L(".track")
 ], tt.prototype, "trackEl", 2);
 y("ok-carousel", tt);
 var ln = Object.defineProperty, cn = Object.getOwnPropertyDescriptor, At = (n, e, t, r) => {
@@ -9340,7 +9363,7 @@ At([
   l({ attribute: !1 })
 ], rt.prototype, "labels", 2);
 At([
-  I("canvas")
+  L("canvas")
 ], rt.prototype, "canvas", 2);
 y("ok-signature", rt);
 var pn = Object.defineProperty, hn = Object.getOwnPropertyDescriptor, or = (n, e, t, r) => {
@@ -10137,7 +10160,7 @@ Se([
   v()
 ], ne.prototype, "muted", 2);
 Se([
-  I("audio")
+  L("audio")
 ], ne.prototype, "audioEl", 2);
 y("ok-audio", ne);
 var Mn = Object.defineProperty, Dn = Object.getOwnPropertyDescriptor, le = (n, e, t, r) => {
@@ -10456,18 +10479,18 @@ le([
   v()
 ], G.prototype, "muted", 2);
 le([
-  I("video")
+  L("video")
 ], G.prototype, "videoEl", 2);
 le([
-  I(".stage")
+  L(".stage")
 ], G.prototype, "stageEl", 2);
 y("ok-video", G);
-var jn = Object.defineProperty, Ln = Object.getOwnPropertyDescriptor, bo = (n, e, t, r) => {
-  for (var o = r > 1 ? void 0 : r ? Ln(e, t) : e, a = n.length - 1, i; a >= 0; a--)
+var jn = Object.defineProperty, In = Object.getOwnPropertyDescriptor, bo = (n, e, t, r) => {
+  for (var o = r > 1 ? void 0 : r ? In(e, t) : e, a = n.length - 1, i; a >= 0; a--)
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
   return r && o && jn(e, t, o), o;
 };
-const In = {
+const Ln = {
   documentTitle: "PDF document",
   open: "Open",
   openAria: "Open or download PDF",
@@ -10557,7 +10580,7 @@ class Br extends g {
   `;
   }
   get t() {
-    return { ...In, ...this.labels };
+    return { ...Ln, ...this.labels };
   }
   // Abre el PDF en una pestaña nueva (descarga / vista a pantalla completa del navegador).
   open() {
@@ -11228,7 +11251,7 @@ const Yn = {
   decrement: "Decrease",
   increment: "Increase"
 };
-class Lt extends g {
+class It extends g {
   constructor() {
     super(...arguments), this.value = 0, this.min = 0, this.step = 1, this.disabled = !1, this.labels = {};
   }
@@ -11385,23 +11408,23 @@ class Lt extends g {
 }
 ar([
   l({ type: Number })
-], Lt.prototype, "value", 2);
+], It.prototype, "value", 2);
 ar([
   l({ type: Number })
-], Lt.prototype, "min", 2);
+], It.prototype, "min", 2);
 ar([
   l({ type: Number })
-], Lt.prototype, "max", 2);
+], It.prototype, "max", 2);
 ar([
   l({ type: Number })
-], Lt.prototype, "step", 2);
+], It.prototype, "step", 2);
 ar([
   l({ type: Boolean, reflect: !0 })
-], Lt.prototype, "disabled", 2);
+], It.prototype, "disabled", 2);
 ar([
   l({ attribute: !1 })
-], Lt.prototype, "labels", 2);
-y("ok-qty-stepper", Lt);
+], It.prototype, "labels", 2);
+y("ok-qty-stepper", It);
 var Xn = Object.defineProperty, Wn = Object.getOwnPropertyDescriptor, ot = (n, e, t, r) => {
   for (var o = r > 1 ? void 0 : r ? Wn(e, t) : e, a = n.length - 1, i; a >= 0; a--)
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
@@ -11801,7 +11824,7 @@ ot([
   v()
 ], Ee.prototype, "activeIndex", 2);
 ot([
-  I(".search input")
+  L(".search input")
 ], Ee.prototype, "searchInput", 2);
 y("ok-command-palette", Ee);
 var Qn = Object.defineProperty, Zn = Object.getOwnPropertyDescriptor, Pe = (n, e, t, r) => {
@@ -11866,7 +11889,7 @@ function oo(n) {
     b: parseInt(e.slice(4, 6), 16)
   } : null;
 }
-function Lo(n) {
+function Io(n) {
   const e = oo(n);
   return e ? _r(e) : null;
 }
@@ -12171,7 +12194,7 @@ class ce extends g {
   // Maneja la edición del input hex: valida y, si es correcto, deriva el HSV y emite.
   onHexInput(e) {
     this.hexInput = e;
-    const t = Lo(e);
+    const t = Io(e);
     if (!t) {
       this.hexInvalid = !0;
       return;
@@ -12183,7 +12206,7 @@ class ce extends g {
   // --- Presets ---
   // Selecciona un swatch preset: deriva HSV/hex y emite.
   selectPreset(e) {
-    const t = Lo(e);
+    const t = Io(e);
     if (!t) return;
     const r = oo(t), { h: o, s: a, v: i } = Ao(r.r, r.g, r.b);
     this.h = o, this.s = a, this.v = i, this.value = t, this.hexInput = t, this.hexInvalid = !1, this.emit(t, r);
@@ -12233,7 +12256,7 @@ class ce extends g {
             </div>
             ${this.presets.length ? s`<div class="presets">
                   ${this.presets.map((i) => {
-      const c = Lo(i), d = c !== null && c === this.value.toLowerCase();
+      const c = Io(i), d = c !== null && c === this.value.toLowerCase();
       return s`<button
                       type="button"
                       class=${d ? "active" : ""}
@@ -12846,7 +12869,7 @@ Me([
   l({ attribute: !1 })
 ], pe.prototype, "labels", 2);
 Me([
-  I(".panel")
+  L(".panel")
 ], pe.prototype, "panel", 2);
 y("ok-drawer", pe);
 var ll = Object.defineProperty, cl = Object.getOwnPropertyDescriptor, at = (n, e, t, r) => {
@@ -13616,7 +13639,7 @@ var kl = Object.defineProperty, wl = Object.getOwnPropertyDescriptor, nr = (n, e
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
   return r && o && kl(e, t, o), o;
 };
-class It extends g {
+class Lt extends g {
   static {
     this.styles = x`
     :host {
@@ -13760,23 +13783,23 @@ class It extends g {
 }
 nr([
   l()
-], It.prototype, "icon", 2);
+], Lt.prototype, "icon", 2);
 nr([
   l()
-], It.prototype, "category", 2);
+], Lt.prototype, "category", 2);
 nr([
   l()
-], It.prototype, "name", 2);
+], Lt.prototype, "name", 2);
 nr([
   l()
-], It.prototype, "badge", 2);
+], Lt.prototype, "badge", 2);
 nr([
   l()
-], It.prototype, "price", 2);
+], Lt.prototype, "price", 2);
 nr([
   l()
-], It.prototype, "href", 2);
-y("ok-product-card", It);
+], Lt.prototype, "href", 2);
+y("ok-product-card", Lt);
 var $l = Object.defineProperty, zl = Object.getOwnPropertyDescriptor, oi = (n, e, t, r) => {
   for (var o = r > 1 ? void 0 : r ? zl(e, t) : e, a = n.length - 1, i; a >= 0; a--)
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
@@ -14276,9 +14299,9 @@ var Dl = Object.defineProperty, Al = Object.getOwnPropertyDescriptor, Vr = (n, e
 const jl = {
   menu: "Menu",
   close: "Close"
-}, Ll = "(max-width: 800px)";
+}, Il = "(max-width: 800px)";
 let ja = !1;
-function Il() {
+function Ll() {
   if (ja) return;
   ja = !0;
   const n = new CSSStyleSheet();
@@ -14434,7 +14457,7 @@ class cr extends g {
     return { ...jl, ...this.labels };
   }
   connectedCallback() {
-    super.connectedCallback(), this.mq = window.matchMedia(Ll), this.isMobile = this.mq.matches, this.mq.addEventListener("change", this.onMqChange);
+    super.connectedCallback(), this.mq = window.matchMedia(Il), this.isMobile = this.mq.matches, this.mq.addEventListener("change", this.onMqChange);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.mq?.removeEventListener("change", this.onMqChange), this.mq = null, this.restoreNodes(), this.modal?.remove(), this.modal = null;
@@ -14462,7 +14485,7 @@ class cr extends g {
   }
   async presentPanel() {
     if (this.isMobile) {
-      if (Il(), this.modal || (this.modal = this.buildModal()), this.movedNodes.length === 0 && this.linksHost && this.actionsHost)
+      if (Ll(), this.modal || (this.modal = this.buildModal()), this.movedNodes.length === 0 && this.linksHost && this.actionsHost)
         for (const e of Array.from(this.children)) {
           const t = e.getAttribute("slot");
           t !== "brand" && (this.movedNodes.push(e), (t === "actions" ? this.actionsHost : this.linksHost).appendChild(e));
@@ -14615,7 +14638,7 @@ class Bl extends g {
   }
 }
 y("ok-hero", Bl);
-var Fl = Object.defineProperty, Rl = Object.getOwnPropertyDescriptor, Le = (n, e, t, r) => {
+var Fl = Object.defineProperty, Rl = Object.getOwnPropertyDescriptor, Ie = (n, e, t, r) => {
   for (var o = r > 1 ? void 0 : r ? Rl(e, t) : e, a = n.length - 1, i; a >= 0; a--)
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
   return r && o && Fl(e, t, o), o;
@@ -14897,31 +14920,31 @@ class ue extends g {
     `;
   }
 }
-Le([
+Ie([
   l({ type: Number })
 ], ue.prototype, "total", 2);
-Le([
+Ie([
   l({ type: Number })
 ], ue.prototype, "page", 2);
-Le([
+Ie([
   l({ type: Number, attribute: "page-size" })
 ], ue.prototype, "pageSize", 2);
-Le([
+Ie([
   l({ type: Number, attribute: "sibling-count" })
 ], ue.prototype, "siblingCount", 2);
-Le([
+Ie([
   l({ type: Number, attribute: "boundary-count" })
 ], ue.prototype, "boundaryCount", 2);
-Le([
+Ie([
   l()
 ], ue.prototype, "variant", 2);
-Le([
+Ie([
   l({ type: Boolean })
 ], ue.prototype, "info", 2);
-Le([
+Ie([
   l({ type: Array, attribute: "page-size-options" })
 ], ue.prototype, "pageSizeOptions", 2);
-Le([
+Ie([
   l()
 ], ue.prototype, "label", 2);
 y("ok-pagination", ue);
@@ -14930,7 +14953,7 @@ var Nl = Object.defineProperty, ql = Object.getOwnPropertyDescriptor, st = (n, e
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
   return r && o && Nl(e, t, o), o;
 };
-class Ie extends g {
+class Le extends g {
   constructor() {
     super(...arguments), this.variant = "text", this.lines = 1, this.preset = "none", this.rows = 5, this.cols = 4;
   }
@@ -15219,29 +15242,29 @@ class Ie extends g {
 }
 st([
   l()
-], Ie.prototype, "variant", 2);
+], Le.prototype, "variant", 2);
 st([
   l({ type: Number })
-], Ie.prototype, "lines", 2);
+], Le.prototype, "lines", 2);
 st([
   l()
-], Ie.prototype, "width", 2);
+], Le.prototype, "width", 2);
 st([
   l()
-], Ie.prototype, "height", 2);
+], Le.prototype, "height", 2);
 st([
   l()
-], Ie.prototype, "radius", 2);
+], Le.prototype, "radius", 2);
 st([
   l()
-], Ie.prototype, "preset", 2);
+], Le.prototype, "preset", 2);
 st([
   l({ type: Number })
-], Ie.prototype, "rows", 2);
+], Le.prototype, "rows", 2);
 st([
   l({ type: Number })
-], Ie.prototype, "cols", 2);
-y("ok-skeleton", Ie);
+], Le.prototype, "cols", 2);
+y("ok-skeleton", Le);
 var Ul = Object.defineProperty, Vl = Object.getOwnPropertyDescriptor, Q = (n, e, t, r) => {
   for (var o = r > 1 ? void 0 : r ? Vl(e, t) : e, a = n.length - 1, i; a >= 0; a--)
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
@@ -15847,7 +15870,7 @@ var Yl = Object.defineProperty, Xl = Object.getOwnPropertyDescriptor, Tt = (n, e
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
   return r && o && Yl(e, t, o), o;
 };
-const La = [
+const Ia = [
   "var(--ok-primary, var(--ion-color-primary, #3880ff))",
   "var(--ok-success, var(--ion-color-success, #2dd36f))",
   "var(--ok-warning, var(--ion-color-warning, #ffc409))",
@@ -15957,7 +15980,7 @@ class lt extends g {
   }
   // Color efectivo de un slice (su color o el de la paleta por índice).
   colorAt(e, t) {
-    return e.color || La[t % La.length];
+    return e.color || Ia[t % Ia.length];
   }
   // Porcentaje (0–100) de un slice sobre el total.
   pct(e) {
@@ -16085,7 +16108,7 @@ var Wl = Object.defineProperty, Gl = Object.getOwnPropertyDescriptor, dr = (n, e
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
   return r && o && Wl(e, t, o), o;
 };
-const Ia = [
+const La = [
   "Ene",
   "Feb",
   "Mar",
@@ -16274,8 +16297,8 @@ class Bt extends g {
     }
     return s`<div class="year" role="grid" aria-label="Heatmap anual">
       ${t.map(
-      (r, o) => s`<div class="month" role="row" aria-label=${Ia[o]}>
-          <div class="month-label">${Ia[o]}</div>
+      (r, o) => s`<div class="month" role="row" aria-label=${La[o]}>
+          <div class="month-label">${La[o]}</div>
           <div class="days">
             ${r.slice().sort((a, i) => a.day - i.day).map((a) => this.renderCell(a.cell))}
           </div>
@@ -17651,7 +17674,7 @@ me([
   v()
 ], Z.prototype, "openSub", 2);
 y("ok-menu", Z);
-var vc = Object.defineProperty, bc = Object.getOwnPropertyDescriptor, L = (n, e, t, r) => {
+var vc = Object.defineProperty, bc = Object.getOwnPropertyDescriptor, I = (n, e, t, r) => {
   for (var o = r > 1 ? void 0 : r ? bc(e, t) : e, a = n.length - 1, i; a >= 0; a--)
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
   return r && o && vc(e, t, o), o;
@@ -18012,59 +18035,59 @@ class j extends g {
     `;
   }
 }
-L([
+I([
   l()
 ], j.prototype, "name", 2);
-L([
+I([
   l()
 ], j.prototype, "badge", 2);
-L([
+I([
   l()
 ], j.prototype, "handle", 2);
-L([
+I([
   l()
 ], j.prototype, "avatar", 2);
-L([
+I([
   l({ attribute: "avatar-src" })
 ], j.prototype, "avatarSrc", 2);
-L([
+I([
   l()
 ], j.prototype, "body", 2);
-L([
+I([
   l({ attribute: !1 })
 ], j.prototype, "stats", 2);
-L([
+I([
   l({ attribute: !1 })
 ], j.prototype, "actions", 2);
-L([
+I([
   l()
 ], j.prototype, "placement", 2);
-L([
+I([
   l({ type: Number, attribute: "open-delay" })
 ], j.prototype, "openDelay", 2);
-L([
+I([
   l({ type: Number, attribute: "close-delay" })
 ], j.prototype, "closeDelay", 2);
-L([
+I([
   l({ attribute: !1 })
 ], j.prototype, "labels", 2);
-L([
+I([
   v()
 ], j.prototype, "open", 2);
-L([
+I([
   v()
 ], j.prototype, "shown", 2);
-L([
+I([
   v()
 ], j.prototype, "end", 2);
-L([
+I([
   v()
 ], j.prototype, "above", 2);
-L([
-  I(".card")
+I([
+  L(".card")
 ], j.prototype, "cardEl", 2);
-L([
-  I(".trigger")
+I([
+  L(".trigger")
 ], j.prototype, "triggerEl", 2);
 y("ok-hover-card", j);
 var gc = Object.defineProperty, xc = Object.getOwnPropertyDescriptor, mr = (n, e, t, r) => {
@@ -20074,10 +20097,10 @@ class F extends g {
     );
   }
   prevMonth() {
-    this.viewDate = Io(this.viewDate, -1);
+    this.viewDate = Lo(this.viewDate, -1);
   }
   nextMonth() {
-    this.viewDate = Io(this.viewDate, 1);
+    this.viewDate = Lo(this.viewDate, 1);
   }
   // ---- Presets -------------------------------------------------------------
   applyPreset(e) {
@@ -20188,7 +20211,7 @@ class F extends g {
             aria-modal="false"
           >
             <div class="months ${this.months === 2 ? "two" : ""}">
-              ${t.map((r) => this.renderMonth(Io(this.viewDate, r), r))}
+              ${t.map((r) => this.renderMonth(Lo(this.viewDate, r), r))}
             </div>
             ${this.presets && this.presets.length ? s`<div class="presets" role="group">
                   ${this.presets.map(
@@ -20338,7 +20361,7 @@ function Xt(n) {
 function eo(n) {
   return new Date(n.getFullYear(), n.getMonth() + 1, 0);
 }
-function Io(n, e) {
+function Lo(n, e) {
   return new Date(n.getFullYear(), n.getMonth() + e, 1);
 }
 function Wt(n, e) {
@@ -20357,10 +20380,10 @@ function jc(n) {
   return r;
 }
 y("ok-date-picker", F);
-var Lc = Object.defineProperty, Ic = Object.getOwnPropertyDescriptor, Fe = (n, e, t, r) => {
-  for (var o = r > 1 ? void 0 : r ? Ic(e, t) : e, a = n.length - 1, i; a >= 0; a--)
+var Ic = Object.defineProperty, Lc = Object.getOwnPropertyDescriptor, Fe = (n, e, t, r) => {
+  for (var o = r > 1 ? void 0 : r ? Lc(e, t) : e, a = n.length - 1, i; a >= 0; a--)
     (i = n[a]) && (o = (r ? i(e, t, o) : i(o)) || o);
-  return r && o && Lc(e, t, o), o;
+  return r && o && Ic(e, t, o), o;
 };
 function To(n) {
   if (!n) return null;
@@ -21749,7 +21772,7 @@ fe([
   v()
 ], J.prototype, "words", 2);
 fe([
-  I(".content")
+  L(".content")
 ], J.prototype, "contentEl", 2);
 let Vc = J;
 y("ok-rich-text", Vc);
@@ -27205,6 +27228,6 @@ N([
   v()
 ], T.prototype, "dragging", 2);
 N([
-  I('input[type="file"]')
+  L('input[type="file"]')
 ], T.prototype, "fileInput", 2);
 y("ok-file-manager", T);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erplora/outfitkit",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "OutfitKit — librería de Web Components (Lit) que CONSTRUYE lo que Ionic no tiene (tree, data-table rica, inline-feedback, kpi/stat, stepper/wizard, calendar, kanban…) sobre primitivos de Ionic. Ionic es la base; OutfitKit cubre los huecos. npm + CDN, imports individuales, CSP-safe. Tema vía tokens --ok-* (fallback a --ion-*).",
   "type": "module",
   "license": "MIT",