@erplora/outfitkit 0.1.15 → 0.1.16

package/dist/cdn.d.ts

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

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

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

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

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

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

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

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

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/ok-app-launcher.js

@@ -1,7 +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";
+import { o as okIcon, u as iconAppsOutline, v as iconCloseOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-audio.js

@@ -1,7 +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";
+import { E as iconVolumeMuteOutline, F as iconVolumeLowOutline, G as iconVolumeHighOutline, o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-calendar.js

@@ -1,7 +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";
+import { g as iconChevronForwardOutline, t as iconChevronBackOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-carousel.js

@@ -1,7 +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";
+import { t as iconChevronBackOutline, g as iconChevronForwardOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-chat.js

@@ -1,7 +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";
+import { B as iconSend } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-combo.js

@@ -1,7 +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";
+import { w as iconChevronDownOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-command-palette.js

@@ -1,7 +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";
+import { o as okIcon, L as iconSearchOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-data-table.js

@@ -3,7 +3,17 @@ import { property, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { define } from "./define.js";
-import { 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";
+import { N as iconCalendarOutline, s as iconEllipsisVertical, o as okIcon, m as iconClose, a as iconChevronBack, Q as iconChevronForward, R as iconFileTrayOutline, S as iconSwapVerticalOutline, T as iconChevronUpOutline, w as iconChevronDownOutline } from "./shared/icons.js";
+const CSV_BOM = "\uFEFF";
+function decodeCsvBuffer(buf) {
+  let text;
+  try {
+    text = new TextDecoder("utf-8", { fatal: true }).decode(buf);
+  } catch {
+    text = new TextDecoder("windows-1252").decode(buf);
+  }
+  return text.charCodeAt(0) === 65279 ? text.slice(1) : text;
+}
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -408,7 +418,7 @@ class OkDataTable extends LitElement {
     const head = cols.map((c) => this.csvEscape(c.key)).join(",");
     const lines = this.rows.map((r) => cols.map((c) => this.csvEscape(r[c.key])).join(","));
     const csv = [head, ...lines].join("\r\n");
-    const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+    const blob = new Blob([CSV_BOM + csv], { type: "text/csv;charset=utf-8" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
@@ -456,7 +466,7 @@ class OkDataTable extends LitElement {
     const input = ev.target;
     const file = input.files?.[0];
     if (!file) return;
-    const text = await file.text();
+    const text = decodeCsvBuffer(await file.arrayBuffer());
     const { headers, rows } = this.parseCsv(text);
     this.emit("csvImport", { headers, rows });
     this.emit("import", { headers, rows });

package/dist/ok-date-picker.js

@@ -2,7 +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";
+import { N as iconCalendarOutline, t as iconChevronBackOutline, g as iconChevronForwardOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-drawer.js

@@ -1,7 +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";
+import { o as okIcon, v as iconCloseOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-dropzone.js

@@ -1,7 +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";
+import { y as iconCloudUploadOutline, z as iconAlertCircleOutline, A as iconDocumentOutline, v as iconCloseOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-file-manager.js

@@ -1,7 +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";
+import { g as iconChevronForwardOutline, o as okIcon, P as iconFolderOpenOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-inline-feedback.js

@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
-import { r as iconInformationCircle, s as iconAlertCircle, t as iconWarning, u as iconCheckmarkCircle, o as okIcon, b as iconClose } from "./shared/icons.js";
+import { h as iconInformationCircle, j as iconAlertCircle, k as iconWarning, l as iconCheckmarkCircle, o as okIcon, m as iconClose } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-kpi.js

@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
-import { v as iconTrendingUp, w as iconTrendingDown, x as iconRemove, o as okIcon } from "./shared/icons.js";
+import { n as iconTrendingUp, p as iconTrendingDown, q as iconRemove, o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-lightbox.js

@@ -1,7 +1,7 @@
 import { LitElement, css, render, nothing, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
-import { M as iconExpandOutline, B as iconCloseOutline, z as iconChevronBackOutline, q as iconChevronForwardOutline, I as iconDownloadOutline, S as iconPlayOutline } from "./shared/icons.js";
+import { H as iconExpandOutline, v as iconCloseOutline, t as iconChevronBackOutline, g as iconChevronForwardOutline, D as iconDownloadOutline, O as iconPlayOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-mail.js

@@ -2,7 +2,7 @@ import { LitElement, css, nothing, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { define } from "./define.js";
-import { j as iconCreateOutline, o as okIcon, c as iconChevronBack, k as iconArrowUndoOutline, l as iconArrowRedoOutline, m as iconArchiveOutline, n as iconTrashOutline, p as iconDocumentAttachOutline } from "./shared/icons.js";
+import { i as iconCreateOutline, o as okIcon, a as iconChevronBack, b as iconArrowUndoOutline, c as iconArrowRedoOutline, d as iconArchiveOutline, e as iconTrashOutline, f as iconDocumentAttachOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-menubar.js

@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
-import { o as okIcon, q as iconChevronForwardOutline, H as iconMenuOutline } from "./shared/icons.js";
+import { o as okIcon, g as iconChevronForwardOutline, C as iconMenuOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-notification-center.js

@@ -1,7 +1,7 @@
 import { LitElement, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
-import { o as okIcon, R as iconNotificationsOffOutline, B as iconCloseOutline } from "./shared/icons.js";
+import { o as okIcon, M as iconNotificationsOffOutline, v as iconCloseOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-pdf.js

@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
-import { N as iconOpenOutline, O as iconDocumentTextOutline, I as iconDownloadOutline } from "./shared/icons.js";
+import { I as iconOpenOutline, J as iconDocumentTextOutline, D as iconDownloadOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-pinpad.js

@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
-import { C as iconBackspaceOutline, o as okIcon } from "./shared/icons.js";
+import { x as iconBackspaceOutline, o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-qty-stepper.js

@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
-import { x as iconRemove, P as iconAdd } from "./shared/icons.js";
+import { q as iconRemove, K as iconAdd } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-scheduler.js

@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
-import { z as iconChevronBackOutline, q as iconChevronForwardOutline } from "./shared/icons.js";
+import { t as iconChevronBackOutline, g as iconChevronForwardOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-signature.js

@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { define } from "./define.js";
-import { n as iconTrashOutline, I as iconDownloadOutline } from "./shared/icons.js";
+import { e as iconTrashOutline, D as iconDownloadOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-split-button.js

@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
-import { o as okIcon, h as iconChevronDownOutline } from "./shared/icons.js";
+import { o as okIcon, w as iconChevronDownOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-stepper.js

@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
-import { y as iconCheckmarkOutline } from "./shared/icons.js";
+import { r as iconCheckmarkOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-tag-input.js

@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
-import { B as iconCloseOutline } from "./shared/icons.js";
+import { v as iconCloseOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-theme-picker.js

@@ -0,0 +1,221 @@
+import { LitElement, css, nothing, html } from "lit";
+import { property } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DEFAULT_PALETTES = [
+  { id: "erplora", label: "ERPlora", brand: "#1496D6" },
+  { id: "terracotta", label: "Terracotta", brand: "#E8552A" },
+  { id: "corporate", label: "Corporate", brand: "#0F3F9C" },
+  { id: "minimal", label: "Minimal", brand: "#111111" },
+  { id: "forest", label: "Forest", brand: "#1F542A" },
+  { id: "ocean", label: "Ocean", brand: "#008CBD" },
+  { id: "violet", label: "Violet", brand: "#742AD9" }
+];
+function applyPalette(root, palette) {
+  if (!palette || palette === "erplora") root.removeAttribute("data-ok-palette");
+  else root.setAttribute("data-ok-palette", palette);
+}
+const DEFAULT_LABELS = {
+  palette: "Theme palette",
+  mode: "Appearance",
+  system: "System",
+  light: "Light",
+  dark: "Dark"
+};
+class OkThemePicker extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.palette = "erplora";
+    this.mode = "system";
+    this.hideMode = false;
+    this.palettes = DEFAULT_PALETTES;
+    this.labels = {};
+  }
+  static {
+    this.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      --text: var(--ok-text, var(--ion-text-color, #1a1c20));
+      --muted: var(--ok-muted, rgba(var(--ion-text-color-rgb, 26, 28, 32), 0.6));
+      --surface: var(--ok-surface, var(--ion-card-background, #fff));
+      --border: var(--ok-border, var(--ion-border-color, rgba(26, 28, 32, 0.14)));
+      --primary: var(--ok-primary, var(--ion-color-primary, #1496d6));
+      --radius: var(--ok-radius, 14px);
+      font-family: var(--ok-font, var(--ion-font-family, system-ui, sans-serif));
+      color: var(--text);
+    }
+    .head {
+      font-size: 0.8rem;
+      font-weight: 600;
+      color: var(--muted);
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      margin: 0 0 0.6rem;
+    }
+    .section + .section { margin-top: 1.1rem; }
+
+    .palettes {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem;
+    }
+    .swatch {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.35rem;
+      padding: 0.5rem 0.4rem 0.4rem;
+      min-width: 4.2rem;
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: var(--radius);
+      color: var(--muted);
+      font: inherit;
+      font-size: 0.75rem;
+      cursor: pointer;
+      transition: border-color var(--ok-transition, 150ms ease), background-color var(--ok-transition, 150ms ease);
+    }
+    @media (hover: hover) {
+      .swatch:hover { background: color-mix(in oklab, var(--text) 5%, transparent); }
+    }
+    .swatch[aria-pressed='true'] {
+      border-color: var(--primary);
+      color: var(--text);
+      font-weight: 600;
+    }
+    .dot {
+      width: 1.9rem;
+      height: 1.9rem;
+      border-radius: 50%;
+      border: 1px solid var(--border);
+      box-shadow: inset 0 0 0 2px var(--surface);
+    }
+    .swatch[aria-pressed='true'] .dot {
+      outline: 2px solid var(--primary);
+      outline-offset: 2px;
+    }
+
+    .modes {
+      display: inline-flex;
+      gap: 0;
+      border: 1px solid var(--border);
+      border-radius: var(--ok-radius-pill, 999px);
+      padding: 0.2rem;
+      background: color-mix(in oklab, var(--text) 4%, transparent);
+    }
+    .mode {
+      border: 0;
+      background: transparent;
+      color: var(--muted);
+      font: inherit;
+      font-size: 0.85rem;
+      padding: 0.35rem 0.9rem;
+      border-radius: var(--ok-radius-pill, 999px);
+      cursor: pointer;
+      transition: background-color var(--ok-transition, 150ms ease), color var(--ok-transition, 150ms ease);
+    }
+    .mode[aria-pressed='true'] {
+      background: var(--surface);
+      color: var(--text);
+      font-weight: 600;
+      box-shadow: var(--ok-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.08));
+    }
+  `;
+  }
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  emitChange() {
+    this.dispatchEvent(
+      new CustomEvent("ok-change", {
+        detail: { palette: this.palette, mode: this.mode },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  pickPalette(id) {
+    if (id === this.palette) return;
+    this.palette = id;
+    this.emitChange();
+  }
+  pickMode(mode) {
+    if (mode === this.mode) return;
+    this.mode = mode;
+    this.emitChange();
+  }
+  render() {
+    const modes = ["system", "light", "dark"];
+    return html`
+      <div class="section">
+        <p class="head">${this.t.palette}</p>
+        <div class="palettes" role="group" aria-label=${this.t.palette}>
+          ${this.palettes.map(
+      (p) => html`
+              <button
+                class="swatch"
+                type="button"
+                aria-label=${p.label}
+                aria-pressed=${this.palette === p.id ? "true" : "false"}
+                @click=${() => this.pickPalette(p.id)}
+              >
+                <span class="dot" style="background:${p.brand}"></span>
+                <span>${p.label}</span>
+              </button>
+            `
+    )}
+        </div>
+      </div>
+      ${this.hideMode ? nothing : html`
+            <div class="section">
+              <p class="head">${this.t.mode}</p>
+              <div class="modes" role="group" aria-label=${this.t.mode}>
+                ${modes.map(
+      (m) => html`
+                    <button
+                      class="mode"
+                      type="button"
+                      data-mode=${m}
+                      aria-pressed=${this.mode === m ? "true" : "false"}
+                      @click=${() => this.pickMode(m)}
+                    >
+                      ${this.t[m]}
+                    </button>
+                  `
+    )}
+              </div>
+            </div>
+          `}
+    `;
+  }
+}
+__decorateClass([
+  property()
+], OkThemePicker.prototype, "palette");
+__decorateClass([
+  property()
+], OkThemePicker.prototype, "mode");
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-mode" })
+], OkThemePicker.prototype, "hideMode");
+__decorateClass([
+  property({ attribute: false })
+], OkThemePicker.prototype, "palettes");
+__decorateClass([
+  property({ attribute: false })
+], OkThemePicker.prototype, "labels");
+define("ok-theme-picker", OkThemePicker);
+export {
+  DEFAULT_PALETTES,
+  OkThemePicker,
+  applyPalette
+};