@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/types/components/sui-dropdown-menu/sui-dropdown-menu.d.ts

@@ -0,0 +1,153 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/** Posición primaria del panel. `auto` = below con fallback above (auto-flip). */
+export type SuiDropdownMenuPosition = 'auto' | 'below' | 'above';
+/**
+ * Rol del popup que abre el trigger — gobierna el valor de `aria-haspopup`.
+ *   - 'menu'    (default): el panel contiene items con role="menuitem" (caso
+ *     canon de este wrapper: kebab menu, account switcher, command palette).
+ *   - 'listbox': el panel contiene items con role="option" (sui-select y
+ *     compact-selects que reusan este wrapper). El consumer DEBE pasarlo.
+ *   - 'true':    popup genérico sin semántica de rol conocida.
+ */
+export type SuiDropdownMenuPopupRole = 'menu' | 'listbox' | 'true';
+/**
+ * `<sui-dropdown-menu>` — SUI Design System (SUI Design System 2.0). COMPUESTO / INFRA.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-dropdown-menu/). Misma API
+ * pública conceptual, mismo comportamiento (overlay, teclado, focus, lazy mount
+ * del panel, backdrop close, width sync) y mismos VALORES exactos (tokens del DS).
+ * El accent del DS es NARANJA brand (#fa7319), NO el azul de Figma.
+ *
+ * Wrapper genérico content-agnostic: un trigger + un panel. Maneja la
+ * apertura/cierre del menu y lo ancla al trigger. NO impone qué contenido va
+ * adentro — el consumer proyecta `sui-dropdown-item`, checkboxes, lo que sea.
+ *
+ * Diferencias de PORT vs el Angular original (y por qué):
+ *  - El Angular delegaba el overlay a Angular CDK Overlay (TemplatePortal +
+ *    FlexibleConnectedPositionStrategy + scrollStrategy reposition + transparent
+ *    backdrop). En Stencil/web components no hay CDK; el panel se implementa como
+ *    un floating element `position: absolute` anclado al host (lazy-mounted), con
+ *    auto-flip al viewport (replica los fallback positions del CDK), close-on-
+ *    outside-click (replica el transparent backdrop) y reposición en scroll/resize
+ *    (replica el scrollStrategy reposition). Misma estrategia que sui-compact-select
+ *    y sui-tooltip en este repo.
+ *  - El panel del Angular se montaba en `cdk-overlay-container` (sibling de body),
+ *    fuera de la encapsulación; sus estilos vivían en un SCSS global
+ *    (_sui-dropdown-menu-overlay.scss). Acá el panel es light DOM dentro del host
+ *    (scoped:true), así que esos estilos viven en el SCSS del componente.
+ *  - El Angular usaba `[origin]` (ElementRef|HTMLElement) para anclar a un trigger
+ *    externo. Acá el equivalente es `originSelector` (CSS selector resuelto en
+ *    document) u `originElement` (HTMLElement asignado por prop). Cuando hay
+ *    origin, NO se renderea el wrapper interno del trigger y el parent llama
+ *    `toggle()` desde su propio handler.
+ *
+ * Modos de uso:
+ *  1. Content projection (default) — proyectar trigger + panel:
+ *     <sui-dropdown-menu>
+ *       <sui-button slot="trigger">Open</sui-button>
+ *       <sui-dropdown-item slot="panel" label="Settings"></sui-dropdown-item>
+ *     </sui-dropdown-menu>
+ *  2. External origin — el parent maneja el trigger y solo delega el panel:
+ *     <sui-dropdown-menu origin-selector="#my-trigger">
+ *       <sui-dropdown-item slot="panel" label="..."></sui-dropdown-item>
+ *     </sui-dropdown-menu>
+ *
+ * GOTCHAS de API (renombres / Stencil):
+ *  - El @Prop `position` NO colisiona con DOM aquí (el host es div-like).
+ *  - `popupRole` (camelCase) → atributo `popup-role`.
+ *  - El strip del atributo nativo `title` (canon Ontop) no aplica: no recibe `title`.
+ *
+ * iOS WKWebView :active fix: el host escucha touchstart/touchend (la presencia del
+ * binding engage el touch pipeline; touchend blur fuerza la deselección del
+ * :active stuck en cualquier botón clickeable custom proyectado en el panel).
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-sui-*])`
+ * translan limpio y el panel flotante se monta dentro del subtree del host sin
+ * pelear con shadow DOM. Misma estrategia que sui-compact-select / sui-popover.
+ *
+ * Slots:
+ *  - `trigger` → el elemento que abre el menu (modo content-projection).
+ *  - `panel`   → el contenido del menu (items). Default slot también aceptado.
+ *
+ * Eventos:
+ *  - `openedChange`: boolean — open/close del panel (espeja el Angular output).
+ *  - `opened`: void — atajo cuando abre.
+ *  - `closed`: void — atajo cuando cierra.
+ */
+export declare class SuiDropdownMenu {
+    el: HTMLElement;
+    /** Si true, el panel matchea el ancho del trigger. Default: auto width. */
+    matchWidth: boolean;
+    /** Min-width fijo del panel (px). Si matchWidth + minWidth: `max(triggerWidth, minWidth)`. Default `null`. */
+    minWidth: number | null;
+    /** Posición primaria. `auto` = below con fallback above (auto-flip). Default `auto`. */
+    position: SuiDropdownMenuPosition;
+    /** Margen del viewport edge en px (canon SUI). Default `8`. */
+    viewportMargin: number;
+    /** Clase custom para el panel (overrides de bg/padding desde el consumer). Default `''`. */
+    panelClass: string;
+    /** Disabled — no abre el menu al clickear el trigger. Default `false`. */
+    disabled: boolean;
+    /**
+     * Rol del popup para `aria-haspopup` del trigger. Default `menu` (items con
+     * role="menuitem"). Los consumers de tipo listbox (items role="option") DEBEN
+     * pasar `popup-role="listbox"`.
+     */
+    popupRole: SuiDropdownMenuPopupRole;
+    /**
+     * Selector CSS del trigger externo (resuelto en `document`). Si presente, el
+     * menu se ancla a ese elemento y NO renderea el wrapper de trigger interno
+     * (el parent maneja el click y llama `toggle()`). Caso: compact-selects.
+     */
+    originSelector: string | null;
+    /** Trigger externo asignado imperativamente por JS (tiene prioridad sobre originSelector). */
+    originElement: HTMLElement | null;
+    /** Panel abierto. Refleja a `data-sui-open` para el visual state. */
+    open: boolean;
+    /** Auto-flip arriba cuando no cabe abajo (replica fallback positions del CDK). */
+    private flipUp;
+    /** Panel alineado al borde derecho del trigger (fallback `end` del CDK). */
+    private alignEnd;
+    /** Ancho/min-width computados del panel (px) cuando matchWidth está activo. */
+    private panelWidth;
+    private panelMinWidth;
+    /** Cambio de apertura del panel (espeja el output del Angular). */
+    openedChange: EventEmitter<boolean>;
+    /** Atajo: el panel abrió. */
+    opened: EventEmitter<void>;
+    /** Atajo: el panel cerró. */
+    closed: EventEmitter<void>;
+    private resizeObserver;
+    onDisabledChange(value: boolean): void;
+    /** aria-haspopup / aria-expanded van al control proyectado (button, a, role=button),
+     *  no al span wrapper: el span es genérico y no recibe foco (a11y 09-10-2026). */
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    /** Elemento al que se ancla el panel: origin externo > wrapper interno del trigger. */
+    private getTriggerEl;
+    private get hasInternalTrigger();
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    private onTriggerClick;
+    private onTriggerKeydown;
+    onDocumentClick(event: MouseEvent): void;
+    onDocumentKeydown(event: KeyboardEvent): void;
+    onWindowResize(): void;
+    /** Abre el panel imperativamente. No hace nada si disabled. */
+    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 syncWidth;
+    private setupResizeObserver;
+    private teardownResizeObserver;
+    private reposition;
+    /** Mueve foco al primer item enfocable del panel (mejora keyboard nav). */
+    private focusFirstItem;
+    private get panelStyle();
+    render(): any;
+}

package/dist/types/components/sui-dropdown-menu/sui-dropdown-menu.data.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Datos de demo para las stories de `<sui-dropdown-menu>`.
+ *
+ * El dropdown-menu es content-agnostic: el consumer proyecta lo que quiera en el
+ * panel. Como `sui-dropdown-item` aún NO está portado a Stencil, las stories
+ * renderean items con markup inline que replica el look de `sui-dropdown-item`
+ * (icon leading + label + shortcut/check trailing). Estos catálogos alimentan
+ * ese render. Cuando se porte `sui-dropdown-item`, las stories pueden migrar a
+ * usarlo directamente sin cambiar el componente.
+ */
+export interface SuiDropdownMenuDemoItem {
+    /** Valor identificador del item. */
+    value: string;
+    /** Label visible (línea principal). */
+    label: string;
+    /** RemixIcon name del leading (ej. 'settings-3-line'). Opcional. */
+    icon?: string;
+    /** Shortcut chip al trailing (ej. 'CMD,'). Opcional. */
+    shortcut?: string;
+    /** Item deshabilitado. */
+    disabled?: boolean;
+}
+/** Kebab / acciones contextuales (menuitem). */
+export declare const SUI_DROPDOWN_MENU_DEMO_ACTIONS: SuiDropdownMenuDemoItem[];
+/** Account switcher (menuitem con selected). */
+export declare const SUI_DROPDOWN_MENU_DEMO_ACCOUNTS: SuiDropdownMenuDemoItem[];
+/** Lista tipo listbox (option) — para popup-role="listbox". */
+export declare const SUI_DROPDOWN_MENU_DEMO_OPTIONS: SuiDropdownMenuDemoItem[];

package/dist/types/components/sui-dropdown-search/sui-dropdown-search.d.ts

@@ -0,0 +1,73 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * `<sui-dropdown-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-dropdown-search/). Misma
+ * API pública (value / placeholder / disabled + eventos valueChange y cleared),
+ * TODOS los estados visuales (Default / Hover / Active / disabled), mismo
+ * comportamiento (estado inferido del value, clear vacía el value + refocus) y
+ * mismos VALORES exactos (tokens del DS, no hex). Reusa el primitivo `<sui-icon>`
+ * ya portado (NO re-implementa iconos). El accent del DS es NARANJA brand
+ * (#fa7319), NO el azul de Figma.
+ *
+ * Search input minimal usado en el TOP de un dropdown menu para filtrar items
+ * (country picker, command palette, large select). NO es `<sui-input>` — tiene
+ * anatomy diferente: sin border, sin radius prominente, integrado al menu.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Frame: 414:8031 ("Dropdown Misc Items [1.1]") — variant Search × 4 states
+ *   Default / Hover / Active / Active Hover.
+ * Nodes pulled for verification: 414:8030 (Default), 414:8048 (Active).
+ *
+ * EXACT specs:
+ *   Container:
+ *     bg white-0, padding 8, gap 8, flex items-center, width 100%
+ *     (el Angular usaba w-320 de Figma; aca default 100% box-sizing como el
+ *     SCSS homologado — el consumer override con el width del menu),
+ *     overflow-clip, sin border, sin radius (es parte del menu).
+ *     Hover (no disabled): bg weak-50.
+ *   Default:
+ *     search icon 20x20 leading, color icon-soft-400.
+ *     placeholder «Buscar…» color text-soft-400 (16 px en ≤767 por el zoom de iOS).
+ *   Active (con valor escrito -> data-sui-has-value):
+ *     search icon: icon-sub-600 (oscurece vs el soft-400 de Default; también en hover).
+ *     text input: text-strong-950 (el valor escrito en negro).
+ *     close icon 20x20 trailing para clear (icon-soft-400 -> strong-950 hover).
+ *   disabled [extra feature, no en Figma]: input disabled, cursor not-allowed,
+ *     texto disabled-300, :hover bg weak-50 skipeado.
+ *   Typography: Inter Regular 14/20/-0.6% (Paragraph/Small).
+ *
+ * `scoped: true` (light DOM, NO shadow): asi los selectores `:host([data-sui-*])`
+ * y el `<sui-icon>` interno heredan los tokens del global sin pelear con shadow
+ * DOM. Misma estrategia que el Angular original (sin shadow).
+ *
+ * GOTCHA Stencil: el componente Angular usa `model()` (two-way binding nativo de
+ * Angular). Aca se replica el contrato controlado idiomatico de web components
+ * (igual que `<sui-command-menu-search>`): el consumer escucha `valueChange` y
+ * vuelve a setear el @Prop `value`. El input nativo refleja `value` siempre.
+ */
+export declare class SuiDropdownSearch {
+    el: HTMLElement;
+    /** Texto actual del input. Mutable como el `model()` del Angular: escribir o
+     *  limpiar lo actualiza solo, y además emite `valueChange`. Default ''. */
+    value: string;
+    /** Placeholder del input. Default `Buscar…`. */
+    placeholder: string;
+    /** Nombre accesible del campo. Sin pasarlo, el lector anuncia el placeholder. */
+    ariaLabel: string | null;
+    /** Deshabilita el input (extra feature, no en Figma). Default `false`. */
+    disabled: boolean;
+    /** Emite el nuevo texto en cada input. Espeja el output `valueChanged` del Angular. */
+    valueChange: EventEmitter<string>;
+    /** Emite al presionar el icono de clear (X). Espeja el output `cleared` del Angular. */
+    cleared: EventEmitter<void>;
+    /** True cuando hay texto -> estado "Active" de Figma (muestra el clear button). */
+    private get hasValue();
+    private onInput;
+    /** iOS :active del botón de limpiar (SuiToque del Angular): listeners pasivos. */
+    onTouchStart(): void;
+    onTouchEnd(ev: TouchEvent): void;
+    private onClear;
+    render(): any;
+}

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

@@ -0,0 +1,57 @@
+import { SUI_EMOJI_MAP } from './sui-emoji.data';
+export type SuiEmojiName = keyof typeof SUI_EMOJI_MAP;
+export type SuiEmojiSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * `<sui-emoji>` — wrapper de emojis Fluent UI animados (PNG raster a color)
+ * del SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-emoji/). Misma API
+ * pública (name/src/size/ariaLabel), mismo comportamiento (resolución
+ * catálogo↔src, accesibilidad img/decorativo) y mismos VALORES exactos
+ * (catálogo `SUI_EMOJI_MAP` + tamaños del DS).
+ *
+ * Diferencias vs `<sui-icon>`:
+ *  - `<sui-emoji>` = PNG raster animado, multi-color, NO responde a
+ *    `currentColor` (no se le aplican filtros de color).
+ *  - `<sui-icon>`  = SVG/font monocromo, hereda color del padre.
+ *
+ * Uso típico: empty states, switch-card decorativos, celebraciones, onboarding.
+ *
+ * API:
+ *  - `name`:      shortcut a un emoji del catálogo `SUI_EMOJI_MAP` (ej. 'package').
+ *  - `src`:       URL directa al emoji (override del catálogo). Útil para usar
+ *                 emojis fuera del map sin tener que registrarlos.
+ *  - `size`:      xs (16) · sm (20) · md (24, default) · lg (32) · xl (48) ·
+ *                 full (100% del padre).
+ *  - `ariaLabel`: si se provee, el emoji se anuncia como `<img>` con ese label;
+ *                 si no, se considera decorativo (`aria-hidden="true"`).
+ *
+ * `scoped: true` (light DOM, NO shadow): igual estrategia que `<sui-button>` /
+ * `<sui-icon>`. El componente solo renderiza un `<img>`, sin contenido
+ * proyectado que necesite slots.
+ */
+export declare class SuiEmoji {
+    /** Nombre del emoji del catálogo `SUI_EMOJI_MAP`. Si se provee `src`, este se ignora. */
+    name: SuiEmojiName | null;
+    /** URL directa al emoji (override del catálogo). Útil para usar emojis fuera del map. */
+    src: string | null;
+    /** Tamaño del emoji. Default `md` (24px). */
+    size: SuiEmojiSize;
+    /**
+     * Aria-label opcional. Si se provee, el emoji se anuncia como `<img>` con ese
+     * label; si no, se considera decorativo (`aria-hidden="true"`).
+     */
+    ariaLabel: string | null;
+    /**
+     * Si el emoji se anima. Default `true`: uno solo en un empty state se ve
+     * mejor vivo. Ponerlo en `false` cuando hay VARIOS juntos (barra de
+     * calificación, grilla): cada uno es un APNG de ~1 MB en bucle. Los que tienen
+     * copia estática (`SUI_EMOJI_STATIC`, WebP inline de 3,6 KB) resuelven a esa;
+     * el resto cae al animado, que es mejor que no mostrar nada.
+     */
+    animated: boolean;
+    /** URL final del emoji (catálogo o `src` directo). `null` si no hay nada que resolver. */
+    private get resolvedSrc();
+    render(): any;
+}

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

@@ -0,0 +1,80 @@
+/**
+ * Datos del catálogo de emojis Fluent UI animados del SUI Design System.
+ * Separado de `sui-emoji.tsx` porque Stencil prohíbe `export const/function/enum`
+ * en archivos que contienen un `@Component`. Los tipos (`export type`) sí pueden
+ * quedar en el .tsx; los valores de runtime viven aquí.
+ */
+/**
+ * Base CDN de los emojis Fluent UI animados (PNG raster a color).
+ * Source: github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis
+ */
+export declare const FLUENT_EMOJI_BASE = "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis";
+/**
+ * Catálogo de emojis disponibles. Cada key mapea a un path relativo a
+ * `FLUENT_EMOJI_BASE`. Categorías típicas: Smilies, Objects,
+ * Travel%20and%20places, People, Symbols, etc.
+ * Encoding: usa `%20` para espacios en el path.
+ *
+ * Es la fuente de verdad del DS — cuando se agrega un emoji nuevo, se registra
+ * acá (NO crear un dict paralelo en otros componentes).
+ */
+export declare const SUI_EMOJI_MAP: {
+    readonly 'thinking-face': "Smilies/Thinking%20Face.png";
+    readonly 'grinning-face': "Smilies/Grinning%20Face.png";
+    readonly 'smiling-face-hearts': "Smilies/Smiling%20Face%20with%20Hearts.png";
+    readonly 'face-with-rolling-eyes': "Smilies/Face%20with%20Rolling%20Eyes.png";
+    readonly 'face-screaming': "Smilies/Face%20Screaming%20in%20Fear.png";
+    readonly 'partying-face': "Smilies/Partying%20Face.png";
+    readonly 'star-struck': "Smilies/Star-Struck.png";
+    readonly 'sleeping-face': "Smilies/Sleeping%20Face.png";
+    readonly 'pensive-face': "Smilies/Pensive%20Face.png";
+    readonly 'confused-face': "Smilies/Confused%20Face.png";
+    readonly 'neutral-face': "Smilies/Neutral%20Face.png";
+    readonly 'slightly-smiling-face': "Smilies/Slightly%20Smiling%20Face.png";
+    readonly 'grinning-face-smiling-eyes': "Smilies/Grinning%20Face%20with%20Smiling%20Eyes.png";
+    readonly package: "Objects/Package.png";
+    readonly receipt: "Objects/Receipt.png";
+    readonly 'money-bag': "Objects/Money%20Bag.png";
+    readonly 'money-with-wings': "Objects/Money%20with%20Wings.png";
+    readonly 'shopping-cart': "Objects/Shopping%20Cart.png";
+    readonly 'shopping-bags': "Objects/Shopping%20Bags.png";
+    readonly 'card-index-dividers': "Objects/Card%20Index%20Dividers.png";
+    readonly bell: "Objects/Bell.png";
+    readonly 'bell-with-slash': "Objects/Bell%20with%20Slash.png";
+    readonly pushpin: "Objects/Round%20Pushpin.png";
+    readonly 'mobile-phone': "Objects/Mobile%20Phone.png";
+    readonly gear: "Objects/Gear.png";
+    readonly locked: "Objects/Locked.png";
+    readonly unlocked: "Objects/Unlocked.png";
+    readonly wrench: "Objects/Wrench.png";
+    readonly hammer: "Objects/Hammer.png";
+    readonly 'magnifying-glass-tilted-left': "Objects/Magnifying%20Glass%20Tilted%20Left.png";
+    readonly label: "Objects/Label.png";
+    readonly 'spiral-calendar': "Objects/Spiral%20Calendar.png";
+    readonly 'bar-chart': "Objects/Bar%20Chart.png";
+    readonly 'delivery-truck': "Travel%20and%20places/Delivery%20Truck.png";
+    readonly motorcycle: "Travel%20and%20places/Motorcycle.png";
+    readonly rocket: "Travel%20and%20places/Rocket.png";
+    readonly house: "Travel%20and%20places/House.png";
+    readonly 'office-building': "Travel%20and%20places/Office%20Building.png";
+    readonly shop: "Travel%20and%20places/Convenience%20Store.png";
+    readonly 'dollar-banknote': "Objects/Dollar%20Banknote.png";
+    readonly 'glowing-star': "Travel%20and%20places/Glowing%20Star.png";
+    readonly 'kick-scooter': "Travel%20and%20places/Kick%20Scooter.png";
+    readonly 'check-mark': "Symbols/Check%20Mark.png";
+    readonly 'check-mark-button': "Symbols/Check%20Mark%20Button.png";
+    readonly 'cross-mark': "Symbols/Cross%20Mark.png";
+    readonly warning: "Symbols/Warning.png";
+    readonly 'no-entry': "Symbols/No%20Entry.png";
+    readonly sparkles: "Activities/Sparkles.png";
+    readonly 'party-popper': "Activities/Party%20Popper.png";
+    readonly 'waving-hand': "Hand%20gestures/Waving%20Hand.png";
+    readonly 'thumbs-up': "Hand%20gestures/Thumbs%20Up.png";
+    readonly 'clapping-hands': "Hand%20gestures/Clapping%20Hands.png";
+    readonly handshake: "Hand%20gestures/Handshake.png";
+    readonly 'busts-in-silhouette': "People/Busts%20in%20Silhouette.png";
+    readonly pizza: "Food/Pizza.png";
+    readonly hamburger: "Food/Hamburger.png";
+    readonly taco: "Food/Taco.png";
+    readonly 'birthday-cake': "Food/Birthday%20Cake.png";
+};

package/dist/types/components/sui-emoji/sui-emoji.static.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Copias ESTÁTICAS inline de los emojis que se usan de a cinco a la vez.
+ *
+ * Los del catálogo remoto son APNG de 73 fotogramas y ~1 MB cada uno. Uno solo
+ * en un empty state está perfecto —para eso se eligieron—, pero la barra de
+ * calificación monta CINCO juntos: 5 MB de descarga y cinco animaciones en
+ * bucle infinito dentro de un modal que además scrollea. Cada fotograma
+ * invalida el área y, en el modal a pantalla completa, obliga a repintar la
+ * tarjeta entera (lleva `clip-path` + `filter`), así que el scroll se sentía
+ * trabado incluso sin tocar nada.
+ *
+ * Estos son el PRIMER fotograma de esos mismos emojis a 96px WebP: 3,6 KB cada
+ * uno, 18 KB los cinco, sin red y sin animación. Visualmente idénticos al
+ * emoji animado en reposo —se comparó al generar—, así que no se pierde nada:
+ * la barra ya expresa la selección agrandando y coloreando la carita elegida.
+ *
+ * Se resuelven con `[animated]="false"` en <sui-emoji>. El default sigue siendo
+ * el animado: donde hay uno solo, la animación suma.
+ *
+ * Para regenerar: primer fotograma del APNG del catálogo, LANCZOS a 96×96,
+ * WebP q=88 method=6, en base64.
+ */
+export declare const SUI_EMOJI_STATIC: Record<string, string>;

package/dist/types/components/sui-empty-state/sui-empty-state.d.ts

@@ -0,0 +1,60 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type SuiEmptyStateAction, type SuiEmptyStateSize } from './sui-empty-state.data';
+/**
+ * `<sui-empty-state>` — SUI Design System 2.0. COMPUESTO.
+ *
+ * Homologado con el SUI Angular (`sui-design-system`, 05-11-2026).
+ * Placeholder visual cuando una colección no tiene datos: un **Fluent Emoji
+ * animado** (PNG 3D) + título + subtítulo + CTA opcional. Reusa `<sui-emoji>`
+ * y `<sui-button>`.
+ *
+ * Ilustración: el default es el **zorro** (mascota canon de los empty states);
+ * todo empty lo muestra salvo que se pase un `emoji` (URL) distinto.
+ *
+ * CTA — prop `action`:
+ *  - string shorthand (`action="Crear producto"`) → botón que emite `actionClicked`.
+ *  - objeto `{ label, route? }` → con `route` (alias `href`) el botón va envuelto
+ *    en un `<a href>` y NO emite `actionClicked` (en Angular es routerLink).
+ *  - `null` / label vacío → sin botón.
+ *
+ * `size`: tamaño del botón del CTA — `medium` 40 (default) · `large` 48, el CTA
+ * de mobile (extensión SUI 03-10-2026). Emoji, título y padding no cambian.
+ *
+ * Layout: :host flex column center, padding 48/24 (≤767px → 32/20), max-width
+ * 460; ilustración 120×120; título 18/24 600; subtítulo 14/20 sub-600 max 320.
+ *
+ * ── Divergencias con el Angular ───────────────────────────────────────────
+ *  1. `title` → `heading`: `title` es reservado del DOM (tooltip nativo gris).
+ *  2. Slot `action`: CTA totalmente custom; gana sobre `action`.
+ *
+ *
+ * `scoped: true` (light DOM): `<sui-emoji>` / `<sui-button>` heredan los tokens.
+ */
+export declare class SuiEmptyState {
+    el: HTMLElement;
+    componentWillLoad(): void;
+    /** URL de un Fluent Emoji (3D o animado): override del zorro default. */
+    emoji: string | null;
+    /**
+     * Título. Es el `title` del Angular renombrado: `title` es reservado del DOM
+     * (dispara el tooltip nativo gris). Se expone como `aria-label` del emoji.
+     */
+    heading: string | null;
+    /** Descripción / subtítulo. */
+    subtitle: string | null;
+    /**
+     * CTA: string shorthand (solo label, emite `actionClicked`) u objeto
+     * `{ label, route? }` (con `route` navega con un `<a href>`). `null`/'' = sin botón.
+     */
+    action: SuiEmptyStateAction | string | null;
+    /** Tamaño del botón del CTA: `medium` 40 (default) o `large` 48 para mobile. */
+    size: SuiEmptyStateSize;
+    /** Se emite al presionar el CTA cuando NO navega (sin `route`). */
+    actionClicked: EventEmitter<void>;
+    /** Config resuelta del CTA (string → { label }; sin label → null). */
+    private get actionCfg();
+    private onCtaClick;
+    /** Renderiza el `<sui-button>` del CTA (link vs click). */
+    private renderCta;
+    render(): any;
+}

package/dist/types/components/sui-empty-state/sui-empty-state.data.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Datos del `<sui-empty-state>` del SUI Design System.
+ * Separado de `sui-empty-state.tsx` porque Stencil prohíbe `export const/function/
+ * enum` en archivos que contienen un `@Component`.
+ */
+/** Zorro animado (Fluent Emoji): emoji default canon de los empty states. */
+export declare const EMPTY_STATE_FOX_EMOJI = "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Fox.png";
+/**
+ * Config del CTA. String shorthand = solo label (el botón emite `actionClicked`);
+ * con `route` (alias `href`) el botón navega con un `<a href>`.
+ */
+export interface SuiEmptyStateAction {
+    label: string;
+    route?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+}
+/** Tamaño del botón del CTA: `medium` 40 (default) · `large` 48, el CTA de mobile (03-10-2026). */
+export type SuiEmptyStateSize = 'medium' | 'large';

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

@@ -0,0 +1,86 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiFancyButtonType = 'primary' | 'neutral' | 'basic' | 'destructive';
+export type SuiFancyButtonSize = 'large' | 'medium' | 'small' | 'xsmall';
+export type SuiFancyButtonHtmlType = 'button' | 'submit' | 'reset';
+/**
+ * `<sui-fancy-button>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Homologado con el SUI Angular (`sui-design-system`, 05-11-2026). Misma API
+ * pública (type/size/leftIcon/rightIcon/disabled/href/target/rel/htmlType/
+ * ariaLabel + evento `clicked`), mismas variantes/sizes/states y mismos VALORES
+ * exactos vía tokens del DS (no hex sueltos). El accent del DS es NARANJA brand
+ * (#fa7319 = --sui-primary-base), NUNCA el azul de Figma (#335cff).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — frame 181:5291 (`Fancy Buttons [1.1]`),
+ * 36 variants: 4 types × 3 sizes × 3 states.
+ *
+ * Diferencia vs sui-button regular: el "fancy" trae un look elevado con:
+ *   1. Gradient gloss overlay (linear-gradient 180deg de white 16% → 0).
+ *   2. Inset highlight border (1px rgba(255,255,255,0.12) — interna).
+ *   3. Colored 1px ring shadow (`0 0 0 1px <brand-color>` — el contorno fancy).
+ *   4. Drop shadow (`0 1px 2px <brand-shadow-color>`).
+ *
+ * Es la versión "hero CTA" — más visual presence que sui-button regular. Úsalo
+ * para acciones primarias críticas. Para botones normales seguir usando sui-button.
+ *
+ * Types (Figma 181:5291):
+ *  - primary     → naranja brand (#fa7319 = --sui-primary-base) + gloss + ring
+ *  - neutral     → negro (--sui-bg-strong-950 #171717) + gloss + ring #242628
+ *  - basic       → blanco plano (sin gloss) + ring stroke-soft-200
+ *  - destructive → rojo error (--sui-state-error-base) + gloss + ring
+ *
+ * Sizes: large (48) p=12/14, texto 16/24 — el piso táctil de 44 del teléfono
+ *   (extensión SUI 04-10-2026, espeja el large de sui-button) · medium (40) p=10 ·
+ *   small (36) p=8 · xsmall (32) p=6 · gap=4 · radius-10.
+ *
+ * Estados (frame Fancy: Default / Hover / Disabled):
+ *  - Hover NO oscurece: el gloss SE ACLARA 16%→24%; base y ring quedan iguales
+ *    (basic hover → bg-weak-50 plano, sin ring/shadow).
+ *  - Disabled: bg-weak-50 plano, text-disabled-300, sin gloss/ring/shadow/border.
+ *  - Focus/active halo per-type vía `--sui-fancy-focus-ring`:
+ *      primary → primary-alpha-10 · destructive → red-alpha-10 ·
+ *      neutral/basic → slate-alpha-16.
+ *
+ * `scoped: true` (light DOM, NO shadow): mismos selectores `:host([data-sui-*])`
+ * y styling del contenido proyectado (slots). Misma estrategia que sui-button.
+ *
+ * Render polimórfico: si `href` está seteado y NO está disabled, el elemento
+ * interno (`.sui-fancy-button__el`) se renderiza como `<a>`; si no, `<button>`.
+ *
+ * Slots / contenido:
+ *  - default → label (se proyecta en `.sui-fancy-button__text-wrap`).
+ *  - leftIcon / rightIcon → nombre RemixIcon, se renderiza con `<sui-icon>` 20px.
+ */
+export declare class SuiFancyButton {
+    el: HTMLElement;
+    /** Tipo visual. Default `primary` (naranja brand). */
+    type: SuiFancyButtonType;
+    /** Tamaño. Default `medium` (40px). `large` (48) es el del teléfono. */
+    size: SuiFancyButtonSize;
+    /** Nombre RemixIcon del ícono leading (sin prefijo `ri-`). Default `null`. */
+    leftIcon: string | null;
+    /** Nombre RemixIcon del ícono trailing (sin prefijo `ri-`). Default `null`. */
+    rightIcon: string | null;
+    /** Deshabilitado: bloquea click, tokens grises, sin gloss/ring. Default `false`. */
+    disabled: boolean;
+    /** Si se setea (y no disabled), renderiza un `<a href>` en vez de `<button>`. */
+    href: string | null;
+    /** `target` del anchor (solo aplica cuando hay `href`). */
+    target: string | null;
+    /** `rel` del anchor. Default `noopener noreferrer`. */
+    rel: string | null;
+    /** Tipo HTML del `<button>` (form behavior). Default `button`. */
+    htmlType: SuiFancyButtonHtmlType;
+    /** `aria-label` accesible. Default `null`. */
+    ariaLabel: string | null;
+    /** Emite el `MouseEvent` del click cuando NO está disabled. */
+    clicked: EventEmitter<MouseEvent>;
+    /** Tamaño del ícono — canon 20px (igual que el Angular). */
+    private readonly iconSize;
+    /** true cuando debe renderizarse como `<a>` (href presente y no disabled). */
+    private get isAnchor();
+    private onClick;
+    alTocar(): void;
+    alSoltar(event: Event): void;
+    render(): any;
+}

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

@@ -0,0 +1,70 @@
+export type SuiFileIconSize = 'xsmall' | 'medium';
+export type SuiFileIconColor = 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'pink' | 'gray';
+/**
+ * `<sui-file-icon>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-file-icon/). Misma API
+ * pública (filename/extension/size/color → props), TODAS sus variantes
+ * (9 colors × 2 sizes), su comportamiento (auto-extracción de extensión +
+ * auto-detect de color desde la extensión) y sus VALORES exactos (tokens del
+ * DS, no hex sueltos).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node 450:17234 ("File Format Icons [1.1]").
+ *
+ * Visual: archivo gris (rounded-rect con esquina diagonal-cut + peel doblado)
+ * outline con stroke gris (sub-300) + badge de formato coloreado en bottom-left
+ * mostrando la extensión en uppercase blanco. El cuerpo SIEMPRE es blanco — solo
+ * el badge cambia de color a través de las 9 variantes.
+ *
+ * EXACT specs (pulled de Figma vía MCP, verified):
+ *  - Container Medium: 40×40 — X-Small: 32×32
+ *  - Body Medium (viewBox 32×40, inset 4px): rounded-rect r=6 + diagonal-cut
+ *    top-right, fill bg-white-0, stroke sub-300 @1.5px
+ *  - Body X-Small (viewBox 26×32, centered): mismo shape, r≈4.8, stroke @1.2px
+ *  - Peel = borde de doblez L-shaped (stroke only, sin fill), sub-300
+ *  - Badge Medium: bottom=6px left=0, padding 2px 3px, radius 4px, text 11/12px
+ *  - Badge X-Small: bottom=4px left=0, padding 2px 3px, radius 3px, text 8.8/9.6px
+ *  - Texto: Inter SemiBold uppercase, white, letter-spacing 0.02em
+ *
+ * Color tokens (verified via get_variable_defs) — solo el badge cambia:
+ *   Red    → --sui-state-error-base        (#fb3748)
+ *   Orange → --sui-state-warning-base       (#fa7319)
+ *   Yellow → --sui-state-away-base          (#f6b51e)
+ *   Green  → --sui-state-success-base       (#1fc16b)
+ *   Teal   → --sui-state-verified-base      (#47c2ff)
+ *   Blue   → --sui-state-information-base    (#335cff)
+ *   Purple → --sui-state-feature-base        (#7d52f4)
+ *   Pink   → --sui-state-highlighted-base    (#fb4ba3)
+ *   Gray   → --sui-state-faded-base          (#7b7b7b)
+ *
+ * El accent del DS es NARANJA brand (#fa7319). El color `blue` del Figma
+ * (state-information #335cff) se mantiene SOLO para el auto-detect de docs;
+ * `orange` mapea a --sui-state-warning-base (que también es #fa7319), NO se
+ * sustituye por azul.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * del SCSS translan limpio. Misma estrategia que sui-button / sui-icon.
+ *
+ * Props:
+ *  - filename: source para auto-extracción de extensión.
+ *  - extension: override explícito del texto de extensión mostrado.
+ *  - size: 'xsmall' (32×32) | 'medium' (40×40). Default `medium`.
+ *  - color: override explícito del color del badge. '' = auto-detect desde la
+ *    extensión; default gray para tipos desconocidos.
+ */
+export declare class SuiFileIcon {
+    /** Source para auto-extracción de extensión (ej. `informe.pdf`). */
+    filename: string;
+    /** Override explícito del texto de extensión (gana sobre `filename`). */
+    extension: string;
+    /** Tamaño. `xsmall` 32×32 · `medium` 40×40. Default `medium`. */
+    size: SuiFileIconSize;
+    /** Override explícito del color del badge. '' = auto-detect desde la extensión. */
+    color: SuiFileIconColor | '';
+    /** Extensión normalizada (uppercase, sin punto inicial, máx 4 chars). */
+    private get resolvedExt();
+    /** Color final: override explícito > auto-detect por extensión > 'gray'. */
+    private get resolvedColor();
+    render(): any;
+}