@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,71 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/** Estilo del contenedor (prop Style=Card|List de Figma). */
+export type SuiTabMenuVerticalStyle = 'card' | 'list';
+export interface SuiTabMenuVerticalItem {
+    value: string;
+    label: string;
+    icon?: string;
+    /** Chevron de navegación (pill `arrow-right-s-line` 18px CON shadow-x-small) — 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-vertical>` — SUI Design System 2.0.
+ *
+ * Portado desde el `SuiTabMenuVertical` del SUI Angular (sui-design-system,
+ * `src/lib/sui-tab-menu-vertical`). Reemplaza a `<sui-tabs variant="vertical">`;
+ * renombres vs esa API: `verticalStyle` → `menuStyle`, `badge` → `number`,
+ * `chevron` → `rightIcon`.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — "Tab Menu Vertical [1.1]"
+ *   3516:10411 set (Style=Card|List × Quantity × divider) ·
+ *   3515:10326 items · 3515:10341 active
+ *
+ * Navegación lateral con dos estilos de contenedor: Card (borde, fondo y
+ * sombra) o List (plano).
+ *
+ * EXACT (Figma):
+ *   Item: gap 6px, padding 8px, radius-8, label flex-1 text-left
+ *     Active: bg-weak-50 + text strong-950; leftIcon PRIMARY-BASE (a propósito
+ *       distinto del horizontal, cuyo ícono activo es strong-950)
+ *     Hover: bg-weak-50 + text strong-950
+ *     Default: text/icon sub-600 (bg-white-0 en Card, transparent en List)
+ *   Card: bg-white-0, border stroke-soft-200, p-10, radius-16, shadow-x-small, gap-8
+ *   List: plano, gap-8
+ *   Divider label: px-8 py-4, text-soft-400, Subheading/XSmall uppercase
+ *   rightIcon: pill bg-white-0, p-1px, radius-full, shadow-x-small, icon 18
+ *
+ * Sin `size`: Figma usa un único tamaño. `disabled` por ítem es extensión SUI.
+ *
+ * a11y: tablist vertical (aria-orientation, nombre desde el divider) con
+ * 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 SuiTabMenuVertical {
+    el: HTMLElement;
+    /** Ítems `{ value, label, icon?, rightIcon?, number?, disabled? }`. Requerido. */
+    tabs: SuiTabMenuVerticalItem[];
+    /** Valor activo (two-way: se actualiza al elegir). */
+    active?: string;
+    /** Estilo del contenedor: Card (borde/fondo/sombra) o List (plano). */
+    menuStyle: SuiTabMenuVerticalStyle;
+    /** Label de sección sobre el menú (prop `divider` de Figma, ej. 'SELECT MENU'). Vacío = sin divider. */
+    dividerLabel: string;
+    /** Emitido al elegir una pestaña habilitada, con su `value`. */
+    tabChange: EventEmitter<string>;
+    /** id del divider: nombra el tablist (aria-labelledby). */
+    private readonly dividerId;
+    /** iOS WKWebView: la presencia del listener touchstart libera `:active` a tiempo. */
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    private onKeydown;
+    private select;
+    render(): any;
+}

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

@@ -0,0 +1,166 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiTableColumn, SuiTableSize, SuiTableSortDir, SuiTableSortEvent } from './sui-table.data';
+import type { SuiPistaEstado } from '../../utils/pista-de-scroll';
+/**
+ * `<sui-table>` — SUI Design System (SUI Design System 2.0). COMPUESTO / COMPLEJO.
+ *
+ * Homologado con el `sui-table` del SUI Angular (05-11-2026). Misma API
+ * publica, TODAS las variantes/sizes/states (eje Priority x State x Misc x Size
+ * de Figma), mismo comportamiento (sort cycle asc->desc->null + emision de
+ * evento, seleccion con toggleRow/toggleAll/indeterminate, tooltip en celdas
+ * truncadas, leading key-icon frame 40x40 / 32x32 en small, divider entre
+ * filas, scroll horizontal mobile con sticky column opcional + pista de scroll
+ * (degradado y flechas con mouse) + passthrough del touch vertical en Android,
+ * skeleton loader, empty state) y
+ * mismos VALORES exactos (tokens del DS, no hex). Reusa los primitivos ya
+ * portados `<sui-checkbox>`, `<sui-icon>` y `<sui-tooltip>`. El accent del DS es
+ * NARANJA brand (#fa7319 = --sui-primary-base), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO.
+ * Nodes verificados:
+ *   553:22175 Table [component set] (Priority x State x Misc x Size)
+ *   587:5793  Table Header Cell [1.1] (Default / Disabled / Empty)
+ *   581:2327  Sorting Icons [1.1] (Default / Up / Down)
+ *   3539:8015 Table [Examples] (tabla real Light + Dark)
+ *
+ * SPECS exactos (de Figma):
+ *   Header row:  bg weak-50, h=36, py=8 px=12, gap label 2, radius-8,
+ *                text Paragraph/Small 14/400, color sub-600.
+ *   Body row:    bg white-0, h=64 (medium), py=12 pl=12 pr=20, gap 12,
+ *                radius-12, divider 1px stroke-soft-200 (py=1.5 wrapper),
+ *                text Label/Small 14/500 (leading) o Paragraph/Small 14/400.
+ *   Sort icon:   20px Remix chevron, soft-400 default / strong-950 activo.
+ *   Sizes:       small=48 (Figma Large), medium=64 (Figma X-Large),
+ *                large=80 y xlarge=96 (extraFeature sin ref Figma).
+ *
+ * MAPEO Angular -> Stencil (idiom web component):
+ *  - `model(selectedRows)` -> `@Prop mutable selectedRows: Set` + `@Event
+ *    selectedRowsChange`. El consumer lee `el.selectedRows` y/o escucha el event.
+ *  - `model(sortKey)`/`model(sortDir)` -> `@Prop mutable` + `@Event
+ *    sortKeyChange` / `sortDirChange`, mas `sortChanged` (payload { key, dir }).
+ *  - `@ContentChildren(SuiTableCellDirective)` (ng-template por columna) -> dos
+ *    vias equivalentes:
+ *      (1) `column.renderCell(row, i)` programatico (PROPERTY, lleva callback).
+ *      (2) named slots `cell-<key>` (mismo render para todas las filas) y
+ *          `cell-<key>-<rowIndex>` (HTML por fila) para proyeccion declarativa.
+ *    Si existe render/slot para una columna, gana sobre el texto por defecto.
+ *
+ * GOTCHAS Stencil respetados:
+ *  - `columns`/`rows`/`selectedRows` se pasan como PROPERTY (objetos/Set/callbacks).
+ *  - botones internos clickeables (header sortable) llevan onTouchStart/onTouchEnd
+ *    para el fix iOS :active stuck (los @Listen del host NO cubren hijos internos).
+ *  - `scoped: true` (light DOM): los selectores `:host([data-sui-*])` y los
+ *    sub-componentes heredan tokens del global sin pelear con shadow DOM.
+ */
+export declare class SuiTable {
+    el: HTMLElement;
+    /** Definicion de columnas. Pasar como PROPERTY (`el.columns = [...]`). */
+    columns: SuiTableColumn[];
+    /** Array de datos a mostrar. Pasar como PROPERTY (`el.rows = [...]`). */
+    rows: any[];
+    /** Tamaño: 'small' 48 · 'medium' 64 (default) · 'large' 80 · 'xlarge' 96. */
+    size: SuiTableSize;
+    /** Muestra el skeleton loader. Default `false`. */
+    loading: boolean;
+    /** Mensaje cuando rows esta vacio y loading=false. */
+    emptyMessage: string;
+    /** Filas alternadas con fondo levemente grisado. Default `false`. */
+    striped: boolean;
+    /** Activa la columna de checkbox de seleccion. Default `false`. */
+    selectable: boolean;
+    /**
+     * Key o funcion para identificar filas en seleccion (equivale al `rowKey`
+     * del Angular). Si es funcion, pasar `columns` como PROPERTY.
+     */
+    rowKey: string | ((row: any) => any) | null;
+    /**
+     * Set de keys de filas seleccionadas (espeja el `model(selectedRows)`).
+     * Mutable: el consumer puede setear `el.selectedRows` o leerlo tras un toggle.
+     */
+    selectedRows: Set<any>;
+    /** Columna con sort activo (espeja `model(sortKey)`). Mutable. */
+    sortKey: string | null;
+    /** Direccion de sort activa (espeja `model(sortDir)`). Mutable. */
+    sortDir: SuiTableSortDir;
+    /**
+     * Pista de desborde: degradado en el borde con columnas ocultas y, con mouse,
+     * flechas que desplazan. `false` la apaga (atributo `pista-de-scroll="false"`).
+     */
+    pistaDeScroll: boolean;
+    /** Emite la fila al hacer click en ella (mismo nombre que el output del Angular). */
+    rowClicked: EventEmitter<any>;
+    /** Emite { key, dir } cuando cambia el sort. */
+    sortChanged: EventEmitter<SuiTableSortEvent>;
+    /** Two-way de `sortKey` (el `model` del Angular). */
+    sortKeyChange: EventEmitter<string | null>;
+    /** Two-way de `sortDir` (el `model` del Angular). */
+    sortDirChange: EventEmitter<SuiTableSortDir>;
+    /** Emite el nuevo Set de seleccionados en cada toggle de fila o "todas" (two-way de `selectedRows`). */
+    selectedRowsChange: EventEmitter<Set<any>>;
+    /**
+     * Bump interno para re-render cuando muta `selectedRows` (un Set mutado
+     * in-place no dispara el render por identidad; lo forzamos por State).
+     */
+    private rev;
+    /** Lados con columnas ocultas (lo mide `SuiPistaDeScroll`). */
+    pistaEstado: SuiPistaEstado;
+    /** Skeleton: 5 filas (igual al Angular). */
+    private readonly skeletonRows;
+    private scrollEl?;
+    private pista?;
+    private unbindTouch?;
+    onSelectedRowsChange(): void;
+    onPistaChange(activa: boolean): void;
+    /** Reconexión (el nodo se movió en el DOM): `componentDidLoad` no vuelve a correr. */
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    private conectar;
+    /** Columnas/filas/size cambian el ancho del contenido sin cambiar el del scroller: el ResizeObserver no lo ve. */
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    /** Ciclo de sort: ninguno -> asc -> desc -> ninguno. Emite sortChanged. */
+    private onSort;
+    /** Si la columna tiene sort activo. */
+    private isSortActive;
+    /** Obtiene el rowKey de una fila (key | funcion | indice). */
+    private getRowKey;
+    /** Toggle de seleccion de una fila. Reemplaza el Set (nueva identidad). */
+    private toggleRow;
+    private emitSelection;
+    /** Selecciona / deselecciona todas las filas. */
+    private toggleAll;
+    /** True si TODAS las filas estan seleccionadas. */
+    private get allSelected();
+    /** True si hay seleccion parcial (indeterminate). */
+    private get partialSelected();
+    /** Valor de celda como string ('' si null/undefined). */
+    private getCellValue;
+    /** Sub-texto (2da linea) — '' si la columna no define descriptionKey. */
+    private getCellDescription;
+    /** Prioridad de la celda (default 'regular'). */
+    private cellPriority;
+    /**
+     * min-width inline de una columna para el modo scroll horizontal (mobile).
+     * Precedencia: minWidth explicito > width explicito > undefined. Bloquear el
+     * min-width al width en columnas fijas evita que el default de scroll-mode del
+     * SCSS (120px) ensanche columnas angostas (ej. acciones width:64px).
+     */
+    private colMinWidth;
+    /** True si alguna columna pide sticky (activa el modo scroll-sticky). */
+    private get hasStickyColumn();
+    /**
+     * Detecta si el consumer proyecto contenido custom para una celda via slot
+     * declarativo: `cell-<key>-<rowIndex>` (especifico por fila) o `cell-<key>`
+     * (compartido por todas las filas). Equivale al `getTemplate(key)` del Angular.
+     * Se consulta el light DOM del host (scoped) buscando un hijo con ese `slot`.
+     */
+    private slotNameFor;
+    /** Estilos de ancho/flex inline comunes a header-cell y cell. */
+    private colStyle;
+    private renderHeader;
+    private renderSkeleton;
+    private renderEmpty;
+    private renderCellContent;
+    private renderBody;
+    render(): any;
+}

package/dist/types/components/sui-table/sui-table.data.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Tipos compartidos del `<sui-table>`. 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 los catálogos / interfaces data-driven se aíslan acá.
+ *
+ * Port 1:1 del Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-table/). Misma API
+ * pública (columns / rows / size / loading / selectable / striped / sort),
+ * todas las variantes/sizes/states (eje Priority x State x Misc x Size de
+ * Figma), mismo comportamiento (sort cycle asc->desc->null, selection model,
+ * tooltip en truncate, leading key-icon frame, divider entre filas, scroll
+ * horizontal mobile con sticky column opcional) 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.
+ */
+/**
+ * Eje "Priority" de Figma (SUI Design System 2.0, Table Row Cell). Los 4 valores del eje:
+ *   - 'regular' (default): Paragraph/Small 14/400, color --text/strong-950.
+ *   - 'leading': Label/Small 14/500 + slot de icono circular 40x40 (Key Icon frame).
+ *   - 'passive': texto atenuado (color --text/sub-600) para datos secundarios.
+ *   - 'none': celda sin texto (solo Misc — botones de accion, avatar-group, etc.).
+ *     CSS no-op: la tipografia la dueña el sub-componente proyectado, no la celda.
+ */
+export type SuiTableCellPriority = 'regular' | 'leading' | 'passive' | 'none';
+/**
+ * Eje "Misc" de Figma — las 8 composiciones de sub-componente que una celda
+ * puede contener. SUI las resuelve via slot por celda (`cell-<key>` /
+ * `cell-<key>-<rowIndex>`) o via `renderCell` programatico, pero este tipo
+ * documenta los patrones canonicos para que el consumer sepa que SUI componer:
+ *   - 'button'        -> <sui-button only-icon ...>
+ *   - 'button-group'  -> <sui-button-group>
+ *   - 'toggle'        -> <sui-switch>
+ *   - 'rating'        -> <sui-rating readonly>
+ *   - 'progress'      -> <sui-progress-bar>
+ *   - 'status-badge'  -> <sui-status-badge> | <sui-badge>
+ *   - 'badge-group'   -> varios <sui-badge>
+ *   - 'avatar-group'  -> <sui-avatar-group> | <sui-compact-avatar-group>
+ */
+export type SuiTableCellMisc = 'none' | 'button' | 'button-group' | 'toggle' | 'rating' | 'progress' | 'status-badge' | 'badge-group' | 'avatar-group';
+/**
+ * Nomenclatura de tamaño. La API publica usa small | medium | large
+ * (consumida por orders / drivers / master-preview — NO cambiar).
+ * Mapeo a los nombres de Figma:
+ *   small  -> "Large"    (48px)  — Figma node Table Row Cell size=Large
+ *   medium -> "X-Large"  (64px)  — Figma node Table Row Cell size=X-Large
+ *   large  -> (sin ref Figma, 80px) — extraFeature para tablas muy espaciadas.
+ *   xlarge -> (sin ref Figma, 96px) — extraFeature; sigue el Δ16px/Δ4px de small→medium→large.
+ */
+export type SuiTableSize = 'small' | 'medium' | 'large' | 'xlarge';
+/** Direccion de sort. */
+export type SuiTableSortDir = 'asc' | 'desc' | null;
+/**
+ * Definicion de columna. Espeja 1:1 la `SuiTableColumn<T>` del Angular.
+ *
+ * NOTA Stencil: `renderCell` lleva una funcion (callback) -> debe pasarse como
+ * PROPERTY del elemento (`el.columns = [...]`), no como atributo serializado.
+ */
+export interface SuiTableColumn<T = any> {
+    /** Clave del campo en la fila. Debe ser unico. */
+    key: string;
+    /** Texto del header. Vacio para columnas de accion sin etiqueta. */
+    label: string;
+    /** Ancho CSS: '120px' | '20%' | '1fr'. Si omitido el flex grow es 1. */
+    width?: string;
+    /** Ancho minimo CSS — util con scroll horizontal en mobile. */
+    minWidth?: string;
+    /** Ancho maximo CSS — fuerza truncado de texto largo. */
+    maxWidth?: string;
+    /** Alineacion del contenido de la celda. Default: 'left'. */
+    align?: 'left' | 'center' | 'right';
+    /** Habilita el icono de sorting en el header. */
+    sortable?: boolean;
+    /** Header deshabilitado (label + sort icon en --text/disabled-300). */
+    disabled?: boolean;
+    /**
+     * Eje "Priority" de Figma para el texto plano de la celda (sin render custom).
+     * 'regular' (default) | 'leading' | 'passive' | 'none'. Ver SuiTableCellPriority.
+     * 'none' es no-op a nivel CSS — para celdas misc-only donde el sub-componente
+     * proyectado dueña su propia tipografia.
+     */
+    priority?: SuiTableCellPriority;
+    /**
+     * Clave del campo de la fila usado como segunda linea (sub-texto) de la celda.
+     * Figma (Priority=Leading) muestra un segundo parrafo bajo el titulo:
+     * Paragraph/XSmall 12px/400, color --text/sub-600. Solo se renderiza en el
+     * render de texto plano (sin render custom) y cuando el valor existe.
+     * Aunque pensado para Priority=Leading, funciona con cualquier priority.
+     */
+    descriptionKey?: string;
+    /**
+     * Trunca el texto plano con ellipsis y muestra el valor completo en tooltip
+     * (via <sui-tooltip>). Default false. Solo aplica al render de texto por defecto.
+     */
+    truncate?: boolean;
+    /**
+     * Documenta el patron "Misc" de Figma que esta columna contiene cuando se
+     * proyecta contenido custom. No altera el render — es guia para el consumer.
+     */
+    misc?: SuiTableCellMisc;
+    /**
+     * Fija la columna a la izquierda al hacer scroll horizontal (mobile).
+     * Solo tiene efecto en la primera columna sticky soportada.
+     */
+    sticky?: boolean;
+    /**
+     * Render custom programatico de la celda (equivalente al `ng-template
+     * suiTableCell` del Angular). Recibe la fila completa + indice y debe devolver
+     * un VNode de Stencil (`h(...)`) o un string. Si se define, gana sobre el
+     * render de texto por defecto. Para proyeccion de HTML libre desde el markup
+     * usar slots `cell-<key>` / `cell-<key>-<rowIndex>` en su lugar.
+     *
+     * GOTCHA Stencil: lleva un callback -> pasar `columns` como PROPERTY.
+     */
+    renderCell?: (row: T, rowIndex: number) => any;
+}
+/** Payload del evento `sortChanged`. */
+export interface SuiTableSortEvent {
+    key: string;
+    dir: SuiTableSortDir;
+}
+/**
+ * Touch scroll passthrough (fix Android) — port de `bindTouchScroll` del SUI Angular.
+ *
+ * En Android/Chromium un container con `overflow-x: auto` ABSORBE el touch
+ * vertical y NO lo delega al scroll de la página (verificado en device: ningún
+ * `touch-action` lo arregla). Se maneja por JS: el gesto horizontal queda
+ * NATIVO (`touch-action: pan-x`, con su momentum) y el vertical mueve el scroll
+ * container padre, con fling de fricción exponencial al soltar. Solo afecta
+ * touch; mouse/wheel siguen nativos.
+ *
+ * iOS no lo necesita (WKWebView delega solo y su scroll nativo es superior):
+ * ahí no engancha nada. Devuelve la función que quita los listeners.
+ */
+export declare function bindTouchScroll(el: HTMLElement): () => void;

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

@@ -0,0 +1,118 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiTab, SuiTabsSize, SuiTabsVariant, SuiTabsVerticalStyle } from './sui-tabs.data';
+/**
+ * `<sui-tabs>` — Pestañas en tres modos (segment, line y vertical); obsoleto, ver `@deprecated`.
+ *
+ * Portado 1:1 desde el `SuiTabs` Angular de antes de partirse. Misma API pública
+ * (tabs/active/variant/size/verticalStyle/dividerLabel + evento de cambio),
+ * mismas variantes/sizes/states, mismo comportamiento (segment indicator
+ * animado vía ResizeObserver, disabled no-op, iOS :active fix) y mismos VALORES
+ * exactos (tokens del DS, no hex). El accent del DS es NARANJA brand (#fa7319),
+ * NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO.
+ *
+ * COMPUESTO: cubre tres componentes de Figma bajo un solo `sui-tabs`:
+ *   - variant='segment'  → "Segmented Control [1.1]" (pill iOS, indicador animado)
+ *   - variant='line'     → "Tab Menu Horizontal [1.1]" (underline tabs)
+ *   - variant='vertical' → "Tab Menu Vertical [1.1]" (sidebar nav, Card|List)
+ *
+ * Reusa el primitivo `<sui-icon>` ya portado para leftIcon / chevron (NO
+ * re-implementa el icono). El badge numérico es markup propio del Tab Menu
+ * (Badge [1.1] inline), igual que en el Angular original.
+ *
+ * EXACT specs (Tab Menu pass, homologado contra Figma):
+ *   Segment container (2604:152): bg-weak-50, padding 4px, gap 4px, radius 10px,
+ *     item padding 4px gap 6px radius 6px icon 20px; indicator bg-white-0 con
+ *     shadow del toggle/switch, animado por transform+width (ResizeObserver).
+ *   Horizontal container (3511:9958): border-t/b 1px stroke-soft-200, py-14px,
+ *     gap-24px, items-start, bg-white-0. Item gap icon↔label 6px, gap label↔badge
+ *     4px; default/off sub-600, hover/off strong-950 (icon queda sub-600),
+ *     active/on strong-950 + indicator line primary-base 2px al ras del borde.
+ *   Vertical item (3515:10327/10341): gap 6px, padding 8px, radius-8, w-full,
+ *     label flex-1; active/on bg-weak-50 + strong-950; hover/off bg-weak-50 +
+ *     strong-950; default/off sub-600 (bg-white-0 en Card, transparent en List).
+ *     Container Card (3516:10412): bg-white-0, border 1px stroke-soft-200, p-10px,
+ *     radius-16, shadow-x-small, gap-8px. List: flat, gap-8px.
+ *
+ * `scoped: true` (light DOM, NO shadow): los `<sui-icon>` proyectados heredan el
+ * `currentColor` del item (tokens text/icon por estado) y el `:host([data-sui-*])`
+ * styling per-variant / per-size / per-vstyle aplica. Misma estrategia que el
+ * Angular original.
+ *
+ * API ↔ Angular:
+ *   - `tabs`          → input.required<SuiTab[]>
+ *   - `active`        → model<T>()  (aquí `@Prop mutable`, string; two-way por
+ *                       lectura de `el.active` tras el evento o seteo directo)
+ *   - `variant`       → input ('line' default)
+ *   - `size`          → input ('medium' default)
+ *   - `verticalStyle` → input ('card' default)
+ *   - `dividerLabel`  → input ('' default)
+ *   - evento          → `tabChange` output → aquí `suiTabChange` CustomEvent
+ *
+ * @deprecated El SUI Angular ya no tiene `sui-tabs`: se partió en componentes
+ * propios, que ya están en este paquete. Para código nuevo usar `<sui-tab-chips>`
+ * (chips de filtro o pestañas), `<sui-segmented-control>` (2-4 opciones
+ * excluyentes de un valor), `<sui-tab-menu-horizontal>` (modo `line`) o
+ * `<sui-tab-menu-vertical>` (modo `vertical`).
+ */
+export declare class SuiTabs {
+    el: HTMLElement;
+    /** Entradas a renderizar (data-driven). Requerido. */
+    tabs: readonly SuiTab[];
+    /**
+     * Valor del tab activo (≈ el `model active` de Angular). Mutable: el click
+     * actualiza `this.active` y emite `suiTabChange`; el consumer puede leerlo o
+     * setearlo programáticamente.
+     */
+    active?: string;
+    /** Variante visual. Default `line`. */
+    variant: SuiTabsVariant;
+    /**
+     * Tamaño (extra feature SUI; el Tab Menu de Figma no expone eje size).
+     * Solo afecta line/segment. Default `medium`.
+     */
+    size: SuiTabsSize;
+    /** Estilo del contenedor cuando variant='vertical' (Card|List). Default `card`. */
+    verticalStyle: SuiTabsVerticalStyle;
+    /**
+     * Label de sección renderizado sobre el menú vertical (prop `divider` del
+     * Figma — ej. 'SELECT MENU'). Vacío = sin divider. Solo variant='vertical'.
+     */
+    dividerLabel: string;
+    /** Emitido cuando cambia el tab activo (después de actualizar `active`). */
+    suiTabChange: EventEmitter<string>;
+    /** Estilo inline del indicator del segment (transform + width), animado. */
+    indicatorStyle: {
+        transform: string;
+        width: string;
+    };
+    private resizeObserver?;
+    private trackEl?;
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline para que `:active` dispare/se libere correctamente.
+     * `touchend.blur()` empuja la deselección inmediata. Sin esto `:active`
+     * "stickea" 300-500ms en pages standalone. Igual que el Angular original.
+     */
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    /** Reposiciona el indicator cuando cambia el tab activo (≈ effect del Angular). */
+    onActiveChange(): void;
+    onTabsChange(): void;
+    private attachResizeObserver;
+    private detachResizeObserver;
+    /** setTimeout 0 para esperar el layout (igual al Angular). */
+    private scheduleIndicatorUpdate;
+    /** Mide el item activo vs el track y setea transform/width del indicator. */
+    private updateIndicator;
+    private isActive;
+    private select;
+    private renderSegment;
+    private renderVertical;
+    private renderLine;
+    render(): any;
+}

package/dist/types/components/sui-tabs/sui-tabs.data.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Tipos compartidos del `<sui-tabs>`. 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` rompe el build de TODO el proyecto. El catálogo de tipos
+ * data-driven se aísla aquí.
+ *
+ * Portado 1:1 desde `SuiTab` / `SuiTabsVariant` / `SuiTabsSize` /
+ * `SuiTabsVerticalStyle` del Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-tabs/sui-tabs.ts).
+ *
+ * NOTA sobre el genérico: el Angular es `SuiTabs<T = string>` con `value: T`.
+ * Los custom elements no soportan props genéricas a nivel de atributo HTML, así
+ * que en Stencil el `value` se fija a `string` (igual que el default `T = string`
+ * del Angular). Toda la API pública restante se replica 1:1.
+ */
+export type SuiTabsVariant = 'line' | 'segment' | 'vertical';
+export type SuiTabsSize = 'small' | 'medium' | 'large';
+/** Estilo del contenedor del variant `vertical` (Tab Menu Vertical de Figma). */
+export type SuiTabsVerticalStyle = 'card' | 'list';
+export interface SuiTab {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    /**
+     * Renderiza el ítem solo con icono (sin label visible) — mapea al
+     * Type=Only Icon del Figma Segmented Control. Requiere que `icon` esté
+     * presente. El `label` se usa entonces como `aria-label` para accesibilidad.
+     * Solo aplica al variant='segment'.
+     */
+    iconOnly?: boolean;
+    /**
+     * Badge numérico rojo (state/error/base) renderizado a la derecha del label.
+     * Mapea al prop `number` del Tab Menu de Figma (Horizontal/Vertical Items).
+     * Si es `0`/`undefined` no se renderiza. Solo aplica a variants `line`/`vertical`.
+     */
+    badge?: number;
+    /**
+     * Muestra el chevron de navegación (pill `arrow-right-s-line` 18px) a la
+     * derecha del ítem — prop `rightIcon` del Tab Menu de Figma. Aplica a
+     * `vertical` y `line`. En ambos el chevron va dentro de un pill bg-white-0
+     * p-px radius-full overflow-clip; el pill vertical lleva shadow-x-small y el
+     * horizontal NO (Figma 3515:10332 vs 3511:9882).
+     */
+    chevron?: boolean;
+}

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

@@ -0,0 +1,114 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiTagStyle = 'stroke' | 'gray';
+/** medium 24 (default, Figma) · large 32 · xlarge 40 (mobile). */
+export type SuiTagSize = 'medium' | 'large' | 'xlarge';
+/**
+ * `<sui-tag>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-tag/). Misma API pública
+ * (tagStyle/leading/sublabel/dismissible/interactive/disabled/dismissLabel +
+ * evento dismiss), mismas variantes/estados, mismo comportamiento y mismos
+ * VALORES exactos (tokens del DS, no hex). El accent del DS es NARANJA brand
+ * (#fa7319) — pero el tag NO usa accent: trabaja solo con tokens neutros
+ * (sub-600 / soft-400 / strong-950 / stroke / weak-50), igual que el Angular.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set `Tag [1.1]` (node 431:16147).
+ * Matrix: Type(6) × Style(2: Stroke, Gray) × State(4) × Dismiss(2) = 96 variants.
+ *
+ * EXACT (verificado pixel/token contra Figma):
+ *  - Container: radius 6px (--sui-radius-6), height 24px (py=4 + 16 line).
+ *    OJO: distinto del badge (radius-full). NO confundir.
+ *  - Typography: Label/X Small (Inter Medium 12/16/0, NO uppercase),
+ *    font-feature 'ss11' 1, 'calt' 0, 'liga' 0. Label color text-sub-600.
+ *  - Sublabel: Regular 12/16, color text-soft-400, gap 2px al label.
+ *  - Padding Basic: pl=8 pr=8 py=4. Con dismiss: pl=8 pr=4 py=4.
+ *    Con leading: pl=4 pr=8 py=4 + gap 4px. Con leading Y dismiss: 4px all-around.
+ *
+ *  - State tokens (verified node-by-node):
+ *      Stroke Default  → bg white-0 / border soft-200 / text+icon sub-600
+ *      Stroke Hover    → bg weak-50 / border soft-200 / text+icon sub-600
+ *      Stroke Active   → bg white-0 / border strong-950 / text+icon strong-950
+ *      Stroke Disabled → bg weak-50 / NO border / text+icon disabled-300
+ *      Gray   Default  → bg weak-50 / NO border / text sub-600 / icon soft-400
+ *      Gray   Hover    → bg white-0 / border soft-200 / text sub-600 / icon soft-400
+ *      Gray   Active   → bg white-0 / border strong-950 / text+icon strong-950
+ *      Gray   Disabled → bg weak-50 / NO border / text+icon disabled-300
+ *
+ * ARQUITECTURA — Type via proyección (NO 6 enums con assets baked):
+ *  Los 6 "Type" de Figma (Basic, Left Icon, Avatar, Country, Brand, Company)
+ *  colapsan a: SIN leading element vs CON leading element 16×16 + gap-4. El
+ *  leading se proyecta vía `slot="start"`, así el consumer pasa lo que sea:
+ *    - Left Icon → <sui-icon name="..." slot="start" size="16">
+ *    - Avatar    → <sui-avatar slot="start" ...>  (escalado a 16 por CSS)
+ *    - Country   → <sui-flag name="peru" slot="start">
+ *    - Brand/Company → <img slot="start" ... >
+ *  El prop `leading` (boolean) ajusta padding/gap cuando hay leading element.
+ *
+ * `scoped: true` (light DOM, NO shadow): el contenido proyectado (slot start +
+ * label + close) vive en light DOM y se targetea por `[slot='start']`, igual
+ * que sui-button. Misma estrategia que el Angular original (sin shadow DOM),
+ * evita pelear con shadow boundaries al meter `<sui-icon>` / avatares.
+ *
+ * INTERACTIVITY:
+ *  Figma documenta Hover/Active → el tag PUEDE ser interactivo (clickeable).
+ *  `interactive` habilita los estilos :hover/:active del host. Si es display
+ *  puro, `interactive=false` (default) los suprime. El dismiss button SIEMPRE
+ *  tiene su propio hover independiente del host.
+ *
+ * Slots:
+ *  - `start`  → leading element (icon / avatar / flag / brand·company logo), 16×16.
+ *  - default  → label del tag.
+ */
+export declare class SuiTag {
+    el: HTMLElement;
+    /** Estilo visual. `stroke` = white bg + soft border; `gray` = weak-50 bg, sin border. Default `stroke`. */
+    tagStyle: SuiTagStyle;
+    /** Tamaño: medium 24 (default, Figma) · large 32 · xlarge 40 (mobile). */
+    size: SuiTagSize;
+    /**
+     * True cuando hay un leading element proyectado (icon/avatar/flag/brand) en
+     * `slot="start"`. Ajusta el padding (pl=4) y agrega gap=4 leading↔texto.
+     * El consumer DEBE setearlo cuando proyecta un start slot. Default `false`.
+     */
+    leading: boolean;
+    /** Texto secundario opcional (ej. '(4)'), render en text-soft-400, gap 2px tras el label. */
+    sublabel: string;
+    /** Muestra el botón de cierre (X 16×16) al final del tag. Emite `dismiss`. Default `false`. */
+    dismissible: boolean;
+    /**
+     * El tag entero es clickeable: estilos :hover / :active (Figma States) y, para
+     * teclado y lector, role=button + tab stop + Enter/Espacio hacen click.
+     * Default `false` (display puro, sin rol).
+     */
+    interactive: boolean;
+    /** Estado deshabilitado: override de tokens a disabled-300, pointer-events none. Default `false`. */
+    disabled: boolean;
+    /** aria-label opcional para el botón de cierre. Default 'Quitar'. */
+    dismissLabel: string;
+    /** Emitido al clickear el botón de cierre (solo si dismissible y no disabled). */
+    dismiss: EventEmitter<void>;
+    /** True cuando hay sublabel no vacío (espeja el `showsSublabel` computed del Angular). */
+    showsSublabel: boolean;
+    componentWillLoad(): void;
+    recomputeSublabel(): void;
+    /**
+     * Click del close. Detiene la propagación para no disparar el click del host
+     * (cuando el tag entero es interactivo) y suprime el emit si está disabled.
+     */
+    private onDismiss;
+    private spacePressed;
+    /** Solo el host interactivo y con el foco en él (no la X de adentro). */
+    private teclaMia;
+    onKeydown(event: KeyboardEvent): void;
+    /** Espacio hace click al soltar (como un <button> nativo). */
+    onKeyup(event: KeyboardEvent): void;
+    /**
+     * iOS WKWebView fix con listeners PASIVOS (SuiToque del SUI Angular): la
+     * presencia de touchstart engancha el pipeline táctil; touchend.blur() suelta
+     * el :active de la X.
+     */
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    render(): any;
+}