@erplora/outfitkit 0.1.9 → 0.1.11

package/dist/ok-data-table.js

@@ -681,13 +681,14 @@ class OkDataTable extends LitElement {
         <ion-select
           label=${col.header}
           label-placement="stacked"
+          fill="outline"
           ?multiple=${multi}
           interface="modal"
           .interfaceOptions=${{ cssClass: "ok-overlay" }}
-          placeholder=${col.header}
+          placeholder=${this.t.select}
           @ionChange=${(e) => this.onFilterSelect(col, e.detail.value, multi)}
         >
-          ${multi ? nothing : html`<ion-select-option value="">${col.header}</ion-select-option>`}
+          ${multi ? nothing : html`<ion-select-option value="">${this.t.select}</ion-select-option>`}
           ${opts.map((o) => html`<ion-select-option value=${o.value}>${o.label}</ion-select-option>`)}
         </ion-select>
       `;

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

@@ -1513,13 +1513,14 @@ class _ extends g {
         <ion-select
           label=${e.header}
           label-placement="stacked"
+          fill="outline"
           ?multiple=${o}
           interface="modal"
           .interfaceOptions=${{ cssClass: "ok-overlay" }}
-          placeholder=${e.header}
+          placeholder=${this.t.select}
           @ionChange=${(i) => this.onFilterSelect(e, i.detail.value, o)}
         >
-          ${o ? m : s`<ion-select-option value="">${e.header}</ion-select-option>`}
+          ${o ? m : s`<ion-select-option value="">${this.t.select}</ion-select-option>`}
           ${a.map((i) => s`<ion-select-option value=${i.value}>${i.label}</ion-select-option>`)}
         </ion-select>
       `;
@@ -3848,10 +3849,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 }));
@@ -3870,7 +3871,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.9",
+  "version": "0.1.11",
   "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",