@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,38 @@
+/**
+ * `<sui-icon>` — wrapper de iconos del SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-icon/). Misma API
+ * pública, mismo comportamiento, mismos valores (tokens, no hex).
+ *
+ * Dos modos de render:
+ *  1. Si `name` matchea una key de SUI_CUSTOM_ICONS → SVG inline (forma propia
+ *     del DS que NO existe en RemixIcon: info-custom-fill, avatar-placeholder,
+ *     building-skyline).
+ *  2. Cualquier otro `name` → `<i class="ri-${name}">` del font RemixIcon
+ *     (ej. 'home-line', 'search-line', 'shopping-bag-fill').
+ *
+ * `scoped: true` (light DOM, NO shadow): así hereda el `@font-face` + las
+ * 3245 clases `.ri-*` del global `sui-tokens.css` sin re-incluir los 157KB
+ * por instancia. Igual estrategia que el Angular original (sin shadow DOM).
+ *
+ * Color: por defecto hereda `currentColor` del contexto (text/icon token del
+ * padre). Pasar `color` con cualquier valor CSS — preferir tokens del DS,
+ * ej. `var(--sui-icon-sub-600)`, `var(--sui-primary-base)`,
+ * `var(--sui-state-error-base)`, NO hex sueltos.
+ */
+export declare class SuiIcon {
+    /** Nombre RemixIcon sin prefijo, ej. 'home-line', 'search-line', 'shopping-bag-fill'. Requerido. */
+    name: string;
+    /** Tamaño en px (number) o cualquier valor CSS (string). Default: 20. */
+    size: number | string;
+    /** Valor CSS de color. Default: '' → hereda (currentColor). Preferir tokens `--sui-icon-*`. */
+    color: string;
+    /** SVG custom del DS si `name` está registrado; null → cae a RemixIcon font. */
+    private get customIcon();
+    /** Clase del font RemixIcon. */
+    private get iconClass();
+    /** Normaliza size: number → 'Npx', string → tal cual. */
+    private get sizeValue();
+    render(): any;
+}

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

@@ -0,0 +1,115 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiImageUploadShape, SuiImageUploadSize } from './sui-image-upload.data';
+/**
+ * `<sui-image-upload>` — SUI Design System 2.0. COMPUESTO.
+ *
+ * Homologado con el SUI Angular (`sui-design-system`, 05-11-2026).
+ * Upload + preview de UNA imagen (avatar o logo): cuadro clickable con preview
+ * inline. Shapes circle | rect × sizes sm 80 / md 120 / lg 160 / xl 200.
+ * Estados (`data-sui-state`): disabled > dragover > filled > empty.
+ *
+ * NOTA: el node 452:653 de Figma ("Image Upload") describe otro layout (avatar
+ * 64 + textos + botones): ese es `sui-image-upload-profile`. Los valores de este
+ * (empty state, overlay) son convención de proyecto.
+ *
+ *  - `fluid`: ocupa el ancho del contenedor en vez del cuadrado de `size`. Para
+ *    subir un documento (comprobante, licencia): el cuadrado desperdicia ancho y
+ *    recorta las capturas verticales.
+ *  - `editable`: con imagen muestra controles de ícono (lápiz + tacho) en vez
+ *    del overlay de re-subir + «Quitar». El lápiz emite `editRequested` (el
+ *    consumer abre su recortador, o llama a `abrirSelector()`).
+ *  - Acepta JPG, PNG, WebP, GIF y HEIC/HEIF (por MIME o, si viene vacío, por
+ *    extensión).
+ *  - Con imagen y sin `editable`, «Quitar» va debajo del cuadrado y el alto del
+ *    host deja de ser fijo (el botón ya no se monta sobre lo que sigue).
+ *
+ * a11y (04-10-2026): el host es `role="button"` con tabindex SOLO vacío. Con
+ * imagen tiene botones adentro (cambiar, quitar, lápiz, tacho) y un botón no
+ * puede contener otros; ahí los controles son esos botones. El overlay de
+ * re-subir es un `<button>` real.
+ *
+ * ── Divergencias con el Angular ───────────────────────────────────────────
+ *  1. `title` → `heading` (`title` es reservado del DOM).
+ *  2. `src` (model) → `@Prop` mutable + evento `srcChange`.
+ *  3. Textos fijos en español (el `provideSuiTextos` del Angular es DI).
+ *
+ * `scoped: true` (light DOM).
+ */
+export declare class SuiImageUpload {
+    el: HTMLElement;
+    componentWillLoad(): void;
+    /** Ocupa el ancho del contenedor en vez del cuadrado fijo de `size`; el alto lo da el contenido. Default `false`. */
+    fluid: boolean;
+    /** Forma del preview. Default `circle`. */
+    shape: SuiImageUploadShape;
+    /** Tamaño del cuadro. Default `lg` (160px). */
+    size: SuiImageUploadSize;
+    /**
+     * URL (o data-URL) de la imagen actual. Bidireccional vía el evento
+     * `srcChange` (equivale al `model` del Angular).
+     */
+    src: string | null;
+    /** Tamaño máximo en bytes. `0` = sin límite. Default `0`. */
+    maxSize: number;
+    /**
+     * Título del empty state. Default según shape («Sube tu foto» / «Sube tu
+     * logo»). Es el `title` del Angular: `title` es reservado del DOM.
+     */
+    heading: string | null;
+    /** Subtítulo del empty state. Default «JPG, PNG, WebP o HEIC» (+ el máximo si hay `maxSize`). */
+    subtitle: string | null;
+    /** Deshabilitado: bloquea interacción, atenúa, no focusable. Default `false`. */
+    disabled: boolean;
+    /**
+     * Opt-in: con imagen muestra controles de ÍCONO (editar + tacho) en vez del
+     * overlay de re-subir + botón «Quitar». El lápiz emite `editRequested`.
+     */
+    editable: boolean;
+    dragging: boolean;
+    /** Error de validación interno (tipo/tamaño no soportado). */
+    internalError: string | null;
+    /** Two-way binding de `src`. */
+    srcChange: EventEmitter<string | null>;
+    /** File seleccionado o dropeado y validado. */
+    imageSelected: EventEmitter<File>;
+    /** El usuario quitó la imagen. */
+    removed: EventEmitter<void>;
+    /** Modo `editable`: se tocó el lápiz (el consumer abre su editor/recortador). */
+    editRequested: EventEmitter<void>;
+    /** Mensaje de error de validación (tipo o tamaño). */
+    errorEvent: EventEmitter<string>;
+    private inputRef?;
+    private get hasSrc();
+    /** Hay imagen y se muestra el botón «Quitar» debajo (sin `editable`). */
+    private get conQuitar();
+    private get sizePx();
+    private get state();
+    private get resolvedTitle();
+    private get resolvedSubtitle();
+    alTocar(): void;
+    alSoltar(event: Event): void;
+    onHostClick(event?: MouseEvent): void;
+    /**
+     * Enter/Espacio sobre el host vacío. Solo cuenta si el foco está en el host:
+     * un Enter que burbujea desde «Quitar» (que borra la imagen y deja el host
+     * vacío en ese mismo tick) no debe abrir el selector.
+     */
+    onHostKey(event: KeyboardEvent): void;
+    onDragOver(event: DragEvent): void;
+    onDragLeave(event: DragEvent): void;
+    onDrop(event: DragEvent): void;
+    /**
+     * Reabre el selector de archivo. Público a propósito: en modo `editable` el
+     * lápiz emite `editRequested`, pero no todo caso tiene recortador. Para un
+     * documento, lo que se espera del lápiz es elegir otro archivo.
+     */
+    abrirSelector(): Promise<void>;
+    private onChangeClick;
+    private onEditClick;
+    private onRemoveClick;
+    private onInputChange;
+    private fallar;
+    private processFile;
+    private formatBytes;
+    render(): any;
+}

package/dist/types/components/sui-image-upload/sui-image-upload.data.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Tipos y catálogos compartidos del `<sui-image-upload>`. Viven en este archivo
+ * hermano (no en el `.tsx`) por la regla del proyecto Stencil: en el `.tsx`
+ * SOLO se permite `export class` / `export type` / `export interface`.
+ * Cualquier `export const` / `export function` / `export enum` rompe el build de
+ * TODO el proyecto, así que los catálogos / constantes data-driven se aíslan acá.
+ *
+ * Homologado con el SUI Angular (05-11-2026).
+ */
+/** Forma del preview: circle (avatar) | rect (banner / logo). */
+export type SuiImageUploadShape = 'circle' | 'rect';
+/** Tamaño del cuadro (px): sm=80, md=120, lg=160, xl=200. */
+export type SuiImageUploadSize = 'sm' | 'md' | 'lg' | 'xl';
+/** Estado visual derivado (no es un @Prop — se computa internamente). */
+export type SuiImageUploadState = 'empty' | 'filled' | 'dragover' | 'disabled';
+/** px values por size token — escalera uniforme (igual al Angular). */
+export declare const SIZE_PX: Record<SuiImageUploadSize, number>;
+/**
+ * Tipos aceptados. HEIC/HEIF desde el 03-10-2026: la foto del iPhone llega así
+ * cuando se sube desde Android o la compu (en el iPhone el sistema ya la
+ * convierte a JPEG). Chrome suele reportar `file.type` vacío para un .heic,
+ * por eso además se acepta por extensión.
+ */
+export declare const ALLOWED_TYPES: string[];
+/** Valor del `accept` del input file (tipos + extensiones, por el .heic sin MIME). */
+export declare const SUI_IMAGE_UPLOAD_ACCEPT: string;
+/** ¿Es una imagen que el componente acepta? Por MIME o, si viene vacío, por extensión. */
+export declare function esImagenAceptada(file: Pick<File, 'type' | 'name'>): boolean;

package/dist/types/components/sui-image-upload-profile/sui-image-upload-profile.d.ts

@@ -0,0 +1,149 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiImageUploadProfileAlignment = 'vertical' | 'horizontal';
+export type SuiImageUploadProfileType = 'avatar' | 'company';
+/** Copy de los botones de acción (i18n). Lo no seteado cae al default en
+ *  español (tuteo): Subir / Eliminar / Cambiar. */
+export interface SuiImageUploadProfileLabels {
+    upload?: string;
+    remove?: string;
+    change?: string;
+}
+/**
+ * `<sui-image-upload-profile>` — SUI Design System 2.0. COMPUESTO.
+ *
+ * Homologado con el SUI Angular (`sui-design-system`, 05-11-2026).
+ * Misma API pública, TODAS las variantes (8 = type × state × alignment), mismo
+ * comportamiento (derivación de estado, avatar 64/56, texto solo en vertical,
+ * remove limpia el value, disabled/loading gatean los outputs) y mismos VALORES
+ * exactos vía tokens (`--sui-*`, no hex). Reusa los compuestos ya portados
+ * `<sui-avatar>` (silueta/logo) y `<sui-button>` (acciones). El accent del DS es
+ * NARANJA brand (#fa7319), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — frame 452:653 ("Image Upload [1.1]").
+ *   8 variants = Type(Avatar|Company) × State(Empty|Uploaded) × Alignment(V|H).
+ *     452:645  Avatar  / Empty    / Vertical    Text(title+subtitle) + Upload
+ *     452:693  Avatar  / Uploaded / Vertical    Text + (Remove + Change)
+ *     452:785  Company / Empty    / Vertical    Text + Upload
+ *     452:792  Company / Uploaded / Vertical    Text + (Remove + Change), avatar = logo slot
+ *     452:983  Avatar  / Empty    / Horizontal  SOLO Upload (sin Text)
+ *     452:990  Avatar  / Uploaded / Horizontal  SOLO (Remove + Change) (sin Text)
+ *     452:999  Company / Empty    / Horizontal  SOLO Upload (sin Text)
+ *     452:1006 Company / Uploaded / Horizontal  SOLO (Remove + Change) (sin Text)
+ *
+ * REGLA DE TEXTO (verificada node-by-node): el bloque "Text" (title + subtitle)
+ *   SOLO existe cuando alignment=vertical. En horizontal el frame "Profile
+ *   Content" contiene ÚNICAMENTE los botones, tanto en Empty como en Uploaded.
+ *   showText === (alignment === 'vertical'). NO depende del state.
+ *
+ * Layout "Profile Content":
+ *   [Avatar/Company circle | gap 20 | (Text: title + subtitle)? + Action buttons]
+ *   Vertical:   root items-start, avatar 64 (3xl), content gap 12, text gap 4.
+ *   Horizontal: root items-center, avatar 56 (2xl), content = solo botones.
+ *
+ *   Action buttons:
+ *     Empty    un botón  "Subir"    (stroke neutral)
+ *     Uploaded fila      "Eliminar" (stroke ERROR) + "Cambiar" (stroke neutral)
+ *     Todos size="xsmall" (h32, p6, radius8, Label/Small). Labels configurables
+ *     con el prop objeto `labels` ({ upload?, remove?, change? }): default en
+ *     español (tuteo), el consumer pisa lo que quiera (parcial o total) para i18n.
+ *
+ *   Type=company: el avatar es el logo de la empresa (companyLogoSrc). Empty =
+ *     silueta de edificios (icono custom DS `building-skyline`). Type=avatar
+ *     empty = silueta humana (fallback default de sui-avatar).
+ *
+ * GOTCHA Stencil: el @Prop `title` del Angular es un nombre reservado del DOM
+ *   (dispara el tooltip nativo gris) → renombrado a `heading`. Además se stripea
+ *   el atributo nativo `title` del Host (se quita en `componentWillLoad`), patrón canon Ontop.
+ *
+ * Sobre el CVA: el componente Angular implementa ControlValueAccessor sobre
+ *   `imageUrl`. En Stencil no hay Angular Forms; el equivalente es: `imageUrl`
+ *   es la fuente controlada del value, `remove` limpia el value mostrado a null
+ *   (mirror interno `_clearedValue`) y emite el evento `remove` para que el
+ *   consumer sincronice su estado. `upload`/`imageChange` solo emiten (el consumer
+ *   cablea el file picker y escribe la URL de vuelta en `imageUrl`).
+ *
+ * Nota: este componente es PRESENTACIONAL. No abre file pickers ni valida MIME;
+ *   el consumer cablea (upload)/(imageChange) a su propio <input type=file> o flujo.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los `:host([data-sui-*])` y los
+ * compuestos internos (<sui-avatar>, <sui-button>) heredan tokens del global.
+ */
+export declare class SuiImageUploadProfile {
+    el: HTMLElement;
+    componentWillLoad(): void;
+    /**
+     * URL/dataURL de la imagen actual. null/'' → estado Empty. Es la fuente
+     * controlada del value (equivale al value del CVA Angular).
+     */
+    imageUrl: string | null;
+    /**
+     * URL del logo de empresa (type=company). Si se pasa, fuerza el estado
+     * Uploaded en Company aunque `imageUrl` sea null.
+     */
+    companyLogoSrc: string | null;
+    /**
+     * Título (Label/Medium). Renombrado desde el `title` del Angular: `title` es
+     * un @Prop reservado del DOM (dispara tooltip nativo). En HTML el atributo es
+     * `heading`. Solo se muestra en alignment=vertical. Si null, «Subir imagen».
+     */
+    heading: string | null;
+    /** Subtítulo (Paragraph/Small). Solo en alignment=vertical. Si null, «Mín. 400x400px, PNG o JPEG». */
+    subtitle: string | null;
+    /**
+     * vertical (texto + avatar 64) | horizontal (avatar 56, sin texto).
+     * Default `vertical`.
+     */
+    alignment: SuiImageUploadProfileAlignment;
+    /** avatar (silueta humana) | company (silueta edificios). Default `avatar`. */
+    type: SuiImageUploadProfileType;
+    /** Copy de los botones (i18n): objeto parcial `{ upload?, remove?, change? }`; lo no seteado cae al default (Subir / Eliminar / Cambiar). */
+    labels: SuiImageUploadProfileLabels;
+    /** Deshabilita los botones (no se puede interactuar). Default `false`. */
+    disabled: boolean;
+    /** Estado de carga (botones deshabilitados mientras sube). Default `false`. */
+    loading: boolean;
+    /** Se emite al click en "Subir" (estado Empty). */
+    upload: EventEmitter<void>;
+    /** Se emite al click en "Eliminar" (estado Uploaded). */
+    remove: EventEmitter<void>;
+    /**
+     * Se emite al click en "Cambiar" (estado Uploaded).
+     * Renombrado de `change` → `imageChange`: `change` colisiona con el evento DOM
+     * nativo (Stencil emite WARN y listeners pueden recibir el evento nativo).
+     */
+    imageChange: EventEmitter<void>;
+    /**
+     * Mirror interno: tras presionar "Eliminar" el value mostrado se limpia a null
+     * aunque el prop `imageUrl` siga apuntando a la URL vieja (equivale al
+     * `_formValue.set(null)` del CVA Angular). Un `imageUrl` nuevo lo resetea.
+     */
+    private cleared;
+    /** Reset del mirror `cleared` cuando llega un `imageUrl` nuevo (re-upload). */
+    resetCleared(): void;
+    /** Imagen efectiva: null si se limpió con "Eliminar", sino el prop. */
+    private get resolvedImage();
+    /** Disabled efectivo: prop `disabled` o `loading`. */
+    private get isDisabled();
+    /**
+     * Empty cuando no hay imagen ni logo de empresa; Uploaded cuando hay alguno.
+     * (Company puede estar Uploaded por `companyLogoSrc` aunque `imageUrl` sea null.)
+     */
+    private get state();
+    /** Src que se pasa al avatar: logo de empresa (Company) o imagen (Avatar). */
+    private get avatarSrc();
+    /** vertical → avatar 64px (3xl); horizontal → 56px (2xl). */
+    private get avatarSize();
+    /**
+     * Company empty → silueta de edificios (icono custom DS `building-skyline`);
+     * Avatar empty → silueta humana (null → fallback default del avatar).
+     */
+    private get placeholderIcon();
+    /** El bloque de texto solo se muestra en vertical (horizontal es solo botones). */
+    private get showText();
+    /** Labels resueltas: `labels` > default en español (tuteo). */
+    private get labelsCfg();
+    private onUpload;
+    private onRemove;
+    private onChange;
+    render(): any;
+}

package/dist/types/components/sui-img-retry/sui-img-retry.d.ts

@@ -0,0 +1,27 @@
+/**
+ * `<sui-img-retry>` — SUI Design System 2.0 · utilidad.
+ *
+ * Carga de imágenes resiliente estilo app nativa. Port de la directiva Angular
+ * `img[suiImgRetry]`: los web components no tienen directivas de atributo, así
+ * que aquí es un envoltorio sin caja (`display: contents`) que engancha el
+ * reintento al `<img>` que lleva adentro. El `<img>` es del consumer (src,
+ * alt, loading, srcset, CSS): no se toca nada más.
+ *
+ *   <sui-img-retry><img src="https://…/portada.jpg" alt="" /></sui-img-retry>
+ *
+ * Contrato (igual que el Angular): clase `sui-img-loaded` al cargar, atributo
+ * `data-sui-img-dead` al agotar los 3 reintentos (1 s, 3 s, 8 s), reintento
+ * inmediato al volver la red y contador a cero si cambia el `src`. Fade-in:
+ * `img { opacity: 0 } img.sui-img-loaded { opacity: 1 }`.
+ *
+ * Sin el wrapper: `import { suiImgRetry } from 'sui-stencil'` y
+ * `const soltar = suiImgRetry(imgEl)`.
+ *
+ * Solo engancha el primer `<img>` hijo que encuentra al conectarse.
+ */
+export declare class SuiImgRetry {
+    el: HTMLElement;
+    private detach;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/dist/types/components/sui-img-retry/sui-img-retry.util.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Engancha el reintento a un `<img>` cualquiera y devuelve la función que lo
+ * suelta. Es la lógica de la directiva Angular `img[suiImgRetry]`, sin
+ * framework: el `<sui-img-retry>` la usa con su `<img>` hijo, y quien no quiera
+ * el wrapper puede llamarla directo.
+ *
+ * - Falla la carga → reintenta a 1 s, 3 s y 8 s.
+ * - Desde el 2.º reintento, `fetch(src, { cache: 'reload' })` antes de
+ *   reintentar, para pisar una copia truncada del disk cache.
+ * - Vuelve la red (`online`) → si no cargó, reintento inmediato y contador a 0.
+ * - Carga → clase `sui-img-loaded` y quita `data-sui-img-dead`.
+ * - Se agotan los reintentos → atributo `data-sui-img-dead`.
+ * - Cambia el `src` → el contador arranca de cero para la URL nueva.
+ */
+export declare function suiImgRetry(img: HTMLImageElement): () => void;

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

@@ -0,0 +1,126 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * `<sui-inline-input>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Homologado con el SUI Angular (`sui-design-system`, 05-11-2026). Misma API
+ * pública, TODOS los estados (6: Default / Hover / Focus / Filled / Disabled /
+ * Error), mismo comportamiento (entrar a edición → typear → confirmar/cancelar,
+ * restauración del draft, keybindings Enter/Escape, focus + select del input al
+ * entrar, iOS :active fix en los botones internos) y mismos VALORES exactos
+ * (tokens del DS, no hex). Reusa el primitivo `<sui-icon>` ya portado. El accent
+ * del DS es NARANJA brand (#fa7319), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO.
+ * Component set: "Inline Input [1.1]" (frame 429:5195) — 6 states
+ *   Default (429:5196), Hover (429:5726), Focus (429:5740),
+ *   Filled (429:5770), Disabled (429:5784), Error (429:5805)
+ *
+ * Input borderless que vive inline dentro de texto/tablas/cards. En reposo
+ * (default/hover) muestra el texto + un botón lápiz (edit). Al entrar en modo
+ * edición (focus/error) el texto se vuelve editable y aparecen dos botones:
+ * check (confirmar) y close (cancelar). NO tiene el border de un field estándar.
+ *
+ * EXACT specs — VERIFIED from Figma nodeIds (429:5196, 429:5726, 429:5740,
+ * 429:5770, 429:5784, 429:5805):
+ *
+ *   Layout (común):
+ *     display: flex, gap: 8px, align-items: center
+ *     padding: 8px (py) / 10px (pl) — pr depende de # de botones:
+ *       reposo (1 boton pencil):  pr = 36px
+ *       edicion (2 botones):      pr = 64px
+ *     border-radius: 8px (--sui-radius-8)
+ *     leading-icon: 20px (default user-3-line, overridable via leftIcon)
+ *     Typography: Paragraph/Small 14px / 400 / 20px / -0.006em
+ *     Action button: Compact Button [1.1] — p 2px, radius 6px (--sui-radius-6),
+ *       icon 20px. Posicionado absolute a la derecha.
+ *       reposo: pencil right 6px
+ *       edicion: check right 5px + close right 33px
+ *
+ *   State colors (PULLED per-state from Figma):
+ *     Default  (429:5196): bg transparent, sin border, text text-soft-400,
+ *                          icon icon-soft-400, boton pencil-line
+ *     Hover    (429:5726): bg bg-weak-50, sin border, text text-sub-600
+ *     Focus    (429:5740): bg bg-white-0, border 1px stroke-strong-950,
+ *                          text text-strong-950, important-focus ring,
+ *                          botones check-line + close-line
+ *     Filled   (429:5770): Default con value real (text-strong-950) en reposo.
+ *     Disabled (429:5784): bg transparent, text text-disabled-300, sin interaccion
+ *     Error    (429:5805): bg bg-white-0, border 1px state-error-base,
+ *                          regular-shadow-x-small, botones check + close
+ *
+ *   NOTA Figma width=300px es fijo del simbolo; aca el host es width:100% para
+ *   que el consumer controle el ancho (es un atomo inline reusable).
+ *
+ * Two-way binding: `value` @Prop (mutable) + evento `valueChange`. En frameworks
+ * espejo del CVA Angular: el consumer escucha `valueChange` y reescribe `value`.
+ * Mas eventos `confirm` (check / Enter), `cancel` (close / Escape) y `edit`
+ * (al entrar a modo edicion).
+ *
+ * iOS :active: listeners touchstart/touchend PASIVOS en el host (utils/
+ * sui-toque.ts); el blur de touchend se acota a los botones de accion.
+ *
+ * Textos por defecto en español: placeholder «Escribe aquí…», aria-labels
+ * «Editar» / «Cancelar» / «Confirmar».
+ *
+ * `scoped: true` (light DOM, NO shadow): asi `:host([data-sui-*])` y los
+ * `<sui-icon>` internos heredan font/tokens del global sin pelear con shadow DOM.
+ * Misma estrategia que el Angular original.
+ */
+export declare class SuiInlineInput {
+    el: HTMLElement;
+    componentWillLoad(): void;
+    /** Valor del input. Mutable (two-way via `valueChange`). Default `''`. */
+    value: string;
+    /** Placeholder mostrado cuando `value` esta vacio. */
+    placeholder: string | null;
+    /**
+     * Leading icon (RemixIcon name). `false` lo oculta. Default `user-3-line`
+     * (espeja el simbolo Figma). En HTML el atributo es `left-icon`.
+     */
+    leftIcon: string | false;
+    /** Estado de error: borde rojo en modo edicion. Default `false`. */
+    error: boolean;
+    /** Deshabilita la interaccion. Default `false`. */
+    disabled: boolean;
+    /** Texto del boton "editar" para a11y (aria-label). Default `Editar`. */
+    editLabel: string | null;
+    /** Modo edicion activo (Focus / Error state de Figma). */
+    editing: boolean;
+    /** Emite el valor confirmado (boton check / Enter). */
+    confirm: EventEmitter<string>;
+    /** Emite cuando se cancela la edicion (boton close / Escape). */
+    cancel: EventEmitter<void>;
+    /** Emite al entrar en modo edicion. */
+    edit: EventEmitter<void>;
+    /** Emite en cada cambio del value durante el typing (two-way binding). */
+    valueChange: EventEmitter<string>;
+    /** Snapshot del valor al entrar en edicion — para restaurar en cancel. */
+    private _draft;
+    /** Ref al input nativo (modo edicion). */
+    private _field?;
+    /** Flag: enfocar + seleccionar el input en el proximo render tras entrar a edicion. */
+    private _focusOnRender;
+    /** Si se deshabilita estando en edicion, salir del modo edicion. */
+    onDisabledChange(isDisabled: boolean): void;
+    /** Placeholder efectivo: el prop o «Escribe aquí…». */
+    private get placeholderTexto();
+    alTocar(): void;
+    alSoltar(event: Event): void;
+    /** Texto a mostrar en reposo (value o placeholder). */
+    private get displayText();
+    /** Icono del leading slot (null si leftIcon === false / "false" / ""). */
+    private get leadingIcon();
+    /** Entra en modo edicion (boton lapiz / API publica). */
+    enterEdit(): Promise<void>;
+    private doEnterEdit;
+    /** Sincroniza el value con el input nativo durante el typing. */
+    private onInput;
+    /** Confirma la edicion (check / Enter). */
+    private confirmEdit;
+    /** Cancela la edicion (close / Escape) — restaura el draft. */
+    private cancelEdit;
+    /** Enter confirma, Escape cancela (en el input nativo). */
+    private onKeydown;
+    componentDidRender(): void;
+    render(): any;
+}

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

@@ -0,0 +1,148 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiInlineSelectItem } from './sui-inline-select.data';
+import type { SuiFlagName } from '../sui-flag/sui-flag';
+export type SuiInlineSelectType = 'icon' | 'country';
+/**
+ * `<sui-inline-select>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Homologado con el SUI Angular (`sui-design-system`, 05-11-2026). Misma API
+ * publica conceptual, las 2 variantes (icon / country), los 4 states (default /
+ * hover-focus / open / disabled), mismo comportamiento (overlay anclado al host,
+ * teclado Enter/Space/Escape/Arrow/Home/End, focus visual via color, lazy mount
+ * del panel, auto-flip al viewport) y mismos VALORES exactos (tokens del DS). El
+ * accent del DS es NARANJA brand (#fa7319), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — Inline Select [1.1] 332:4537.
+ *   Selector inline SIN padding/border/bg — vive dentro de texto u otros
+ *   componentes como parte de una frase. 2 types x 4 states.
+ *   Typography: Paragraph/Small Regular 14/20 -0.6%, ss11.
+ *   Gap por type: country 6 / icon 4 (Figma exact).
+ *   Color states:
+ *     - icon default (sin hover/focus/open): text-sub-600 (muted).
+ *     - icon hover/focus/open: text-strong-950.
+ *     - country: siempre text-strong-950 (excepto disabled).
+ *     - disabled (ambos): text-disabled-300, flag opacity 0.48.
+ *
+ * El host ES el trigger visual inline (con su propio click/keydown handler).
+ * Cuando se le pasan `items`, el componente renderea su propio panel flotante
+ * (position absolute relativo al host) replicando el visual de
+ * `sui-dropdown-item mode="option"` (bg primary-alpha-10 + check icon + texto
+ * primary cuando selected) y delega selection + keyboard nav + close-on-outside +
+ * auto-flip. 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`. Aqui el panel + items se renderean inline (la pieza
+ *    minima necesaria) replicando el look de `sui-dropdown-item mode="option"`,
+ *    misma estrategia que los hermanos `sui-compact-select` y
+ *    `sui-compact-select-for-input` en este repo (que tambien delegaban a
+ *    dropdown-menu en Angular y se portaron con panel inline). Mismo look, sin la
+ *    fragilidad de wirear un custom element externo como origin.
+ *  - El Angular usaba ControlValueAccessor (formControl) + model() two-way para
+ *    `selected`. 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 — replica el effect del Angular que reintenta cuando items cambia).
+ *  - `selected` no se expone como model two-way (no existe model() en Stencil); se
+ *    deriva internamente del `value`. El item seleccionado completo viaja en el
+ *    payload del evento `selectedChange`.
+ *  - El Angular mergeaba `disabled` con `_formDisabled` (setDisabledState del CVA).
+ *    Sin CVA, solo queda el `disabled` prop directo.
+ *
+ * GOTCHAS de API (renombres / Stencil):
+ *  - El @Prop `type` NO colisiona con DOM (el host es div-like, no input). `value`,
+ *    `icon` y `flag` tampoco colisionan.
+ *  - El `title` nativo se quita del host en componentWillLoad (convención del DS).
+ *
+ * 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 (replican el color-state matrix del Angular) y el panel flotante
+ * se monta dentro del subtree del host sin pelear con shadow DOM. Misma estrategia
+ * que sui-compact-select / sui-tooltip / sui-popover.
+ *
+ * Eventos:
+ *  - `clicked`: Event — siempre emite cuando el host se clickea (modo 1 + 2).
+ *  - `selectedChange`: SuiInlineSelectItem — solo en modo items, cuando el user
+ *    selecciona un item.
+ */
+export declare class SuiInlineSelect {
+    el: HTMLElement;
+    /** Tipo del trigger: icon (RemixIcon leading) / country (sui-flag leading). Default `icon`. */
+    type: SuiInlineSelectType;
+    /**
+     * Valor seleccionado (matchea `item.value`). En modo items, resuelve el item con
+     * `value === value` para pintar el display. En modo trigger-only es el texto que
+     * se muestra directamente. Default `''`.
+     */
+    value: 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: SuiInlineSelectItem[];
+    /** Deshabilitado (no abre, no emite, no clickeable). Default `false`. */
+    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 arriba cuando no cabe abajo (replica fallback positions del CDK). */
+    private flipUp;
+    /** Click en el host (siempre emite, modo 1 + 2). Espeja el output `clicked` del Angular. */
+    clicked: EventEmitter<globalThis.Event>;
+    /** Item seleccionado (solo modo items). Espeja `selectedChange` del Angular. */
+    selectedChange: EventEmitter<SuiInlineSelectItem>;
+    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.
+     * Replica el `writeValue` + effect del Angular.
+     */
+    private updateSelected;
+    private get hasItems();
+    /** Icon del arrow trailing: down (closed) / up (open). Replica `arrowIcon` del Angular. */
+    private get arrowIcon();
+    /** Texto mostrado: label del item seleccionado, sino el value crudo. */
+    private get displayValue();
+    /** Icon mostrado (type='icon'): del item seleccionado, sino el input estatico. */
+    private get displayIcon();
+    /** Flag mostrado (type='country'): del item seleccionado, sino el input estatico. */
+    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;
+    onWindowScroll(): 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>;
+    /** Estado actual del panel (read-only). Espeja `isOpen()` del Angular. */
+    isOpen(): Promise<boolean>;
+    private selectItem;
+    private onOptionClick;
+    private flipIfClipped;
+    private renderLeading;
+    /** Option del panel — replica el visual de `sui-dropdown-item mode="option"`. */
+    private renderOption;
+    render(): any;
+}