@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/types/components/sui-store-card/sui-store-card.data.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Tipos compartidos del `<sui-store-card>`. Viven en este archivo hermano (no en
+ * el `.tsx`) por la regla del proyecto Stencil: en el `.tsx` solo se permite
+ * `export class` / `export type` / `export interface`. Cualquier
+ * `export const`/`export function`/`export enum` rompe el build de TODO el
+ * proyecto, así que las interfaces data-driven se aíslan acá.
+ *
+ * Homologado con el SUI Angular (sui-design-system, lib/sui-store-card). Misma
+ * API pública (el objeto `store`), mismas variantes/estados y mismos valores
+ * (tokens del DS). El accent del DS es NARANJA brand (#fa7319), NO el azul de
+ * Figma.
+ */
+/** Status de owner-preview: copy específico de cada caso pre-aprobación. */
+export type SuiStoreOwnerPreviewStatus = 'draft' | 'pending_approval' | 'rejected';
+/** Tipo de envío del local — gobierna el label corto (Gratis/Recojo/Courier/S/X). */
+export type SuiStoreDeliveryType = 'free' | 'pickup' | 'courier' | 'auto' | string;
+/**
+ * Datos del local que renderiza la card. Espejo exacto del `SuiStoreCardData`
+ * de Angular.
+ */
+export interface SuiStoreCardData {
+    id: string;
+    name: string;
+    businessType?: string;
+    district?: string;
+    rating?: number | null;
+    /** Cuántas calificaciones sostienen ese promedio. Sin esto, un 5.0 de una
+     *  sola opinión se ve igual que uno de cien. */
+    reviewCount?: number | null;
+    distanceKm?: number | null;
+    deliveryFee?: number;
+    deliveryType?: SuiStoreDeliveryType;
+    /** Recojo en tienda (independiente del deliveryType en el modelo nuevo). */
+    offersPickup?: boolean;
+    isOpen?: boolean;
+    isSuspended?: boolean;
+    /** Solo true cuando el dueño del local está viendo su propio local en preview
+        (status draft/pending_approval/rejected) o cuando el super-admin lo está
+        revisando en la cola de aprobación. */
+    isOwnerPreview?: boolean;
+    /** Status real cuando isOwnerPreview=true. Permite copy específico de cada
+        caso (Borrador, En revisión, Rechazado). */
+    ownerPreviewStatus?: SuiStoreOwnerPreviewStatus | null;
+    /** Motivo del rechazo del superadmin (solo cuando ownerPreviewStatus='rejected'). */
+    ownerRejectionReason?: string | null;
+    /** True cuando el dueño está viendo su propio local YA aprobado y operativo
+        (active/trial/grace). Sirve para un alert verde de "ya estás público" sin
+        afectar la card en sí. */
+    isOwnerApproved?: boolean;
+    logoUrl?: string | null;
+    coverUrl?: string | null;
+}
+/**
+ * Tamaño del corazón de favorito, en la escala del sui-button: `small` 36 (el
+ * de siempre, default) · `medium` 40 · `large` 44 (piso táctil del teléfono:
+ * corazón de 44 y la nota tocable en 44 de alto).
+ */
+export type SuiStoreCardSize = 'small' | 'medium' | 'large';
+/** Variante interna del badge de preview (owner / super-admin review). */
+export interface SuiStorePreviewBadge {
+    label: string;
+    variant: 'draft' | 'pending' | 'rejected';
+}
+/** Detalle emitido por `ratingClicked` cuando el usuario tapea la calificación. */
+export interface SuiStoreRatingClickDetail {
+    id: string;
+    name: string;
+    logoUrl: string | null;
+}

package/dist/types/components/sui-swatch/sui-swatch.d.ts

@@ -0,0 +1,16 @@
+/**
+ * `<sui-swatch>` — Celda de color para documentar la paleta de tokens del DS.
+ *
+ * Componente utilitario mínimo (foundations). Renderiza un bloque de color
+ * con su nombre de token y el valor resuelto. Pensado para la story
+ * "Foundations/Tokens", no para uso en producto.
+ */
+export declare class SuiSwatch {
+    /** Nombre del token CSS, ej. `--sui-primary-base`. */
+    token: string;
+    /** Etiqueta legible (default: el nombre del token sin el prefijo `--sui-`). */
+    label?: string;
+    /** Valor literal a mostrar debajo (ej. `#fa7319`). Opcional. */
+    value?: string;
+    render(): any;
+}

package/dist/types/components/sui-switch/sui-switch.d.ts

@@ -0,0 +1,70 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiSwitchSize = 'medium' | 'large' | 'xlarge';
+/**
+ * `<sui-switch>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-switch/). Misma API
+ * pública (size/checked/disabled + evento checkedChange), mismo comportamiento
+ * (patrón "controlled", iOS :active fix) y mismos VALORES exactos (tokens del
+ * DS, no hex). El accent del DS es NARANJA brand (#fa7319 = --sui-primary-base),
+ * NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — `Switch [1.1]` (node 385:4086).
+ * Geometría base (medium): track 28×16, thumb 12×12, dot 4×4. ON desplaza el
+ * thumb +12px; :active lo encoge a 10×10; disabled lo encoge a 10×10 sin dot.
+ *
+ * **Patrón "controlled"** (igual que el Angular): el componente NO muta su
+ * estado interno al click. SOLO emite `checkedChange` con la intención. El
+ * consumer decide si actualiza el prop `checked` (re-render que mueve el thumb)
+ * o si ignora el intent. Cero state desincronizado. El estado VISIBLE es
+ * función pura del prop `checked`.
+ *
+ * `scoped: true` (light DOM, NO shadow): misma estrategia que `sui-button` /
+ * `sui-icon`. Los selectores `:host([data-sui-*])` translan limpio en scoped y
+ * el componente no proyecta contenido slotted (track/thumb/dot son propios).
+ *
+ * DIVERGENCIA vs Angular: el Angular implementa `ControlValueAccessor`
+ * (`writeValue`/`registerOnChange`/`setDisabledState`) para integrarse con
+ * Angular Reactive Forms. En Stencil no existe ese contrato — se omite. La
+ * integración con forms se hace escuchando `checkedChange` + escribiendo el
+ * prop `checked` (idéntico al modo `[(checked)]` del Angular en uso normal).
+ */
+export declare class SuiSwitch {
+    el: HTMLElement;
+    /** Tamaño. Default `medium` (track 28×16). `large`/`xlarge` son extensiones del proyecto (no-Figma). */
+    size: SuiSwitchSize;
+    /** Estado visible del switch. Controlled: el thumb se posiciona según este prop. Default `false`. */
+    checked: boolean;
+    /** Deshabilitado: bloquea el toggle, tokens grises, no focusable. Default `false`. */
+    disabled: boolean;
+    /**
+     * `false` = fuera del orden de Tab (tabindex -1). Para cuando un padre es el
+     * control enfocable y este switch solo dibuja el estado (switch-label,
+     * switch-card). Default `true`.
+     */
+    focusable: boolean;
+    /**
+     * Se emite con la INTENCIÓN de cambio (el valor invertido) al click/Enter/Space.
+     * Patrón controlled: el componente NO se actualiza solo — el consumer debe
+     * setear el prop `checked` para que el cambio se refleje visualmente.
+     */
+    checkedChange: EventEmitter<boolean>;
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` fuerza al
+     * browser a engage el touch event pipeline, lo cual hace que `:active`
+     * dispare y se libere correctamente. Sin esto, `:active` "stickea" 300-500ms
+     * en pages standalone. (Ver CLAUDE.md "iOS :active stuck en custom buttons".)
+     */
+    onTouchStart(): void;
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd(): void;
+    onClick(event: Event): void;
+    onKeydown(event: KeyboardEvent): void;
+    /**
+     * Patrón controlled: SOLO emite el intent (valor invertido). NO muta `checked`
+     * directamente — el consumer decide si lo acepta. Disabled bloquea todo.
+     */
+    private toggle;
+    render(): any;
+}

package/dist/types/components/sui-switch-card/sui-switch-card.d.ts

@@ -0,0 +1,122 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiEmojiName } from '../sui-emoji/sui-emoji';
+import type { SuiSwitchSize } from '../sui-switch/sui-switch';
+import { type SuiBadgeConfig } from '../../utils/sui-configs';
+export type SuiSwitchCardType = 'basic' | 'left-icon' | 'avatar' | 'card-provider' | 'brand' | 'company';
+/**
+ * `<sui-switch-card>` — SUI Design System (SUI Design System 2.0).
+ *
+ * COMPUESTO portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-switch-card/). Misma API
+ * pública (type/label/sublabel/description/emoji/imageUrl/badge/
+ * checked/disabled), mismas variantes/types/estados, mismo comportamiento
+ * (toggle por click/Space/Enter sobre toda la card excepto el switch, disabled
+ * bloquea, iOS :active fix) y mismos VALORES exactos (tokens del DS, no hex).
+ * El accent del DS es NARANJA brand (#fa7319 = --sui-primary-base), NO el azul
+ * de Figma.
+ *
+ * Reusa los PRIMITIVOS ya portados: `<sui-switch>`, `<sui-avatar>`,
+ * `<sui-icon>`, `<sui-emoji>`. NO re-implementa el switch/avatar/icon/emoji.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set `Switch Card [1.1]`
+ * (node 385:4733) — 6 types × 4 states (Default/Hover/Active/Disabled).
+ *
+ * Espejo de `sui-checkbox-card` pero con un `<sui-switch>` trailing en vez del
+ * checkbox:
+ *  - Renderea un `sui-switch` interno (no checkbox/radio dot)
+ *  - role="group" + aria-labelledby (título). El ÚNICO tab stop es el sui-switch
+ *    interno (nombre = título, descripción = descripción) y él solo maneja
+ *    Espacio/Enter: el host ya no escucha keydown (antes emitía dos veces por
+ *    tecla por el burbujeo del switch — revisión a11y del SUI Angular 04-10-2026)
+ *  - Cada card es independiente — NO requiere parent group
+ *  - Click en cualquier parte de la card togglea el switch
+ *
+ * 6 types canon (matchea el component_set 385:4733 al 100%):
+ *  - basic: solo título + descripción + switch trailing
+ *  - left-icon: 40×40 circle white-0 + 1px stroke-soft-200 + shadow x-small +
+ *    pad 10 + icon/emoji 20×20 + título + switch
+ *  - avatar: 40×40 imagen circular (sui-avatar size=lg) + título + switch
+ *  - card-provider / brand / company: leading proyectado por el consumer via
+ *    `<elemento slot="leading">` (logo Mastercard/Visa, brand Spotify, logo de
+ *    company, etc.). El componente NO bundlea los assets de marca — son del
+ *    consumer. Geometría del slot por type:
+ *      card-provider → 32×24 radius-4 overflow-hidden (Figma 385:4760)
+ *      brand         → 40×40 sin frame, overflow-hidden (Figma 385:4769)
+ *      company       → 40×40 redondo, overflow-hidden (Figma 385:4778)
+ *
+ * EXACT (pulled from Figma 385:4733, verificado per type × state):
+ *  - Container: padding 16, gap 14, radius 12, border 1px stroke-soft-200,
+ *    shadow x-small (0 1px 2px 0 #0a0d1408), bg white-0, overflow hidden
+ *  - Hover (385:4787): bg-weak-50, sin border visible, sin shadow
+ *  - Active/checked (385:4840): bg-white-0, border 1px primary-base, sin shadow
+ *  - Disabled (385:4893): bg-white-0, border stroke-soft-200, sin shadow. Textos
+ *    NO uniformes — label→text/sub-600, sublabel+description→text/soft-400,
+ *    badge→bordeado con texto disabled-300
+ *  - Title row: gap 4, items-center, flex-wrap
+ *  - Label: 14/20 medium strong-950, tracking -0.084px
+ *  - Sublabel / Description: 12/16 regular sub-600
+ *  - Badge: <sui-badge> real (string o SuiBadgeConfig); default blue/light/small
+ *    = information azul fiel a Figma (antes era naranja a mano)
+ *  - Switch slot: flex-shrink 0, self-start, margin-top 2px (baseline align)
+ *
+ * Homologado con el SUI Angular (11-2026): patrón **controlled** (no muta
+ * `checked`; emite `checkedChange` y el padre escribe `checked`), `size` del
+ * switch interno, `badge` string o `SuiBadgeConfig`, `imageUrl`
+ * también para card-provider/brand/company (si no hay, cae al slot `leading`),
+ * sin hundido táctil (`:active` scale) en la card.
+ *
+ * DIVERGENCIA vs Angular: sin ControlValueAccessor; `icon`/`iconSrc` son extras
+ * del port (el Angular proyecta un sui-icon en left-icon).
+ */
+export declare class SuiSwitchCard {
+    el: HTMLElement;
+    /** Tipo del leading slot — gobierna qué se renderiza a la izquierda. Default `basic`. */
+    type: SuiSwitchCardType;
+    /** Título principal del card (label de la fila Title). */
+    label: string;
+    /** Sublabel opcional (12/16 regular sub-600 al lado del label). */
+    sublabel: string | null;
+    /** Descripción secundaria opcional debajo del Title. */
+    description: string | null;
+    /** RemixIcon name (sin prefijo "ri-") para type='left-icon'. Precedencia: icon > emoji > iconSrc. */
+    icon: string | null;
+    /** Emoji del catálogo SUI_EMOJI_MAP — alternativa a icon para type='left-icon'. */
+    emoji: SuiEmojiName | null;
+    /** URL directa al emoji para type='left-icon'. Precedencia: icon > emoji > iconSrc. */
+    iconSrc: string | null;
+    /** URL de imagen para type='avatar'. Si falla, fallback a iniciales del label. */
+    imageUrl: string | null;
+    /** Tamaño del switch interno — lo decide el padre (D16: xlarge táctil, large computadora). Default `medium`. */
+    size: SuiSwitchSize;
+    /**
+     * Badge junto al label: string (`'NEW'`) o `SuiBadgeConfig` (default
+     * blue/light/small). `null` = sin badge.
+     */
+    badge: string | SuiBadgeConfig | null;
+    /** Deshabilitado: bloquea toggle, tokens grises, switch fuera del Tab. Default `false`. */
+    disabled: boolean;
+    /** Estado del switch. Controlled: no se muta solo; escucha `checkedChange` y escríbelo. */
+    checked: boolean;
+    /** Intención de cambio (valor invertido) al tocar la card o el switch. */
+    checkedChange: EventEmitter<boolean>;
+    private readonly labelId;
+    private readonly descriptionId;
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo que hace que `:active` dispare y se libere bien.
+     */
+    onTouchStart(): void;
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd(): void;
+    /** Click en la card togglea; el click en el switch lo maneja el switch (sin doble disparo). */
+    onClick(event: MouseEvent): void;
+    private onSwitchChange;
+    private emit;
+    /** True si type requiere render del slot leading proyectado. */
+    private get hasProjectedLeading();
+    /** Iniciales para fallback de sui-avatar (1ras 2 palabras del label). */
+    private get initialsFromLabel();
+    /** Render del leading interno (left-icon / avatar). El proyectado va aparte. */
+    private renderLeading;
+    render(): any;
+}

package/dist/types/components/sui-switch-label/sui-switch-label.d.ts

@@ -0,0 +1,106 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiSwitchSize } from '../sui-switch/sui-switch';
+import { type SuiBadgeConfig, type SuiLinkConfig } from './sui-switch-label.utils';
+/** Sizes de la fila: los del switch + `2xlarge` (fila de 44, piso táctil). */
+export type SuiSwitchLabelSize = SuiSwitchSize | '2xlarge';
+/**
+ * `<sui-switch-label>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-switch-label/). Misma API
+ * pública (label/sublabel/description/badge/link/flip/disabled/
+ * active), TODAS las variantes/states del Figma, mismo comportamiento (click en
+ * el label togglea, click en el link NO togglea + emite evento, disabled bloquea)
+ * y mismos VALORES exactos vía tokens del DS (no hex). El accent del DS es
+ * NARANJA brand (#fa7319 = --sui-primary-base), NO el azul de Figma.
+ *
+ * Es el ESPEJO de `<sui-checkbox-label>` pero con `<sui-switch>` como control
+ * interno. COMPUESTO: reusa los primitivos ya portados <sui-switch> y <sui-badge>.
+ * NO re-implementa la geometría del track/thumb ni del badge.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set `Switch Label [1.1]`
+ * (node 385:4580, 8 variants): Active(off/on) × Description(off/on) × Flip(off/on).
+ *
+ * Anatomía EXACT (pulled from Figma):
+ *   Container         flex gap-8 items-start
+ *   Switch slot       32×20 (medium nativo del sui-switch), shrink-0
+ *   Content column
+ *     description=off → flex gap-4 items-center: Label + Sublabel + Badge
+ *     description=on  → flex flex-col gap-10:
+ *                         Title row (gap-4 items-center): Label + Sublabel + Badge
+ *                         Description (12/16 sub-600)
+ *                         Link Button (12/16 primary-base, opcional)
+ *   Flip              swap order switch ↔ content (label a la izquierda) vía CSS `order`
+ *
+ * Typography (idéntica a sui-checkbox-label):
+ *   Label sin description    Inter Regular 14/20, ls -0.084px, text/strong-950
+ *   Label con description    Inter Medium  14/20, ls -0.084px, text/strong-950
+ *   Sublabel                 Inter Regular 12/16, ls 0,        text/sub-600
+ *   Description              Inter Regular 12/16, ls 0,        text/sub-600
+ *   Badge "NEW"              sui-badge color=orange variant=light size=small (brand naranja)
+ *   Link Button              Inter Medium  12/16, primary-base
+ *
+ * Homologado con el SUI Angular (11-2026): patrón **controlled** — el componente
+ * NO muta `active`; emite `activeChange` con la intención y el padre decide si
+ * escribe `active`. `badge` acepta string o `SuiBadgeConfig`; `link` acepta
+ * string o `SuiLinkConfig`. `size` mueve el switch y el
+ * texto (large/xlarge → label 16/24; `2xlarge` = fila de 44). El switch interno
+ * es el tab stop y toma su nombre del label (`aria-labelledby`) y su descripción
+ * (`aria-describedby`).
+ *
+ * DIVERGENCIA vs Angular: sin ControlValueAccessor (no existe en web components).
+ *
+ * `scoped: true` (light DOM, NO shadow): así los primitivos proyectados
+ * (<sui-switch>, <sui-badge>) heredan tokens del global y los selectores
+ * `:host([data-sui-*])` translan limpio. Misma estrategia que el Angular original.
+ *
+ * iOS WKWebView fix: touchstart/touchend en host (vía @Listen) — replica el patrón
+ * del Angular wrapper, evita el :active stuck 300-500ms en pages standalone.
+ */
+export declare class SuiSwitchLabel {
+    el: HTMLElement;
+    private readonly labelId;
+    private readonly descriptionId;
+    /** Texto principal del label. Dice qué hace prenderlo, no el estado. */
+    label: string;
+    /** Sublabel opcional (12/16 sub-600 al lado del label). */
+    sublabel: string | null;
+    /** Descripción opcional debajo del título (label pasa a Medium). */
+    description: string | null;
+    /**
+     * Tamaño del switch y del texto. `large`/`xlarge` → label 16/24; `2xlarge` =
+     * fila de 44 de alto (piso táctil del teléfono) con el switch en xlarge. Default `medium`.
+     */
+    size: SuiSwitchLabelSize;
+    /**
+     * Badge junto al label: string (`'NEW'`) o `SuiBadgeConfig`. Default naranja
+     * light small. `null` = sin badge.
+     */
+    badge: string | SuiBadgeConfig | null;
+    /**
+     * Link Button bajo la descripción: string (solo label, emite `linkClick`) o
+     * `SuiLinkConfig` `{ label, href?, target?, rel? }` (con href renderiza `<a>`).
+     * Solo se ve si hay `description`.
+     */
+    link: string | SuiLinkConfig | null;
+    /** Si true, invierte el orden: [texto] [switch] (label a la izquierda). */
+    flip: boolean;
+    /** Deshabilita el switch + wrapper. Default `false`. */
+    disabled: boolean;
+    /** Estado del switch. Controlled: el componente no lo muta; escucha `activeChange` y escríbelo. */
+    active: boolean;
+    /** Intención de cambio (valor invertido) al tocar la fila o el switch. */
+    activeChange: EventEmitter<boolean>;
+    /** Click en el Link Button (no togglea el switch). */
+    linkClick: EventEmitter<MouseEvent>;
+    /** iOS WKWebView fix (listeners pasivos): la presencia de touchstart engancha el pipeline táctil. */
+    onTouchStart(): void;
+    /** touchend.blur() suelta el :active en iOS. */
+    onTouchEnd(): void;
+    /** Click en cualquier parte de la fila togglea (salvo el switch y el link, que tienen su handler). */
+    onLabelClick(event: MouseEvent): void;
+    private onSwitchChange;
+    private onLinkClick;
+    private emit;
+    render(): any;
+}

package/dist/types/components/sui-switch-label/sui-switch-label.utils.d.ts

@@ -0,0 +1,5 @@
+import type { SuiBadgeConfig } from '../sui-badge/sui-badge';
+import type { SuiLinkConfig } from '../sui-link-button/sui-link-button';
+export type { SuiBadgeConfig, SuiLinkConfig };
+/** Normaliza el prop `link`: string → { label }; rel automático para `_blank`. */
+export declare function resolveLink(l: string | SuiLinkConfig | null | undefined): SuiLinkConfig | null;

package/dist/types/components/sui-tab-chips/sui-tab-chips.d.ts

@@ -0,0 +1,122 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiTabChipInput, SuiTabChipsSize } from './sui-tab-chips.data';
+import type { SuiPistaEstado } from '../../utils/pista-de-scroll';
+/**
+ * `<sui-tab-chips>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Chips horizontales scrollables (patrón "category nav" de apps de
+ * food/delivery/marketplaces). Útil cuando hay 5+ secciones que no caben en un
+ * `sui-tabs` tradicional.
+ *
+ * Homologado con el `sui-tab-chips` del SUI Angular (05-11-2026). Misma API
+ * pública (chips / value / sticky / size / autoScroll / pistaDeScroll), mismos
+ * estados (default · hover · active · focus · stuck) y mismo comportamiento:
+ * default al primer chip, roving tabindex con activación manual, pista de
+ * scroll (degradado + flechas con mouse), IntersectionObserver para sticky y
+ * auto-scroll del chip activo. Valores vía tokens del DS. El accent del DS es NARANJA brand
+ * (#fa7319 / --sui-primary-*), NO el azul de Figma.
+ *
+ * Es un COMPUESTO sencillo: el chip es un `<button>` nativo estilizado y el
+ * count es un `<span>` pill. No requiere primitivos (no es un checkbox/badge
+ * proyectado) — el count NO es un `<sui-badge>` porque hereda los colores del
+ * chip (se invierte a blanco translúcido en el chip activo).
+ *
+ * Tamaños: small 32 · medium 36 (default) · large 40 · xlarge 44 (piso táctil
+ * del teléfono). small/medium con texto 14; large/xlarge con 16/24.
+ *
+ * Variantes:
+ *  - `sticky=false` (default) → scroll horizontal normal.
+ *  - `sticky=true` → se pega al top del scroll container. En modo stuck extiende
+ *    el padding-top con `safe-area-inset-top` y pinta bg opaco para tapar el
+ *    contenido que scrollea detrás.
+ *
+ * Two-way binding: `value` es `mutable` + emite `valueChange`. Para frameworks
+ * que generan los bindings (Angular/Vue output), `[(value)]` mapea a la prop +
+ * el evento `valueChange`.
+ *
+ * `scoped: true` (light DOM, NO shadow): el componente vive típicamente dentro
+ * de un scroll container con `overflow-x: auto` de la page consumidora; light
+ * DOM evita pelear con el clipping del halo de focus y mantiene los tokens del
+ * DS heredando del documento. Misma estrategia que el Angular original.
+ *
+ * API:
+ *   <sui-tab-chips
+ *     chips='["Hamburguesas","Pizzas","Bebidas"]'
+ *     value="Pizzas"
+ *     sticky
+ *   />
+ *
+ *   También acepta objetos (con count opcional):
+ *   <sui-tab-chips
+ *     .chips=${[{ value: 'pend', label: 'Pendientes', count: 5 }]}
+ *     .value=${selected}
+ *   />
+ */
+export declare class SuiTabChips {
+    el: HTMLElement;
+    /**
+     * Lista de chips. Acepta un array de strings (`label === value`) o un array de
+     * `SuiTabChipItem` (con `count` opcional). Vía atributo HTML también acepta un
+     * string JSON (`chips='["a","b"]'`) — útil en demos/Storybook.
+     */
+    chips: SuiTabChipInput | string;
+    /** Valor seleccionado (two-way: mutable + emite `valueChange`). */
+    value: string;
+    /** Si `true`, el componente queda sticky al top del scroll container. */
+    sticky: boolean;
+    /** Tamaño de los chips: small 32 · medium 36 (default) · large 40 · xlarge 44 (teléfono). */
+    size: SuiTabChipsSize;
+    /** Auto-scroll horizontal del chip activo al cambiar `value`. Default `true`. */
+    autoScroll: boolean;
+    /**
+     * Pista de desborde: degradado en el borde con chips ocultos y, con mouse,
+     * flechas que desplazan. `false` la apaga (atributo `pista-de-scroll="false"`).
+     */
+    pistaDeScroll: boolean;
+    /** Emite el nuevo valor seleccionado al hacer click en un chip. */
+    valueChange: EventEmitter<string>;
+    /** Estado interno: chip pegado al top del viewport (solo si `sticky=true`). */
+    stuck: boolean;
+    /**
+     * Chip con el tab stop (roving tabindex). `null` = el activo. Las flechas
+     * mueven el foco SIN seleccionar (activación manual: cada filtro recarga
+     * datos); Enter/Espacio —el click nativo del <button>— selecciona.
+     */
+    focusValue: string | null;
+    /** Lados con chips ocultos (lo mide `SuiPistaDeScroll`). */
+    pistaEstado: SuiPistaEstado;
+    private navEl?;
+    private sentinelEl?;
+    private intersectionObserver?;
+    private pista?;
+    /** Normaliza el input crudo a `SuiTabChipItem[]` para iterar en el render. */
+    private get normalizedChips();
+    /** Valor del único chip con tabindex 0: el enfocado con flechas, o el activo. */
+    private get tabStopValue();
+    /**
+     * Default al PRIMER chip: si `value` está vacío o no corresponde a ningún chip
+     * (quedó uno viejo tras cambiar la lista), se selecciona el primero y se emite.
+     */
+    ensureValue(): void;
+    componentWillLoad(): void;
+    /** Reconexión (el nodo se movió en el DOM): `componentDidLoad` no vuelve a correr. */
+    connectedCallback(): void;
+    private conectar;
+    componentDidLoad(): void;
+    /** Chips o size cambian el ancho del contenido sin cambiar el del nav: el ResizeObserver no lo ve. */
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    onPistaChange(activa: boolean): void;
+    /** Auto-scroll al chip activo cuando cambia `value` (UX típica de catnavs). */
+    onValueChange(next: string): void;
+    /** Re-arma el observer si `sticky` cambia en runtime. */
+    onStickyChange(): void;
+    private setupStickyObserver;
+    private select;
+    /** Al salir del grupo el tab stop vuelve al chip activo (patrón de tabs). */
+    private onFocusout;
+    /** Flechas ← → / Home / End: mueven el foco entre chips (con wrap), sin seleccionar. */
+    private onKeydown;
+    private scrollToChip;
+    render(): any;
+}

package/dist/types/components/sui-tab-chips/sui-tab-chips.data.d.ts

@@ -0,0 +1,30 @@
+/** Forma de un chip cuando se pasa como objeto (en vez de string). */
+export interface SuiTabChipItem {
+    /** Valor único del chip (lo que devuelve `value`). */
+    value: string;
+    /** Texto visible del chip. */
+    label: string;
+    /**
+     * Count opcional renderizado como pill pequeña al lado del label.
+     * Útil para filtros con cantidades (ej. "Pendientes (5)"). Si es `0` o
+     * `undefined`, no se renderiza la pill — así no se muestra un "(0)" feo
+     * cuando el conteo está vacío.
+     */
+    count?: number;
+}
+/**
+ * Tamaño del chip. `medium` (36 px) es el de siempre y el default. `small` (32)
+ * para web densa; `large` (40) para mobile; `xlarge` (44) es el piso táctil del
+ * teléfono.
+ */
+export type SuiTabChipsSize = 'small' | 'medium' | 'large' | 'xlarge';
+/** Input crudo aceptado por el componente: strings sueltos u objetos. */
+export type SuiTabChipInput = readonly (string | SuiTabChipItem)[];
+/**
+ * Normaliza el input a `SuiTabChipItem[]` para iteración uniforme en el render.
+ * Un string `'foo'` se convierte en `{ value: 'foo', label: 'foo' }`.
+ *
+ * Acepta también un string JSON (caso de uso DOM/Storybook: el atributo HTML
+ * `chips='["a","b"]'` llega como string) y lo parsea de forma defensiva.
+ */
+export declare function normalizeChips(input: SuiTabChipInput | string | null | undefined): SuiTabChipItem[];

package/dist/types/components/sui-tab-menu-horizontal/sui-tab-menu-horizontal.d.ts

@@ -0,0 +1,63 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiTabMenuHorizontalSize = 'small' | 'medium' | 'large' | 'xlarge';
+export interface SuiTabMenuHorizontalItem {
+    value: string;
+    label: string;
+    icon?: string;
+    /** Chevron de navegación (pill `arrow-right-s-line` 18px, SIN shadow) — prop `rightIcon` de Figma. */
+    rightIcon?: boolean;
+    /** Badge numérico rojo (state/error/base) a la derecha del label. `0` / `undefined` no se renderiza. */
+    number?: number;
+    disabled?: boolean;
+}
+/**
+ * `<sui-tab-menu-horizontal>` — SUI Design System 2.0.
+ *
+ * Portado desde el `SuiTabMenuHorizontal` del SUI Angular (sui-design-system,
+ * `src/lib/sui-tab-menu-horizontal`). Reemplaza a `<sui-tabs variant="line">`;
+ * renombres vs esa API: `badge` → `number`, `chevron` → `rightIcon`.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — "Tab Menu Horizontal [1.1]"
+ *   3511:9958 container · 3511:9832 items · 3511:9897 active · 3511:9877 hover
+ *
+ * Pestañas con subrayado 2px primary en el ítem activo, al ras del borde
+ * inferior del container.
+ *
+ * EXACT (Figma):
+ *   Container: border-top + border-bottom 1px stroke-soft-200, gap 24px,
+ *     bg-white-0. El py-14 de Figma vive en cada ítem (la franja entera es
+ *     tocable: 14 + 20 + 14 = 48).
+ *   Item: gap icon↔label 6px, label↔number 4px
+ *     Default: text/icon sub-600 · Hover: text strong-950, icon sub-600 ·
+ *     Active: text + icon strong-950 + underline primary-base 2px
+ *   number: state/error/base, p-2px, radius-full, static-white, Subheading/2XSmall
+ *   rightIcon: pill bg-white-0, p-px, radius-full, overflow-clip, SIN shadow
+ *
+ * Extensión SUI: `size` (small 40 · medium 48 Figma · large 52 · xlarge 56;
+ * large/xlarge con texto 16) y `disabled` por ítem.
+ *
+ * a11y: tablist con activación automática y roving tabindex — ← → mueven el
+ * foco y activan, con vuelta y saltando deshabilitadas; Home/End.
+ *
+ * API ↔ Angular: `active` es `model()` allá; acá `@Prop` mutable + evento
+ * `tabChange`. El genérico `<T>` queda en `string`.
+ *
+ * `scoped: true` (light DOM, NO shadow), igual que el resto del port.
+ */
+export declare class SuiTabMenuHorizontal {
+    el: HTMLElement;
+    /** Ítems `{ value, label, icon?, rightIcon?, number?, disabled? }`. Requerido. */
+    tabs: SuiTabMenuHorizontalItem[];
+    /** Valor activo (two-way: se actualiza al elegir). */
+    active?: string;
+    /** Alto de la franja tocable: small 40 · medium 48 (Figma) · large 52 · xlarge 56. */
+    size: SuiTabMenuHorizontalSize;
+    /** Emitido al elegir una pestaña habilitada, con su `value`. */
+    tabChange: EventEmitter<string>;
+    /** iOS WKWebView: la presencia del listener touchstart libera `:active` a tiempo. */
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    private onKeydown;
+    private select;
+    render(): any;
+}