@erplora/outfitkit 0.1.14 → 0.1.16

package/dist/ok-split-button.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, w as iconChevronDownOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -194,7 +195,7 @@ class OkSplitButton extends LitElement {
       role="menuitem"
       @click=${() => this.selectItem(item)}
     >
-      ${item.icon ? html`<ion-icon .name=${item.icon}></ion-icon>` : ""}
+      ${item.icon ? html`<ion-icon .icon=${okIcon(item.icon)}></ion-icon>` : ""}
       <span class="label">${item.label}</span>
     </button>`;
   }
@@ -218,7 +219,7 @@ class OkSplitButton extends LitElement {
           aria-label=${this.t.more}
           @click=${() => this.toggle()}
         >
-          <ion-icon slot="icon-only" name="chevron-down-outline"></ion-icon>
+          <ion-icon slot="icon-only" .icon=${iconChevronDownOutline}></ion-icon>
         </ion-button>
       </div>
       ${this.open ? html`<div class="menu" role="menu" aria-label=${this.t.menu}>

package/dist/ok-status-pill.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;
@@ -96,7 +97,7 @@ class OkStatusPill extends LitElement {
   render() {
     return html`
       <span class="pill" part="pill">
-        ${this.dot ? html`<span class="dot" part="dot" aria-hidden="true"></span>` : this.icon ? html`<ion-icon name=${this.icon} aria-hidden="true"></ion-icon>` : null}
+        ${this.dot ? html`<span class="dot" part="dot" aria-hidden="true"></span>` : this.icon ? html`<ion-icon .icon=${okIcon(this.icon)} aria-hidden="true"></ion-icon>` : null}
         <slot>${this.label ?? ""}</slot>
       </span>
     `;

package/dist/ok-stepper.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { define } from "./define.js";
+import { r as iconCheckmarkOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -259,7 +260,7 @@ class OkStepper extends LitElement {
             >
               <span class="circle-row">
                 <span class="circle">
-                  ${i < this.current ? html`<ion-icon name="checkmark-outline" aria-hidden="true"></ion-icon>` : html`${i + 1}`}
+                  ${i < this.current ? html`<ion-icon .icon=${iconCheckmarkOutline} aria-hidden="true"></ion-icon>` : html`${i + 1}`}
                 </span>
               </span>
               <span class="labels">

package/dist/ok-tag-input.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
+import { v as iconCloseOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -304,7 +305,7 @@ class OkTagInput extends LitElement {
         this.removeAt(i);
       }}
           >
-            <ion-icon name="close-outline"></ion-icon>
+            <ion-icon .icon=${iconCloseOutline}></ion-icon>
           </button>
         </span>`
     )}

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
+};

package/dist/ok-timeline.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;
@@ -216,7 +217,7 @@ class OkTimeline extends LitElement {
     return html`<li class=${classes}>
       <span class="marker">
         <span class="dot" style=${dotStyle}>
-          ${item.icon ? html`<ion-icon .name=${item.icon}></ion-icon>` : ""}
+          ${item.icon ? html`<ion-icon .icon=${okIcon(item.icon)}></ion-icon>` : ""}
         </span>
       </span>
       <button

package/dist/ok-tree.js

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
+import { g as iconChevronForwardOutline, o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -225,9 +226,9 @@ class OkTree extends LitElement {
       this.toggle(node);
     }}
         >
-          <ion-icon name="chevron-forward-outline"></ion-icon>
+          <ion-icon .icon=${iconChevronForwardOutline}></ion-icon>
         </button>
-        ${node.icon ? html`<span class="icon"><ion-icon .name=${node.icon}></ion-icon></span>` : ""}
+        ${node.icon ? html`<span class="icon"><ion-icon .icon=${okIcon(node.icon)}></ion-icon></span>` : ""}
         <span class="label" @click=${() => this.select(node)}>${node.label}</span>
       </div>
       ${expanded ? html`<ul role="group">

package/dist/ok-video.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 { H as iconExpandOutline, o as okIcon } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -272,7 +273,7 @@ class OkVideo extends LitElement {
           @click=${this.togglePlay}
         >
           <span class="big">
-            <ion-icon name=${this.playing ? "pause" : "play"}></ion-icon>
+            <ion-icon .icon=${okIcon(this.playing ? "pause" : "play")}></ion-icon>
           </span>
         </button>
 
@@ -283,7 +284,7 @@ class OkVideo extends LitElement {
             aria-label=${this.playing ? this.t.pause : this.t.play}
             @click=${this.togglePlay}
           >
-            <ion-icon slot="icon-only" name=${this.playing ? "pause" : "play"}></ion-icon>
+            <ion-icon slot="icon-only" .icon=${okIcon(this.playing ? "pause" : "play")}></ion-icon>
           </ion-button>
 
           <div class="progress" @click=${this.seek}>
@@ -300,7 +301,7 @@ class OkVideo 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"
@@ -319,7 +320,7 @@ class OkVideo extends LitElement {
             aria-label=${this.t.fullscreen}
             @click=${this.toggleFullscreen}
           >
-            <ion-icon slot="icon-only" name="expand-outline"></ion-icon>
+            <ion-icon slot="icon-only" .icon=${iconExpandOutline}></ion-icon>
           </ion-button>
         </div>
       </div>

package/dist/ok-widget-board.js

@@ -2,6 +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 { s as iconEllipsisVertical } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -97,7 +98,7 @@ class OkWidgetBoard extends LitElement {
       <div class="bar">
         <slot name="title"><span class="title"></span></slot>
         ${this.editable ? html`<ion-button fill="clear" size="small" aria-label=${this.t.customize} @click=${this.openConfig}>
-              <ion-icon slot="icon-only" name="ellipsis-vertical"></ion-icon>
+              <ion-icon slot="icon-only" .icon=${iconEllipsisVertical}></ion-icon>
             </ion-button>` : nothing}
       </div>
       <div class="grid">