@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/types/components/sui-otp-input/sui-otp-input.d.ts

@@ -0,0 +1,108 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiOtpInputType = 'number' | 'text';
+/** Tamaño de la celda (extensión SUI 03-10-2026): large 80×64 · medium 52×56 · small 44×48. */
+export type SuiOtpInputSize = 'large' | 'medium' | 'small';
+/**
+ * `<sui-otp-input>` — SUI Design System (SUI Design System 2.0). COMPUESTO (OTP / Digit Input).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-otp-input/). Misma API
+ * pública (length / type / disabled / error / ariaLabel / value + completed),
+ * TODOS los estados (default / hover / focus / filled / disabled / error) y el
+ * MISMO comportamiento (auto-avance, backspace que retrocede, flechas, paste que
+ * distribuye, filtro number/text, select-on-focus) con los MISMOS VALORES exactos
+ * (tokens del DS, NO hex). El accent del DS es NARANJA brand (#fa7319 =
+ * --sui-primary-base), NO el azul de Figma — aquí el accent no aparece porque el
+ * Figma canon del Digit Input usa stroke-strong-950 en focus (NO primary).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component "Digit Input" (node 429:5172,
+ * component set de 6 estados). Specs verificadas:
+ *   - Celda: 80x64px (padding 16 vertical / 8 horizontal), radius-10.
+ *   - Dígito: Title/H5 (Inter Display Medium 24/32/0), font-feature ss11 1.
+ *   - Default: bg-white-0, border 1px stroke-soft-200, regular-shadow-x-small.
+ *   - Hover (vacía): bg-weak-50, sin border ni shadow.
+ *   - Focus: bg-white-0, border 1px stroke-strong-950 + important-focus ring
+ *     (2px white + 4px slate-alpha-16). NOTA: Figma usa strong-950 en focus, NO
+ *     primary — se respeta Figma por consistencia con el resto del DS.
+ *   - Filled: bg-white-0, border stroke-soft-200, texto strong-950.
+ *   - Disabled: bg-weak-50, sin border, texto disabled-300, not-allowed.
+ *   - Error: border 1px state-error-base; focus mantiene ring rojo (red-alpha-16).
+ *
+ * -- DIVERGENCIAS vs el stack Angular --------------------------------------------
+ *  1. `model<string>` + `ControlValueAccessor` (NG_VALUE_ACCESSOR) no existen en
+ *     Stencil. Se reemplazan por `@Prop() value` (controlled) + `@Event()
+ *     valueChange`. El consumer escucha `valueChange` y reescribe el prop `value`
+ *     (idéntico al modo `[(value)]` del Angular en uso normal). `writeValue` /
+ *     `setDisabledState` del CVA se cubren con los props `value` / `disabled`.
+ *  2. El `effect()` que reajusta el array de celdas al cambiar length/value se
+ *     reemplaza por `@Watch('value')` + `@Watch('length')` + sync inicial en
+ *     `componentWillLoad`.
+ *  3. `viewChildren` + `ElementRef` (focus por ref) se reemplaza por
+ *     `this.el.querySelectorAll('input.sui-otp-input__cell')` — el host es scoped
+ *     (light DOM) así que las celdas son alcanzables desde el host element.
+ *
+ * GOTCHA Stencil: el @Prop público se llama `ariaLabel` (igual al Angular) pero
+ * NO se renderiza como atributo `aria-label` automático del Host por colisión con
+ * el reflect; se aplica explícito en el Host. Se stripea el atributo nativo
+ * `title` del Host (patrón canon Ontop, ver CLAUDE.md).
+ *
+ * `scoped: true` (light DOM, NO shadow): igual que sui-input/sui-button. Permite
+ * que las celdas hereden los tokens/tipografía del global y que el host pueda
+ * hacer querySelectorAll de sus inputs internos para el focus management.
+ */
+export declare class SuiOtpInput {
+    el: HTMLElement;
+    /** Cantidad de celdas. Default 6. */
+    length: number;
+    /** Tamaño de la celda: large 80×64 (guía, default) · medium 52×56 · small 44×48. */
+    size: SuiOtpInputSize;
+    /**
+     * `'number'` restringe a [0-9] e inputmode='numeric'; `'text'` acepta cualquier
+     * char (sin espacios) e inputmode='text'. Default `'number'`.
+     */
+    type: SuiOtpInputType;
+    /** Deshabilita todas las celdas. Default `false`. */
+    disabled: boolean;
+    /** Pinta todas las celdas con borde de error. Default `false`. */
+    error: boolean;
+    /** aria-label del grupo. Default 'Código de verificación'. */
+    ariaLabel: string;
+    /**
+     * Valor (string concatenado de todas las celdas). Controlled: el consumer
+     * escucha `valueChange` y reescribe este prop. Equivale al `[(value)]` +
+     * `writeValue` del CVA Angular.
+     */
+    value: string;
+    /** Estado interno: un caracter por celda. length === this.length. */
+    cells: string[];
+    /** Emite el string concatenado en cada cambio (auto-avance, paste, backspace). */
+    valueChange: EventEmitter<string>;
+    /** Emite el value cuando TODAS las celdas están llenas. */
+    completed: EventEmitter<string>;
+    componentWillLoad(): void;
+    /** value externo cambió → re-distribuir en celdas (espeja el effect Angular). */
+    onValueChange(next: string): void;
+    /** length cambió → re-dimensionar el array de celdas conservando el value. */
+    onLengthChange(): void;
+    /** String -> array de `len` celdas, filtrando por type. */
+    private normalize;
+    /** number -> solo [0-9]; text -> todo sin espacios. */
+    private filterChars;
+    /** inputmode según type. */
+    private get inputMode();
+    /** Emite el string concatenado y dispara `completed` si todo está lleno. */
+    private emit;
+    /** Lista de inputs internos (light DOM, alcanzables desde el host). */
+    private cellEls;
+    private focusCell;
+    /** input event de una celda — toma el último char válido y auto-avanza. */
+    private onCellInput;
+    /** keydown — backspace, flechas, y bloqueo de no-dígitos en type='number'. */
+    private onCellKeydown;
+    /** paste — distribuye los chars pegados desde la celda enfocada. */
+    private onCellPaste;
+    /** focus — selecciona el contenido para sobrescribir fácil. */
+    private onCellFocus;
+    private get indices();
+    render(): any;
+}

package/dist/types/components/sui-page-header/sui-page-header.d.ts

@@ -0,0 +1,60 @@
+/**
+ * `<sui-page-header>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-page-header/). Header
+ * compuesto reutilizable que cada page coloca arriba del todo: title (h1),
+ * subtitle opcional y un slot `actions` a la derecha (botones, badges, etc.).
+ *
+ * Es un COMPUESTO: el slot `actions` consume los primitivos ya portados del DS
+ * (`<sui-button>`, `<sui-badge>`, `<sui-avatar>`, `<sui-icon>`, …). El header NO
+ * re-implementa ninguno de esos — solo provee el layout (title/subtitle a la
+ * izquierda, actions a la derecha) y absorbe el spacing semántico vertical.
+ *
+ * El accent del DS es NARANJA brand (#fa7319), NO el azul de Figma.
+ *
+ * Layout (homologado vs Figma):
+ *  - Mobile (≤767px): flex-column, gap 12, padding 24px 0. Title + subtitle
+ *    ocupan toda la fila; las actions bajan abajo (no se aprietan al subtítulo).
+ *  - Desktop (≥768px): flex-row, align-items flex-end, space-between, gap 16,
+ *    padding 32px 0 16px. Title/subtitle a la izquierda, actions a la derecha.
+ *  - Sin padding lateral: el container de la página provee el padding horizontal.
+ *  - Title: Inter SemiBold 600, 24px mobile / 28px desktop, line 1.2, ls -0.012em,
+ *    color --sui-text-strong-950.
+ *  - Subtitle: Inter Regular 400, 14px, line 1.4, color --sui-text-sub-600,
+ *    margen-top 4px.
+ *  - `sticky`: position sticky top 0 con fondo --sui-bg-white-0.
+ *
+ * Slots:
+ *  - default  → contenido principal opcional (raro; normalmente la page lo
+ *               renderiza fuera del header).
+ *  - `actions` → botones / badges a la derecha (siempre visibles).
+ *
+ * GOTCHA Stencil: el @Prop `title` del Angular es un nombre reservado del DOM
+ * (renderiza el tooltip nativo gris) → renombrado a `heading`. El atributo nativo
+ * `title` del host se quita en componentWillLoad (vale como `heading`).
+ * El heading es el <h1> (sin aria-label en el host, igual que el Angular).
+ *
+ * `scoped: true` (light DOM, NO shadow): así el contenido proyectado en `actions`
+ * (que son otros custom elements `<sui-button>`, etc.) translan estilos limpio y
+ * el `:empty` del wrapper de actions funciona. Misma estrategia que el Angular.
+ */
+export declare class SuiPageHeader {
+    el: HTMLElement;
+    /**
+     * Título visible (h1). Renombrado desde el `title` del Angular: `title` es un
+     * @Prop reservado del DOM (dispara el tooltip nativo gris). En HTML el atributo
+     * es `heading`. Si el consumer pone `title` en el host, vale como `heading` y
+     * se quita (sin tooltip nativo).
+     */
+    heading: string;
+    /** Texto secundario opcional debajo del título. Default `null`. */
+    subtitle: string | null;
+    /**
+     * Si `true`, el header queda `position: sticky` top 0 mientras se scrollea
+     * (con fondo blanco). Default `false`: scrollea con el contenido.
+     */
+    sticky: boolean;
+    componentWillLoad(): void;
+    render(): any;
+}

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

@@ -0,0 +1,110 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiPaginationSize, SuiPaginationType, SuiPaginationInfoFormat } from './sui-pagination.types';
+/**
+ * `<sui-pagination>` — SUI Design System (SUI Design System 2.0). COMPLEJO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-pagination/). Misma API
+ * publica, TODAS las variantes/sizes/states, mismo comportamiento (elipsis
+ * dinamicas, navegacion con clamping, teclado, panel advanced de page-size) y
+ * mismos VALORES exactos (tokens del DS). El accent del DS es NARANJA brand
+ * (#fa7319), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ *   PaginationCells 513:3681 (8 estados) - PaginationGroup 513:3892 (3 types)
+ *
+ * SPECS homologados (verificados contra Figma 2026-05-29):
+ *   - Celda: padding 6px, contenido 20px -> footprint efectivo 32px (medium) /
+ *     28px (small). radius-8 (basic/group) o radius-full (full-radius, solo en
+ *     celdas de numero/elipsis). Font Label/Small 14px/500.
+ *   - Estado Default:  bg/white-0 + border 1px stroke/soft-200, text/sub-600
+ *   - Estado Hover:    bg/weak-50, text/sub-600 (solo cambia el fill)
+ *   - Estado Selected: bg/white-0 + border stroke/soft-200, text/strong-950
+ *     (Figma usa gris suave, NO el accent primary)
+ *   - Estado Disabled (por celda): text/disabled-300, sin bg
+ *   - Hover sobre celda activa: bg/weak-50
+ *   - Elipsis: celda con MISMO border + padding que los numeros (no span suelto)
+ *   - Nav buttons: prev (arrow-left-s-line) / next (arrow-right-s-line),
+ *     first (arrow-left-double-line) / last (arrow-right-double-line)
+ *   - Panel advanced: sui-compact-select "N / page" a la derecha para page-size
+ *   - Info text: Figma "Page X of Y"; el SUI default es "Mostrando X-Y de Z"
+ *     (infoFormat controla cual). Paragraph/Small 14px/400 text/sub-600.
+ *
+ * Reuso de familia: el panel advanced de page-size reusa el `<sui-compact-select>`
+ * ya portado (igual que el Angular usaba SuiCompactSelect). Los page-size se
+ * mapean a items con `value` string (la version Stencil de SuiCompactSelectItem
+ * usa value:string) y se parsean de vuelta a number en el handler.
+ *
+ * GOTCHAS de API (renombres / Stencil):
+ *  - El Angular usaba `model()` two-way para `currentPage` y `pageSize`. En web
+ *    components son `@Prop({ mutable: true })` + se reflejan los cambios via los
+ *    eventos `pageChange` / `pageSizeChange` (mismos nombres que los outputs del
+ *    Angular). El consumer escucha el evento y re-bindea el prop si quiere control
+ *    externo.
+ *  - `total` no acepta required en Stencil; default 0 (sin paginas -> totalPages 1).
+ *
+ * iOS WKWebView :active fix: el host escucha touchstart/touchend (la presencia del
+ * binding engage el touch pipeline; touchend blur fuerza la deseleccion del
+ * :active stuck en los botones clickeables internos).
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-sui-*])`
+ * translan limpio y el `<sui-compact-select>` proyectado monta su panel flotante
+ * sin pelear con shadow DOM. Misma estrategia que el Angular original.
+ */
+export declare class SuiPagination {
+    el: HTMLElement;
+    /** Total de items. Default `0`. */
+    total: number;
+    /** Items por pagina. Two-way: reflejar el cambio via `pageSizeChange`. Default `10`. */
+    pageSize: number;
+    /** Pagina actual (1-indexed). Two-way: reflejar el cambio via `pageChange`. Default `1`. */
+    currentPage: number;
+    /** Cuantas paginas a cada lado del actual (extraFeature SUI). Default `1`. */
+    siblingCount: number;
+    /** Muestra el texto informativo (extraFeature SUI). Default `true`. */
+    showInfo: boolean;
+    /** Tamano (extraFeature SUI). Default `medium`. */
+    size: SuiPaginationSize;
+    /** Variant visual homologado Figma. Default `basic`. */
+    type: SuiPaginationType;
+    /** Muestra los botones ir-a-primera / ir-a-ultima. Default `false`. */
+    firstLast: boolean;
+    /** Muestra los chevrons prev / next. Default `true`. */
+    nextPrevious: boolean;
+    /** Formato del texto informativo. Default `items`. */
+    infoFormat: SuiPaginationInfoFormat;
+    /**
+     * Opciones del compact-select de page size. Si vacio, NO se renderea el panel
+     * advanced. Pasar como array via la propiedad `.pageSizeOptions` (NO atributo
+     * string). Default `[]`.
+     */
+    pageSizeOptions: number[];
+    /** Emite el nuevo numero de pagina (equivale al output `pageChange` del Angular). */
+    pageChange: EventEmitter<number>;
+    /** Emite el nuevo page size cuando el user lo cambia. */
+    pageSizeChange: EventEmitter<number>;
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    onPagingInputsChange(): void;
+    private get totalPages();
+    private get rangeStart();
+    private get rangeEnd();
+    private get hasPrev();
+    private get hasNext();
+    private get displayPages();
+    /** Items del compact-select de page size (value string para la version Stencil). */
+    private get pageSizeItems();
+    /** Item actualmente seleccionado en el compact-select (matchea pageSize). */
+    private get selectedPageSizeItem();
+    private goTo;
+    private prev;
+    private next;
+    private first;
+    private last;
+    /** Cambio de page size desde el compact-select del panel advanced. */
+    private onPageSizeSelected;
+    /** Keyboard navigation entre botones de pagina (Enter / Space). */
+    private onKeydown;
+    private renderNavButton;
+    render(): any;
+}

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

@@ -0,0 +1,33 @@
+/**
+ * Datos / catalogos / helpers de `<sui-pagination>`.
+ *
+ * Separado del .tsx porque Stencil prohibe `export const/function/enum` junto al
+ * `@Component` (rompe el build entero). Aqui viven los catalogos de variantes y
+ * el algoritmo puro de elipsis; el .tsx importa lo que necesita sin re-exportar
+ * con llaves.
+ *
+ * Portado 1:1 desde el Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-pagination/).
+ */
+/** Sizes soportados (extraFeature SUI): medium (footprint 32) / small (28). */
+export declare const SUI_PAGINATION_SIZES: readonly ["small", "medium"];
+/** Types homologados Figma: basic / full-radius / group. */
+export declare const SUI_PAGINATION_TYPES: readonly ["basic", "full-radius", "group"];
+/** Formato del texto informativo. */
+export declare const SUI_PAGINATION_INFO_FORMATS: readonly ["items", "pages"];
+/**
+ * Algoritmo de elipsis dinamicas (puro, portado 1:1 del computed `displayPages`
+ * del Angular). Retorna un array de numeros de pagina, donde `null` representa
+ * una celda de elipsis.
+ *
+ * Ejemplos:
+ *   [1, 2, 3, 4, 5]                     (cuando totalPages <= maxVisible)
+ *   [1, null, 4, 5, 6, null, 20]        (elipsis en ambos lados)
+ *   [1, 2, 3, 4, 5, null, 20]           (elipsis solo a la derecha)
+ *   [1, null, 16, 17, 18, 19, 20]       (elipsis solo a la izquierda)
+ *
+ * @param total    total de paginas (>= 1)
+ * @param current  pagina actual (1-indexed)
+ * @param siblings paginas a cada lado del actual
+ */
+export declare function computeDisplayPages(total: number, current: number, siblings: number): (number | null)[];

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

@@ -0,0 +1,14 @@
+export type SuiPaginationSize = 'small' | 'medium';
+/**
+ * Visual variant — homologado contra Figma SUI Design System 2.0.
+ *   - `basic`       celdas individuales con border-radius (radius-8 por size) y gap
+ *                   entre ellas. (default)
+ *   - `full-radius` idem basic pero cada celda de numero/elipsis es circular
+ *                   (radius-full). Los nav buttons conservan radius-8.
+ *   - `group`       todas las celdas comparten un unico contenedor con border
+ *                   exterior y dividers interiores (sin gap, overflow:clip +
+ *                   overlap de borders via margin negativo).
+ */
+export type SuiPaginationType = 'basic' | 'full-radius' | 'group';
+/** Formato del texto informativo. */
+export type SuiPaginationInfoFormat = 'items' | 'pages';

package/dist/types/components/sui-password-strength/sui-password-strength.d.ts

@@ -0,0 +1,62 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiPasswordStrengthLevel = 'empty' | 'weak' | 'moderate' | 'strong';
+/**
+ * Condición de la checklist bajo la barra.
+ *  - `label`: texto visible (requerido).
+ *  - `test`:  RegExp o predicado sobre `value` — evalúa si la condición se cumple.
+ *  - `met`:   override manual — si está definido gana sobre `test` (útil cuando el
+ *             consumer evalúa las reglas afuera, ej. validación de backend).
+ */
+export interface SuiPasswordStrengthCondition {
+    label: string;
+    test?: RegExp | ((value: string) => boolean);
+    met?: boolean;
+}
+/**
+ * `<sui-password-strength>` — SUI Design System 2.0 · Password Strength.
+ *
+ * Portado desde el `SuiPasswordStrength` Angular (sui-design-system).
+ * Figma: 8p1k72aKKvzJV4XcvPS4VO — frame "Password Strength [1.1]" (327:8202).
+ *
+ * Barra segmentada de 3 niveles + caption + checklist de condiciones. 4 estados:
+ *  - Empty: 0 segmentos · todas las condiciones con check gris.
+ *  - Weak: segmento 1 (error) · cumplidas check verde, fallidas close-circle gris.
+ *  - Moderate: segmentos 1-2 (error + warning).
+ *  - Strong: 3 segmentos (error + warning + success).
+ * Cada segmento tiene color FIJO por posición: en Strong la barra es
+ * roja+naranja+verde, no toda verde.
+ *
+ * Derivación del nivel (si `strength` no se fuerza): `value` vacío → empty;
+ * todas cumplidas → strong; cumplidas ≥ mitad → moderate; resto → weak.
+ *
+ * `conditions` y `levelLabels` son objetos (llevan RegExp/funciones): se pasan
+ * por propiedad JS, no por atributo. Los textos default están en español; el
+ * Angular los toma de `provideSuiTextos` — aquí no hay DI: se pisan por props.
+ *
+ * A11y: la barra es role="progressbar" (valuemin 0, valuemax 3, valuenow =
+ * segmentos, valuetext = label del nivel); la checklist es <ul>/<li>.
+ */
+export declare class SuiPasswordStrength {
+    /** Contraseña a evaluar — deriva las condiciones cumplidas y el nivel. */
+    value: string;
+    /** Override manual del nivel — presente gana sobre el derivado de `value`. */
+    strength: SuiPasswordStrengthLevel | null;
+    /** Caption sobre la checklist. `''` = oculto. Default «Debe contener al menos:». */
+    caption: string | null;
+    /** Checklist de condiciones (propiedad JS). `[]` = sin checklist. Sin pasar: las 3 default. */
+    conditions: SuiPasswordStrengthCondition[] | null;
+    /** Textos del nivel para lectores de pantalla (merge sobre los defaults ES). */
+    levelLabels: Partial<Record<SuiPasswordStrengthLevel, string>>;
+    /** Label accesible del progressbar. Default «Seguridad de la contraseña». */
+    ariaLabel: string | null;
+    /** Emite el nivel resuelto cada vez que cambia (no emite el inicial). */
+    strengthChange: EventEmitter<SuiPasswordStrengthLevel>;
+    private previousStrength;
+    private get conditionStates();
+    /** Nivel resuelto: override explícito o derivado de las condiciones. */
+    private resolve;
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    private runTest;
+    render(): any;
+}

package/dist/types/components/sui-password-strength/sui-password-strength.data.d.ts

@@ -0,0 +1,5 @@
+import type { SuiPasswordStrengthCondition, SuiPasswordStrengthLevel } from './sui-password-strength';
+/** Condiciones default — las 3 del set de Figma, en español (tuteo). */
+export declare const SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS: SuiPasswordStrengthCondition[];
+/** Labels por nivel para el `aria-valuetext` (configurables vía `levelLabels`). */
+export declare const SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS: Record<SuiPasswordStrengthLevel, string>;

package/dist/types/components/sui-payment-icon/sui-payment-icon.d.ts

@@ -0,0 +1,49 @@
+import type { SuiKeyIconSize } from '../sui-key-icon/sui-key-icon';
+import type { SUI_PAYMENT_ICON_TYPES } from './sui-payment-icon.data';
+export type SuiPaymentIconType = (typeof SUI_PAYMENT_ICON_TYPES)[number];
+/** Tamaños del contenedor: reusa la escala canon de sui-key-icon (32/40/48/56/64). */
+export type SuiPaymentIconSize = SuiKeyIconSize;
+/**
+ * `<sui-payment-icon>` — SUI Design System 2.0.
+ *
+ * Portado desde el `SuiPaymentIcon` Angular (sui-design-system). Ícono circular
+ * que identifica el TIPO de un pago/servicio (agua, gas, luz, donación,
+ * internet, teléfono, alquiler, impuestos) en listas de pagos, historial de
+ * transacciones y selectores de categoría de servicio.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — set "Payment Icons [1.1]" (nodo 2942:9995).
+ *
+ * NO es un set de assets: cada variant del Figma es un círculo radius-full con
+ * bg `state/*-lighter` + un glyph RemixIcon fill de 20px en el `state/*-base`,
+ * la anatomía exacta de `<sui-key-icon style-variant="lighter">`. Por eso este
+ * componente es un wrapper semántico que COMPONE `<sui-key-icon>` y mapea
+ * `type` → { ícono, color }:
+ *
+ *   water → drop-fill (teal) · gas → fire-fill (red) ·
+ *   electricity → lightbulb-flash-fill (yellow) · donate → hand-heart-fill (pink) ·
+ *   internet → wifi-fill (blue) · phone → cellphone-fill (orange) ·
+ *   rent → home-smile-fill (green) · tax → file-list-fill (purple)
+ *
+ * El set de Figma solo define el tamaño 40; los demás (32/48/56/64) heredan la
+ * escala de sui-key-icon.
+ *
+ * Display-only. Decorativo por default (`aria-hidden`); con `ariaLabel` se
+ * anuncia como imagen (`role="img"`). El atributo nativo `title` del host se
+ * borra (sin tooltip gris del browser).
+ */
+export declare class SuiPaymentIcon {
+    el: HTMLElement;
+    /** Tipo de pago/servicio (ver `SUI_PAYMENT_ICON_TYPES`). Define ícono + color. Requerido. */
+    type: SuiPaymentIconType;
+    /** Tamaño del contenedor en px. Canon Figma = 40; la escala es la de sui-key-icon. */
+    size: SuiPaymentIconSize;
+    /**
+     * Aria-label opcional. Si se provee, se anuncia como imagen (`role="img"`);
+     * si no, es decorativo (`aria-hidden="true"`) — el caso típico, porque el
+     * ícono acompaña un texto que ya nombra el servicio.
+     */
+    ariaLabel: string | null;
+    /** Strip del `title` nativo del host (canon SUI: sin tooltip gris del browser). */
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/sui-payment-icon/sui-payment-icon.data.d.ts

@@ -0,0 +1,2 @@
+/** Los 8 tipos canon del set de Figma (mismo orden que el frame). */
+export declare const SUI_PAYMENT_ICON_TYPES: readonly ["water", "gas", "electricity", "donate", "internet", "phone", "rent", "tax"];

package/dist/types/components/sui-period-range/sui-period-range.d.ts

@@ -0,0 +1,79 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/** medium 36 (default) · large 44 (piso táctil del teléfono, dueño 04-10-2026). */
+export type SuiPeriodRangeSize = 'medium' | 'large';
+/**
+ * `<sui-period-range>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-period-range/). Misma API
+ * publica, TODOS los estados (Default / Hover / Active / Disabled), mismo
+ * comportamiento (disabled gatea el click; data-attrs del host como drivers del
+ * SCSS; aria-pressed espeja active) y los MISMOS VALORES exactos via tokens del
+ * DS (no hex sueltos). El accent del DS es NARANJA brand
+ * (#fa7319 = --sui-primary-base), NUNCA el azul de Figma — aca el accent solo
+ * aparece en el focus-ring (primary-alpha-10).
+ *
+ * Preset chip del sidebar del Range Picker (Hoy / Últimos 7 días / Este mes /
+ * etc). Renderiza un label clickeable que cuando se hace active aplica el
+ * preset. Hermano de `<sui-day-cell>` / `<sui-day-label>` dentro de la familia
+ * del Range Picker; comparte el patron de ancho fijo (168px aca) para no
+ * estirarse con el sidebar parent.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Frame 443:336 ("Period Range [1.1]") — 3 states (Default / Hover / Active).
+ *
+ * EXACT (pulled from Figma 443:341 — Active state):
+ *   Container:
+ *     w-168 (default), height-36
+ *     padding: py-8, pl-12, pr-8 (asimetrico — mas espacio post-label)
+ *     radius-8
+ *     bg weak-50 (active)
+ *     items-center, justify-center
+ *   Label:
+ *     Inter Medium 14/20/-0.6%, color text-strong-950 (active)
+ *     flex-[1_0_0] (expande)
+ *     font-feature-settings: 'ss11' 1, 'calt' 0, 'liga' 0
+ *
+ * Estados (data-sui-* del host) — VERIFIED via MCP set 443:336:
+ *   default  → bg transparent, text sub-600 (443:335; el SUI usa transparent en
+ *              vez de white-0, visualmente identico sobre el panel blanco y no
+ *              tapa el panel)
+ *   hover    → bg weak-50, text sub-600 (443:337; el texto NO sube a strong-950,
+ *              solo el Active lo hace)
+ *   active   → bg weak-50, text strong-950 (443:341)
+ *   disabled → opacity 0.5, cursor not-allowed
+ *
+ * GOTCHAS de API (Stencil):
+ *  - Fix iOS :active stuck: listeners touchstart/touchend PASIVOS en el host
+ *    (homólogo del `SuiToque` del Angular); el touchend suelta el foco del botón.
+ *  - El evento se llama `clicked`, igual que el output del Angular.
+ *
+ * `scoped: true` (light DOM, NO shadow): asi los selectores `:host([data-sui-*])`
+ * translan limpio y el chip hereda font/tokens del global. Misma estrategia que
+ * el resto de la familia portada.
+ *
+ * Usage:
+ *   <sui-period-range label="Hoy"></sui-period-range>
+ *   <sui-period-range label="Últimos 7 días" active></sui-period-range>
+ *   <sui-period-range label="Este año" disabled></sui-period-range>
+ */
+export declare class SuiPeriodRange {
+    /**
+     * Label visible del preset (ej. "Hoy", "Último mes").
+     * Requerido en la API Angular (`input.required`); aca default `''` y el render
+     * queda vacio si no se pasa.
+     */
+    label: string;
+    /** Estado active — bg weak-50 visible + text strong-950, indica preset seleccionado. */
+    active: boolean;
+    /** Disabled — no clickeable (opacity 0.5, cursor not-allowed). */
+    disabled: boolean;
+    /** medium 36 (default) · large 44 (piso táctil, dueño 04-10-2026). */
+    size: SuiPeriodRangeSize;
+    /** Emitido al click cuando NO esta disabled (igual que el `clicked` del Angular). */
+    clicked: EventEmitter<void>;
+    alTocar(): void;
+    alSoltar(event: TouchEvent): void;
+    private onClick;
+    render(): any;
+}

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

@@ -0,0 +1,124 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiPopoverPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'right-top' | 'right-center' | 'right-bottom' | 'left-top' | 'left-center' | 'left-bottom';
+/** Tipo de footer del popover (Figma 4456:83048). `none` = sin footer. */
+export type SuiPopoverFooter = 'none' | 'stretch' | 'text-stepper' | 'stepper';
+/** Botones del pie: `small` 36 (Figma, default) · `medium` 40 (03-10-2026) · `large` 48 (teléfono, 04-10-2026). */
+export type SuiPopoverSize = 'small' | 'medium' | 'large';
+/** Progreso del stepper del pie. */
+export interface SuiPopoverStep {
+    current: number;
+    total: number;
+}
+/**
+ * `<sui-popover>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (sui-design-system/.../src/lib/sui-popover/). Misma API
+ * pública, todas las variantes (12 positions × 4 footers), mismo comportamiento
+ * 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
+ *   Popover [1.1]        4431:81573  (12 position variants)
+ *   Popover Footer [1.1] 4456:83048  (Stretch / Text Stepper / Stepper)
+ *   Stepper Dot [1.1]    479:14399
+ *
+ * Arquitectura: panel PRESENTACIONAL standalone. El consumer lo monta donde
+ * necesite (overlay propio, dropdown, inline para onboarding tours, etc.). NO
+ * incluye lógica de trigger/hover propia — eso queda a cargo del consumer.
+ *
+ * EXACT specs (confirmados contra Figma 2026-05-29):
+ *   Panel:    width 320, bg-white-0, border 1px stroke-soft-200, radius-16,
+ *             overflow:clip, shadow regular-shadow/medium.
+ *   Content:  padding 20, gap 16 column; border-bottom 1px stroke-soft-200 SOLO
+ *             cuando hay footer (separador).
+ *   Header icon: círculo 48×48 (p-12 + icon 24), bg-white-0, border 1px soft-200,
+ *             radius-full, shadow regular-shadow/x-small.
+ *   Title:    Label/Medium 16/500/24 ls -0.011em text-strong-950.
+ *   Desc:     Paragraph/Small 14/400/20 ls -0.006em text-sub-600.
+ *   Dismiss:  compact-button absolute top16 right16, p-2, radius-6, close-line 20.
+ *   Footer:   padding 16 20, gap 12.
+ *     - Stretch:      ambos buttons flex:1 (full-width). Sin indicator.
+ *     - Text Stepper: «Paso X de N» + actions justify-end, buttons 80px.
+ *     - Stepper:      dot indicator (N dots 8×8) + actions justify-end, buttons 80px.
+ *   Footer buttons: `<sui-button>` reales (Atrás stroke neutral, Siguiente filled
+ *     primary), size small 36 por default · medium 40 · large 48 (teléfono).
+ *   Dismiss: `<sui-compact-button>` ghost large, área táctil 40 (::before -8).
+ *   Tail: triángulo isósceles 16×8 seamless (mismo mecanismo que sui-tooltip:
+ *     dos triángulos clip-path superpuestos). 12 variantes vía CSS. 32px de
+ *     inset lateral/vertical en los extremos.
+ *
+ * GOTCHAS de API (renombres vs el Angular original):
+ *  - `title` → `heading` (`title` es reservado del DOM, dispara tooltip nativo
+ *    gris no-estilizable). Es el aria-label del host (role dialog); un `title`
+ *    en el host vale como `heading` y se quita.
+ *  - `step` es un objeto `{ current, total }`: se pasa por property.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * translan limpio y el consumer puede proyectar `<sui-icon>` / contenido en el
+ * slot `body` sin pelear con shadow DOM. Misma estrategia que el Angular original.
+ *
+ * iOS WKWebView :active fix: el host escucha touchstart/touchend (presencia del
+ * listener engage el touch pipeline; pasivos, para no frenar el scroll).
+ *
+ * Slots:
+ *  - `body` → reemplaza title/description por contenido rico proyectado.
+ */
+export declare class SuiPopover {
+    el: HTMLElement;
+    /** Placement axis del tail relativo al trigger (12 variantes Figma). Default `top-left`. */
+    position: SuiPopoverPosition;
+    /** Mostrar la cola/flecha (tail). Default `true`. */
+    tail: boolean;
+    /** RemixIcon name del header icon (ej. 'user-6-line'). `null` / `''` = sin icono. */
+    icon: string | null;
+    /**
+     * Título del popover (Label/Medium). Renombrado de `title` del Angular — `title`
+     * es reservado del DOM (tooltip nativo). Es el nombre accesible del diálogo. Si
+     * el host trae `title`, vale como `heading` y se quita.
+     */
+    heading: string;
+    /** Descripción (Paragraph/Small). `null` / `''` = sin descripción. */
+    description: string | null;
+    /** Mostrar el botón X de dismiss (top-right). Default `true`. */
+    dismissIcon: boolean;
+    /** Tipo de footer. `none` oculta el footer y el separador. Default `stretch`. */
+    footer: SuiPopoverFooter;
+    /** Texto del botón secundario (izquierda). En Angular sale de provideSuiTextos. */
+    backLabel: string;
+    /** Texto del botón primario (derecha). En Angular sale de provideSuiTextos. */
+    nextLabel: string;
+    /** Renderear el botón secundario (Atrás). Si false, solo se muestra el primario. */
+    doubleButton: boolean;
+    /**
+     * Progreso del stepper `{ current (1-based), total }` (por property). Usado en
+     * text-stepper y stepper. `null` = el sample de Figma `{ current: 1, total: 4 }`.
+     */
+    step: SuiPopoverStep | null;
+    /** Botones del pie: `small` 36 (Figma, default) · `medium` 40 · `large` 48 (teléfono). */
+    size: SuiPopoverSize;
+    /** Nombre accesible de la X (en Angular sale de provideSuiTextos). */
+    closeLabel: string;
+    /** Click en el botón X de dismiss. */
+    dismissed: EventEmitter<void>;
+    /** Click en el botón secundario (Atrás). */
+    back: EventEmitter<void>;
+    /** Click en el botón primario (Siguiente). */
+    next: EventEmitter<void>;
+    /**
+     * True cuando el consumer proyectó contenido en el slot `body`. Se evalúa una
+     * vez en componentWillLoad — el slot polyfill de Stencil 4 (scoped) NO renderea
+     * fallback content de slots con nombre de forma fiable, así que se decide en JS
+     * entre el slot proyectado y el title/description built-in.
+     */
+    private hasBodySlot;
+    componentWillLoad(): void;
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    private get stepCfg();
+    /** «Paso X de N» del text-stepper y nombre accesible de los puntos. */
+    private get stepperText();
+    /** Array de dots: cada item = índice activo (1-based). */
+    private get dots();
+    render(): any;
+}