@erplora/outfitkit 0.1.17 → 0.1.18

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