@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/types/components/sui-compact-button/sui-compact-button.d.ts

@@ -0,0 +1,90 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiCompactButtonStyle = 'stroke' | 'ghost' | 'modifiable' | 'white';
+/**
+ * `medium` 20 y `large` 24 son los de Figma. El resto es extensión SUI para tocar
+ * en mobile: `xlarge` 28 · `2xlarge` 32 · `3xlarge` 36 · `4xlarge` 40 · `5xlarge` 44
+ * (piso táctil del teléfono).
+ */
+export type SuiCompactButtonSize = 'medium' | 'large' | 'xlarge' | '2xlarge' | '3xlarge' | '4xlarge' | '5xlarge';
+/**
+ * `<sui-compact-button>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-compact-button/). Misma
+ * API pública (variantStyle/size/fullRadius/disabled/href/target/rel/type +
+ * evento `clicked`), mismo comportamiento (render polimórfico button ↔ anchor,
+ * disabled gatea el click, 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 — frame 189:3646 (`Compact Button [1.1]`),
+ * 64 variants: 4 styles × 4 states × 2 sizes × 2 fullRadius.
+ *
+ * Botón solo-ícono cuadrado (o circular si `fullRadius`). Padding uniforme 2px
+ * — todo el espacio lo come el ícono. Perfecto para toolbars densos, header
+ * actions, table row actions, close X en modales. Diferencia vs el grupo de
+ * avatares compactos: este SÍ es clickeable.
+ *
+ * EXACT specs (pulled de Figma 2026-05-29):
+ *   Container:  padding 2px · radius-6 (fullRadius=off) | radius-full (on)
+ *   Large:   24×24 container, ícono 20×20
+ *   Medium:  20×20 container, ícono 16×16
+ *
+ *   stroke  → bg-white-0 + 1px stroke-soft-200 + regular-shadow/x-small,
+ *             ícono icon-sub-600. Hover bg-weak-50 (border desaparece).
+ *             Active bg-surface-800 (#262626) + ícono white-0.
+ *   ghost   → transparent, ícono icon-sub-600. Hover bg-weak-50 (icon
+ *             strong-950). Active bg-surface-800 + ícono white-0.
+ *   modifiable → transparent, ícono currentColor (consumer-controlled).
+ *             Hover white-alpha-16 (#ffffff29). Active white-alpha-16 + 1px
+ *             border static-white. Escape hatch del consumer:
+ *             --sui-compact-button-hover-bg / -active-bg.
+ *   white   → bg-white-0 + regular-shadow/x-small (sin border), ícono
+ *             strong-950. Hover bg-weak-50. Active bg-surface-800 + ícono
+ *             white-0 (homologado con stroke/ghost).
+ *   disabled → ícono icon-disabled-300, opacity 0.5, pointer-events none.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * translan limpio y el `<sui-icon>` interno hereda el `currentColor` del host
+ * sin pelear con shadow DOM. Misma estrategia que el Angular original.
+ */
+export declare class SuiCompactButton {
+    el: HTMLElement;
+    /** Nombre del ícono (RemixIcon sin prefijo, ej. 'close-line'). Requerido. */
+    icon: string;
+    /** Estilo visual. Default `stroke`. */
+    variantStyle: SuiCompactButtonStyle;
+    /** Tamaño. Default `large` (24×24, ícono 20). */
+    size: SuiCompactButtonSize;
+    /** Radio completo (circular). Default `false`. */
+    fullRadius: boolean;
+    /** Deshabilitado: bloquea click, ícono gris, no focusable. Default `false`. */
+    disabled: boolean;
+    /** Si se setea (y no disabled), renderiza un `<a>` en vez de `<button>`. */
+    href: string | null;
+    /** target del anchor (solo aplica cuando `href`). */
+    target: string | null;
+    /** rel del anchor (solo aplica cuando `href`). Default `noopener noreferrer`. */
+    rel: string | null;
+    /** type del button (solo aplica cuando NO hay `href`). Default `button`. */
+    type: 'button' | 'submit' | 'reset';
+    /** Etiqueta accesible del elemento interactivo. Requerido (botón solo-ícono). */
+    ariaLabel: string;
+    /** Emite al activarse (click válido, no disabled). Espeja el output Angular. */
+    clicked: EventEmitter<MouseEvent>;
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo cual hace que `:active` dispare y se libere
+     * correctamente. Sin esto, `:active` "stickea" 300-500ms en pages standalone.
+     */
+    onTouchStart(): void;
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd(): void;
+    /** Ícono por size: 16 medium · 20 large/2xlarge/3xlarge · 24 xlarge/4xlarge/5xlarge
+     *  (en 5xlarge crece el área, no el dibujo). Espeja el computed del Angular. */
+    private get iconSize();
+    /** Render anchor solo cuando hay href Y no está disabled. */
+    private get isAnchor();
+    private onClick;
+    render(): any;
+}

package/dist/types/components/sui-compact-select/sui-compact-select.d.ts

@@ -0,0 +1,150 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiCompactSelectItem } from './sui-compact-select.data';
+import type { SuiFlagName } from '../sui-flag/sui-flag';
+export type SuiCompactSelectType = 'basic' | 'icon' | 'country';
+/** `large` (48) es extensión SUI (03-10-2026): el alto del `sui-button` large para mobile. */
+export type SuiCompactSelectSize = 'large' | 'medium' | 'small' | 'xsmall';
+/**
+ * `<sui-compact-select>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-compact-select/). Misma API
+ * pública conceptual, TODAS las variantes (3 types x 3 sizes x 6 states), mismo
+ * comportamiento (overlay, teclado, focus, lazy mount del panel) y mismos VALORES
+ * exactos (tokens del DS). El accent del DS es NARANJA brand (#fa7319), NO el azul
+ * de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — Compact Select [1.1] 377:5083
+ *   Sizes: medium 40 (p=10 r=10) / small 36 (p=8 r=8) / xsmall 32 (p=6 r=8)
+ *     + large 48 (r=12, extensión SUI 03-10-2026, para mobile)
+ *   States: placeholder / filled / hover / focused / disabled / error
+ *   Types: basic / icon (RemixIcon 20x20) / country (sui-flag 24x24)
+ *
+ * Trigger compacto de select-like. El host ES el trigger visual (con su propio
+ * click handler); cuando se le pasan `items`, el componente renderea su propio
+ * panel flotante (position absolute relativo al host) y delega selection +
+ * keyboard nav + close-on-outside. Cuando NO se le pasan items, funciona en modo
+ * trigger-only (solo emite `clicked`) y el consumer monta su propio overlay.
+ *
+ * Diferencias de PORT vs el Angular original (y por que):
+ *  - El Angular delegaba el overlay a `sui-dropdown-menu` (CDK Overlay) + items a
+ *    `sui-dropdown-item`. Esos no estan portados en Stencil todavia; aqui el panel
+ *    + items se implementan inline (la pieza minima necesaria) replicando el
+ *    visual de `sui-dropdown-item mode="option"` (bg primary-alpha-10 + check icon
+ *    + texto primary cuando selected). Mismo look, sin la dependencia.
+ *  - El Angular usaba ControlValueAccessor (formControl). En web components el
+ *    binding es por `value` prop + evento `selectedChange`. `value` resuelve el
+ *    item con `value === value` (incluido el caso async: si los items llegan
+ *    despues, un Watch re-resuelve el pending value). Drop-in para libs (Angular
+ *    value/valueChange, React value/onSelectedChange, etc.).
+ *  - `selected` no se expone como prop two-way (no existe model() en Stencil); se
+ *    deriva internamente del `value`. El estado seleccionado completo viaja en el
+ *    payload del evento `selectedChange`.
+ *
+ * GOTCHAS de API (renombres / Stencil):
+ *  - El @Prop `type` NO colisiona con DOM (input usa `type`, pero el host es un
+ *    div-like; se mantiene `type`). `value` y `placeholder` tampoco colisionan.
+ *  - El strip del atributo nativo `title` (canon Ontop) no aplica: el componente
+ *    no recibe `title`.
+ *
+ * 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 items clickeables custom del panel).
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-sui-*])`
+ * translan limpio y el panel flotante se monta dentro del subtree del host sin
+ * pelear con shadow DOM. Misma estrategia que sui-tooltip / sui-popover.
+ *
+ * Eventos:
+ *  - `clicked`: Event — siempre emite cuando el host se clickea (modo 1 + 2).
+ *  - `selectedChange`: SuiCompactSelectItem — solo en modo items, cuando el user
+ *    selecciona un item.
+ */
+export declare class SuiCompactSelect {
+    el: HTMLElement;
+    /** Tipo del trigger: basic (solo texto) / icon (RemixIcon leading) / country (sui-flag leading). Default `basic`. */
+    type: SuiCompactSelectType;
+    /** Tamaño: large 48 (extensión SUI, mobile) / medium 40 / small 36 / xsmall 32. Default `medium`. */
+    size: SuiCompactSelectSize;
+    /**
+     * Valor seleccionado (matchea `item.value`). En modo items, resuelve el item con
+     * `value === value` para pintar el estado seleccionado. En modo trigger-only, es
+     * el texto que se muestra directamente. Default `''`.
+     */
+    value: string;
+    /** Placeholder cuando no hay valor (types basic + country). Default `''`. */
+    placeholder: string;
+    /** RemixIcon name del leading estatico (type='icon', modo trigger-only). `''`/null = sin icono. */
+    icon: string | null;
+    /** Slug de bandera del leading estatico (type='country', modo trigger-only). `''`/null = sin bandera. */
+    flag: SuiFlagName | null;
+    /** Items del menu. Si tiene length > 0, el componente gestiona su propio panel. Default `[]`. */
+    items: SuiCompactSelectItem[];
+    /** Estado de error (border rojo + focus ring rojo). Default `false`. */
+    error: boolean;
+    /** Deshabilitado (no abre, no emite). Default `false`. */
+    disabled: boolean;
+    /**
+     * Nombre accesible del trigger. Imprescindible con `type="icon"`, que no
+     * muestra texto: sin `ariaLabel` usa el label del ítem elegido o el placeholder.
+     * También con `type="country"` cuando solo se ve la bandera.
+     */
+    ariaLabel: string | null;
+    /** Panel abierto. Refleja a `data-sui-open` para el visual state del host. */
+    open: boolean;
+    /** Item resuelto desde `value` (o null). Se deriva en updateSelected(). */
+    private selected;
+    /** Indice keyboard-highlighted dentro del panel (-1 = ninguno). */
+    private highlightedIndex;
+    /** Click en el host (siempre emite, modo 1 + 2). */
+    clicked: EventEmitter<globalThis.Event>;
+    /** Item seleccionado (solo modo items). */
+    selectedChange: EventEmitter<SuiCompactSelectItem>;
+    componentWillLoad(): void;
+    onValueChange(): void;
+    onItemsChange(): void;
+    onDisabledChange(value: boolean): void;
+    /**
+     * Resuelve `selected` desde `value`. Si el value no matchea ningun item (items
+     * aun no llegaron), cuando items cambie el Watch (`onItemsChange`) reintenta.
+     */
+    private updateSelected;
+    private get hasItems();
+    /** Icon del arrow trailing: down (closed) / up (open). */
+    private get arrowIcon();
+    /**
+     * Tamano del sui-flag del trigger segun size (Figma 377:5083):
+     *   medium/small -> sm (20px), xsmall -> xs (16px).
+     */
+    private get flagSize();
+    private get displayValue();
+    private get displayIcon();
+    private get displayFlag();
+    private get hasValue();
+    private get triggerAriaLabel();
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    /** Click del div trigger interno (patrón canon sui-select; el host ya no es el botón). */
+    private onTriggerClick;
+    private onHostKeydown;
+    /** Avanza el highlight saltando items disabled. dir = +1 (down) / -1 (up). */
+    private moveHighlight;
+    private firstEnabledIndex;
+    private lastEnabledIndex;
+    onDocumentClick(event: MouseEvent): void;
+    onDocumentKeydown(event: KeyboardEvent): void;
+    onWindowResize(): void;
+    /** Abre el panel imperativamente (no hace nada en modo trigger-only). */
+    openMenu(): Promise<void>;
+    /** Cierra el panel imperativamente. */
+    closeMenu(): Promise<void>;
+    /** Alterna el panel imperativamente. */
+    toggleMenu(): Promise<void>;
+    private selectItem;
+    private onOptionClick;
+    private flipUp;
+    private flipIfClipped;
+    private renderLeading;
+    private renderOption;
+    render(): any;
+}

package/dist/types/components/sui-compact-select/sui-compact-select.data.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Datos / catálogos de `<sui-compact-select>`.
+ *
+ * Separado del .tsx porque Stencil prohíbe `export const/function/enum` junto al
+ * `@Component` (rompe el build entero). Aquí viven los catálogos de variantes y
+ * el shape del item; 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-compact-select/).
+ */
+import type { SuiFlagName } from '../sui-flag/sui-flag';
+/**
+ * Shape del item dentro del menu. El consumer pasa un array de estos en `items`.
+ * `value` es el identificador que se emite en `selectedChange` y se compara para
+ * resolver el estado seleccionado.
+ */
+export interface SuiCompactSelectItem {
+    value: string;
+    label: string;
+    sublabel?: string;
+    icon?: string;
+    flag?: SuiFlagName;
+    disabled?: boolean;
+}
+/** Types soportados (Figma 377:5083): basic / icon (RemixIcon) / country (sui-flag). */
+export declare const SUI_COMPACT_SELECT_TYPES: readonly ["basic", "icon", "country"];
+/** Sizes soportados: large 48 (extensión SUI, mobile) / medium 40 / small 36 / xsmall 32. */
+export declare const SUI_COMPACT_SELECT_SIZES: readonly ["large", "medium", "small", "xsmall"];
+/** Dataset de ejemplo para las stories (no se usa en runtime del componente). */
+export declare const SUI_COMPACT_SELECT_DEMO_COUNTRIES: SuiCompactSelectItem[];
+/** Dataset de ejemplo basic (sin leading). */
+export declare const SUI_COMPACT_SELECT_DEMO_BASIC: SuiCompactSelectItem[];
+/** Dataset de ejemplo icon (RemixIcon leading). */
+export declare const SUI_COMPACT_SELECT_DEMO_ICON: SuiCompactSelectItem[];

package/dist/types/components/sui-compact-select-for-input/sui-compact-select-for-input.d.ts

@@ -0,0 +1,140 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiCompactSelectForInputItem } from './sui-compact-select-for-input.data';
+import type { SuiFlagName } from '../sui-flag/sui-flag';
+/** `large` es extensión SUI (03-10-2026): para el `sui-input` large (48) de mobile. */
+export type SuiCompactSelectForInputSize = 'large' | 'medium' | 'small' | 'xsmall';
+/**
+ * `<sui-compact-select-for-input>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-compact-select-for-input/).
+ * Misma API publica conceptual, TODAS las variantes (3 sizes x estados), mismo
+ * comportamiento (overlay, teclado, focus, lazy mount del panel) y mismos VALORES
+ * exactos (tokens del DS). El accent del DS es NARANJA brand (#fa7319), NO el azul
+ * de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — Compact Select For Input 307:16883
+ *
+ * Variante del compact-select pensada para vivir DENTRO de un `<sui-input>`.
+ * Se proyecta tipicamente en el slot `start` del input (prefijo de telefono,
+ * selector de moneda, etc.).
+ *
+ * Diferencias vs `sui-compact-select` standalone (el sibling portado):
+ *   - SIN border (el input padre tiene su propio border)
+ *   - SIN focus ring (el input padre maneja el focus state)
+ *   - SIN error state (heredado del input padre)
+ *   - X-Small usa flag 16x16 (xs) vs 20x20 (sm) del compact-select normal
+ *   - paddings asimetricos por size (pl/pr distintos en medium/xsmall — Figma)
+ *   - Menu flotante con minWidth 200px (matchea el comportamiento del Angular,
+ *     que pasaba minWidth=200 al sui-dropdown-menu)
+ *
+ * Diferencias de PORT vs el Angular original (y por que):
+ *  - El Angular delegaba el overlay a `sui-dropdown-menu` (CDK Overlay) + items a
+ *    `sui-dropdown-item mode="option"`. Esos no estan portados en Stencil todavia;
+ *    aqui el panel + items se implementan inline (la pieza minima necesaria)
+ *    replicando el visual de `sui-dropdown-item mode="option"` (bg primary-alpha-10
+ *    + check icon + texto primary cuando selected). Mismo look, sin la dependencia.
+ *    Es el MISMO approach que ya usa el sibling `sui-compact-select.tsx`.
+ *  - El Angular implementaba ControlValueAccessor (formControlName). En web
+ *    components el binding es por `value` prop + evento `selectedChange`. `value`
+ *    resuelve el item con `value === value` (incluido el caso async: si los items
+ *    llegan despues, un Watch re-resuelve el pending value via updateSelected()).
+ *    Drop-in para libs (Angular value/valueChange, React value/onSelectedChange).
+ *  - `selected` no se expone two-way (no existe model() en Stencil); se deriva
+ *    internamente del `value`. El item seleccionado completo viaja en el payload
+ *    del evento `selectedChange`.
+ *
+ * GOTCHAS de API (renombres / Stencil):
+ *  - `country` (bool) se mantiene tal cual (no colisiona con DOM). Cuando true y hay
+ *    flag resuelta, muestra el leading flag; cuando false, oculta el flag.
+ *  - El strip del atributo nativo `title` (canon Ontop) no aplica: el componente no
+ *    recibe `title`.
+ *
+ * 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 items clickeables custom del panel).
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-sui-*])`
+ * translan limpio y el panel flotante se monta dentro del subtree del host sin
+ * pelear con shadow DOM. Misma estrategia que sui-compact-select / sui-popover.
+ *
+ * Eventos:
+ *  - `clicked`: Event — siempre emite cuando el host se clickea (modo 1 + 2).
+ *  - `selectedChange`: SuiCompactSelectForInputItem — solo en modo items, cuando
+ *    el user selecciona un item.
+ */
+export declare class SuiCompactSelectForInput {
+    el: HTMLElement;
+    /** Tamaño: large (extensión SUI, para sui-input large 48) / medium / small / xsmall. Default `medium`. */
+    size: SuiCompactSelectForInputSize;
+    /**
+     * Valor seleccionado (matchea `item.value`). En modo items, resuelve el item con
+     * `value === value` para pintar el estado seleccionado. En modo trigger-only es el
+     * texto que se muestra directamente. Default `''`.
+     */
+    value: string;
+    /**
+     * Mostrar el leading flag (cuando hay una flag resuelta del item o de `flag`).
+     * Default `true`. Si false, el leading flag se oculta aunque haya bandera.
+     */
+    country: boolean;
+    /** Slug de bandera del leading estatico (modo trigger-only). `null` = sin bandera. */
+    flag: SuiFlagName | null;
+    /** Items del menu. Si tiene length > 0, el componente gestiona su propio panel. Default `[]`. */
+    items: SuiCompactSelectForInputItem[];
+    /** Deshabilitado (no abre, no emite). Default `false`. El input padre tambien lo propaga. */
+    disabled: boolean;
+    /** Panel abierto. Refleja a `data-sui-open` para el visual state del host. */
+    open: boolean;
+    /** Item resuelto desde `value` (o null). Se deriva en updateSelected(). */
+    private selected;
+    /** Indice keyboard-highlighted dentro del panel (-1 = ninguno). */
+    private highlightedIndex;
+    /** Auto-flip si el panel se sale del viewport inferior. */
+    private flipUp;
+    /** Click en el host (siempre emite, modo 1 + 2). */
+    clicked: EventEmitter<globalThis.Event>;
+    /** Item seleccionado (solo modo items). */
+    selectedChange: EventEmitter<SuiCompactSelectForInputItem>;
+    componentWillLoad(): void;
+    onValueChange(): void;
+    onItemsChange(): void;
+    onDisabledChange(value: boolean): void;
+    /**
+     * Resuelve `selected` desde `value`. Si el value no matchea ningun item (items aun
+     * no llegaron), cuando items cambie el Watch (`onItemsChange`) reintenta.
+     */
+    private updateSelected;
+    private get hasItems();
+    /** Icon del arrow trailing: down (closed) / up (open). */
+    private get arrowIcon();
+    /**
+     * Tamano del sui-flag del trigger segun size (Figma 307:16883):
+     *   medium/small -> sm (20px), xsmall -> xs (16px).
+     */
+    private get flagSize();
+    private get displayValue();
+    private get displayFlag();
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    private onHostClick;
+    private onHostKeydown;
+    /** Avanza el highlight saltando items disabled. dir = +1 (down) / -1 (up). */
+    private moveHighlight;
+    private firstEnabledIndex;
+    private lastEnabledIndex;
+    onDocumentClick(event: MouseEvent): void;
+    onDocumentKeydown(event: KeyboardEvent): void;
+    onWindowResize(): void;
+    /** Abre el panel imperativamente (no hace nada en modo trigger-only). */
+    openMenu(): Promise<void>;
+    /** Cierra el panel imperativamente. */
+    closeMenu(): Promise<void>;
+    /** Alterna el panel imperativamente. */
+    toggleMenu(): Promise<void>;
+    private selectItem;
+    private onOptionClick;
+    private flipIfClipped;
+    private renderOption;
+    render(): any;
+}

package/dist/types/components/sui-compact-select-for-input/sui-compact-select-for-input.data.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Datos / catalogos de `<sui-compact-select-for-input>`.
+ *
+ * Separado del .tsx porque Stencil prohibe `export const/function/enum` junto al
+ * `@Component` (rompe el build entero). Aqui viven el shape del item y los datasets
+ * de demo; el .tsx importa el type sin re-exportarlo con llaves.
+ *
+ * Portado 1:1 desde el Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-compact-select-for-input/).
+ */
+import type { SuiFlagName } from '../sui-flag/sui-flag';
+/**
+ * Shape del item dentro del menu. El consumer pasa un array de estos en `items`.
+ * `value` es el identificador que se emite en `selectedChange` y se compara para
+ * resolver el estado seleccionado.
+ *
+ * NOTA: el Angular original tipa `value` como generico `T = string`. En web
+ * components el binding es declarativo (atributos string), asi que el value se fija
+ * a `string` — mismo criterio que el sibling `SuiCompactSelectItem`.
+ */
+export interface SuiCompactSelectForInputItem {
+    value: string;
+    label: string;
+    sublabel?: string;
+    flag?: SuiFlagName;
+    disabled?: boolean;
+}
+/** Sizes soportados: medium / small / xsmall. */
+export declare const SUI_COMPACT_SELECT_FOR_INPUT_SIZES: readonly ["large", "medium", "small", "xsmall"];
+/**
+ * Dataset de ejemplo: prefijos telefonicos por pais (el caso de uso canonico de
+ * este componente — selector de codigo de pais dentro de un input de telefono).
+ */
+export declare const SUI_COMPACT_SELECT_FOR_INPUT_DEMO_COUNTRIES: SuiCompactSelectForInputItem[];
+/** Dataset de ejemplo basic (sin bandera) — selector de moneda inline. */
+export declare const SUI_COMPACT_SELECT_FOR_INPUT_DEMO_CURRENCY: SuiCompactSelectForInputItem[];

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

@@ -0,0 +1,162 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type SuiAvatarConfig, type SuiBadgeConfig } from '../../utils/sui-configs';
+import type { SuiBrandLogoCompany } from '../sui-brand-logo/sui-brand-logo';
+/**
+ * 6 tipos de leading visual del Content Card (SUI Design System 2.0).
+ *   basic        — sin leading; sólo text block.
+ *   left-icon    — sui-key-icon circular 40px (stroke: border + bg-white + shadow).
+ *   avatar       — sui-avatar (foto / iniciales) 40px (size lg).
+ *   card-provider — tile de tarjeta de pago 32×24 radius-4 con brand logo.
+ *   brand        — sui-brand-logo RAW 40px (sin caja).
+ *   company      — sui-avatar con companyLogoSrc (logo de empresa) 40px.
+ */
+export type SuiContentCardType = 'basic' | 'left-icon' | 'avatar' | 'card-provider' | 'brand' | 'company';
+/** Tamaño de la X de quitar: `medium` 20 (Figma, default) · `large` 32 con área
+ *  táctil de 40 (extensión SUI 03-10-2026, mobile). */
+export type SuiContentCardSize = 'medium' | 'large';
+/**
+ * `<sui-content-card>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Componente COMPUESTO portado 1:1 desde el SUI Angular
+ * (projects/sui-design-system/src/lib/sui-content-card). Misma API
+ * pública (type/title/sublabel/subtitle/badge/icon/avatar/companyLogoSrc/brand/
+ * dismissible/dismissAriaLabel/size/disabled + evento `dismiss`),
+ * TODAS las variantes/sizes/states, mismo comportamiento y los MISMOS VALORES
+ * exactos vía tokens del DS (no hex). El accent del DS es NARANJA brand
+ * (#fa7319 = --sui-primary-base / sui-badge color="orange"), NO el azul de Figma.
+ *
+ * Reusa los PRIMITIVOS ya portados: `<sui-icon>`, `<sui-key-icon>`, `<sui-badge>`,
+ * `<sui-avatar>`, `<sui-brand-logo>`. El botón X de dismiss se renderiza como `<button>` nativo
+ * (igual que el Angular) porque necesita el styling propio (hover bg-weak-50 +
+ * icon strong-950, active scale) que no es ninguno de los variants de sui-button.
+ *
+ * Es el `ContentLabel` de SUI (fila con leading visual + título/subtítulo +
+ * badge inline) ENVUELTO en una card: bg-white-0, border 1px stroke-soft-200,
+ * radius 12px, padding 16px, drop-shadow x-small. El trailing del ContentLabel
+ * (badge/switch) se reemplaza por un botón X de dismiss (close-line 20px).
+ *
+ * Figma: set "Content Card [1.1]" nodo 2942:9503 (FIGMA-VERIFIED 2026-07-23 en
+ * el SUI Angular). Anatomía (flex row, gap 14, items-center):
+ *   [ leading 40 ] [ text block (flex-1, gap 4) ] [ X dismiss 20px ]
+ *   text block = Title row (title + sublabel + sui-badge inline, gap 4) + Subtitle 12/16.
+ *
+ * Correcciones de esa verificación (antes inferido ≠ Figma): gap del row 12 → 14,
+ * text block 2 → 4, title row 6 → 4, subtitle 14/20 → 12/16, left-icon cuadro
+ * radius-10 → key-icon circular, avatar md (32) → lg (40), brand sin caja,
+ * card-provider 40×28 r6 → 32×24 r4, prop `sublabel` nuevo.
+ *
+ * En Angular el row es `<sui-content-label>` compuesto; en Stencil ese componente
+ * todavía no existe en esta rama, así que el row sigue inline con los mismos valores.
+ *
+ * Token map (Figma → sui-tokens):
+ *   bg/white-0       → --sui-bg-white-0       (card bg + leading bg)
+ *   stroke/soft-200  → --sui-stroke-soft-200  (card border + leading border)
+ *   text/strong-950  → --sui-text-strong-950  (title · X icon hover)
+ *   text/sub-600     → --sui-text-sub-600     (subtitle)
+ *   icon/sub-600     → --sui-icon-sub-600     (leading icon + X idle)
+ *   bg/weak-50       → --sui-bg-weak-50        (X hover bg)
+ *   text/disabled-300→ --sui-text-disabled-300 (title/subtitle disabled)
+ *   icon/disabled-300→ --sui-icon-disabled-300 (leading/X disabled)
+ *   radius-12 / 10 / 6 / 4 · shadow x-small.
+ *
+ * Typography:
+ *   title    → Label/Small     14/20 weight 500 ls -0.006em (--sui-type-label-sm-*)
+ *   sublabel / subtitle → Paragraph/X Small 12/16 weight 400 (--sui-type-paragraph-xs-*)
+ *
+ * GOTCHAS Stencil:
+ *  - El @Prop del título se llama `cardTitle` (NO `title`, reservado del DOM).
+ *    El host strip-ea el `title` nativo (`title={null}`) para evitar el tooltip
+ *    gris del OS, y expone `cardTitle` como `aria-label` para accesibilidad.
+ *  - `icon`/`companyLogoSrc`/`brand` son `string|null`; al bindearlos
+ *    a props de primitivos que aceptan null se pasan directos, y a un atributo
+ *    HTML (no aplica acá) se resolverían con `?? undefined`.
+ *
+ * iOS :active — el botón X lleva los listeners touchstart/touchend para liberar
+ * el estado active en WKWebView (regla del proyecto).
+ *
+ * Disabled: atenúa title/subtitle/leading/X a tokens disabled-300, pone el badge
+ * en su propio estado disabled, bloquea el botón X (no emite `dismiss`) y setea
+ * aria-disabled en el host.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * translan limpio y los primitivos internos heredan los tokens globales. Misma
+ * estrategia que el resto del DS.
+ *
+ * Usage:
+ *   <sui-content-card type="left-icon" icon="bank-card-line"
+ *     card-title="Visa **** 4242" subtitle="Expira 09/27" badge="Principal">
+ *   </sui-content-card>
+ *   <sui-content-card type="avatar" avatar-src="/u.jpg"
+ *     card-title="Ana Torres" subtitle="ana@correo.com"></sui-content-card>
+ *   <sui-content-card type="brand" brand="stripe"
+ *     card-title="Stripe" subtitle="Conectado" badge="Activo"></sui-content-card>
+ */
+export declare class SuiContentCard {
+    el: HTMLElement;
+    /** Tipo de leading visual. Default `basic` (sin leading). */
+    type: SuiContentCardType;
+    /**
+     * Título — Label/Small, text-strong-950.
+     * GOTCHA: NO se llama `title` (reservado del DOM en Stencil/HTML).
+     */
+    cardTitle: string;
+    /** Sublabel inline al lado del título — Paragraph/X Small 12/16, text-sub-600
+     *  (Figma 2942:9517). Vacío = no se renderiza. */
+    sublabel: string;
+    /** Subtítulo (la "description" del Content Label) — Paragraph/X Small 12/16, text-sub-600. */
+    subtitle: string;
+    /**
+     * Badge inline (Title row, después del sublabel) — string shorthand
+     * (`badge="Principal"`) o `SuiBadgeConfig` (label + color/variant/size).
+     * Fallbacks de la card: color `orange` (branding; el DS de Figma usa `blue`),
+     * variant `lighter`, size `small`. `null`/`''` = sin badge.
+     */
+    badge: SuiBadgeConfig | string | null;
+    /** RemixIcon name (sin `ri-`) para type=left-icon. */
+    icon: string | null;
+    /**
+     * Avatar del leading (type=avatar / company) — string shorthand (src directo) o
+     * `SuiAvatarConfig { src?, initials?, color? }`. `null` = sin avatar.
+     */
+    avatar: SuiAvatarConfig | string | null;
+    /** Logo de empresa para type=company (mini-avatar bottom-right del sui-avatar). */
+    companyLogoSrc: string | null;
+    /** Marca para type=brand / card-provider. */
+    brand: SuiBrandLogoCompany | null;
+    /** Mostrar el botón X de dismiss. Default `true`. */
+    dismissible: boolean;
+    /** aria-label del botón X. Default `Descartar`. */
+    dismissAriaLabel: string;
+    /**
+     * Tamaño de la X de quitar (la fila no cambia: sigue en 72).
+     * `medium` (default, Figma): 20 × 20 sin área extra.
+     * `large` — extensión SUI (03-10-2026) para mobile: caja de 32 × 32 con el
+     * glyph en 20 y un área táctil invisible de 40 × 40 (44 en ≤767).
+     */
+    size: SuiContentCardSize;
+    /**
+     * Estado deshabilitado: atenúa contenido a tokens disabled-300, deshabilita el
+     * badge y el botón X (sin pointer-events), y setea aria-disabled en el host.
+     */
+    disabled: boolean;
+    /** Se emite al hacer click en el botón X. NO emite si `disabled`. */
+    dismiss: EventEmitter<MouseEvent>;
+    /** Sin tooltip nativo: `title={null}` del Host solo actúa desde el segundo render. */
+    componentWillLoad(): void;
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo cual hace que `:active` dispare y se libere
+     * correctamente en el botón X. Sin esto `:active` "stickea" 300-500ms.
+     */
+    onTouchStart(): void;
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd(): void;
+    /** True si hay leading visual (todo menos basic). */
+    private get hasLeading();
+    private onDismiss;
+    /** Config del avatar (string = src). */
+    private get avatarCfg();
+    /** Render del leading según `type` (mismos primitivos y tamaños que sui-content-label medium). */
+    private renderLeading;
+    render(): any;
+}