@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,30 @@
+/**
+ * Datos / catalogos de `<sui-inline-select>`.
+ *
+ * Separado del .tsx porque Stencil prohibe `export const/function/enum` junto al
+ * `@Component` (rompe el build entero). Aqui viven los catalogos de variantes y
+ * el shape del item; el .tsx importa lo que necesita sin re-exportarlo con llaves.
+ *
+ * Portado 1:1 desde el Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-inline-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 SuiInlineSelectItem {
+    value: string;
+    label: string;
+    sublabel?: string;
+    icon?: string;
+    flag?: SuiFlagName;
+    disabled?: boolean;
+}
+/** Types soportados (Figma 332:4537): icon (RemixIcon leading) / country (sui-flag leading). */
+export declare const SUI_INLINE_SELECT_TYPES: readonly ["icon", "country"];
+/** Dataset de ejemplo country (sui-flag leading) para las stories. */
+export declare const SUI_INLINE_SELECT_DEMO_COUNTRIES: SuiInlineSelectItem[];
+/** Dataset de ejemplo icon (RemixIcon leading) para las stories. */
+export declare const SUI_INLINE_SELECT_DEMO_ICON: SuiInlineSelectItem[];

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

@@ -0,0 +1,222 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Los tres primeros salen del set de Figma. `large` (48) y `xlarge` (52) son
+ * una extensión SUI (12-08-2026): los altos son los de `sui-button`, para que
+ * un campo y un botón lado a lado se alineen.
+ */
+export type SuiInputSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type SuiInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'amount' | 'card' | 'password-toggle' | 'date' | 'datetime-local' | 'time'
+/**
+ * Split-field con divisor vertical: zona de input a la izquierda + acción a
+ * la derecha (ej. copiar link). Figma "Type=🔘 Button" (node 332:1667). El
+ * consumer proyecta el botón de acción vía `slot="end"` (típicamente un
+ * `<sui-button variant="ghost">` con un ícono). sui-input dibuja el divisor y
+ * el layout flush del slot; la acción la maneja el consumer.
+ */
+ | 'button';
+export type SuiInputIconPosition = 'left' | 'right';
+/** Valores del atributo HTML `inputmode` — qué TECLADO pide el campo. */
+export type SuiInputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+/**
+ * Valores del atributo HTML `enterkeyhint` — qué dibuja la TECLA DE ACCIÓN del
+ * teclado. Distinto de `inputmode`: uno elige el teclado, el otro el ícono de
+ * esa tecla.
+ */
+export type SuiInputEnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+/**
+ * `<sui-input>` — SUI Design System 2.0.
+ *
+ * Homologado con el SUI Angular (`sui-design-system`, 05-11-2026): misma API,
+ * mismos estados y mismo comportamiento (máscaras amount/card, filtros de
+ * teclado number/tel, password-toggle, clear, split-field con divisor por lado,
+ * blur al tocar fuera para bajar el teclado de iOS). Valores vía tokens del DS.
+ *
+ * Figma 8p1k72aKKvzJV4XcvPS4VO — "Input Field" (266:5245, 417:6793, 417:9933,
+ * 267:1063, 267:1279, 267:1235). Tamaños (alto / padding Figma / radius):
+ *   - xsmall 32 — py 6 pl 8 pr 6, gap 6, r 8
+ *   - small  36 — py 8 pl 10 pr 8, gap 8, r 8
+ *   - medium 40 — py 10 pl 12 pr 10, gap 8, r 10 (default)
+ *   - large  48 — py 12 pl 14 pr 12, gap 10, r 12 (extensión SUI, texto 16/24)
+ *   - xlarge 52 — py 14 pl 16 pr 14, gap 10, r 12 (extensión SUI, texto 16/24)
+ *   En CSS el py va 1px abajo: el borde de 1px se suma por encima.
+ *
+ * Teclado: `inputmode` lo deduce el `type` (numeric/decimal/tel/email/url) pero
+ * NUNCA `search`: en Android ese inputmode marca el campo como multilínea y
+ * tapa la lupa. `type="search"` pide la lupa con `enterkeyhint="search"`.
+ * Las dos se pueden forzar con los props `inputmode` / `enterkeyhint`.
+ *
+ * ── Divergencias con el Angular ───────────────────────────────────────────
+ *  1. `model` + ControlValueAccessor → `@Prop() value` (controlled) + evento
+ *     `valueChange`. El consumer escucha `valueChange` y reescribe `value`.
+ *  2. El prefijo se llama `inputPrefix` (atributo `input-prefix`): `prefix`
+ *     choca con `Node.prefix` del DOM.
+ *  3. Los textos (Limpiar, Mostrar/Ocultar contraseña) van fijos en español:
+ *     el `provideSuiTextos` del Angular es DI y acá no existe.
+ *  4. Slots `start` / `end` (en Angular `[data-slot=start|end]`).
+ *
+ * `scoped: true` (light DOM): el label `for` y el `aria-describedby` enlazan
+ * por id con el `<input>` interno.
+ */
+export declare class SuiInput {
+    el: HTMLElement;
+    /** Tamaño del field. Default `medium` (40px). `large` 48 y `xlarge` 52. */
+    size: SuiInputSize;
+    /** Tipo lógico del input (controla nativeType + inputmode + máscaras + filtros). Default `text`. */
+    type: SuiInputType;
+    /** Texto placeholder. */
+    placeholder: string;
+    /** Deshabilita el field (bg-weak-50, sin border, no editable). Default `false`. */
+    disabled: boolean;
+    /** Solo lectura (bg-weak-50, border suave, no editable pero seleccionable). Default `false`. */
+    readonly: boolean;
+    /**
+     * Esquinas de píldora (999px) en vez del radio por tamaño. Opt-in: para un
+     * buscador arriba de una lista o un filtro al lado de chips. Mismo nombre que
+     * en `sui-compact-button` y en Figma («fullRadius»). Default `false`.
+     */
+    fullRadius: boolean;
+    /** Activa borde rojo + muestra `errorMessage`. Default `false`. */
+    error: boolean;
+    /** Mensaje de error (reemplaza al hint cuando `error`). */
+    errorMessage: string | null;
+    /** Texto del label arriba del field. */
+    label: string | null;
+    /** Mensaje de ayuda debajo del field (se oculta cuando hay error). */
+    hint: string | null;
+    /**
+     * Ícono Remix del hint neutral (ej. 'information-fill', como en Figma
+     * 266:5251). `null` (default) = sin ícono. En error no aplica: el hint de
+     * error conserva su ícono default.
+     */
+    hintIcon: string | null;
+    /** Valor del attr `autocomplete` del `<input>`. */
+    autocomplete: string | null;
+    /**
+     * Teclado que pide el campo. Por defecto lo deduce el `type`; esto es el
+     * escape hatch (un DNI es `type="text"` pero quiere teclado numérico).
+     */
+    inputmode: SuiInputMode | null;
+    /**
+     * Ícono de la tecla de acción del teclado. Por defecto `search` en
+     * `type="search"`; se pasa a mano en un flujo (`next` en un formulario de
+     * varios pasos, `send` en un chat).
+     */
+    enterkeyhint: SuiInputEnterKeyHint | null;
+    /** Texto secundario del label (ej. "Opcional"). */
+    sublabel: string | null;
+    /** Muestra asterisco rojo en el label. Default `false`. */
+    required: boolean;
+    /** Tooltip (ícono info) en el label. Default `null` → sin ícono info. */
+    tooltip: string | null;
+    /**
+     * Valor del input. Controlled: el consumer escucha `valueChange` y reescribe
+     * este prop. Para type=amount/card contiene el valor CLEAN (sin comas /
+     * sin espacios) — el display formateado vive en estado interno.
+     */
+    value: string;
+    /** maxlength del `<input>`. Para type=card el efectivo es 19 si no se setea. */
+    maxlength: number | null;
+    /** min del `<input>` (solo type=number). */
+    min: number | null;
+    /** max del `<input>` (solo type=number). */
+    max: number | null;
+    /** Si `false` y type=number/amount, bloquea el paste. Default `true`. */
+    paste: boolean;
+    /** Prefijo inline, ej. "S/", "$", "%". Atributo `input-prefix` (ver divergencia 2). */
+    inputPrefix: string | null;
+    /** Muestra botón X que limpia el valor. Default `false`. */
+    showClear: boolean;
+    /** Nombre de ícono Remix para el slot de ícono built-in. */
+    icon: string | null;
+    /** Posición del ícono built-in. Default `left`. */
+    iconPosition: SuiInputIconPosition;
+    /**
+     * Tocar espacio muerto de la pantalla baja el teclado (blur del input si el
+     * foco vive en este host). Default `true`. Pasá `false` si el consumer maneja
+     * el blur.
+     */
+    closeOnOutsideClick: boolean;
+    /** Divisor vertical a la izquierda de la zona de input (Phone Input + afijo leading). */
+    leadingDivider: boolean;
+    /** Divisor vertical a la derecha de la zona de input. `type='button'` lo activa solo. */
+    trailingDivider: boolean;
+    /** Marca el slot `start` como control interactivo (ej. country select): le quita el lockdown 20×20 + pointer-events:none. Implica divisor. */
+    leadingControl: boolean;
+    /** Marca el slot `end` como control interactivo. Implica divisor. */
+    trailingControl: boolean;
+    showPassword: boolean;
+    displayAmount: string;
+    displayCard: string;
+    private inputEl?;
+    private readonly controlId;
+    private readonly hintId;
+    private boundOutsideTap;
+    private get nativeType();
+    /** Teclado por `type` cuando nadie pidió otro. `search` NO está a propósito (ver header). */
+    private get inputModeAuto();
+    /** `inputmode` que termina en el DOM: gana lo que pidió el consumer. */
+    get resolvedInputMode(): string | null;
+    /** `enterkeyhint` que termina en el DOM: lupa en search, salvo que el consumer pida otra. */
+    get resolvedEnterKeyHint(): string | null;
+    private get displayValue();
+    private get effectiveMaxlength();
+    /** La X de limpiar es el ÚNICO ícono que crece con el tamaño (es un control que se toca). */
+    private get clearPx();
+    /** El label no crece con el campo: en large/xlarge crece el área de toque, no la jerarquía. */
+    private get labelSize();
+    private get hintMessage();
+    private get hasLeadingDivider();
+    private get hasTrailingDivider();
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Sincroniza el display cuando `value` cambia desde fuera (no mientras se escribe). */
+    onValueChange(): void;
+    onTypeChange(): void;
+    private syncDisplayFromValue;
+    /** Limpia el valor y enfoca el input. */
+    clearValue(): Promise<void>;
+    /** Se emite con el valor CLEAN al cambiar el input (sin comas/espacios para amount/card). */
+    valueChange: EventEmitter<string>;
+    /** Se emite en blur (espejo del `onTouched` del CVA Angular). */
+    suiBlur: EventEmitter<void>;
+    /** Se emite en focus. */
+    suiFocus: EventEmitter<void>;
+    private onInput;
+    private onBlur;
+    private onFocus;
+    private onKeydown;
+    private onPaste;
+    private togglePassword;
+    private onClearClick;
+    /**
+     * Tap fuera del host → blur para cerrar el teclado de iOS. Escucha
+     * pointerdown + touchstart + mousedown porque iOS no siempre propaga
+     * pointerdown con el teclado abierto. Cada guard salió de un bug real en iOS:
+     *  1. El tap no puede caer DENTRO del host.
+     *  2. El tap no puede ir a otro campo de texto: el navegador mueve el foco
+     *     solo, y adelantarle un blur cierra y reabre el teclado (se comía el
+     *     doble tap para seleccionar una palabra de otro campo).
+     *  3. El target no puede ser un ANCESTRO del host: al mantener el dedo para
+     *     seleccionar texto, WebKit emite eventos con target `body`/`html`, y el
+     *     campo se hacía blur a sí mismo (no se podía seleccionar texto).
+     *  4. Con una selección viva no se toca el foco: es un gesto en curso.
+     * Y solo hace blur si el foco vive dentro de este host: con un blur
+     * incondicional, los OTROS inputs de la página cerraban el teclado.
+     */
+    onDocumentTap(event: Event): void;
+    private static readonly CONTROL_KEYS;
+    /** Solo dígitos (type=number / card). */
+    private onlyNumbers;
+    /** Dígitos, + (solo en posición 0), espacio y guion (type=tel). */
+    private onlyTel;
+    /** Dígitos + un solo punto decimal (type=amount). */
+    private onlyNumbersAndPoints;
+    /** Nueva posición del cursor compensando las comas agregadas/removidas. */
+    private calcAmountCursorPos;
+    private formatAmountOnInput;
+    private applyAmountBlur;
+    private formatCardOnInput;
+    private calcCardCursorPos;
+    render(): any;
+}

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

@@ -0,0 +1,24 @@
+/** Máximo de dígitos numéricos en una tarjeta (16 → "#### #### #### ####"). */
+export declare const CARD_MAX_DIGITS = 16;
+/**
+ * ¿El tap va a parar a algo que abre el teclado?
+ *
+ * Se mira hacia arriba desde el target: en un `sui-input` el toque suele caer
+ * en el wrapper, el label o el ícono, no en el `<input>`. `readonly` no cuenta
+ * (no abre teclado). Los desplegables tampoco: ahí bajar el teclado es lo
+ * correcto, porque si no tapa la lista que se acaba de abrir.
+ */
+export declare function recibeTexto(target: Node): boolean;
+/** Agrupa dígitos crudos en grupos de 4 separados por espacio ("1234567890" → "1234 5678 90"). */
+export declare function formatCardDigits(digits: string): string;
+/**
+ * Sanitize de un monto pegado o seteado desde fuera (Ontop v3 `handlePastedValue`):
+ * deja dígitos y puntos; varios puntos = separadores de miles; el último es el
+ * decimal; pad/redondeo a 2 decimales; miles con coma.
+ */
+export declare function sanitizeAmount(raw: string): string;
+/** Formato EN VIVO de un monto mientras se escribe: miles en la parte entera,
+ *  decimal intacto y recortado a 2 ("1234." se mantiene a mitad de tipeo). */
+export declare function formatAmountLive(raw: string): string;
+/** Formato al perder el foco: pad a 2 decimales; vacío, "." o ".5" (sin entero) → ''. */
+export declare function formatAmountOnBlur(raw: string): string;

package/dist/types/components/sui-integration-switch/sui-integration-switch.d.ts

@@ -0,0 +1,158 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiBadgeColor, SuiBadgeSize, SuiBadgeVariant } from '../sui-badge/sui-badge';
+export type SuiIntegrationSwitchType = 'horizontal' | 'vertical';
+export type SuiIntegrationSwitchAppearance = 'card' | 'list';
+/** Botón «Administrar»: `medium` 38 (default) · `large` 44, el piso táctil del teléfono (04-10-2026). */
+export type SuiIntegrationSwitchSize = 'medium' | 'large';
+/** Config del botón de administrar. Lo no seteado cae al default («Administrar» + settings-2-line). */
+export interface SuiIntegrationManageConfig {
+    label?: string;
+    icon?: string;
+}
+/** Badge junto al título (el `SuiBadgeConfig` del Angular): label + color/variant/size de sui-badge. */
+export interface SuiIntegrationBadgeConfig {
+    label: string;
+    color?: SuiBadgeColor;
+    variant?: SuiBadgeVariant;
+    size?: SuiBadgeSize;
+}
+/**
+ * `<sui-integration-switch>` — SUI Design System 2.0. COMPUESTO.
+ *
+ * Homologado con el SUI Angular (`sui-design-system`, 05-11-2026).
+ * Misma API pública (type/appearance/size/title/description/brand/badge/manage/
+ * toggle/active/disabled), mismas 4 variantes Figma, mismo comportamiento
+ * (patrón "controlled" para el switch) 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-switch>`, `<sui-badge>`, `<sui-icon>`.
+ * El manage button se renderiza como `<button>` nativo (igual que el Angular)
+ * porque necesita el styling propio "chip" (border + shadow + bg-white) que no
+ * es ninguno de los variants de sui-button.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set 3678:14609
+ * ("Integration Switch [1.1]") — 4 variantes: Type (horizontal/vertical) ×
+ * Style (card/list).
+ *
+ * EXACT specs (pulled from Figma):
+ *  Container
+ *    card  → bg-white-0, border 1px stroke-soft-200, padding 16, radius 12, shadow x-small
+ *    list  → flat (sin border/bg/padding); brand y manage tienen background propio
+ *  Brand circle  → Card 40×40 (icon 24) · List 48×48 (icon 32); padding 8, border
+ *                  1px stroke-soft-200, rounded-full, shadow x-small
+ *  Manage button → bg-white + border + shadow, padding 8, gap 4, radius 8;
+ *                  icon settings-2-line 20 + label «Administrar» 14/20 medium sub-600.
+ *                  `size="large"`: 44 de alto con texto 16/24 (piso táctil del
+ *                  teléfono, 04-10-2026).
+ *  Switch        → medium (28×16) interno (sui-switch)
+ *  Vertical Card → switch position-absolute top-right (19,19)
+ *  Vertical List → switch position-absolute top-right (12,12)
+ *  Horizontal    → switch inline a la derecha (tras el manage button)
+ *
+ * Typography:
+ *  Card title  14/20 medium strong-950 ls -0.6% · Card desc 12/16 regular sub-600
+ *  List title  16/24 medium strong-950 ls -1.1% · List desc 14/20 regular sub-600 ls -0.6%
+ *
+ * **Patrón "controlled"** (igual que el Angular y que `<sui-switch>`): el
+ * componente NO muta su estado al toggle. SOLO re-emite `activeChange` con la
+ * intención. El consumer decide si actualiza el prop `active` (re-render que
+ * mueve el thumb). El estado VISIBLE es función pura del prop `active`.
+ *
+ * DIVERGENCIA vs Angular: el Angular implementa `ControlValueAccessor` para
+ * integrarse con Reactive Forms. En Stencil no existe ese contrato — se omite
+ * (idéntico a la decisión tomada en el port de `<sui-switch>`). La integración
+ * con forms se hace escuchando `activeChange` + escribiendo el prop `active`.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * y el contenido proyectado (slot brand) translan limpio, y los primitivos
+ * internos heredan los tokens globales. Misma estrategia que el resto del DS.
+ *
+ * GOTCHA Stencil: el @Prop del título se llama `componentTitle` (NO `title`,
+ * que es reservado del DOM y rompe el binding). El host strip-ea el `title`
+ * nativo (se quita en `componentWillLoad`) para evitar el tooltip gris del OS.
+ *
+ * Props objeto (como el Angular, 21-07-2026):
+ *  - `badge`: string (`badge="NUEVO"`) u objeto `{ label, color?, variant?, size? }`.
+ *  - `manage`: `true` (default) · string (label) · `{ label?, icon? }` · `false`.
+ *  - evento `manageClick`.
+ *
+ * a11y: el sui-switch interno toma su nombre del título (`aria-labelledby`) y
+ * su descripción de la descripción (`aria-describedby`).
+ *
+ * Slots:
+ *  - `brand` → logo custom de la marca (override del brandIconSrc/brandIcon).
+ *
+ * Usage:
+ *   <sui-integration-switch
+ *     component-title="Notion"
+ *     description="Sincroniza tus documentos y bases de datos en tiempo real."
+ *     brand-icon="sticky-note-line"
+ *     active
+ *     badge="NUEVO"
+ *   ></sui-integration-switch>
+ */
+export declare class SuiIntegrationSwitch {
+    el: HTMLElement;
+    componentWillLoad(): void;
+    /** Orientación. `horizontal` (default) row · `vertical` column (switch absolute top-right). */
+    type: SuiIntegrationSwitchType;
+    /** Estilo. `card` (default) con border/bg/shadow · `list` flat. */
+    appearance: SuiIntegrationSwitchAppearance;
+    /**
+     * Título de la integración. Se renderiza como texto visible en `.__title`.
+     * GOTCHA: NO se llama `title` (reservado del DOM en Stencil/HTML).
+     */
+    componentTitle: string;
+    /** Descripción opcional bajo el título. */
+    description: string | null;
+    /** URL al logo de la marca (SVG/PNG). Renderizado como `<img>` dentro del circle. */
+    brandIconSrc: string | null;
+    /** RemixIcon fallback si no hay brandIconSrc ni slot `brand` (ej. 'plug-line'). */
+    brandIcon: string | null;
+    /**
+     * Badge junto al título: string shorthand (`badge="NUEVO"`) u objeto
+     * `{ label, color?, variant?, size? }` (default orange / light / small).
+     * `null` = sin badge.
+     */
+    badge: SuiIntegrationBadgeConfig | string | null;
+    /**
+     * Botón de administrar: `true` (default) = «Administrar» + settings-2-line;
+     * string = label custom con el ícono default; objeto `{ label?, icon? }` = todo;
+     * `false` / `null` = oculto.
+     */
+    manage: SuiIntegrationManageConfig | string | boolean | null;
+    /** Botón «Administrar»: `medium` 38 (default) · `large` 44 para el teléfono. */
+    size: SuiIntegrationSwitchSize;
+    /** Mostrar el switch toggle. Default `true`. */
+    showToggle: boolean;
+    /**
+     * Estado VISIBLE del switch (controlled). El thumb se posiciona según este
+     * prop; el componente NO lo muta solo. Default `false`.
+     */
+    active: boolean;
+    /** Deshabilitado: bloquea toggle y manage, opacity reducida, no pointer-events. Default `false`. */
+    disabled: boolean;
+    /**
+     * Se emite con la INTENCIÓN de cambio (valor invertido) al togglear el switch.
+     * Patrón controlled: el consumer debe setear el prop `active` para reflejarlo.
+     */
+    activeChange: EventEmitter<boolean>;
+    /** Click en el botón de administrar. */
+    manageClick: EventEmitter<MouseEvent>;
+    private readonly titleId;
+    private readonly descriptionId;
+    private get badgeCfg();
+    private get manageCfg();
+    alTocar(): void;
+    alSoltar(event: Event): void;
+    /**
+     * Reacciona al `checkedChange` del switch hijo → re-emite hacia el consumer.
+     * NO muta el estado internamente (controlled). Disabled bloquea todo.
+     */
+    private onSwitchChange;
+    private onManageClick;
+    /** ¿Hay un logo custom proyectado en el slot `brand`? (para no renderear el fallback). */
+    private get hasBrandSlot();
+    render(): any;
+}

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

@@ -0,0 +1,59 @@
+export type SuiKbdVariant = 'default' | 'subtle';
+/**
+ * `<sui-kbd>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Shortcut chip / keyboard-key pill. Primitivo utilitario reusable fuera del
+ * command menu (también útil en tooltips, menu items, help overlays).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-kbd/). Misma API pública
+ * (un solo input `variant`), mismo comportamiento y mismos VALORES exactos
+ * (tokens del DS, no hex). El accent del DS es NARANJA brand (#fa7319), pero
+ * el kbd no usa primary — su color de texto es `--sui-text-soft-400`.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Pulled from:
+ *   - 4172:16051 (Footer shortcut con icono, bg=weak-50, padding 2px all sides)
+ *   - 4171:15855 (Search input shortcut con texto, bg=white, padding 6/2)
+ *   - 4172:16936 (Item shortcut, similar al search)
+ *
+ * EXACT specs:
+ *   Container:
+ *     height: 20px (canon h-5 fixed)
+ *     border: 1px solid var(--sui-stroke-soft-200) #ebebeb
+ *     radius: var(--sui-radius-4) 4px
+ *     gap: 2px (separa multi-keys ⌘ + K)
+ *     bg:
+ *       default → var(--sui-bg-white-0)  #ffffff (texto sobre superficies tintadas)
+ *       subtle  → var(--sui-bg-weak-50)  #f7f7f7 (icono sobre superficies blancas)
+ *   Text content:
+ *     font: subheading-xs (12/16 Inter Medium 500), uppercase
+ *     color: var(--sui-text-soft-400) #a3a3a3
+ *     letter-spacing: 0.04em (0.48px @ 12px)
+ *     padding: 0 6px (px-1.5, height fija)
+ *   Icon content (16×16):
+ *     padding: 2px all sides (variant subtle)
+ *     color: var(--sui-text-sub-600) #5c5c5c (Figma 4172:16051)
+ *
+ * `scoped: true` (light DOM, NO shadow): el `<sui-icon>` proyectado vive en
+ * light DOM y el styling escopeado por `:host` lo alcanza sin pelear con shadow
+ * DOM. Misma estrategia que el Angular original (`scoped`/sin shadow).
+ *
+ * Uso:
+ *   <sui-kbd>⌘K</sui-kbd>                                 <!-- text default -->
+ *   <sui-kbd variant="subtle">
+ *     <sui-icon name="arrow-up-line" size="16"></sui-icon>
+ *   </sui-kbd>
+ */
+export declare class SuiKbd {
+    /**
+     * Variante visual.
+     *  - `default` → bg white-0, padding horizontal 6px. Para keys con texto
+     *    (⌘K, ESC, ⏎) sobre superficies tintadas.
+     *  - `subtle`  → bg weak-50, padding 2px uniforme. Para contener un solo
+     *    `<sui-icon>` 16×16 sin texto, sobre superficies blancas.
+     * Default `default`.
+     */
+    variant: SuiKbdVariant;
+    render(): any;
+}

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

@@ -0,0 +1,83 @@
+export type SuiKeyIconStyle = 'stroke' | 'lighter';
+export type SuiKeyIconColor = 'gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'pink' | 'teal';
+/** Los 5 tamaños canon del contenedor (px). El icono interno = size / 2 con piso de 20 (32 → 20). */
+export type SuiKeyIconSize = 32 | 40 | 48 | 56 | 64;
+/**
+ * `<sui-key-icon>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-key-icon/). Misma API
+ * pública (style/color/size + name), TODAS sus variantes/colors/sizes y los
+ * VALORES exactos vía tokens del DS (no hex). El accent del DS es NARANJA
+ * brand (#fa7319 = --sui-primary-base = --sui-state-warning-base), por eso el
+ * color `orange` mapea a `warning` y queda naranja — NUNCA el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — "Key Components" → "KeyIcons [1.1]".
+ * Contenedor circular de icono usado como leading element en list rows,
+ * content-labels, empty-states, notificaciones, etc.
+ *
+ * 90 combinaciones = Style(2: stroke|lighter) × Color(9) × Size(5: 32/40/48/56/64).
+ *
+ * ── Style ──────────────────────────────────────────────────────────────────
+ *   stroke   → bg `--sui-bg-white-0` + border 1px `--sui-stroke-soft-200`
+ *              + drop-shadow `--sui-shadow-x-small` + radius-full.
+ *              El icono interior toma el `*-base` del color.
+ *   lighter  → bg del `*-lighter` del color (sin borde, sin sombra) + radius-full.
+ *              El icono interior toma el `*-base` del color.
+ *
+ * ── Color → token map (Figma exacto) ─────────────────────────────────────────
+ *   gray   → faded        base #7b7b7b / lighter #f5f5f5
+ *   blue   → information  base #335cff / lighter #ebf1ff
+ *   orange → warning      base #fa7319 / lighter #fff3eb  (= accent naranja brand)
+ *   red    → error        base #fb3748 / lighter #ffebec
+ *   green  → success      base #1fc16b / lighter #e3f7ec
+ *   yellow → away         base #f6b51e / lighter #fffaeb
+ *   purple → feature      base #7d52f4 / lighter #efebff
+ *   pink   → highlighted  base #fb4ba3 / lighter #ffebf4
+ *   teal   → verified     base #47c2ff / lighter #ebf8ff
+ *
+ * ── Icono ────────────────────────────────────────────────────────────────────
+ *   Render SIEMPRE vía `<sui-icon name="...">` (regla del proyecto — nunca SVG
+ *   inline). Tamaño = max(20, size / 2) (Figma 263:1850: Small 32 → 20).
+ *   El `<sui-icon>` recibe su tamaño DIRECTO vía su prop `size` (NO vía custom
+ *   prop CSS — sui-icon lee solo su prop `size`, no una variable). El color del
+ *   icono = `*-base` del color, vía la custom prop `--sui-key-icon-fg`.
+ *
+ * Display-only: NO es un control de formulario y NO es clickeable (sin
+ * touchstart/touchend ni role=button — a diferencia de `<sui-button>`). Si en
+ * el futuro se vuelve interactivo habría que envolverlo en un `<button>` con
+ * el fix iOS :active.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * translan limpio y el `<sui-icon>` proyectado hereda el `@font-face` + las
+ * clases `.ri-*` del global `sui-tokens.css` sin re-incluirlas por instancia.
+ * Misma estrategia que `<sui-button>` y el Angular original.
+ *
+ * Drivers del styling (host attrs + custom prop):
+ *   data-sui-style       → stroke | lighter
+ *   data-sui-color       → gray|blue|orange|red|green|yellow|purple|pink|teal
+ *   --sui-key-icon-size  → ancho/alto del contenedor (px). El size NO se expone
+ *                          como data-attr (contrato del .spec original).
+ */
+export declare class SuiKeyIcon {
+    el: HTMLElement;
+    /** RemixIcon name (sin prefijo), ej. 'mail-line', 'home-5-fill'. Se pasa a `<sui-icon>`. Requerido. */
+    name: string;
+    /**
+     * Estilo del contenedor. Default `stroke`. En el Angular original el input se
+     * llama `styleVariant` (para no chocar con la property `style` del HTMLElement);
+     * acá expuesto como prop `style-variant` (el attr `style` nativo tampoco
+     * debe reusarse).
+     */
+    styleVariant: SuiKeyIconStyle;
+    /** Color del set canon (9). Default `gray`. */
+    color: SuiKeyIconColor;
+    /** Tamaño del contenedor en px. Uno de 32/40/48/56/64. Default `40`. */
+    size: SuiKeyIconSize;
+    /** Tamaño del icono interno = 50% del contenedor, con piso de 20px
+     *  (Figma 263:1850: Small 32 → ícono 20, no 16). */
+    private get iconSize();
+    /** Strip del `title` nativo del host (el browser lo muestra como tooltip gris). */
+    componentDidLoad(): void;
+    render(): any;
+}

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

@@ -0,0 +1,5 @@
+import type { SuiKeyIconColor, SuiKeyIconSize } from './sui-key-icon';
+/** Set de los 9 colores SUI Design System 2.0 para iterar desde el consumer (previews, demos). */
+export declare const SUI_KEY_ICON_COLORS: readonly SuiKeyIconColor[];
+/** Set de los 5 tamaños canon, para iterar desde el consumer. */
+export declare const SUI_KEY_ICON_SIZES: readonly SuiKeyIconSize[];