@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/types/components/sui-file-upload/sui-file-upload.d.ts

@@ -0,0 +1,108 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * `<sui-file-upload>` — SUI Design System 2.0. COMPUESTO.
+ *
+ * Homologado con el SUI Angular (`sui-design-system`, 05-11-2026). Misma API
+ * (accept/multiple/maxSize/heading/subtitle/browseLabel/disabled/error/
+ * errorMessage/size), estados (default/dragover/error/disabled), tamaños
+ * (small/medium/large/xlarge) y comportamiento (click-to-browse, drag-and-drop
+ * nativo HTML5, validación accept + maxSize, reset del input para re-seleccionar
+ * el mismo archivo). Reusa `<sui-icon>` y `<sui-button>`. Textos por defecto en
+ * español («Buscar archivo»). Ancho fluido (100% del contenedor).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO.
+ * Nodes pulled for verification (Angular original):
+ *   450:9413 "File Upload Area [1.1]" · 450:9410 State=Default · 450:9429 State=Hover
+ *
+ * EXACT (verified Figma — node 450:9410 / 450:9429):
+ *   - Container: padding=32 (medium), gap=20, border 1px dashed --sui-stroke-sub-300,
+ *     radius=12, bg=--sui-bg-white-0. Flex column, items+justify center.
+ *   - Icon: upload-cloud-2-line (Remix) 24px, color --sui-icon-sub-600, SIN círculo bg.
+ *   - Text block: flex column gap=6, text-center, w-full.
+ *   - Title: Label/Small — Inter Medium 14/20 weight 500 letter-spacing -0.084px,
+ *     color --sui-text-strong-950.
+ *   - Subtitle: Paragraph/X-Small — Inter Regular 12/16 weight 400, color --sui-text-sub-600.
+ *   - Browse File button: stroke/neutral xsmall con override padding 6px 8px (px asimétrico
+ *     del nodo Figma).
+ *   - Hover: bg -> --sui-bg-weak-50, border SE MANTIENE --sui-stroke-sub-300.
+ *
+ * extraFeatures (NO en Figma — solo Default + Hover): dragover (border + bg primary),
+ *   error (border + bg error + texto de error), disabled (opacity 0.5, cursor not-allowed),
+ *   focus-visible (ring), sizes small/large/xlarge (padding extendido del proyecto).
+ *
+ * GOTCHAS Stencil (renombres vs Angular):
+ *  - `title` -> `heading`: `title` es @Prop reservado del DOM (dispara tooltip nativo).
+ *    Además se stripea el atributo nativo `title` del Host (se quita en `componentWillLoad`).
+ *  - El host es el dropzone (click + drag/drop via @Listen) pero NO un botón: sin
+ *    role ni tabindex (fix a11y 04-10-2026). El control de teclado es el botón
+ *    interno; el input file vive oculto dentro y se dispara via ref.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])` y los
+ * `<sui-icon>` / `<sui-button>` internos heredan el font/tokens del global sin pelear con
+ * shadow DOM. Misma estrategia que el Angular original.
+ *
+ * Events:
+ *  - filesSelected: emite File[] cuando se seleccionan o dropean archivos válidos.
+ *  - errorEvent: emite string con el motivo del rechazo si falla validación.
+ */
+export type SuiFileUploadSize = 'small' | 'medium' | 'large' | 'xlarge';
+export declare class SuiFileUpload {
+    el: HTMLElement;
+    componentWillLoad(): void;
+    /** MIME types / extensiones separados por coma (ej. "image/*,.pdf,.docx"). Default vacío = todos. */
+    accept: string;
+    /** Permite seleccionar varios archivos. Default `false`. */
+    multiple: boolean;
+    /** Bytes máximo por archivo. `0` = sin límite. */
+    maxSize: number;
+    /**
+     * Label primario (texto grande). Renombrado del `title` del Angular: `title`
+     * es @Prop reservado del DOM (dispara tooltip nativo). En HTML el atributo es
+     * `heading`. Si null, cae al texto por defecto según `multiple`.
+     */
+    heading: string | null;
+    /** Texto secundario. Si null, cae a "o haz clic para seleccionar". */
+    subtitle: string | null;
+    /** Texto del botón. Si null, «Buscar archivo». */
+    browseLabel: string | null;
+    /** Bloquea interacción (click/drag/teclado). Default `false`. */
+    disabled: boolean;
+    /** Estado de error controlado por el consumer (border + bg rojo). Default `false`. */
+    error: boolean;
+    /** Texto de error mostrado debajo. Tiene prioridad sobre el error interno de validación. */
+    errorMessage: string | null;
+    /** Tamaño: small | medium (default) | large | xlarge. Controla padding/gap interno. */
+    size: SuiFileUploadSize;
+    /** Se emite con los archivos válidos seleccionados o dropeados. */
+    filesSelected: EventEmitter<File[]>;
+    /** Se emite con el motivo del rechazo si la validación falla. */
+    errorEvent: EventEmitter<string>;
+    /** Estado interno de drag-over (equivale al `signal dragging` del Angular). */
+    dragging: boolean;
+    /** Mensaje de error generado por la validación interna (maxSize / accept). */
+    internalError: string | null;
+    /** Ref al input file nativo oculto. */
+    private inputEl?;
+    /** Estado derivado (driver del SCSS por `data-sui-state`). */
+    private get state();
+    private get resolvedTitle();
+    private get resolvedSubtitle();
+    private get resolvedErrorMessage();
+    /** Icon size px. Figma verified = 24 (medium). Escala +4: small 20 · large 28 · xlarge 32. */
+    private get iconSize();
+    onHostClick(): void;
+    onDragOver(event: DragEvent): void;
+    onDragLeave(event: DragEvent): void;
+    onDrop(event: DragEvent): void;
+    private openPicker;
+    /**
+     * Browse File button — abre el picker. stopPropagation evita doble-open
+     * (el host también es clickeable y burbujearía el click).
+     */
+    private onBrowseClick;
+    private onInputChange;
+    private processFiles;
+    private matchesAccept;
+    private formatBytes;
+    render(): any;
+}

package/dist/types/components/sui-file-upload-card/sui-file-upload-card.d.ts

@@ -0,0 +1,88 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiFileUploadCardState = 'in-progress' | 'success' | 'error';
+/** Archivo mostrado. String shorthand = solo `filename`. */
+export interface SuiFileUploadCardFile {
+    filename: string;
+    /** Override de la extensión del file-icon (si no, sale del filename). */
+    extension?: string;
+}
+/**
+ * `<sui-file-upload-card>` — SUI Design System 2.0. COMPUESTO.
+ *
+ * Homologado con el SUI Angular (`sui-design-system`, 05-11-2026).
+ * Card de status de un archivo subiéndose / ya subido / fallido. NO confundir
+ * con `sui-file-upload` (dropzone) ni con `sui-file-icon` (badge de tipo): este
+ * compone file-icon + nombre + peso/status + acción a la derecha.
+ *
+ * Figma 8p1k72aKKvzJV4XcvPS4VO — node 451:409 ("File Upload Cards [1.1]"):
+ * In Progress 451:408 · Success 452:145 · Error 452:189.
+ *
+ * Layout:
+ *   [file-icon 40] [label + (peso ∙ status) + («Reintentar» si error)] [acción 32]
+ *   ---------- progress-bar (solo in-progress) ----------
+ *
+ *  - Ancho fluido (03-10-2026): Figma lo dibuja de 400; SUI llena el contenedor.
+ *  - Container: pl=14 pr=16 py=16, border 1px stroke-soft-200 (error: error-base),
+ *    radius 12, bg white-0, gap 16 con la barra.
+ *  - Label 14/20 500 strong-950 · descripción y bullet 12/16 sub-600 · status 12/16.
+ *  - «Reintentar» = `<sui-link-button variant="error" underline>`.
+ *  - Acción: close-line (in-progress, gris) · delete-bin-line (success gris, error
+ *    rojo). 32×32 con ícono 20 (extensión SUI 03-10-2026; Figma dibuja 24, chico
+ *    para el dedo).
+ *  - Status: loader-2-fill azul con spinner · checkbox-circle-fill verde ·
+ *    error-warning-fill rojo.
+ *
+ * Textos por defecto en español («Subiendo…», «Completado», «Falló»,
+ * «Reintentar», «Cancelar subida», «Quitar archivo», «Progreso de la subida»);
+ * cada uno se pisa con su prop.
+ *
+ * ── Divergencias con el Angular ───────────────────────────────────────────
+ *  1. La acción es un `<button>` nativo con las medidas del
+ *     `sui-compact-button size="2xlarge"` del Angular: ese tamaño todavía no
+ *     existe en el compact-button de Stencil.
+ *
+ * `scoped: true` (light DOM): los `<sui-*>` internos heredan los tokens.
+ */
+export declare class SuiFileUploadCard {
+    /** Archivo mostrado: string shorthand (= filename) u objeto `{ filename, extension? }`. Default `file.pdf`. */
+    file: SuiFileUploadCardFile | string | null;
+    /** Texto secundario izquierdo, ej. "0 KB de 120 KB". */
+    description: string;
+    /** Estado del card. Default `in-progress`. Refleja a `data-sui-state` del host. */
+    state: SuiFileUploadCardState;
+    /** Progreso 0–100 (clamp interno, NaN->0). Solo se muestra si state==='in-progress'. */
+    progress: number;
+    /** Override del label de status. null = default por state. */
+    statusText: string | null;
+    /** Muestra/oculta el bloque de status (icono + texto). Default `true`. */
+    showStatus: boolean;
+    /** Texto del link de error. Si null, «Reintentar». */
+    retryLabel: string | null;
+    /** Nombre accesible del botón en `in-progress`. Si null, «Cancelar subida». */
+    cancelLabel: string | null;
+    /** Nombre accesible del botón en `success` / `error`. Si null, «Quitar archivo». */
+    removeLabel: string | null;
+    /** Nombre accesible de la barra de progreso. Si null, «Progreso de la subida». */
+    progressLabel: string | null;
+    /** Click en el botón compacto (close en in-progress, delete en success/error). */
+    actionClicked: EventEmitter<void>;
+    /** Click en «Reintentar» (solo state==='error'). */
+    retryClicked: EventEmitter<void>;
+    /** Status text default por state — override-able vía `statusText`. */
+    private get resolvedStatusText();
+    /** Status icon name por state (Remix Icons). */
+    private get statusIconName();
+    /** Compact button (right-side) icon name por state. */
+    private get actionIconName();
+    /** Progress 0–100 clamped (NaN->0). Misma lógica que el computed Angular. */
+    private get progressPct();
+    /** Config resuelta del archivo (string → { filename }). */
+    private get fileCfg();
+    alTocar(): void;
+    alSoltar(event: Event): void;
+    private onAction;
+    private onRetry;
+    /** Bloque de status (icono + texto), compartido entre los 3 estados. */
+    private renderStatus;
+    render(): any;
+}

package/dist/types/components/sui-filter-bar/sui-filter-bar.d.ts

@@ -0,0 +1,27 @@
+/**
+ * `<sui-filter-bar>` — Barra horizontal de filtros con un lado `start` y otro `end`.
+ *
+ * Toolbar Left/Right split: lado `start` + lado `end` con justify-between,
+ * gap-12 entre lados y gap-12 interno por lado. Slots `start` / `end` + default
+ * (fallback en una fila única cuando no se usan los slots nombrados).
+ *
+ * Portado 1:1 desde la familia Angular homologada
+ * (`sui-filter/` del SUI Angular). El accent del DS
+ * es NARANJA brand (#fa7319 / --sui-primary-base), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node HorizontalFilter 4370:6018.
+ *
+ * Familia «sui-filter», igual que en el SUI Angular: son cuatro componentes y no
+ * existe un `<sui-filter>`. Esta barra va arriba de una tabla; el panel vertical
+ * no tiene contenedor y se arma con `sui-filter-panel-header` + `sui-filter-item`
+ * (dentro de un `role="listbox"`) + `sui-filter-panel-footer`.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * translan limpio y el consumer puede proyectar contenido en los slots sin pelear
+ * con shadow DOM. Misma estrategia que el resto del DS.
+ */
+export declare class SuiFilterBar {
+    /** Variante de la toolbar. Solo afecta hints de layout/responsive, no el wiring. */
+    variant: 'calendar' | 'table';
+    render(): any;
+}

package/dist/types/components/sui-filter-item/sui-filter-item.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/** Estado visual de la fila, como en el SUI Angular: `active` = la categoría abierta. */
+export type SuiFilterItemState = 'default' | 'active';
+/**
+ * `<sui-filter-item>` — Fila del panel vertical de filtros (una categoría: «Estado», «Local»).
+ *
+ * Fila individual del panel vertical: padding-8, gap-8, radius-8, overflow-clip,
+ * items-center. States via `[data-sui-state]` default/active (+ hover/focus via
+ * CSS). Active → chevron (arrow-right-s-line) a la derecha + leftIcon primary-base
+ * (naranja brand del DS, #fa7319, NO el azul de Figma).
+ *
+ * Portado 1:1 desde la familia Angular homologada
+ * (`sui-filter/` del SUI Angular). Reusa el primitivo
+ * `<sui-icon>` ya portado.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node VerticalFilterItems 4379:1183.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * translan limpio. Misma estrategia que el resto del DS.
+ *
+ * GOTCHA Stencil: el iOS WKWebView :active fix vive en el host (touchstart/
+ * touchend via @Listen). Sin esto el :active queda stuck 300-500ms en pages
+ * standalone — la presencia del binding engage el touch pipeline.
+ */
+export declare class SuiFilterItem {
+    el: HTMLElement;
+    /** Fila seleccionada/activa. Default `false`. */
+    active: boolean;
+    /** Deshabilita la fila (sale del tab order, no emite). Default `false`. */
+    disabled: boolean;
+    /** Icono opcional a la izquierda del label (20x20). `null` = sin icono. */
+    leftIcon: string | null;
+    /** Icono que aparece a la derecha cuando está active. Override del default. */
+    activeIcon: string;
+    /** Se emite al seleccionar (click / Enter / Space) cuando NO está disabled. */
+    selected: EventEmitter<globalThis.Event>;
+    /** Estado derivado: `active` cuando active=true, sino `default`. */
+    private get state();
+    onTouchStart(): void;
+    onTouchEnd(): void;
+    private onActivate;
+    private onKeyDown;
+    render(): any;
+}

package/dist/types/components/sui-filter-panel-footer/sui-filter-panel-footer.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiFooterButtonConfig } from '../sui-button/sui-button';
+export type SuiFilterPanelFooterSize = 'small' | 'medium' | 'large';
+/**
+ * `<sui-filter-panel-footer>` — Pie del panel de filtros con «Limpiar» y «Aplicar».
+ *
+ * Footer del panel vertical: padding 16 20, border-top soft-200, gap 12 entre
+ * 2 botones mitad y mitad: «Limpiar» (stroke neutral) a la izquierda y «Aplicar»
+ * (filled primary) a la derecha — orden canon de sui-modal-footer.
+ *
+ * Portado 1:1 desde el SUI Angular (`sui-design-system/.../sui-filter`). API
+ * alineada el 05-11-2026: `clearButton` / `applyButton` (string o
+ * `SuiFooterButtonConfig`) reemplazan `clearLabel`/`applyLabel`/`clearDisabled`/
+ * `applyDisabled`; `size` default `medium` (40, web) y `large` (48) para el teléfono.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node VerticalFilterFooter 4415:858
+ * (Figma dice gap 16; el canon de la app para grupos de botones es 12).
+ *
+ * `scoped: true` (light DOM, NO shadow): misma estrategia que el resto del DS.
+ */
+export declare class SuiFilterPanelFooter {
+    /** Botón «Limpiar» (stroke neutral): string (label) o `SuiFooterButtonConfig`. Default «Limpiar». */
+    clearButton: SuiFooterButtonConfig | string | null;
+    /** Botón «Aplicar» (filled primary): string (label) o `SuiFooterButtonConfig`. Default «Aplicar». */
+    applyButton: SuiFooterButtonConfig | string | null;
+    /**
+     * Tamaño de los botones. Default `medium` (40, la computadora). `large` (48)
+     * para el teléfono y la tablet táctil. `small` (36, el que dibuja Figma) queda
+     * por compatibilidad.
+     */
+    size: SuiFilterPanelFooterSize;
+    /** Click en «Limpiar» (si no está disabled). */
+    clear: EventEmitter<void>;
+    /** Click en «Aplicar» (si no está disabled). */
+    apply: EventEmitter<void>;
+    private cfg;
+    render(): any;
+}

package/dist/types/components/sui-filter-panel-header/sui-filter-panel-header.d.ts

@@ -0,0 +1,42 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * `<sui-filter-panel-header>` — Encabezado del panel de filtros con título y link «Limpiar» opcional.
+ *
+ * Header del panel vertical: padding 16 20, border-bottom soft-200, label Inter
+ * Medium 14/20 strong-950, leftIcon opcional (icon/sub-600), link «Limpiar»
+ * opcional (link-button gray). API alineada al SUI Angular (05-11-2026): `clear`
+ * (boolean | string) + evento `clearClick` reemplazan `clearable`/`clearLabel`/`clear`.
+ *
+ * Portado 1:1 desde la familia Angular homologada
+ * (`sui-filter/` del SUI Angular). Reusa los
+ * primitivos `<sui-icon>` / `<sui-link-button>` ya portados. El accent del DS es
+ * NARANJA brand (#fa7319 / --sui-primary-base), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node VerticalFilterHeader 4379:2209.
+ *
+ * `scoped: true` (light DOM, NO shadow): misma estrategia que el resto del DS.
+ */
+export declare class SuiFilterPanelHeader {
+    el: HTMLElement;
+    /** Texto del header. */
+    label: string;
+    /** Icono opcional a la izquierda del label (20x20). `null` = sin icono. */
+    leftIcon: string | null;
+    /**
+     * Link de limpieza a la derecha: `true` = label default «Limpiar», string =
+     * label custom, `false` (default) o '' = oculto. Como atributo: `clear="true"`
+     * muestra «Limpiar» y `clear="Borrar"` cambia el label. Ojo: `clear` sin valor
+     * llega como '' y queda oculto (misma regla que el SUI Angular).
+     */
+    clear: string | boolean;
+    /**
+     * Click en el link de limpieza. (Renombrado de `clear` como en el SUI Angular:
+     * el nombre lo tomó la prop consolidada; prop y evento no pueden compartirlo.)
+     */
+    clearClick: EventEmitter<void>;
+    /** Label resuelto del link (null = oculto). */
+    private get clearLabel();
+    /** Strip del `title` nativo (evita el tooltip gris del browser). `title={undefined}` en el Host no lo saca. */
+    componentDidRender(): void;
+    render(): any;
+}

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

@@ -0,0 +1,48 @@
+import { SUI_FLAG_NAMES } from './sui-flag.data';
+export type SuiFlagName = (typeof SUI_FLAG_NAMES)[number];
+export type SuiFlagSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * `<sui-flag>` — wrapper de banderas circulares del SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-flag/). Misma API pública
+ * (name/size/ariaLabel → name/size/aria-label), mismo comportamiento (decorativo
+ * vs `role="img"` según ariaLabel) y mismos VALORES exactos (tamaños canon del DS).
+ *
+ * Source: SUI Design System 2.0 — Country Flags (Figma node 2806:2385).
+ * Assets: `assets/flags/<slug>.svg` (262 banderas a 24×24 viewBox).
+ *
+ * Las banderas vienen pre-renderizadas como CÍRCULO dentro del viewBox 24×24
+ * (path inicial es un circle cubriendo el viewBox; el contenido externo queda
+ * transparente). Por eso NO se aplica `border-radius` en CSS — la forma circular
+ * ya está bakeada en el SVG.
+ *
+ * Diferencias vs sui-icon / sui-emoji:
+ *  - sui-icon  = SVG monocromo via icon-font (RemixIcon), hereda `currentColor`.
+ *  - sui-emoji = PNG raster animado multi-color (Fluent UI).
+ *  - sui-flag  = SVG vectorial multi-color, sin animación, circular por diseño.
+ *
+ * NOTA accent: este componente NO usa el accent naranja del DS — las banderas son
+ * SVG multi-color con sus propios colores nacionales. No hay tokens de color aquí.
+ *
+ * Tamaños canon (compartidos con sui-emoji para consistencia visual):
+ *   xs 16 · sm 20 · md 24 (default, native viewBox) · lg 32 · xl 48 · full.
+ *
+ * `scoped: true` (light DOM, NO shadow): consistente con sui-button/sui-icon. La
+ * URL del asset se resuelve con `getAssetPath()` (Stencil copia `assets/flags/`
+ * al build via `assetsDirs`), igual filosofía que el `[src]` del Angular original.
+ */
+export declare class SuiFlag {
+    /** Slug del país (ver SUI_FLAG_NAMES). Ej: 'peru', 'united-states', 'sint-maarten'. Requerido. */
+    name: SuiFlagName;
+    /** Tamaño del flag. Default `md` (24px) — matchea el viewBox nativo del SVG. */
+    size: SuiFlagSize;
+    /**
+     * Aria-label opcional. Si se provee, el flag se anuncia como `<img>` con ese
+     * label (`role="img"`). Si no, se considera decorativo (`aria-hidden="true"`).
+     */
+    ariaLabel: string | null;
+    /** URL absoluta al SVG, resuelta contra el base path del componente. */
+    private get src();
+    render(): any;
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Catálogo canon de banderas disponibles en el DS (262 países).
+ *
+ * Source: SUI Design System 2.0 — Country Flags (Figma node 2806:2385).
+ * Generado a partir de los assets `assets/flags/<slug>.svg` (24×24 viewBox).
+ *
+ * NO editar a mano — si se agrega/quita un SVG, regenerar con basename:
+ *   for f in assets/flags/*.svg; do basename "$f" .svg; done
+ *
+ * Separado de sui-flag.tsx porque Stencil prohíbe `export const/function/enum`
+ * junto al `@Component`. Este archivo es el punto de importación para consumers
+ * externos (stories, utilidades) que necesiten el catálogo en runtime.
+ */
+export declare const SUI_FLAG_NAMES: readonly ["abkhazia", "afghanistan", "aland-islands", "albania", "algeria", "american-samoa", "andorra", "angola", "anguilla", "antigua-and-barbuda", "argentina", "armenia", "aruba", "australia", "austria", "azerbaijan", "azores-islands", "bahamas", "bahrain", "balearic-islands", "bangladesh", "barbados", "basque-country", "belarus", "belgium", "belize", "benin", "bermuda", "bhutan", "bolivia", "bonaire", "bosnia-and-herzegovina", "botswana", "brazil", "british-columbia", "british-indian-ocean-territory", "british-virgin-islands", "brunei", "bulgaria", "burkina-faso", "burundi", "cambodia", "cameroon", "canada", "canary-islands", "cape-verde", "cayman-islands", "central-african-republic", "ceuta", "chad", "chile", "china", "christmas-island", "cocos-island", "colombia", "comoros", "cook-islands", "corsica", "costa-rica", "croatia", "cuba", "curacao", "cyprus", "czech-republic", "democratic-republic-of-congo", "denmark", "djibouti", "dominica", "dominican-republic", "east-timor", "ecuador", "egypt", "el-salvador", "england", "equatorial-guinea", "eritrea", "estonia", "ethiopia", "european-union", "falkland-islands", "faroe-islands", "fiji", "finland", "france", "french-polynesia", "gabon", "galapagos-islands", "gambia", "georgia", "germany", "ghana", "gibraltar", "greece", "greenland", "grenada", "guam", "guatemala", "guernsey", "guinea-bissau", "guinea", "guyana", "haiti", "hawaii", "honduras", "hong-kong", "hungary", "iceland", "india", "indonesia", "iran", "iraq", "ireland", "isle-of-man", "israel", "italy", "ivory-coast", "jamaica", "japan", "jersey", "jordan", "kazakhstan", "kenya", "kiribati", "kosovo", "kuwait", "kyrgyzstan", "laos", "latvia", "lebanon", "lesotho", "liberia", "libya", "liechtenstein", "lithuania", "luxembourg", "macao", "madagascar", "madeira", "malawi", "malaysia", "maldives", "mali", "malta", "marshall-island", "martinique", "mauritania", "mauritus", "melilla", "mexico", "micronesia", "moldova", "monaco", "mongolia", "montenegro", "montserrat", "morocco", "mozambique", "myanmar", "namibia", "nato", "nauru", "nepal", "netherlands", "new-zealand", "nicaragua", "niger", "nigeria", "niue", "norfolk-island", "north-korea", "northern-cyprus", "northern-marianas-islands", "norway", "oman", "orkney-islands", "ossetia", "pakistan", "palau", "palestine", "panama", "papua-new-guinea", "paraguay", "peru", "philippines", "pitcairn-islands", "poland", "portugal", "puerto-rico", "qatar", "rapa-nui", "republic-of-macedonia", "republic-of-the-congo", "romania", "russia", "rwanda", "saba-island", "sahrawi-arab-democratic-republic", "saint-kitts-and-nevis", "samoa", "san-marino", "sao-tome-and-prince", "sardinia", "saudi-arabia", "scotland", "senegal", "serbia", "seychelles", "sierra-leone", "singapore", "sint-eustatius", "sint-maarten", "slovakia", "slovania", "solomon-islands", "somalia", "somaliland", "south-africa", "south-korea", "south-sudan", "spain", "sri-lanka", "st-barts", "st-lucia", "st-vincent-and-the-grenadines", "sudan", "suriname", "swaziland", "sweden", "switzerland", "syria", "taijikistan", "taiwan", "tanzania", "thailand", "tibet", "togo", "tokelau", "tonga", "transnistria", "trinidad-and-tobago", "tunisia", "turkey", "turkmenistan", "turks-and-caicos", "tuvalu", "uganda", "ukraine", "united-arab-emirates", "united-kingdom", "united-nations", "united-states", "uruguay", "uzbekistan", "vanuatu", "vatican-city", "venezuela", "vietnam", "virgin-islands", "wales", "yemen", "zambia", "zimbabwe"];

package/dist/types/components/sui-form-hint/sui-form-hint.d.ts

@@ -0,0 +1,45 @@
+export type SuiFormHintVariant = 'neutral' | 'error' | 'disabled';
+/**
+ * `<sui-form-hint>` — SUI Design System 2.0.
+ *
+ * Homologado con el SUI Angular (`sui-design-system`, 05-11-2026).
+ * Figma 8p1k72aKKvzJV4XcvPS4VO — "Key Components" → Hint Text [1.1]
+ * (State Default/Error/Disabled → variant neutral/error/disabled).
+ * Tipografía Paragraph/X-Small 12/400/16/0.
+ *
+ * Icono default por variant:
+ *   - neutral  → ninguno (con `icon` explícito se pinta en --sui-icon-soft-400,
+ *     más claro que el texto: Figma 266:5280)
+ *   - error    → 'information-fill' (Figma 267:1279: el mismo glifo relleno que
+ *     Default, recoloreado a error-base; ya NO 'error-warning-line')
+ *   - disabled → 'information-fill' (Figma 266:5284)
+ *
+ * a11y: con variant `error` y mensaje, el host lleva `role="alert"` y el error
+ * se anuncia solo. Para enlazarlo desde un control (`aria-describedby`), poner
+ * el `id` en el host.
+ *
+ * Para feedback positivo o de advertencia se usa `sui-alert` (el Angular eliminó
+ * las variants `success` / `warning` y el prop `size`).
+ *
+ * `scoped: true` (light DOM): el `<sui-icon>` interno hereda `currentColor`.
+ */
+export declare class SuiFormHint {
+    /** Mensaje del hint. Si es null/vacío, no renderiza nada (y el host no reserva caja). */
+    message: string | null;
+    /** Variante visual (color + icono default). Default `neutral`. */
+    variant: SuiFormHintVariant;
+    /**
+     * Icono Remix personalizado.
+     * - `undefined` (default): usa el icono default de la variant.
+     * - `null`: fuerza sin icono.
+     * - `string`: usa ese nombre de icono Remix.
+     */
+    icon?: string | null;
+    /** Default icons per variant. */
+    private static readonly defaultIcons;
+    /** Resolved icon: undefined → default by variant, null → no icon, string → that icon. */
+    private get resolvedIcon();
+    /** Normaliza message a string no-vacío o null. */
+    private get hasMessage();
+    render(): any;
+}

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

@@ -0,0 +1,100 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiFormLabelSize = 'xsmall' | 'small' | 'medium';
+/** Config del link de acción (mismo contrato que `SuiLinkConfig` del Angular). */
+export interface SuiFormLabelLink {
+    label: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+}
+/**
+ * `<sui-form-label>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-form-label/). Misma API
+ * pública (inputs → props, outputs → events), TODAS las variantes de la matriz
+ * Figma (Required × Sublabel × Info × Button × Normal/Disabled × 3 sizes), mismo
+ * comportamiento y mismos VALORES exactos (tokens del DS, NO hex). El accent del
+ * DS es NARANJA brand (#fa7319), NUNCA el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — grupo "Key Components" → Label [1.1]
+ *   (nodos auditados: 263:1850 / 266:2814 — frame Label).
+ *
+ * Matriz Figma decodificada:
+ *   Label(Normal/Disabled) × Required × Sublabel × Info × Button (~16 combinaciones)
+ *     - Normal/Disabled  → prop `disabled`
+ *     - Required         → prop `required` (asterisco)
+ *     - Sublabel         → prop `sublabel` (texto secundario)
+ *     - Info             → prop `tooltip` (icono ℹ + tooltip)
+ *     - Button           → prop `link` + event `linkClick` (link tipo "Help?")
+ *
+ * Valores cromáticos (decisiones conscientes vs SUI base):
+ *   - required: asterisco (*) en --sui-state-error-base (#fb3748). SUI base lo
+ *     pinta con --primary-base (azul), pero acá primary es NARANJA y el asterisco
+ *     de "requerido" es semántica de error/alerta → error-red. NO copia ciega.
+ *   - sublabel: --sui-text-sub-600, weight 400 (override del 500 del label).
+ *   - tooltip: icono custom `info-custom-fill` (node 125:279) vía <sui-icon> —
+ *     círculo relleno con "i" serif. Color --sui-icon-disabled-300 (#d1d1d1):
+ *     affordance de baja jerarquía, gris suave (Figma node 266:2813).
+ *   - link: en Figma 266:2814 el nodo ES una instancia de Link Buttons [1.1] →
+ *     se renderiza con el COMPONENTE `<sui-link-button variant="gray"
+ *     size="small">` (12/16/500 text/sub-600), alineado a la derecha. String =
+ *     solo label (emite `linkClick`); objeto `{ label, href, target, rel }` =
+ *     `<a>` real, con `rel="noopener noreferrer"` automático si target=_blank.
+ *   - disabled: --sui-text-disabled-300 / --sui-icon-disabled-300 en todo.
+ *   - sizes: xsmall (Label/X-Small 12/16) · small/medium (Label/Small 14/20).
+ *
+ * ─── Divergencia vs Angular (justificada) ──────────────────────────────────
+ * El Angular usa la directiva `[suiTooltip]` (CDK Overlay) sobre el botón info.
+ * Stencil NO tiene directivas; el `<sui-tooltip>` del stack es un COMPONENTE
+ * envolvente (wrappea su trigger via slot + prop `content`). Aquí el botón info
+ * va envuelto en `<sui-tooltip>` cuando hay `tooltip`. Mismo resultado visual y
+ * de accesibilidad (aria-label en el botón + tooltip en hover/focus).
+ *
+ * El iOS WKWebView :active fix (touchstart/touchend) se mantiene sobre el botón
+ * info; el del link vive dentro de sui-link-button.
+ *
+ * `scoped: true` (light DOM, NO shadow): así el <sui-icon> proyectado y el
+ * <sui-tooltip> envolvente heredan tokens/fonts sin pelear con shadow DOM.
+ * Misma estrategia que sui-button / sui-icon / sui-tooltip.
+ *
+ * Strip del atributo `title` nativo del host: el browser interpreta cualquier
+ * `title="..."` del DOM como tooltip nativo gris. Se borra en componentDidLoad
+ * (patrón canon Ontop — ver CLAUDE.md). El input lógico se llama `tooltip`, no
+ * `title`, pero igual se limpia por seguridad.
+ */
+export declare class SuiFormLabel {
+    el: HTMLElement;
+    /** Texto principal del label (requerido). */
+    label: string;
+    /** Sublabel opcional (texto secundario pequeño después del label principal). */
+    sublabel: string | null;
+    /** Marca como requerido — muestra asterisco al final del label principal. */
+    required: boolean;
+    /** Tooltip opcional sobre un icono info (ℹ) al final del label. */
+    tooltip: string | null;
+    /**
+     * Link de acción a la derecha (variante "Button" de Figma, ej. "Help?").
+     * String = solo label (emite `linkClick`); objeto `{ label, href?, target?, rel? }`
+     * = `<a>` real (rel automático `noopener noreferrer` con target=_blank).
+     * Si null/vacío, no se renderiza el link.
+     */
+    link: SuiFormLabelLink | string | null;
+    /** Tamaño visual — matchea al field que acompaña. Default `medium`. */
+    size: SuiFormLabelSize;
+    /** Atenúa todo el label (estado Disabled de Figma). Default `false`. */
+    disabled: boolean;
+    /** ID del field controlado (para accesibilidad `for` attribute). */
+    htmlFor: string | null;
+    /** Emitido cuando se clickea el link de acción (variante "Button" de Figma). */
+    linkClick: EventEmitter<MouseEvent>;
+    /** Config resuelta del link (string → { label }, rel automático para _blank). */
+    private get linkCfg();
+    componentDidLoad(): void;
+    alTocar(): void;
+    alSoltar(event: Event): void;
+    /** stopPropagation: el click del link no activa el <label> contenedor. */
+    private onLinkClick;
+    private renderInfoButton;
+    render(): any;
+}

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

@@ -0,0 +1,35 @@
+/**
+ * SUI Href — SUI Design System 2.0 (port de la directiva Angular `a[suiHref]`).
+ *
+ * En Stencil no hay directivas ni Router, así que el contrato vive en una
+ * función que cada componente del DS llama desde el `onClick` de su `<a>`:
+ *
+ *   <a href={this.href} target={this.target} onClick={(ev) => suiHrefClick(ev, this.href)}>
+ *
+ * Diferencia con Angular: en vez de `router.navigateByUrl(href)` se despacha el
+ * evento cancelable `suiNavigate` (bubbles + composed, `detail: { href }`). El
+ * router de la app lo escucha y llama `preventDefault()`; recién ahí se cancela
+ * el click y no hay recarga. Si nadie lo escucha, el link se comporta como un
+ * `<a href>` común (= el passthrough "sin Router" del Angular).
+ *
+ *   document.addEventListener('suiNavigate', (e) => {
+ *     e.preventDefault();
+ *     router.navigateByUrl(e.detail.href);
+ *   });
+ *
+ * Mismas guardas que el Angular: solo URLs internas (`/x`, no `//host`), sin
+ * `target` distinto de `_self`, click primario sin cmd/ctrl/shift/alt, y evento
+ * no prevenido antes.
+ */
+/** Detalle del evento `suiNavigate`. */
+export interface SuiNavigateDetail {
+    href: string;
+}
+/** Nombre del evento que pide la navegación SPA. */
+export declare const SUI_NAVIGATE_EVENT = "suiNavigate";
+/**
+ * Intercepta el click de un `<a>` del DS. Devuelve `true` si la navegación la
+ * tomó el router de la app (click cancelado), `false` si sigue el default del
+ * navegador.
+ */
+export declare function suiHrefClick(ev: MouseEvent, href: string | null | undefined): boolean;

package/dist/types/components/sui-icon/sui-custom-icons.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Iconos CUSTOM de SUI que NO existen en RemixIcon (forma propia del DS).
+ * Cuando `name` matchea una key de acá, <sui-icon> renderiza el SVG inline; para
+ * cualquier otro `name` cae al font de RemixIcon (`ri-${name}`). Así la regla
+ * "para iconos siempre se usa sui-icon" se cumple incluso para los custom del DS,
+ * sin SVG inline disperso en los componentes consumidores.
+ *
+ * Portado 1:1 desde el proyecto Angular (sui-icon.ts: SUI_CUSTOM_ICONS).
+ */
+export interface SuiCustomIcon {
+    viewBox: string;
+    path: string;
+}
+export declare const SUI_CUSTOM_ICONS: Record<string, SuiCustomIcon>;