@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/types/components/sui-color-picker/sui-color-picker.d.ts

@@ -0,0 +1,232 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiColorDotColor } from '../sui-color-dot/sui-color-dot';
+/** `medium` (trigger 38, default) · `large` (trigger 44, piso táctil 04-10-2026). */
+export type SuiColorPickerSize = 'medium' | 'large';
+/**
+ * `<sui-color-picker>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-color-picker/). Misma API
+ * pública (colors / value / placeholder / recommendedLabel / presetsOnly /
+ * alpha / eyedropper / showFormatLabel / disabled / accessibleLabel → props;
+ * valueChange + changed → events), TODAS las variantes/estados, mismo
+ * comportamiento (overlay popover, drag por pointer events, teclado, eyedropper,
+ * outside-click + Esc) y mismos VALORES exactos (tokens del DS). El accent del DS
+ * es NARANJA brand (#fa7319 = --sui-primary-base), NO el azul de Figma — el
+ * preset `orange` y el color del thumb del trigger reflejan el value real.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node 4456:115795 "Color Picker [1.1]".
+ *  Doc canon: la guía del DS (color picker).
+ *
+ * Implementación 100% custom — NO usa `<input type="color">` (que abre el picker
+ * nativo distinto en iOS / Android / desktop). Toda la UI es markup + CSS +
+ * pointer events para que se vea idéntico en cualquier WebView.
+ *
+ * Features (homologados vs Figma):
+ *  1. HSV Color Spectrum — alto 232px, w-full (radius-8), drag por pointer events
+ *     (touch + mouse + pen unificado). Thumb circular 16px sigue al puntero.
+ *  2. Hue slider arcoíris — track h-8px, thumb 16px.
+ *  3. Opacity (alpha) slider — track checkerboard + transparent→color, thumb 16px.
+ *     Visible por default (alpha on); ocultable con `alpha="false"`.
+ *  4. Color Input row — fila bordeada (radius-8) con: sip (eyedropper) | hex
+ *     field | opacity field. Hex validado con parse 3/4/6/8 chars.
+ *  5. Format label "Hex" + chevron (arrow-down-s-line 20px) — visual del Figma.
+ *     Hex-only (ver el .ts del Angular para PENDING VERIFY de RGB/HSL).
+ *  6. Eyedropper (sip-line) — usa la EyeDropper API nativa con feature-detect.
+ *     Oculto cuando el browser no la soporta (Safari/iOS/Android/Firefox).
+ *  7. Recommended Colors — grid flex-wrap gap-4px de dots (`<sui-color-dot>`).
+ *  8. Trigger button — muestra el dot del value actual + label + chevron.
+ *
+ * Reactividad Stencil: el state source-of-truth durante el drag es HSV(+alpha)
+ * en `@State` (h/s/v/a) — cualquier cambio re-renderea y mueve los thumbs por
+ * inline style. El `value` (`@Prop` mutable) se sincroniza one-way vía `@Watch`
+ * cuando el consumer lo setea desde afuera; los sets internos se marcan con
+ * `_internalSet` para no re-disparar el watcher (mismo patrón que el effect
+ * `externalValueSync` del Angular).
+ *
+ * GOTCHAS de API (renombres vs el Angular original):
+ *  - `ariaLabel` → `accessibleLabel` (`ariaLabel` no es reservado pero se evita
+ *    chocar con el atributo del host; se expone como aria-label del trigger).
+ *  - El output `change` del Angular → evento `changed` (`change` colisiona con
+ *    el evento DOM nativo `change` que burbujea desde los `<input>` internos).
+ *  - El model `value` → `@Prop({ mutable: true }) value` + evento `valueChange`
+ *    (Stencil no tiene two-way binding nativo; el consumer escucha `valueChange`).
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-sui-*])` y
+ * los `<sui-icon>` / `<sui-color-dot>` proyectados translan limpio sin pelear
+ * con shadow DOM. Misma estrategia que el Angular original.
+ *
+ * iOS WKWebView :active fix: touchstart/touchend pasivos en el host; el touchend
+ * suelta el foco del botón tocado (trigger, gotero).
+ */
+export declare class SuiColorPicker {
+    el: HTMLElement;
+    /**
+     * Lista de colores recomendados (grid). Default los 10 canon SUI. El
+     * consumer puede pasar sublista (array) para limitar opciones (ej. solo brand
+     * colors). Vía atributo HTML aceptar un CSV (`"blue,orange,red"`) o un JSON
+     * array string; se parsea en `componentWillLoad`.
+     */
+    colors: readonly SuiColorDotColor[] | string;
+    /**
+     * Valor actual en formato HEX. Mutable (`@Prop({ mutable: true })`) + evento
+     * `valueChange` para emular el two-way del Angular (`[(value)]`). Acepta hex
+     * con o sin `#`, 3/4/6/8 chars, lo normaliza internamente. Emite `#rrggbb`
+     * (6 chars) cuando alpha=off o a===1; emite `#rrggbbaa` (8 chars) cuando
+     * `alpha` on y a<1. Default `null` = sin valor seleccionado.
+     */
+    value: string | null;
+    /** Label visible cuando no hay color seleccionado. Default `Elige un color` (imperativo con tuteo). */
+    placeholder: string;
+    /** Etiqueta de la sección Recommended Colors dentro del panel. */
+    recommendedLabel: string;
+    /** Si true, oculta el HSV spectrum + sliders + hex input — solo grid de presets. */
+    presetsOnly: boolean;
+    /**
+     * Canal alpha — controla la visibilidad del slider Opacity + el campo "%".
+     * Default `true` (homologación Figma 4456:115795: slider + campo "100%"
+     * SIEMPRE presentes). Con a===1 el value sigue siendo 6 chars; con a<1 crece
+     * a 8 chars (#rrggbbaa). Pasar `alpha="false"` oculta el control y fuerza
+     * siempre 6 chars.
+     */
+    alpha: boolean;
+    /**
+     * Muestra el botón eyedropper (sip-line). Default `true` — pero internamente
+     * solo se renderea si la EyeDropper API existe (feature-detect). En browsers
+     * sin soporte (Safari/iOS/Android/Firefox) NO se muestra nunca.
+     */
+    eyedropper: boolean;
+    /** Muestra el label del formato ("Hex") + chevron arriba del input. */
+    showFormatLabel: boolean;
+    /** Deshabilita el picker (trigger no abre, estado visual disabled). */
+    disabled: boolean;
+    /** aria-label del trigger / panel. Renombrado de `ariaLabel` del Angular. */
+    accessibleLabel: string;
+    /**
+     * `medium` (default): trigger de 38, puntos de 24 · `large`: trigger de 44 con
+     * texto 16 y puntos del panel de 32 separados 12 (paso de 44) — piso táctil
+     * 44 en el teléfono (04-10-2026).
+     */
+    size: SuiColorPickerSize;
+    /** Estado abierto del popover (reflejado al host como `data-sui-open`). */
+    open: boolean;
+    /** Emitido cuando el value cambia (cualquier interacción). Two-way `value`. */
+    valueChange: EventEmitter<string>;
+    /** Emitido cuando el value cambia (paridad con el output `change` del Angular). */
+    changed: EventEmitter<string>;
+    private flipUp;
+    private alignEnd;
+    private h;
+    private s;
+    private v;
+    /** Canal alpha [0..1]. Solo relevante cuando `alpha` on. */
+    private a;
+    /** Hex input visible (separate del value para validación en blur). */
+    private hexInput;
+    /** Lista de colores resuelta (parseada del prop array/CSV/JSON). */
+    private resolvedColors;
+    private canvasEl?;
+    private hueEl?;
+    private opacityEl?;
+    /** Feature-detect de la EyeDropper API (solo Chromium desktop). */
+    private readonly eyeDropperSupported;
+    /**
+     * Flag para evitar que el watcher de `value` reaccione a sus propios sets.
+     * Es field (no @State) — el watcher solo lo lee en el momento de ejecución.
+     * La limpieza via `queueMicrotask` da tiempo a procesar el tick antes de
+     * aceptar el próximo evento externo.
+     */
+    private _internalSet;
+    /**
+     * Último hex emitido. Defensiva contra re-emisión del mismo hex durante drag
+     * rapid-fire o cuando value y HSV convergen al mismo color por caminos
+     * distintos. NUNCA dispara `changed`/`valueChange` si `_lastEmittedHex === hex`.
+     */
+    private _lastEmittedHex;
+    private canvasDragging;
+    private hueDragging;
+    private opacityDragging;
+    componentWillLoad(): void;
+    onColorsChange(next: readonly SuiColorDotColor[] | string): void;
+    /** Acepta array, CSV (`"blue,orange"`) o JSON array string del atributo HTML. */
+    private parseColors;
+    /**
+     * Watcher de `value`: sync externo one-way. Cuando el consumer setea `value`
+     * desde afuera, refleja en el HSV interno. Los sets internos se marcan con
+     * `_internalSet` para no re-disparar (mismo patrón que el effect del Angular).
+     */
+    onValueChange(next: string | null): void;
+    /** El botón eyedropper se muestra solo si el consumer lo pide Y hay soporte. */
+    private get showEyedropper();
+    /** Color base para el HSV spectrum (hue puro, full saturation/value). */
+    private get hueColor();
+    /** Hex actual derivado del HSV interno (input + dot preview). */
+    private get currentHex();
+    /** Si el value matchea un preset, devuelve su nombre (dot estilizado). */
+    private get currentPreset();
+    /** Label del trigger (nombre del preset si match, sino el hex). */
+    private get currentLabel();
+    /** Position del thumb en el spectrum (% based). */
+    private get canvasThumbX();
+    private get canvasThumbY();
+    /** Position del thumb en el hue slider (% based). */
+    private get hueThumbX();
+    /** Position del thumb en el opacity slider (% based). */
+    private get opacityThumbX();
+    /** Color rgb(a) para el thumb del opacity slider. */
+    private get opacityThumbColor();
+    /** Color del dot preview en el trigger (con alpha si aplica). */
+    private get previewColor();
+    /** Round del hue para aria-valuenow. */
+    private get hueRounded();
+    /** Alpha en porcentaje entero (0..100) para el campo "%". */
+    private get alphaPercent();
+    /** Valor mostrado en el hex field (sin `#`, uppercase — convención Figma "335CFF"). */
+    private get hexDisplayValue();
+    /** Hex a emitir según alpha. Off (o a===1) → 6 chars; on y a<1 → 8 chars. */
+    private composeHex;
+    /**
+     * Punto único de emit. Garantiza:
+     *  1. `value` solo se setea si difiere del hex (skip redundante).
+     *  2. los eventos solo se emiten si el hex difiere del último emitido.
+     */
+    private emitHex;
+    /**
+     * Operación atómica: setea HSV(+alpha) + value + hexInput en un solo paso.
+     * Resuelve el round-trip HSV→hex lossy (Math.round ±1). Acepta hex 6 u 8 chars.
+     */
+    private setColor;
+    private toggle;
+    /**
+     * Lado del panel — replica las posiciones del overlay del Angular (abajo-inicio,
+     * abajo-fin, arriba-inicio, arriba-fin; margen 8). Se decide al abrir, ya
+     * pintado, y queda fijo mientras está abierto (lockedPosition: sin saltos en
+     * scroll). El panel es absolute dentro del host, así que acompaña al trigger.
+     */
+    private place;
+    private close;
+    private onPresetClick;
+    private onCanvasPointerDown;
+    private onCanvasPointerMove;
+    private onCanvasPointerUp;
+    private updateCanvasFromPointer;
+    private onHuePointerDown;
+    private onHuePointerMove;
+    private onHuePointerUp;
+    private updateHueFromPointer;
+    private onOpacityPointerDown;
+    private onOpacityPointerMove;
+    private onOpacityPointerUp;
+    private updateOpacityFromPointer;
+    private onHexInputChange;
+    /** Commit en blur o Enter — solo si es válido. Sino restaura el value actual. */
+    private onHexCommit;
+    private onHexKeyDown;
+    private onOpacityFieldCommit;
+    private onEyedropper;
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    onDocumentClick(ev: MouseEvent): void;
+    onDocumentKeydown(ev: KeyboardEvent): void;
+    render(): any;
+}

package/dist/types/components/sui-color-picker/sui-color-picker.data.d.ts

@@ -0,0 +1,43 @@
+import type { SuiColorDotColor } from '../sui-color-dot/sui-color-dot';
+export declare const SUI_COLOR_DOT_COLORS: readonly SuiColorDotColor[];
+/** Mapa preset → hex canónico (Figma `<color>/500`). orange = #fa7319 brand. */
+export declare const SUI_COLOR_DOT_HEX: Record<SuiColorDotColor, string>;
+/** Mapa inverso: hex (lowercase, 6 chars con #) → preset name. */
+export declare const SUI_HEX_TO_COLOR: Record<string, SuiColorDotColor>;
+/** Labels en español de cada preset (para el trigger label y aria-labels). */
+export declare const SUI_COLOR_DOT_LABELS: Record<SuiColorDotColor, string>;
+export declare function clamp01(v: number): number;
+export declare function hsvToRgb(h: number, s: number, v: number): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function rgbToHsv(r: number, g: number, b: number): {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare function rgbToHex(r: number, g: number, b: number): string;
+/**
+ * Normaliza un string hex al formato canon `#rrggbb` (lowercase, con #).
+ * Devuelve null si el input no es un hex válido (3 o 6 chars).
+ * Aceptado: '#fff', 'FFF', '#FFFFFF', 'ffffff'.
+ */
+export declare function normalizeHex(input: string | null | undefined): string | null;
+/**
+ * Parsea un hex 3/4/6/8 chars → { hex: #rrggbb, alpha: [0..1], hasAlpha }.
+ * Devuelve null si no es válido. Soporta:
+ *   #rgb, #rgba, #rrggbb, #rrggbbaa (con o sin `#`, case-insensitive).
+ */
+export declare function parseHexWithAlpha(input: string | null | undefined): {
+    hex: string;
+    alpha: number;
+    hasAlpha: boolean;
+} | null;
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/** Convierte alpha [0..1] → 2-char hex (00..ff). */
+export declare function alphaToHex(alpha: number): string;

package/dist/types/components/sui-command-menu-footer/sui-command-menu-footer.d.ts

@@ -0,0 +1,60 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type SuiLinkConfig } from '../../utils/sui-configs';
+/**
+ * `<sui-command-menu-footer>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Footer del command menu (⌘K palette). Portado 1:1 desde el componente Angular
+ * homologado (master-pedidos/src/app/components/sui/sui-command-menu-footer/).
+ * Misma API pública, mismo layout/states, mismos VALORES exactos (tokens del DS,
+ * no hex). Reusa los primitivos ya portados `<sui-kbd>`, `<sui-icon>` y el
+ * compuesto `<sui-link-button>` (NO re-implementa kbds, iconos ni link). El
+ * accent del DS es NARANJA brand (#fa7319 = --sui-primary-base), NO el azul de
+ * Figma — el help link usa `variant="primary"` que resuelve a naranja.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node 4172:16590.
+ *
+ * Layout (3 grupos, items-center, gap 12, w 100% max 600, border-top, pad 14/20):
+ *   1. Navigate: kbd subtle (arrow-up-line 16) + kbd subtle (arrow-down-line 16) + label "Navigate"
+ *   2. Select:   kbd subtle (corner-down-left-line 16) + label "Select"
+ *   3. Help:     label helpText + <sui-link-button variant=primary size=small>
+ *                (push right via flex 1 0 0 + justify-content flex-end)
+ *
+ * EXACT:
+ *   Text labels (Navigate/Select/help): Paragraph/X-Small 12/16/400 text-sub-600.
+ *   Help link: Label/X-Small Medium 12/16 primary-base (sin underline default).
+ *   Kbds: variant subtle, contienen iconos 16×16.
+ *
+ * Conditional render: el bloque help se monta SOLO cuando `helpText` no es null
+ * (equivale al `@if (helpText())` del Angular). El help link es polimórfico via
+ * el `<sui-link-button>`: si `helpLink` trae `href` renderiza un `<a>`, si no
+ * un `<button>`.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los `<sui-kbd>`/`<sui-icon>`/
+ * `<sui-link-button>` proyectados heredan font + tokens del global sin pelear
+ * con shadow DOM. Misma estrategia que el Angular original.
+ *
+ * Responsive: en `max-width: 600px` el label del help colapsa (`display:none`)
+ * para no romper el layout (idéntico al Angular).
+ */
+export declare class SuiCommandMenuFooter {
+    /** Label del grupo de navegación (↑ ↓). Default `Navegar`. */
+    navigateLabel: string;
+    /** Label del grupo de selección (↵). Default `Seleccionar`. */
+    selectLabel: string;
+    /**
+     * Texto previo al link de ayuda. `null` oculta TODO el bloque (label + link).
+     * Default `¿No es lo que buscas? Prueba el`.
+     */
+    helpText: string | null;
+    /**
+     * Link de ayuda — string shorthand (solo label: renderiza `<button>` y emite
+     * `helpClicked`) o `SuiLinkConfig { label, href?, target?, rel? }`: con href
+     * renderiza `<a>` real; rel automático `noopener noreferrer` para `_blank`.
+     * `null` = sin link. Default `Centro de ayuda`.
+     */
+    helpLink: SuiLinkConfig | string | null;
+    /** Se emite con el MouseEvent al clickear el help link. */
+    helpClicked: EventEmitter<MouseEvent>;
+    private onHelpClick;
+    render(): any;
+}

package/dist/types/components/sui-command-menu-item/sui-command-menu-item.d.ts

@@ -0,0 +1,126 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type SuiAvatarConfig, type SuiBadgeConfig } from '../../utils/sui-configs';
+import type { SuiFlagName } from '../sui-flag/sui-flag';
+export type SuiCommandMenuItemType = 'basic' | 'left-icon' | 'avatar' | 'brand' | 'company' | 'country';
+export type SuiCommandMenuItemSize = 'small' | 'medium';
+/**
+ * `<sui-command-menu-item>` - SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-command-menu-item/), que
+ * cerro su homologacion vs Figma el 2026-05-29. Misma API publica, mismas
+ * variantes/sizes/states, mismo comportamiento (leading switch por type, box
+ * "lifted" en medium, hover bg + button lifted, keyboard nav) y los MISMOS
+ * VALORES exactos via tokens del DS (`--sui-*`, no hex). El accent del DS es
+ * NARANJA brand (#fa7319), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO - node 4171:15653. 6 types x 2 sizes x
+ * Default/Hover state.
+ *
+ * Item del list dentro del command menu (Cmd-K palette).
+ *
+ * Types (definen el visual del leading element):
+ *   - basic     -> solo title (sin leading)
+ *   - left-icon -> icon container (en medium: con border + shadow "lifted")
+ *   - avatar    -> sui-avatar (initials/img)
+ *   - brand     -> slot proyectado (el consumer trae su brand logo SVG/img)
+ *   - company   -> sui-avatar variante company dentro de box "lifted" (medium)
+ *   - country   -> sui-flag dentro de box "lifted" (medium)
+ *
+ * Sizes:
+ *   - small  (h=40) -> single line (title + opt sublabel inline)
+ *   - medium (h=64) -> multi-line (title row + description block)
+ *
+ * Optional bits (right-aligned, en este orden):
+ *   - badge:    sui-badge (gray pill, ej. "Pro")
+ *   - shortcut: sui-kbd con texto (ej. "Cmd-K")
+ *   - button:   chevron arrow-right; en hover toma look "lifted" (bg-white + shadow)
+ *
+ * EXACT typography (canon SUI - usa font-stack del proyecto):
+ *   title (medium): Label/Small 14/20 Medium (500) -0.006em strong-950
+ *   title (small):  Paragraph/Small 14/20 Regular (400) -0.006em strong-950
+ *   sublabel:       Paragraph/X Small 12/16 Regular sub-600 (inline en small)
+ *   description:    Paragraph/X Small 12/16 Regular sub-600 (block en medium)
+ *
+ * Leading "lifted box" (medium): left-icon / brand / country / company envuelven
+ *   su contenido en un container blanco 40x40 con border 1px stroke-soft-200 +
+ *   regular-shadow/x-small + rounded-full. Small renderiza directo sin box.
+ *
+ * GOTCHAS de API (renombres vs el Angular original):
+ *  - `title` -> `heading` (`title` es reservado del DOM, dispara tooltip nativo).
+ *  - `clicked` y `buttonClicked` son @Event (CustomEvent), espejan los output()
+ *    del Angular. `buttonClicked` hace stopPropagation del click del item.
+ *
+ * Slots:
+ *  - `brand` -> SVG/img de marca proyectada (solo type=brand).
+ *
+ * `scoped: true` (light DOM, NO shadow): asi los selectores `:host([data-sui-*])`
+ * y los sub-componentes proyectados (`<sui-icon>`, `<sui-avatar>`, `<sui-flag>`,
+ * `<sui-badge>`, `<sui-kbd>`, `<sui-compact-button>`) heredan los tokens del
+ * global y el hover del item puede alcanzar el button interno sin pelear con
+ * shadow DOM. Misma estrategia que el Angular original.
+ */
+export declare class SuiCommandMenuItem {
+    el: HTMLElement;
+    /** Tipo del leading element. Default `basic`. */
+    type: SuiCommandMenuItemType;
+    /** Tamaño. Default `small` (single-line). `medium` = multi-line con box "lifted". */
+    size: SuiCommandMenuItemSize;
+    /** Texto principal del item. Requerido. (Renombrado de `title` -> reservado DOM). */
+    heading: string;
+    /** Texto secundario inline (gris al lado del title). Soportado en ambos sizes. */
+    sublabel: string | null;
+    /** Bloque de descripcion. Solo se renderiza en size=medium. */
+    description: string | null;
+    /** Type=left-icon: nombre RemixIcon (sin prefijo) para el leading. */
+    icon: string | null;
+    /**
+     * Type=avatar/company: avatar — string shorthand (src de la imagen) o
+     * `SuiAvatarConfig { src?, initials?, color? }`. `null` = sin datos
+     * (sui-avatar cae a su placeholder).
+     */
+    avatar: SuiAvatarConfig | string | null;
+    /** Type=country: slug del pais (ej. 'peru'). */
+    flagName: SuiFlagName | null;
+    /**
+     * Right side: badge — string shorthand (pill gray/lighter, ej. "Pro") o
+     * `SuiBadgeConfig { label, color?, variant?, size? }`. `null` = sin badge.
+     */
+    badge: SuiBadgeConfig | string | null;
+    /** Right side: shortcut text (sui-kbd, ej. "Cmd-K"). */
+    shortcut: string | null;
+    /** Right side: chevron button (arrow-right). Default `false`. */
+    showButton: boolean;
+    /** Emite al hacer click sobre el item. Espeja el output `clicked` del Angular. */
+    clicked: EventEmitter<MouseEvent>;
+    /** Emite al hacer click sobre el chevron button (con stopPropagation). */
+    buttonClicked: 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`/`:hover` dispare y se
+     * libere correctamente. Sin esto "stickea" 300-500ms en pages standalone.
+     */
+    onHostTouchStart(): void;
+    /** touchend.blur() empuja la deseleccion inmediata del :active en iOS. */
+    onHostTouchEnd(): void;
+    /** Para sui-avatar: traduce el size del item a SuiAvatarSize (lg/xs). */
+    private get avatarSize();
+    /** Config del avatar (string = src). */
+    private get avatarCfg();
+    private onItemClick;
+    private spacePressed;
+    /**
+     * Teclado como sui-button: Enter en keydown y Espacio en keyup despachan un
+     * click REAL del host, así el `click` nativo de quien lo usa y `clicked` salen
+     * una sola vez por tecla. Solo las teclas sobre el propio item: Enter en el
+     * botón de la flecha es de ese botón.
+     */
+    private onItemKeyDown;
+    private onItemKeyUp;
+    private onButtonClick;
+    /** Leading element segun type/size. Devuelve null cuando type=basic. */
+    private renderLeading;
+    render(): any;
+}

package/dist/types/components/sui-command-menu-search/sui-command-menu-search.d.ts

@@ -0,0 +1,70 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * `<sui-command-menu-search>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-command-menu-search/).
+ * Misma API pública (value/placeholder/shortcut/button + eventos valueChange y
+ * cleared), TODOS los estados visuales, mismo comportamiento (estado inferido
+ * del value, refocus del input al limpiar) y mismos VALORES exactos (tokens del
+ * DS, no hex). Reusa los primitivos ya portados `<sui-icon>`, `<sui-kbd>` y el
+ * compuesto `<sui-compact-button>` (NO re-implementa nada). El accent del DS es
+ * NARANJA brand (#fa7319), NO el azul de Figma.
+ *
+ * Top input del command menu (cmdK palette). 3 estados visuales:
+ *   - Default (empty + no focus) -> placeholder soft-400, cmdK + info icon
+ *   - Hover   (empty + hover)    -> placeholder sub-600
+ *   - Active  (typing / value)   -> placeholder strong-950, close button
+ *
+ * El estado se infiere automaticamente de `value`:
+ *   - value === '' -> Default (con :hover CSS para Hover)
+ *   - value !== '' -> Active (search icon -> primary-base, muestra close button)
+ *
+ * Hover/focus requieren CSS (no se puede en logica) -> resueltos en el .scss
+ * via :host(:hover) / :host(:focus-within).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node 4187:559.
+ * Nodes pulled for verification:
+ *   4172:15911 / 4187:560 / 4212:3573 (los 3 states del search input)
+ *   125:279 (info-custom-fill: SVG custom DS, "i" serif — ya en sui-custom-icons)
+ *
+ * EXACT specs:
+ *   icon search-2-line: 20x20 (soft-400 default/hover; primary-base en active)
+ *   text: Paragraph/Small 14/20 -0.006em (placeholder soft-400 -> sub-600 -> strong-950)
+ *   shortcut chip: sui-kbd default text 12/16 uppercase — VISIBLE en los 3 estados
+ *   info icon: info-custom-fill 20x20 (state default/hover)
+ *   close button: sui-compact-button ghost con close-line (state active)
+ *   container: bg-white, border-bottom 1px stroke-soft-200, padding 14/20, gap 8,
+ *              max-width 600px (consumer puede override)
+ *
+ * `scoped: true` (light DOM, NO shadow): asi los selectores `:host([data-sui-*])`
+ * y los `<sui-icon>` / `<sui-kbd>` / `<sui-compact-button>` internos heredan los
+ * tokens del global sin pelear con shadow DOM. Misma estrategia que el Angular
+ * original (sin shadow).
+ *
+ * GOTCHA Stencil: el componente Angular es controlado (value como @Input). Aca
+ * se replica el mismo contrato controlado: el consumer escucha `valueChange` y
+ * vuelve a setear el @Prop `value`. El input nativo refleja `value` siempre.
+ */
+export declare class SuiCommandMenuSearch {
+    el: HTMLElement;
+    /** Texto actual del input (controlado). Default ''. */
+    value: string;
+    /** Placeholder del input. Default `Buscar o ir a…`. */
+    placeholder: string;
+    /** Nombre accesible del campo. Sin pasarlo, el lector anuncia el placeholder. */
+    ariaLabel: string | null;
+    /** Mostrar el chip cmdK (visible en los 3 estados). Default `true`. */
+    shortcut: boolean;
+    /** Mostrar el boton derecho (info en default, close en active). Default `true`. */
+    button: boolean;
+    /** Emite el nuevo texto en cada input (y '' al limpiar). Espeja el output Angular. */
+    valueChange: EventEmitter<string>;
+    /** Emite al presionar el close button. Espeja el output Angular. */
+    cleared: EventEmitter<void>;
+    /** True cuando hay texto -> muestra close button, search icon primary-base. */
+    private get isActive();
+    private onInput;
+    private onClear;
+    render(): any;
+}

package/dist/types/components/sui-compact-avatar-group/sui-compact-avatar-group.d.ts

@@ -0,0 +1,82 @@
+import type { SuiCompactAvatarGroupSize, SuiCompactAvatarGroupAppearance, SuiCompactAvatarGroupItem } from './sui-compact-avatar-group.data';
+/**
+ * `<sui-compact-avatar-group>` — 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-avatar-group/).
+ * Misma API pública (size/appearance/items/max/count), mismo comportamiento
+ * (slice por max + text count "+N" inline) y mismos VALORES exactos vía tokens
+ * (`--sui-*`, no hex). El accent del DS es NARANJA brand (#fa7319), NO el azul
+ * de Figma.
+ *
+ * Reusa el primitivo ya portado `<sui-avatar>` (no re-implementa el avatar): el
+ * compact group solo agrega el pill horizontal, el border blanco 2px entre
+ * chips, el overlap negativo -2px (más leve que `sui-avatar-group`) y el text
+ * count "+N" inline a la derecha. Pensado para tablas/listas donde la altura de
+ * fila es limitada (la pill toma menos espacio vertical que `sui-avatar-group`).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — frame 2906:14962 ("Compact Avatar Group
+ * [1.1]"). 3 sizes (24/32/40) × 2 styles (default/stroke).
+ *
+ * EXACT (pulled from Figma 2906:14962):
+ *  - Container: bg=var(--sui-bg-white-0), border-radius 999px, py-2px, pl-2px,
+ *    pr varía por size, shadow=regular-shadow/x-small (0 1px 2px 0 #0a0d1408).
+ *    Stroke variant añade border 1px var(--sui-stroke-soft-200).
+ *  - Avatars: stack con overlap -2px (más leve que Avatar Group), border 2px
+ *    white INTERIOR (box-sizing border-box) en cada chip.
+ *  - Per-size padding-right / gap text / typography del count:
+ *      24 → pr=8,  gap=6,  12/16/0
+ *      32 → pr=10, gap=8,  14/20/-0.006em
+ *      40 → pr=12, gap=10, 16/24/-0.011em
+ *
+ * PENDING VERIFY (inferred — NOT pulled from Figma):
+ *  - Font-family: el DS usa Satoshi global, el canon Figma usa Inter Regular.
+ *    Por decisión explícita del user NO se cambia la family — sí se respetan
+ *    font-size / line-height / letter-spacing.
+ *  - `max` default = 3 (convención del DS, no extraído de Figma).
+ *
+ * `scoped: true` (light DOM, NO shadow): así los `:host([data-sui-*])` y los
+ * `<sui-avatar>` proyectados heredan tokens del global sin pelear con shadow
+ * DOM. Misma estrategia que el avatar, el botón y el avatar-group ya portados.
+ *
+ * Uso:
+ *   <sui-compact-avatar-group
+ *     size="32"
+ *     appearance="stroke"
+ *     .items=${[{ src: 'a.jpg' }, { src: 'b.jpg' }, { initials: 'JD', color: 'blue' }]}
+ *     count="+4"
+ *   ></sui-compact-avatar-group>
+ */
+export declare class SuiCompactAvatarGroup {
+    /** Tamaño del pill. Default `32`. 3 sizes canon: 24 / 32 / 40. */
+    size: SuiCompactAvatarGroupSize;
+    /**
+     * Variante visual del pill. `default` (solo shadow) | `stroke` (border 1px).
+     * Se llama `appearance` (no `style`) para no colisionar con el atributo HTML
+     * nativo `style="..."`.
+     */
+    appearance: SuiCompactAvatarGroupAppearance;
+    /**
+     * Items del grupo (array de `{ src?, initials?, color?, alt? }`). Cada uno se
+     * renderiza como un `<sui-avatar>`. Se debe setear vía property JS (`.items`
+     * en Storybook/lit, o asignación directa en JS), NO como atributo.
+     */
+    items: readonly SuiCompactAvatarGroupItem[];
+    /** Máximo de avatares visibles antes del text count. Default 3. */
+    max: number;
+    /**
+     * Texto del count (ej. "+4"). Si vacío/null, se calcula desde
+     * `items.length - max`. Si el cálculo da 0, no se renderiza count.
+     */
+    count: string | null;
+    /** Map del size compacto (24/32/40) al `SuiAvatarSize` equivalente. */
+    private get avatarSize();
+    /** Items efectivamente visibles (slice por `max`). */
+    private get visibleItems();
+    /**
+     * Label del count: usa el override `count` si viene; sino calcula el overflow
+     * (`items.length - max`) y devuelve `+N`. '' (vacío) = no renderizar count.
+     */
+    private get countLabel();
+    render(): any;
+}

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

@@ -0,0 +1,35 @@
+import type { SuiAvatarColor } from '../sui-avatar/sui-avatar';
+/**
+ * Tamaños del `<sui-compact-avatar-group>` (Figma 2906:14962): 24 / 32 / 40.
+ * Cada uno mapea a un `SuiAvatarSize` equivalente para los `<sui-avatar>`
+ * internos (24→sm, 32→md, 40→lg).
+ */
+export type SuiCompactAvatarGroupSize = '24' | '32' | '40';
+/**
+ * Variante visual del pill.
+ *   - `default`: sin border (solo shadow x-small).
+ *   - `stroke` : añade border 1px var(--sui-stroke-soft-200).
+ *
+ * Se llama `appearance` (NO `style`) para no colisionar con el atributo HTML
+ * nativo `style="..."`. Mismo razonamiento que el Angular homologado.
+ */
+export type SuiCompactAvatarGroupAppearance = 'default' | 'stroke';
+/**
+ * Item del compact avatar group. Cada item se renderiza como un `<sui-avatar>`
+ * en cascada (src → initials). Idéntico al `SuiAvatarGroupItem`, replicado acá
+ * para que el componente sea self-contained y no acople su API a otro compuesto.
+ *
+ * NOTA STENCIL: este tipo vive en el archivo hermano `.data.ts` (no en el .tsx)
+ * para mantener el .tsx limpio y evitar reglas `export const/function/enum`
+ * prohibidas que rompen el build de TODO el proyecto.
+ */
+export interface SuiCompactAvatarGroupItem {
+    /** URL de la imagen principal del avatar. Máxima prioridad en la cascada. */
+    src?: string;
+    /** Iniciales del avatar (fallback). Se trunca a la 1ra letra uppercase. */
+    initials?: string;
+    /** Color del solid-bg de fallback (ramp *-200). Default `slate`. */
+    color?: SuiAvatarColor;
+    /** Texto alternativo de la imagen. */
+    alt?: string;
+}