@erplora/outfitkit 0.1.18 → 0.1.20

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/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/index.d.ts

@@ -2,6 +2,8 @@ export { createStore, store } from './store/store.js';
 export type { Store, StoreOptions, StoreSubscriber } from './store/store.js';
 export { StoreController } from './store/controller.js';
 export { OkStore } from './components/ok-store/ok-store.js';
+export { bindTabbar, tabbarOverflow, syncTabbarOverflow, scrollActiveTabIntoView, shouldHintScroll, hintScroll } from './tabbar/tabbar.js';
+export type { TabbarOverflow } from './tabbar/tabbar.js';
 export { OkDataTable } from './components/ok-data-table/ok-data-table.js';
 export type { DataTableColumn, DataTableAction, DataTableView, DataTablePrimaryAction, DataTableRowKey, } from './components/ok-data-table/ok-data-table.js';
 export { OkMail } from './components/ok-mail/ok-mail.js';

package/dist/index.js

@@ -1,6 +1,7 @@
 import { createStore, store } from "./store.js";
 import { StoreController } from "./store-controller.js";
 import { OkStore } from "./ok-store.js";
+import { bindTabbar, hintScroll, scrollActiveTabIntoView, shouldHintScroll, syncTabbarOverflow, tabbarOverflow } from "./tabbar.js";
 import { OkDataTable } from "./ok-data-table.js";
 import { OkMail } from "./ok-mail.js";
 import { OkTree } from "./ok-tree.js";
@@ -198,6 +199,12 @@ export {
   OkWizard,
   StoreController,
   applyPalette,
+  bindTabbar,
   createStore,
-  store
+  hintScroll,
+  scrollActiveTabIntoView,
+  shouldHintScroll,
+  store,
+  syncTabbarOverflow,
+  tabbarOverflow
 };

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