@erplora/outfitkit 0.1.15 → 0.1.17

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-tree.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, o as okIcon } from "./shared/icons.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;

package/dist/ok-video.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 { M as iconExpandOutline, o as okIcon } from "./shared/icons.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;

package/dist/ok-widget-board.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 { a as iconEllipsisVertical } from "./shared/icons.js";
+import { s as iconEllipsisVertical } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;