@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/types/components/sui-app-store-badge/sui-app-store-badge.d.ts

@@ -0,0 +1,83 @@
+export type SuiAppStoreBadgeCompany = 'app-store' | 'mac-app-store' | 'amazon-appstore' | 'galaxy-store' | 'huawei-appgallery' | 'f-droid' | 'google-play' | 'microsoft-store';
+export type SuiAppStoreBadgeAppearance = 'preferred' | 'alternative';
+/**
+ * `<sui-app-store-badge>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-app-store-badge/). Misma
+ * API pública (company/appearance/href/target/rel/height/disabled/ariaLabel),
+ * mismas 16 variantes (8 companies × 2 styles), mismo comportamiento (anchor
+ * cuando hay href, iOS :active fix) y mismos VALORES exactos (tokens del DS,
+ * no hex). El accent del DS es NARANJA brand (#fa7319), NO el azul de Figma —
+ * aquí solo aparece en el focus ring (`--sui-primary-alpha-10`).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — frame 253:6998 ("App Store Badges [1.1]").
+ *
+ * EXACT (Figma metadata + official brand SVG exports):
+ *   Height (all variants):      40px (default; `height` escala proporcional)
+ *   Native widths per company:
+ *     App Store 120 · Mac App Store 156 · Amazon Appstore 137 · Galaxy Store 147
+ *     Huawei AppGallery 133 · F-Droid 136 · Google Play 136 · Microsoft Store 112
+ *   Border radius:        8px
+ *   Border (Alternative): 1px solid (var(--sui-static-black))
+ *   Background (Preferred): var(--sui-static-black)
+ *
+ * Assets: SVG oficiales exportados del Figma por el equipo, en
+ *   `assets/store-badges/{company}-{appearance}.svg`. Cada SVG trae el logo de
+ *   marca + copy locale-EN. Son vectoriales y escalan a cualquier tamaño.
+ *
+ * Brand compliance: cada plataforma exige usar su badge oficial tal cual (sin
+ * recolorear, sin modificar el logo). Se renderiza como `<img>` referenciando el
+ * SVG — NO inlinear el SVG y tocar sus paths.
+ *
+ * PENDING VERIFY (inferido, NO pulled de Figma per-state):
+ *   - Hover: opacity 0.85 (Apple Marketing Guidelines).
+ *   - Active: scale(0.97) (convención tactile-press del proyecto).
+ *   - Focus ring: halo 2px con --sui-primary-alpha-10 (convención del DS).
+ *   - Disabled: opacity 0.4, pointer-events none. NO en Figma.
+ *
+ * Cuando `href` está seteado (y no disabled), renderiza un `<a>`. Si no, un
+ * `<span>` wrapper plano.
+ *
+ * `scoped: true` (light DOM, NO shadow): consistente con sui-button/sui-icon/
+ * sui-flag. La URL del asset se resuelve con `getAssetPath()` (Stencil copia
+ * `assets/store-badges/` al build via `assetsDirs`), misma filosofía que el
+ * `[src]` del Angular original.
+ */
+export declare class SuiAppStoreBadge {
+    el: HTMLElement;
+    /** Tienda / plataforma. Requerido. */
+    company: SuiAppStoreBadgeCompany;
+    /**
+     * Variante visual del badge. `preferred` = filled dark, `alternative` = stroke
+     * light. Se llama `appearance` para no colisionar con el atributo HTML nativo
+     * `style`. Default `preferred`.
+     */
+    appearance: SuiAppStoreBadgeAppearance;
+    /** URL de destino. Si está presente (y no disabled), el badge es un `<a>`. */
+    href: string | null;
+    /** Target del anchor (ej. `_blank`). */
+    target: string | null;
+    /** rel del anchor; solo se aplica cuando `target="_blank"`. Default `noopener`. */
+    rel: string | null;
+    /** Alto del badge en px. El width se computa por aspect ratio nativo. Default 40. */
+    height: number;
+    /** Deshabilitado: opacity 0.4, sin click, fuerza render `<span>`. Default `false`. */
+    disabled: boolean;
+    /** Aria-label override del alt automático (úsalo para CTAs reales). */
+    ariaLabel: string | null;
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline; sin esto `:active` "stickea" 300-500ms en pages
+     * standalone. `touchend.blur()` empuja la deselección inmediata.
+     */
+    onTouchStart(): void;
+    onTouchEnd(): void;
+    /** Path al SVG canon, resuelto contra el base path del componente. */
+    private get src();
+    /** Alt: override de ariaLabel, si no el mapa por company. */
+    private get alt();
+    /** Anchor solo cuando hay href Y no está disabled. */
+    private get isAnchor();
+    render(): any;
+}

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

@@ -0,0 +1,149 @@
+/**
+ * 9 sizes canon de SUI Design System 2.0 (Figma node 245:18786).
+ * Pixel mapping: xs=20, sm=24, md=32, lg=40, xl=48, 2xl=56, 3xl=64, 4xl=72, 5xl=80.
+ * Nota: `2xs=16` se removió en 2026-05 — NO existe en Figma (los sizes empiezan en 20).
+ */
+export type SuiAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+export type SuiAvatarColor = 'slate' | 'gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'sky' | 'pink' | 'teal';
+/**
+ * Config del avatar que exponen los componentes con <sui-avatar> interno
+ * (topbar-user, command-menu-item, content-card, notification…): un objeto en
+ * vez de N props sueltos. String shorthand = src directo. Igual al SUI Angular.
+ */
+export interface SuiAvatarConfig {
+    src?: string | null;
+    initials?: string;
+    color?: SuiAvatarColor;
+}
+/**
+ * BottomStatus types (Figma 245:18721): indicador bottom-right.
+ * Online/offline/away/busy renderizan como dot; `company` renderiza el
+ * `companyLogoSrc` como un mini-avatar pegado.
+ */
+export type SuiAvatarStatus = 'online' | 'offline' | 'away' | 'busy' | 'company';
+/**
+ * TopStatus types (Figma 245:18697): badge top-right con icono.
+ * Cada tipo tiene su color canon en SUI:
+ *   verified     → state/verified/base #47c2ff
+ *   pin          → state/feature/base  #7d52f4
+ *   favorite     → state/success/base  #1fc16b
+ *   add          → state/faded/base    #7b7b7b
+ *   remove       → state/error/base    #fb3748
+ *   notification → state/error/base    #fb3748 (rendered as plain dot, no glyph).
+ */
+export type SuiAvatarTopBadge = 'verified' | 'pin' | 'favorite' | 'add' | 'remove' | 'notification';
+/**
+ * `<sui-avatar>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-avatar/), 98% fidelidad
+ * vs Figma. Misma API pública (size/src/alt/initials/color/status/memojiSrc/
+ * illustrationSrc/icon/companyLogoSrc/topBadge/bgColor), mismo comportamiento
+ * (render cascade, image error recovery) y mismos VALORES exactos vía tokens
+ * (`--sui-*`, no hex). El accent del DS es NARANJA brand (#fa7319), NO el azul
+ * de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set `Avatar [1.1]` (245:18786).
+ * Sub-frames: Top Status [1.1] (245:18697), Bottom Status [1.1] (245:18721).
+ *
+ * EXACT (pulled from Figma 2026-05-29):
+ *  - 9 sizes: xs=20, sm=24, md=32, lg=40, xl=48, 2xl=56, 3xl=64, 4xl=72, 5xl=80.
+ *  - SolidBG fallback fill usa el ramp `*-200` (pastel sólido); el texto del
+ *    initial es SIEMPRE `static-black` #171717 (= --sui-text-strong-950).
+ *  - Initials typography ramp (font-size/line-height/tracking del estilo Figma):
+ *      xs/sm (20/24) → Label/X Small  12 / 16 / 0
+ *      md    (32)    → Label/Small    14 / 20 / -0.006em
+ *      lg    (40)    → Label/Medium   16 / 24 / -0.011em
+ *      xl/2xl(48/56) → Label/Large    18 / 24 / -0.015em
+ *      3xl-5xl(64+)  → Title/H5       24 / 32 / 0
+ *    font-family queda en Satoshi global (decisión del proyecto). Solo
+ *    font-size/line-height/letter-spacing se homologan a Figma.
+ *  - TopStatus per-type colors: verified=state/verified/base, pin=state/feature/base,
+ *    favorite=state/success/base, add=state/faded/base, remove/notification=state/error/base.
+ *  - BottomStatus per-type colors: online=state/success/base, offline=state/faded/base,
+ *    busy=state/error/base, away=state/away/base, company=purple/500.
+ *  - Status badge shadow (top + bottom): regular-shadow/small = 0 2px 4 #1B1C1D0A.
+ *
+ * Render priority (cascada): src → memojiSrc → illustrationSrc → initials →
+ * icon → placeholder silhouette. Si src falla (onerror), cae al siguiente.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los `:host([data-sui-*])` y el
+ * `<sui-icon>` proyectado heredan tokens del global sin pelear con shadow DOM.
+ * Misma estrategia que el Angular original.
+ */
+export declare class SuiAvatar {
+    el: HTMLElement;
+    /** Tamaño. Default `md` (32px). 9 sizes canon SUI. */
+    size: SuiAvatarSize;
+    /** URL de la imagen principal. Máxima prioridad en la cascada. */
+    src: string | null;
+    /** Texto alternativo de la imagen. */
+    alt: string;
+    /** Iniciales o nombre: 1 letra en xs/sm/md, 2 en lg+ ("Emma Wright" → "EW", "Emma" → "EM"), en mayúscula. */
+    initials: string;
+    /** Color del fallback solid-bg (ramp *-200). Default `slate` (neutro). */
+    color: SuiAvatarColor;
+    /** BottomStatus dot/company (online/offline/away/busy/company). Default null. */
+    status: SuiAvatarStatus | null;
+    /**
+     * Content-type Memoji (Figma 👨🏻 Memoji=On): src de un memoji/avatar 3D.
+     * Prioridad sobre `initials`/`icon` pero menor que `src`. Renderiza como
+     * <img> object-fit cover (igual que `src`).
+     */
+    memojiSrc: string | null;
+    /**
+     * Content-type Illustration (Figma 🖌️ Illustration=On): src de una
+     * ilustración custom. Misma cascada que `memojiSrc`.
+     */
+    illustrationSrc: string | null;
+    /**
+     * Content-type Icon (Figma 💠 Icon=On): RemixIcon que reemplaza el placeholder
+     * silhouette por un glifo custom dentro del círculo. Solo en fallback cuando
+     * NO hay src/memoji/illustration/initials. Si vacío, cae al silhouette.
+     */
+    icon: string | null;
+    /** BottomStatus `company`: src del logo de la empresa (mini-avatar adjacente). */
+    companyLogoSrc: string | null;
+    /**
+     * TopStatus badge (top-right corner). 6 tipos canon SUI. Cada tipo tiene
+     * un color por defecto (ver TOP_BADGE_GLYPH). Figma 245:18697.
+     */
+    topBadge: SuiAvatarTopBadge | null;
+    /**
+     * Override puntual del background-color del fallback (casos donde la entidad
+     * trae su propio color, ej. customers/employees con `color` en firestore). Si
+     * se pasa, `color` se ignora. Acepta cualquier string CSS válido (hex, rgb,
+     * var(--token)). Solo aplica en fallback.
+     */
+    bgColor: string | null;
+    /** True cuando la imagen falla y debe mostrarse el fallback (initials/icon). */
+    imageFailed: boolean;
+    /**
+     * Reset del flag de error cuando cambia cualquier fuente de imagen: un src
+     * nuevo merece un intento fresco de carga. Sin esto, una vez que `imageFailed`
+     * queda true el <img> nunca se vuelve a montar y `onImageLoad` jamás puede
+     * dispararse (el fallback quedaría pegado para siempre).
+     */
+    resetImageFailed(): void;
+    /**
+     * Iniciales resueltas — el conteo depende del size (canon Figma):
+     *   - xs/sm/md (20/24/32px) → UNA letra
+     *   - lg+      (40px+)      → DOS letras
+     * Nombre con espacio ("Emma Wright") → inicial de cada palabra ("EW"); una sola
+     * palabra ("Emma") → sus 2 primeros chars ("EM"); en sizes de 1 letra, la primera.
+     */
+    private get resolvedInitials();
+    /**
+     * Src de imagen resuelto en cascada: src → memojiSrc → illustrationSrc.
+     * El primero no-vacío gana. Todos se renderizan como <img> cover.
+     */
+    private get resolvedImageSrc();
+    /** Fallback cuando: no hay imagen resuelta, o cargó con error. */
+    private get showFallback();
+    /** Silueta placeholder (último nivel de la cascada): sin imagen, sin iniciales y sin icon. */
+    private get showPlaceholder();
+    private onImageError;
+    private onImageLoad;
+    private renderTopBadge;
+    render(): any;
+}

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

@@ -0,0 +1,71 @@
+import type { SuiAvatarSize } from '../sui-avatar/sui-avatar';
+import type { SuiAvatarGroupItem } from './sui-avatar-group.data';
+/**
+ * `<sui-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-avatar-group/). Misma API
+ * pública (size/items/max), mismo comportamiento (slice por max + "+N" pill) 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
+ * grupo solo agrega el stack horizontal, el border blanco entre chips, el
+ * overlap negativo per-size y la pill de overflow.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — frame 581:6198 ("Avatar Group [1.1]"),
+ * 9 sizes (20/24/32/40/48/56/64/72/80).
+ *
+ * EXACT (pulled from Figma 581:6198):
+ *  - Overlap (margin-right negativo entre avatares):
+ *      xs/sm (20/24) → -4px · md (32) → -6px · lg/xl (40/48) → -12px ·
+ *      2xl–5xl (56+) → -16px.
+ *  - Border: 2px solid var(--sui-bg-white-0) en cada avatar y en la pill.
+ *  - "+N" pill: bg=var(--sui-bg-weak-50) #f7f7f7, color=var(--sui-text-sub-600)
+ *    #5c5c5c, fully rounded, mismo diámetro que el avatar.
+ *  - Typography del "+N" pill (per-size, verificada node-by-node 2026-05-29).
+ *    NO es la misma rampa que el initial de sui-avatar — diverge en xs/xl/2xl:
+ *      xs (20) → Subheading/2X Small 11/12/0.02em UPPERCASE
+ *      sm (24) → Label/X Small       12/16/0
+ *      md (32) → Label/Small         14/20/-0.006em
+ *      lg (40) → Label/Medium        16/24/-0.011em
+ *      xl (48) → Title/H6            20/28/0
+ *      2xl–5xl → Title/H5            24/32/0
+ *    Detalle de cada estilo + node-ids fuente en el .scss.
+ *
+ * PENDING VERIFY (inferred — NOT pulled from Figma):
+ *  - Font-family: el DS usa Satoshi global, el canon Figma usa Inter / Inter
+ *    Display. Por decisión explícita del user NO se cambia la family — sí se
+ *    respetan size / line-height / letter-spacing / uppercase.
+ *  - `max` default = 4 (convención del DS, no extraído de Figma).
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * y los `<sui-avatar>` proyectados heredan tokens del global sin pelear con
+ * shadow DOM. Misma estrategia que el avatar y el botón ya portados.
+ *
+ * Uso:
+ *   <sui-avatar-group
+ *     size="md"
+ *     .items=${[{ src: '...' }, { initials: 'JD', color: 'blue' }, ...]}
+ *     max="4"
+ *   ></sui-avatar-group>
+ */
+export declare class SuiAvatarGroup {
+    /** Tamaño de todos los avatares del grupo. Default `md` (32px). 9 sizes canon. */
+    size: SuiAvatarSize;
+    /**
+     * Items del grupo (array de objetos `{ 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 SuiAvatarGroupItem[];
+    /** Máximo de avatares visibles antes de colapsar el resto en la "+N" pill. Default 4. */
+    max: number;
+    /** Items efectivamente visibles (slice por `max`). */
+    private get visibleItems();
+    /** Cantidad de items colapsados en la pill (0 = sin pill). */
+    private get overflow();
+    /** Label de la pill de overflow: `+N`. */
+    private get overflowLabel();
+    render(): any;
+}

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

@@ -0,0 +1,20 @@
+import type { SuiAvatarColor } from '../sui-avatar/sui-avatar';
+/**
+ * Item de un `<sui-avatar-group>`. Cada item se renderiza como un `<sui-avatar>`
+ * en cascada (src → initials), con border blanco 2px y overlap negativo.
+ *
+ * NOTA STENCIL: este tipo vive en el archivo hermano `.data.ts` (no en el .tsx)
+ * porque `export interface`/`export type` desde el .tsx que ALSO exporta la
+ * clase del componente está OK, pero centralizar el tipo de data acá mantiene
+ * el .tsx limpio y evita reglas `export const/function/enum` prohibidas.
+ */
+export interface SuiAvatarGroupItem {
+    /** 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;
+}

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

@@ -0,0 +1,77 @@
+export type SuiBadgeColor = 'gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'sky' | 'pink' | 'teal';
+export type SuiBadgeVariant = 'filled' | 'light' | 'lighter' | 'stroke' | 'dark';
+export type SuiBadgeSize = 'small' | 'medium' | 'large' | 'xlarge';
+export type SuiBadgeType = 'basic' | 'with-dot' | 'left-icon' | 'right-icon' | 'number';
+/**
+ * Config de badge embebido en otros componentes (checkbox-label, switch-label,
+ * cards…): un solo input `badge` que acepta `SuiBadgeConfig | string`
+ * (string = solo label). Igual que en el SUI Angular.
+ */
+export interface SuiBadgeConfig {
+    label: string;
+    color?: SuiBadgeColor;
+    variant?: SuiBadgeVariant;
+    size?: SuiBadgeSize;
+}
+/**
+ * `<sui-badge>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-badge/). Misma API
+ * pública (color/variant/size/type/disabled), mismo comportamiento (el dot
+ * built-in solo se renderiza con `type=with-dot`) y los MISMOS VALORES exactos
+ * vía tokens del DS (no hex sueltos).
+ *
+ * El accent del DS es NARANJA brand (#fa7319). En el mapa de colores
+ * `orange → warning`, y `--sui-state-warning-base` ES #fa7319 — así el badge
+ * `color="orange"` cae al naranja brand, NO al azul de Figma (#335cff =
+ * `state-information`, que es el color de `blue`).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set `Badge` (node 118:2324).
+ * Variantes verificadas (8): 118:2584, 118:2587, 118:2590, 118:2616, 118:2322,
+ * 289:7551, 118:2686, 119:2361.
+ *
+ * EXACT specs:
+ *  - Small (16px): font Subheading/2X Small 11/12/0.22 UPPERCASE, ss11.
+ *  - Medium (20px): font Label/X Small 12/16/0 NO uppercase, ss11.
+ *  - Radius: full (999).
+ *  - Per-type padding Small: Basic=px8 / LeftIcon=pl4 pr8 / RightIcon=pl8 pr4 /
+ *    WithDot=pr8 ONLY / Number=p2 (near-square).
+ *  - WithDot: dot box 16×16 con círculo 4px (r=2, asset 118:2632) centrado vía
+ *    radial-gradient — el aire dot↔label sale del propio box (NO gap manual).
+ *    Distinto del status-badge (6px). En medium el box SIGUE 16×16 (119:2369).
+ *  - Style colors: Filled=bg-base+text-white, Light=bg-light+text-dark,
+ *    Lighter=bg-lighter+text-BASE (NOT dark!), Stroke=border1-base+text-base.
+ *
+ * CUSTOM (no en Figma — add-on del proyecto, preservado del Angular):
+ *  - `variant='dark'` — glass translúcido vibrante para superficies oscuras.
+ *    El color tiñe bg (22% alpha) y borde (45% alpha) del state-base, texto
+ *    blanco. Sin `color`, cae al fallback white-glass neutral.
+ *  - `disabled` — override de bg/border/text a tokens disabled (NO opacity,
+ *    que produciría tintes desaturados en vez de gris uniforme).
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * y el styling de contenido proyectado (slots start/end) translan limpio, y el
+ * consumer puede meter `<sui-icon>` en los slots. Misma estrategia que el
+ * Angular original.
+ *
+ * Slots:
+ *  - `start` → ícono/dot leading (`<sui-icon slot="start" ...>`), para type=left-icon
+ *  - default → label
+ *  - `end`   → ícono trailing (`<sui-icon slot="end" ...>`), para type=right-icon
+ */
+export declare class SuiBadge {
+    /** Color semántico. Default `gray`. `orange` = naranja brand (#fa7319). */
+    color: SuiBadgeColor;
+    /** Estilo visual. Default `lighter`. `dark` es el add-on glass del proyecto. */
+    variant: SuiBadgeVariant;
+    /** Tamaño. Default `small` (16px). `medium` 20 · `large` 24 · `xlarge` 28 (mobile). */
+    size: SuiBadgeSize;
+    /** Tipo de contenido. Default `basic`. `with-dot` renderiza el dot built-in. */
+    type: SuiBadgeType;
+    /** Deshabilitado: tokens grises uniformes, bloquea pointer-events. Default `false`. */
+    disabled: boolean;
+    /** Internal: true cuando el badge renderiza su dot built-in (type=with-dot). */
+    private get showsDot();
+    render(): any;
+}

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

@@ -0,0 +1,92 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiBannerStyle, SuiBannerVariant } from './sui-banner.data';
+/**
+ * `<sui-banner>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-banner/). Misma API
+ * pública, TODAS las variantes (5 status × 4 styles = 20), mismo comportamiento
+ * (dismiss + slots icon/action, separador middle-dot) 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.
+ *
+ * Diferencia vs Alert / Toast / Notification: el Banner es full-width altura
+ * fija 44px, pensado para vivir en el top del layout (offline / demo mode /
+ * "actualización disponible"). No tiene `size` axis — siempre la misma altura.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — frame 224:2249 ("Banner [1.1]"), 20 variants.
+ * Nodes pulled for verification:
+ *   225:208  Error/Stroke · 224:2399 Error/Light · 224:2616 Error/Lighter
+ *   224:2246 Error/Filled · 224:2310 Success/Filled · 224:2369 Feature/Filled
+ *
+ * EXACT specs:
+ *   Container: py=12 px=48, height=44px (fijo), gap 12, items+justify center, overflow clip
+ *   Text block (inner flex row gap 8): title Label/Small Medium (14/500/20/-0.6%)
+ *     ∙ separator (mismo color que título) · description Paragraph/Small Regular (14/400/20)
+ *   Icon: 20×20 leading · Close: sui-compact-button modifiable (24, área táctil 40 / 44 en teléfono), absolute right=12, opacity 0.48 (0.72 en Filled)
+ *
+ * Style × variant color matrix (idéntica al Angular):
+ *   stroke  → bg white-0, border-bottom soft-200, text strong-950, icon = state/{v}/base
+ *   light   → bg state/{v}/light,   text strong-950, icon state/{v}/base
+ *   lighter → bg state/{v}/lighter, text strong-950, icon state/{v}/base
+ *   filled  → bg state/{v}/base, text + icon static-white, close opacity 0.72
+ * Donde {v} = info|success|warning|error|faded. NOTA: la variante `feature` usa
+ * los tokens `--sui-state-faded-*` (gray, base #7b7b7b), NO `--sui-state-feature-*`
+ * (purple) que sí usa sui-alert. Decisión deliberada del Banner — "🚀 What's new"
+ * con color "faded" más soft.
+ *
+ * Icon map (Remix): info→information-fill, success→checkbox-circle-fill,
+ *   warning→alert-fill, error→error-warning-fill, feature→magic-fill.
+ *   (success: Figma usa `select-box-circle-fill` que no existe en RemixIcon;
+ *    `checkbox-circle-fill` es el mismo glyph. feature→magic-fill match exacto.)
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * y los `<sui-icon>` internos heredan el font/tokens del global sin pelear con
+ * shadow DOM. Misma estrategia que el Angular original.
+ *
+ * GOTCHA Stencil: el @Prop `title` del Angular es un nombre reservado del DOM
+ * (renderiza tooltip nativo gris) → renombrado a `heading`. Además se stripea el
+ * atributo nativo `title` del Host (removeAttribute en componentWillLoad), patrón canon Ontop. El
+ * heading se expone via `aria-label` para accesibilidad.
+ *
+ * Slots:
+ *  - `icon`   → reemplaza el icono default por contenido custom (logo, emoji,
+ *               avatar). Si está vacío, cae al icono por variante (`:empty`).
+ *  - `action` → link-button / CTA proyectado (HTML libre). Se oculta si vacío.
+ */
+export declare class SuiBanner {
+    el: HTMLElement;
+    componentWillLoad(): void;
+    /** Variante semántica. Default `info`. */
+    variant: SuiBannerVariant;
+    /**
+     * Estilo visual. Default `stroke`.
+     * NOTA: el @Prop público se llama `variantStyle` (igual al Angular). En HTML
+     * el atributo es `variant-style`. Se refleja al host como `data-sui-style`.
+     */
+    variantStyle: SuiBannerStyle;
+    /**
+     * Título / línea principal del banner.
+     * Renombrado desde el `title` del Angular: `title` es un @Prop reservado del
+     * DOM (dispara el tooltip nativo gris). En HTML el atributo es `heading`. Se
+     * expone via `aria-label` del host para accesibilidad.
+     */
+    heading: string | null;
+    /** Descripción (texto secundario tras el separador ∙). */
+    description: string | null;
+    /** Muestra el ícono leading (color del variant). Default `true`. */
+    showIcon: boolean;
+    /** Muestra el botón X de cierre. Default `false`. */
+    dismissible: boolean;
+    /** Texto accesible de la X. Default «Cerrar» (en Angular sale de provideSuiTextos). */
+    closeLabel: string;
+    /** Estado interno de cierre (equivale al `signal dismissed` del Angular). */
+    dismissed: boolean;
+    /** Se emite al presionar la X. */
+    closed: EventEmitter<void>;
+    /** Icon map por variante (Remix). */
+    private get iconName();
+    private onDismiss;
+    render(): any;
+}

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

@@ -0,0 +1,15 @@
+/**
+ * Tipos compartidos del `<sui-banner>`. Viven en este archivo hermano (no en el
+ * `.tsx`) por la regla del proyecto Stencil: en el `.tsx` solo se permite
+ * `export class` / `export type` / `export interface`. Cualquier
+ * `export const`/`export function`/`export enum` rompe el build de TODO el
+ * proyecto, así que los catálogos / interfaces data-driven se aíslan acá.
+ *
+ * Port 1:1 del Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-banner/). Misma API
+ * pública, mismas variantes/estilos y mismos valores (tokens del DS).
+ */
+/** Variante semántica del banner. */
+export type SuiBannerVariant = 'info' | 'success' | 'warning' | 'error' | 'feature';
+/** Estilo visual del banner (relleno / claro / borde). */
+export type SuiBannerStyle = 'filled' | 'light' | 'lighter' | 'stroke';

package/dist/types/components/sui-brand-logo/sui-brand-logo.d.ts

@@ -0,0 +1,85 @@
+import { SUI_BRAND_LOGO_COMPANIES } from './sui-brand-logo.data';
+export type SuiBrandLogoCompany = (typeof SUI_BRAND_LOGO_COMPANIES)[number];
+export type SuiBrandLogoStyle = 'original' | 'black' | 'white';
+export type SuiBrandLogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * `<sui-brand-logo>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-brand-logo/). Misma API
+ * pública (company/variant/size/href/target/rel/disabled/ariaLabel), mismo
+ * comportamiento (polimórfico <a>/<span>, disabled grayscale, iOS :active fix,
+ * focus ring NARANJA brand) y mismos VALORES exactos (tokens del DS, no hex).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Frame: 177:3255 ("Major Brand Logos [1.1]") — 84 variants total
+ *   28 companies × 3 styles (Original = full color / Black = monocromo dark /
+ *   White = monocromo light). Native viewBox 32×32, aspect 1:1.
+ *
+ * Sizes (project convention — matchea sui-flag/sui-emoji):
+ *   xs 16 · sm 20 · md 24 (default) · lg 32 (Figma native) · xl 40 · 2xl 48 (lo pide sui-content-label large).
+ *
+ * Style selection:
+ *   - original: sobre fondos claros, con espacio para color full.
+ *   - black:    sobre fondos claros donde el color full distrae (footer denso).
+ *   - white:    sobre fondos oscuros (dark mode, banners filled).
+ *
+ * Brand compliance: cada marca tiene su propio guideline de logo. Estos SVG son
+ * los exports oficiales del Figma file — NO inline el SVG y tweakees paths. Si el
+ * consumer necesita un color custom, usar sui-icon con un Remix Icon equivalente.
+ *
+ * Polimórfico: si recibe `href`, renderiza <a>. Sin href, renderiza <span>.
+ *
+ * El accent del DS es NARANJA brand (#fa7319 = --sui-primary-base), NO el azul de
+ * Figma. El focus ring usa --sui-primary-alpha-10 (naranja translúcido).
+ *
+ * `scoped: true` (light DOM, NO shadow): consistente con sui-flag/sui-icon. La
+ * URL del asset se resuelve con `getAssetPath()` (Stencil copia `assets/` al
+ * build via `assetsDirs`), misma filosofía que el `[src]` del Angular original.
+ *
+ * Usage:
+ *   <sui-brand-logo company="google"></sui-brand-logo>
+ *   <sui-brand-logo company="apple" variant="black" size="lg"></sui-brand-logo>
+ *   <sui-brand-logo
+ *     company="github" variant="white" size="md"
+ *     href="https://github.com/master-pedidos" target="_blank"
+ *     aria-label="Síguenos en GitHub"></sui-brand-logo>
+ */
+export declare class SuiBrandLogo {
+    el: HTMLElement;
+    /** Marca a renderizar (ver SUI_BRAND_LOGO_COMPANIES). Requerido. */
+    company: SuiBrandLogoCompany;
+    /** Estilo del logo. Default `original` (full color). */
+    variant: SuiBrandLogoStyle;
+    /** Tamaño. Default `md` (24px). */
+    size: SuiBrandLogoSize;
+    /** Si se provee, renderiza un <a> clickeable en vez de un <span>. Default `null`. */
+    href: string | null;
+    /** Atributo target del <a> (ej. `_blank`). Solo aplica con `href`. Default `null`. */
+    target: string | null;
+    /** Atributo rel del <a>. Default `noopener noreferrer` (seguro para target=_blank). */
+    rel: string | null;
+    /** Deshabilitado: grayscale + opacidad, sin click. No es focusable como link. Default `false`. */
+    disabled: boolean;
+    /**
+     * Aria-label. Override del default derivado del nombre de marca
+     * (ej. "Google logo"). Aplica al elemento interno (<a> o <span>).
+     */
+    ariaLabel: string | null;
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` fuerza al
+     * browser a engage el touch event pipeline, lo cual hace que `:active`
+     * dispare y se libere correctamente. Sin esto, `:active` "stickea" 300-500ms
+     * en pages standalone. Solo relevante cuando el logo es un link.
+     */
+    onTouchStart(): void;
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd(): void;
+    /** URL absoluta al SVG, resuelta contra el base path del componente. */
+    private get src();
+    /** Alt/label auto-derivado del nombre de marca. Override via `ariaLabel`. */
+    private get alt();
+    /** Renderiza <a> solo si hay href y no está disabled. */
+    private get isAnchor();
+    render(): any;
+}

package/dist/types/components/sui-brand-logo/sui-brand-logo.data.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Catálogo canon de marcas disponibles en el DS — Figma 177:3255
+ * "Major Brand Logos [1.1]". 28 brands, cada una en 3 styles
+ * (original / black / white). 84 SVGs total.
+ *
+ * Movido a archivo hermano para respetar la regla de Stencil:
+ * el .tsx del componente solo puede tener UN export de runtime (`export class`).
+ * Cualquier `export const/function/enum` rompe el build de Stencil.
+ *
+ * Assets en `assets/brand-logos/{company}-{style}.svg`.
+ *
+ * NO editar el array a mano — si se agrega/quita un SVG, regenerar con:
+ *   for f in assets/brand-logos/*-original.svg; do basename "$f" -original.svg; done
+ */
+export declare const SUI_BRAND_LOGO_COMPANIES: readonly ["adobe", "amazon", "apple", "bitcoin", "discord", "dropbox", "facebook", "figma", "framer", "github", "google", "instagram", "linkedin", "microsoft", "netflix", "notion", "paypal", "pinterest", "slack", "spotify", "stripe", "telegram", "twitch", "webflow", "whatsapp", "wise", "x-twitter", "youtube"];