@erplora/outfitkit 0.1.17 → 0.1.19

package/README.md

@@ -89,7 +89,7 @@ El bundle `outfitkit.js` deja `lit` external, así que necesitas un **import-map
 
 ## Inventario de componentes
 
-95 web components rellena-huecos (todos registran su tag `ok-*` vía `define()`). Abajo el qué-hace y
+97 web components rellena-huecos (todos registran su tag `ok-*` vía `define()`). Abajo el qué-hace y
 los **eventos `ok-*`** que emite cada uno (`—` = presentacional, sin eventos). La **referencia viva
 de props/slots** es el [showcase](https://erplora.github.io/outfitkit/).
 
@@ -167,6 +167,7 @@ de props/slots** es el [showcase](https://erplora.github.io/outfitkit/).
 | `ok-time-picker` | Pastilla HH:MM + popover de listas (horas/minutos/AM-PM), canónico 24h. | `ok-change` |
 | `ok-range-dual` | Slider min-max de doble thumb con readout. | `ok-change` |
 | `ok-color-picker` | Selector de color (SV + hue + hex + presets). | `ok-change`, `ok-open` |
+| `ok-theme-picker` | Selector de tema compartido Cloud↔Hub: paleta de marca (swatches) + modo claro/oscuro/sistema. | `ok-change` |
 | `ok-rich-text` | Editor WYSIWYG con toolbar y contador de palabras. | `ok-input` |
 | `ok-signature` | Pad de firma sobre canvas con limpiar/exportar. | `ok-change`, `ok-clear` |
 | `ok-calculator` | Calculadora con teclado 4×4 y máquina de estados. | `ok-input`, `ok-change` |
@@ -182,6 +183,7 @@ de props/slots** es el [showcase](https://erplora.github.io/outfitkit/).
 | `ok-menu` | Menú desplegable/contextual con submenús, checkbox/radio, divisores. | `ok-select`, `ok-open` |
 | `ok-menubar` | Barra de menús de app (Archivo/Editar/Ver) con dropdowns. | `ok-select`, `ok-open` |
 | `ok-drawer` | Panel lateral deslizante (slide-over) modal con focus-trap y cierre por ESC/scrim. | `ok-open`, `ok-close` |
+| `ok-spotlight-search` | Buscador overlay estilo Spotlight (macOS): `<dialog>` top-layer translúcido, chrome solo (input+✕+panel); resultados los pone el consumidor por slot. | `ok-input`, `ok-open` |
 
 ### Media y archivos
 

package/dist/cdn.d.ts

@@ -38,6 +38,7 @@ import './components/ok-invoice/ok-invoice.js';
 import './components/ok-timeline/ok-timeline.js';
 import './components/ok-qty-stepper/ok-qty-stepper.js';
 import './components/ok-command-palette/ok-command-palette.js';
+import './components/ok-spotlight-search/ok-spotlight-search.js';
 import './components/ok-color-picker/ok-color-picker.js';
 import './components/ok-avatar/ok-avatar.js';
 import './components/ok-status-pill/ok-status-pill.js';

package/dist/components/ok-hero/ok-hero.d.ts

@@ -1,6 +1,17 @@
 import { LitElement } from 'lit';
+export type OkHeroAlign = 'center' | 'split';
+export type OkHeroTone = 'neutral' | 'soft' | 'gradient';
 export declare class OkHero extends LitElement {
+    align: OkHeroAlign;
+    tone: OkHeroTone;
+    compact: boolean;
+    private hasEyebrow;
+    private hasActions;
+    private hasMedia;
     static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    private refreshSlotState;
+    private onSlotChange;
     render(): unknown;
 }
 declare global {

package/dist/components/ok-hero/ok-hero.test.d.ts

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

package/dist/components/ok-spotlight-search/ok-spotlight-search.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+export declare class OkSpotlightSearch extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Abierto/cerrado (reflejado para CSS externo). */
+    open: boolean;
+    /** Texto guía del input de búsqueda. */
+    placeholder: string;
+    /** Texto de búsqueda actual (el consumidor puede resetearlo). */
+    value: string;
+    /** Icono (Iconify/ionicon) del botón-trigger propio; si vacío, no se pinta trigger. */
+    triggerIcon: string;
+    /** Nombre accesible del botón-trigger (aria-label). */
+    triggerLabel: string;
+    private input?;
+    openSearch(): void;
+    close(): void;
+    toggle(): void;
+    private emitOpen;
+    private onInput;
+    protected updated(): void;
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-spotlight-search': OkSpotlightSearch;
+    }
+}

package/dist/components/ok-spotlight-search/ok-spotlight-search.test.d.ts

@@ -0,0 +1 @@
+import './ok-spotlight-search.js';

package/dist/index.d.ts

@@ -59,6 +59,7 @@ export type { OkTimelineItem } from './components/ok-timeline/ok-timeline.js';
 export { OkQtyStepper } from './components/ok-qty-stepper/ok-qty-stepper.js';
 export { OkCommandPalette } from './components/ok-command-palette/ok-command-palette.js';
 export type { OkCommand } from './components/ok-command-palette/ok-command-palette.js';
+export { OkSpotlightSearch } from './components/ok-spotlight-search/ok-spotlight-search.js';
 export { OkColorPicker } from './components/ok-color-picker/ok-color-picker.js';
 export type { OkRgb } from './components/ok-color-picker/ok-color-picker.js';
 export { OkAvatar } from './components/ok-avatar/ok-avatar.js';

package/dist/index.js

@@ -39,6 +39,7 @@ import { OkInvoice } from "./ok-invoice.js";
 import { OkTimeline } from "./ok-timeline.js";
 import { OkQtyStepper } from "./ok-qty-stepper.js";
 import { OkCommandPalette } from "./ok-command-palette.js";
+import { OkSpotlightSearch } from "./ok-spotlight-search.js";
 import { OkColorPicker } from "./ok-color-picker.js";
 import { OkAvatar } from "./ok-avatar.js";
 import { OkStatusPill } from "./ok-status-pill.js";
@@ -180,6 +181,7 @@ export {
   OkSparkline,
   OkSplitButton,
   OkSplitter,
+  OkSpotlightSearch,
   OkStat,
   OkStatusDot,
   OkStatusPill,

package/dist/ok-hero.js

@@ -1,42 +1,234 @@
 import { LitElement, css, html } from "lit";
+import { property, state } 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;
+};
 class OkHero extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.align = "center";
+    this.tone = "soft";
+    this.compact = false;
+    this.hasEyebrow = false;
+    this.hasActions = false;
+    this.hasMedia = false;
+    this.onSlotChange = () => this.refreshSlotState();
+  }
   static {
     this.styles = css`
     :host {
       --color: var(--ok-text, var(--ion-text-color, #1c1b17));
-      --color-muted: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.55));
+      --color-muted: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.68));
+      --surface: var(--ok-surface, var(--ion-background-color, #fff));
+      --surface-soft: var(--ok-surface-soft, var(--ion-color-light, #f4f5f8));
+      --primary: var(--ok-primary, var(--ion-color-primary, #3880ff));
       --max-width: var(--ok-container-max, 1140px);
       --padding: var(--ok-spacing, var(--ion-padding, 16px));
       --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+      --font-display: var(--ok-font-display, var(--font));
 
       display: block;
       color: var(--color);
       font-family: var(--font);
+      overflow: hidden;
+      border-bottom: 1px solid color-mix(in oklab, var(--color) 8%, transparent);
+    }
+    :host([tone='neutral']) { background: var(--surface); }
+    :host([tone='soft']) {
+      background: color-mix(in oklab, var(--surface-soft) 54%, var(--surface));
     }
-    .h {
+    :host([tone='gradient']) {
+      background:
+        radial-gradient(circle at 20% 0%, color-mix(in oklab, var(--primary) 14%, transparent), transparent 42%),
+        color-mix(in oklab, var(--surface-soft) 42%, var(--surface));
+    }
+
+    .layout {
       max-width: var(--max-width);
       margin-inline: auto;
-      padding: clamp(2rem, 6vw, 5rem) var(--padding);
+      padding: clamp(3.5rem, 7vw, 6rem) var(--padding);
       display: grid;
-      gap: 1rem;
+      align-items: center;
+    }
+    :host([compact]) .layout {
+      padding-block: clamp(2.5rem, 5vw, 4rem);
+    }
+    .copy {
+      min-width: 0;
+      max-width: 52rem;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+    :host([align='center']) .copy {
+      align-items: center;
+      text-align: center;
+      margin-inline: auto;
+    }
+    :host([align='split']) .layout {
+      grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
+      gap: clamp(2rem, 6vw, 5rem);
+    }
+    .eyebrow {
+      display: inline-flex;
+      align-items: center;
+      align-self: flex-start;
+      margin: 0 0 1.25rem;
+      padding: 0.28rem 0.7rem;
+      border: 1px solid color-mix(in oklab, var(--primary) 22%, transparent);
+      border-radius: 999px;
+      color: var(--primary);
+      background: color-mix(in oklab, var(--primary) 12%, transparent);
+      font-size: 0.72rem;
+      font-weight: 600;
+      line-height: 1.2;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+    .eyebrow.empty { display: none; }
+    :host([align='center']) .eyebrow {
+      align-self: center;
+    }
+    .eyebrow ::slotted([slot='eyebrow']) {
+      margin: 0 !important;
+      padding: 0 !important;
+      border: 0 !important;
+      color: inherit !important;
+      background: transparent !important;
+      font: inherit !important;
+      letter-spacing: inherit !important;
+      line-height: inherit !important;
+      text-transform: inherit !important;
+    }
+    .title {
+      max-width: 52rem;
+      margin: 0;
+      font-family: var(--font-display);
+      font-size: clamp(2.35rem, 1.75rem + 2.6vw, 4rem);
+      font-weight: 650;
+      line-height: 1.04;
+      letter-spacing: -0.045em;
+      text-wrap: balance;
+    }
+    :host([compact]) .title {
+      font-size: clamp(2rem, 1.55rem + 2vw, 3.25rem);
+    }
+    .title ::slotted([slot='title']) {
+      margin: 0 !important;
+      padding: 0 !important;
+      border: 0 !important;
+      color: inherit !important;
+      background: transparent !important;
+      font: inherit !important;
+      letter-spacing: inherit !important;
+      line-height: inherit !important;
+      text-wrap: inherit !important;
+    }
+    .subtitle {
+      max-width: 46rem;
+      margin: 1.5rem 0 0;
+      color: var(--color-muted);
+      font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
+      line-height: 1.6;
+      text-wrap: pretty;
+    }
+    .subtitle ::slotted([slot='subtitle']) {
+      margin: 0 !important;
+      padding: 0 !important;
+      border: 0 !important;
+      color: inherit !important;
+      background: transparent !important;
+      font: inherit !important;
+      letter-spacing: inherit !important;
+      line-height: inherit !important;
+      text-wrap: inherit !important;
+    }
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-top: 1.5rem;
+    }
+    :host([align='center']) .actions { justify-content: center; }
+    .actions.empty,
+    .media.empty { display: none; }
+    .media {
+      min-width: 0;
+      width: 100%;
+      margin-top: 2rem;
+    }
+    :host([align='split']) .media { margin-top: 0; }
+
+    @media (max-width: 767px) {
+      .layout { padding-block: 2.75rem 3rem; }
+      :host([compact]) .layout { padding-block: 2.25rem 2.5rem; }
+      :host([align='split']) .layout {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+      }
+      .eyebrow { margin-bottom: 1rem; }
+      .subtitle { margin-top: 1.25rem; line-height: 1.5; }
+      .actions { width: 100%; }
     }
-    ::slotted([slot='title']) { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.1; margin: 0; }
-    ::slotted([slot='subtitle']) { font-size: clamp(1rem, 2vw, 1.25rem); color: var(--color-muted); margin: 0; max-width: 42ch; }
-    .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }
   `;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.refreshSlotState();
+  }
+  refreshSlotState() {
+    this.hasEyebrow = this.querySelector('[slot="eyebrow"]') !== null;
+    this.hasActions = this.querySelector('[slot="actions"]') !== null;
+    this.hasMedia = [...this.childNodes].some((node) => {
+      if (node.nodeType === Node.TEXT_NODE) return (node.textContent ?? "").trim().length > 0;
+      return node.nodeType === Node.ELEMENT_NODE && !node.hasAttribute("slot");
+    });
+  }
   render() {
     return html`
-      <section class="h">
-        <slot name="title"></slot>
-        <slot name="subtitle"></slot>
-        <div class="actions"><slot name="actions"></slot></div>
-        <slot></slot>
+      <section class="layout">
+        <header class="copy">
+          <div class=${this.hasEyebrow ? "eyebrow" : "eyebrow empty"}>
+            <slot name="eyebrow" @slotchange=${this.onSlotChange}></slot>
+          </div>
+          <div class="title"><slot name="title" @slotchange=${this.onSlotChange}></slot></div>
+          <div class="subtitle"><slot name="subtitle" @slotchange=${this.onSlotChange}></slot></div>
+          <div class=${this.hasActions ? "actions" : "actions empty"}>
+            <slot name="actions" @slotchange=${this.onSlotChange}></slot>
+          </div>
+        </header>
+        <div class=${this.hasMedia ? "media" : "media empty"}>
+          <slot @slotchange=${this.onSlotChange}></slot>
+        </div>
       </section>
     `;
   }
 }
+__decorateClass([
+  property({ reflect: true })
+], OkHero.prototype, "align");
+__decorateClass([
+  property({ reflect: true })
+], OkHero.prototype, "tone");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkHero.prototype, "compact");
+__decorateClass([
+  state()
+], OkHero.prototype, "hasEyebrow");
+__decorateClass([
+  state()
+], OkHero.prototype, "hasActions");
+__decorateClass([
+  state()
+], OkHero.prototype, "hasMedia");
 define("ok-hero", OkHero);
 export {
   OkHero

package/dist/ok-spotlight-search.js

@@ -0,0 +1,211 @@
+import { LitElement, css, nothing, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { define } from "./define.js";
+import { L as iconSearchOutline, v as iconCloseOutline, o as okIcon } from "./shared/icons.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;
+};
+class OkSpotlightSearch extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.placeholder = "";
+    this.value = "";
+    this.triggerIcon = "";
+    this.triggerLabel = "";
+  }
+  static {
+    this.styles = css`
+    :host {
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --color-muted: var(--ok-text-muted, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.6));
+      --panel-bg: var(--ok-surface, var(--ion-background-color, #ffffff));
+      --scrim-bg: var(--ok-scrim, rgba(0, 0, 0, 0.28));
+      --border-soft: var(--ok-border-soft, rgba(var(--ion-text-color-rgb, 28, 27, 23), 0.1));
+      --radius: var(--ok-radius, 16px);
+      --shadow: var(--ok-shadow, 0 24px 80px rgba(0, 0, 0, 0.35));
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+      display: contents;
+    }
+
+    /* Botón-trigger opcional (icon-only). */
+    button.trigger {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2.4rem;
+      height: 2.4rem;
+      padding: 0;
+      border: 0;
+      border-radius: 10px;
+      background: none;
+      color: var(--color-muted);
+      cursor: pointer;
+    }
+    button.trigger[data-assigned] { color: var(--ok-primary, var(--ion-color-primary, #3880ff)); }
+    button.trigger ion-icon { font-size: 1.35rem; }
+
+    /* El <dialog> flota arriba-centro, translúcido con blur (Spotlight). El top layer lo saca de
+       cualquier containing block. */
+    dialog {
+      margin: 10vh auto auto;
+      width: min(92vw, 36rem);
+      max-height: 72vh;
+      padding: 0;
+      border: none;
+      border-radius: var(--radius);
+      overflow: hidden;
+      color: var(--color);
+      font-family: var(--font);
+      background: color-mix(in srgb, var(--panel-bg) 80%, transparent);
+      -webkit-backdrop-filter: blur(22px) saturate(180%);
+      backdrop-filter: blur(22px) saturate(180%);
+      box-shadow: var(--shadow), 0 0 0 1px rgba(128, 128, 128, 0.18);
+    }
+    dialog::backdrop {
+      background: var(--scrim-bg);
+      -webkit-backdrop-filter: blur(3px);
+      backdrop-filter: blur(3px);
+    }
+
+    /* Fila del input hero + cierre. */
+    .top {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.7rem 0.85rem;
+      border-bottom: 1px solid var(--border-soft);
+    }
+    .top .lupa { flex: 0 0 auto; font-size: 1.25rem; color: var(--color-muted); }
+    .top input {
+      flex: 1 1 auto;
+      min-width: 0;
+      border: 0;
+      outline: none;
+      background: none;
+      color: inherit;
+      font: inherit;
+      font-size: 1.05rem;
+    }
+    .top input::placeholder { color: var(--color-muted); }
+    .top .close {
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      padding: 0;
+      border: 0;
+      border-radius: 8px;
+      background: none;
+      color: var(--color-muted);
+      cursor: pointer;
+    }
+    .top .close ion-icon { font-size: 1.2rem; }
+
+    /* Cuerpo scrollable: aquí caen los resultados del consumidor (slot por defecto). */
+    .results { max-height: 56vh; overflow-y: auto; padding: 0.35rem; }
+    .footer:not(:empty) { border-top: 1px solid var(--border-soft); padding: 0.3rem 0.6rem; }
+
+    @media (max-width: 560px) {
+      dialog { margin: 0 auto auto; width: 100vw; max-width: 100vw; max-height: 100vh; height: auto; border-radius: 0; }
+    }
+  `;
+  }
+  // ── API pública ──────────────────────────────────────────────────────────
+  openSearch() {
+    if (this.open) return;
+    this.open = true;
+    this.emitOpen(true);
+  }
+  close() {
+    if (!this.open) return;
+    this.open = false;
+    this.emitOpen(false);
+  }
+  toggle() {
+    this.open ? this.close() : this.openSearch();
+  }
+  emitOpen(open) {
+    this.dispatchEvent(new CustomEvent("ok-open", { detail: { open }, bubbles: true, composed: true }));
+  }
+  onInput(e) {
+    this.value = e.target.value;
+    this.dispatchEvent(new CustomEvent("ok-input", { detail: { value: this.value }, bubbles: true, composed: true }));
+  }
+  // Sincroniza `open` ↔ el <dialog> nativo (top layer). try/catch porque happy-dom (tests) no
+  // implementa showModal/close; ahí `open` sigue siendo la verdad.
+  updated() {
+    const d = this.renderRoot.querySelector("dialog");
+    if (!d) return;
+    try {
+      if (this.open && !d.open) {
+        d.showModal();
+        this.input?.focus();
+      } else if (!this.open && d.open) {
+        d.close();
+      }
+    } catch {
+    }
+  }
+  render() {
+    return html`
+      ${this.triggerIcon ? html`<button class="trigger" ?data-assigned=${this.open} aria-label=${this.triggerLabel || this.placeholder}
+            title=${this.triggerLabel || this.placeholder} @click=${() => this.openSearch()}>
+            <ion-icon .icon=${okIcon(this.triggerIcon)}></ion-icon>
+          </button>` : nothing}
+
+      <dialog aria-label=${this.triggerLabel || this.placeholder}
+        @close=${() => {
+      if (this.open) {
+        this.open = false;
+        this.emitOpen(false);
+      }
+    }}
+        @click=${(e) => {
+      if (e.target === e.currentTarget) this.close();
+    }}>
+        <div class="top">
+          <ion-icon class="lupa" .icon=${iconSearchOutline}></ion-icon>
+          <input type="text" .value=${this.value} placeholder=${this.placeholder}
+            aria-label=${this.placeholder} autocomplete="off" spellcheck="false"
+            @input=${(e) => this.onInput(e)} />
+          <button class="close" aria-label="Cerrar" @click=${() => this.close()}>
+            <ion-icon .icon=${iconCloseOutline}></ion-icon>
+          </button>
+        </div>
+        <div class="results"><slot></slot></div>
+        <div class="footer"><slot name="footer"></slot></div>
+      </dialog>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkSpotlightSearch.prototype, "open");
+__decorateClass([
+  property()
+], OkSpotlightSearch.prototype, "placeholder");
+__decorateClass([
+  property()
+], OkSpotlightSearch.prototype, "value");
+__decorateClass([
+  property({ attribute: "trigger-icon" })
+], OkSpotlightSearch.prototype, "triggerIcon");
+__decorateClass([
+  property({ attribute: "trigger-label" })
+], OkSpotlightSearch.prototype, "triggerLabel");
+__decorateClass([
+  query(".top input")
+], OkSpotlightSearch.prototype, "input");
+define("ok-spotlight-search", OkSpotlightSearch);
+export {
+  OkSpotlightSearch
+};