@erplora/outfitkit 0.1.10 → 0.1.12

package/dist/ok-data-table.js

@@ -167,6 +167,10 @@ class OkDataTable extends LitElement {
     :host([fill]) .card { flex: 1 1 auto; min-height: 0; }
     :host([fill]) .bar, :host([fill]) .panel, :host([fill]) .pager { flex: 0 0 auto; }
     :host([fill]) .scroll, :host([fill]) .cards-grid { flex: 1 1 auto; min-height: 0; overflow: auto; }
+    /* Sin filas, renderTable/renderCards devuelven SOLO el bloque .empty (sin .scroll). En modo
+       fill hay que estirarlo para que ocupe el hueco entre toolbar y pager y centre su contenido
+       (icono + mensaje) en vertical; si no, queda pegado arriba con el pager a media altura. */
+    :host([fill]) .empty { flex: 1 1 auto; min-height: 0; }
 
     /* ── Topbar / cabecera (relieve) ─────────────────────────────────────────────────────── */
     .bar { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--border-color); background: var(--header-background); }

package/dist/ok-widget-board.js

@@ -137,11 +137,12 @@ class OkWidgetBoard extends LitElement {
     const modal = make("ion-modal");
     modal.initialBreakpoint = 0.9;
     modal.breakpoints = [0, 0.9, 1];
-    const header = make("ion-header");
-    const tb = make("ion-toolbar");
+    const header = make("ion-header", { attrs: { class: "okwb-header ion-no-border" } });
+    const tb = make("ion-toolbar", { attrs: { class: "okwb-toolbar ion-padding" } });
     tb.appendChild(make("ion-title", { text: t.customize }));
     const endBtns = make("ion-buttons", { attrs: { slot: "end" } });
-    const closeBtn = make("ion-button", { text: t.close });
+    const closeBtn = make("ion-button", { attrs: { fill: "clear", "aria-label": t.close } });
+    closeBtn.appendChild(make("ion-icon", { attrs: { slot: "icon-only", name: "close" } }));
     closeBtn.addEventListener("click", () => modal.dismiss?.());
     endBtns.appendChild(closeBtn);
     tb.appendChild(endBtns);
@@ -175,7 +176,7 @@ class OkWidgetBoard extends LitElement {
     content.appendChild(make("div", { attrs: { class: "okwb-sub" }, text: t.available }));
     const availList = make("ion-list");
     content.appendChild(availList);
-    const style = make("style", { text: `.okwb-sub{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ion-color-medium);padding:12px 16px 4px}.okwb-presets{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px}` });
+    const style = make("style", { text: `.okwb-header{box-shadow:none}.okwb-header::after{display:none}.okwb-toolbar{--border-width:0;--border-color:transparent;box-shadow:none}.okwb-sub{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ion-color-medium);padding:12px 16px 4px}.okwb-presets{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px}` });
     modal.appendChild(style);
     modal.appendChild(content);
     document.body.appendChild(modal);

package/dist/outfitkit.bundle.js

@@ -1092,6 +1092,10 @@ class _ extends g {
     :host([fill]) .card { flex: 1 1 auto; min-height: 0; }
     :host([fill]) .bar, :host([fill]) .panel, :host([fill]) .pager { flex: 0 0 auto; }
     :host([fill]) .scroll, :host([fill]) .cards-grid { flex: 1 1 auto; min-height: 0; overflow: auto; }
+    /* Sin filas, renderTable/renderCards devuelven SOLO el bloque .empty (sin .scroll). En modo
+       fill hay que estirarlo para que ocupe el hueco entre toolbar y pager y centre su contenido
+       (icono + mensaje) en vertical; si no, queda pegado arriba con el pager a media altura. */
+    :host([fill]) .empty { flex: 1 1 auto; min-height: 0; }
 
     /* ── Topbar / cabecera (relieve) ─────────────────────────────────────────────────────── */
     .bar { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--border-color); background: var(--header-background); }
@@ -3849,10 +3853,10 @@ class He extends g {
       return k.text != null && ($.textContent = k.text), $;
     }, r = t("ion-modal");
     r.initialBreakpoint = 0.9, r.breakpoints = [0, 0.9, 1];
-    const o = t("ion-header"), a = t("ion-toolbar");
+    const o = t("ion-header", { attrs: { class: "okwb-header ion-no-border" } }), a = t("ion-toolbar", { attrs: { class: "okwb-toolbar ion-padding" } });
     a.appendChild(t("ion-title", { text: e.customize }));
-    const i = t("ion-buttons", { attrs: { slot: "end" } }), c = t("ion-button", { text: e.close });
-    c.addEventListener("click", () => r.dismiss?.()), i.appendChild(c), a.appendChild(i), o.appendChild(a), r.appendChild(o);
+    const i = t("ion-buttons", { attrs: { slot: "end" } }), c = t("ion-button", { attrs: { fill: "clear", "aria-label": e.close } });
+    c.appendChild(t("ion-icon", { attrs: { slot: "icon-only", name: "close" } })), c.addEventListener("click", () => r.dismiss?.()), i.appendChild(c), a.appendChild(i), o.appendChild(a), r.appendChild(o);
     const d = t("ion-content");
     if (this.presets.length) {
       d.appendChild(t("div", { attrs: { class: "okwb-sub" }, text: e.presets }));
@@ -3871,7 +3875,7 @@ class He extends g {
     }), u.appendChild(h), d.appendChild(u), d.appendChild(t("div", { attrs: { class: "okwb-sub" }, text: e.available }));
     const p = t("ion-list");
     d.appendChild(p);
-    const b = t("style", { text: ".okwb-sub{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ion-color-medium);padding:12px 16px 4px}.okwb-presets{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px}" });
+    const b = t("style", { text: ".okwb-header{box-shadow:none}.okwb-header::after{display:none}.okwb-toolbar{--border-width:0;--border-color:transparent;box-shadow:none}.okwb-sub{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ion-color-medium);padding:12px 16px 4px}.okwb-presets{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px}" });
     r.appendChild(b), r.appendChild(d), document.body.appendChild(r), this.modal = r, this.reorderEl = h, this.availEl = p, this.refreshModal();
   }
   /** Repinta las listas de activos/disponibles del modal según `value`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erplora/outfitkit",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "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",