@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,147 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiSliderType = 'single' | 'range';
+/** `medium` (Figma: manija 16, riel 6) · `large` (mobile, extensión SUI 03-10-2026: manija 24, riel 8, label 14/20). */
+export type SuiSliderSize = 'medium' | 'large';
+/**
+ * `<sui-slider>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-slider/). Misma API
+ * pública (type/min/max/step/value/minValue/maxValue/label/sublabel/amount/
+ * tooltip/tooltipAlways/disabled), mismo comportamiento (drag de pointer
+ * unificado mouse+touch, teclado a11y, collision avoidance del range, snap
+ * al step, zero-state del inner dot, tooltip hover/drag/always) y mismos
+ * VALORES exactos (tokens del DS, no hex). El accent del DS es NARANJA brand
+ * (#fa7319 = --sui-primary-base), NO el azul de Figma (#335cff).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ *   - 2617:1169  Slider [1.1]        (single, Percentage 0/25/50/75/100)
+ *   - 2617:1588  Range Slider [1.1]  (dual-handle, leftRange × rightRange)
+ *
+ * Componente NUEVO en el DS. Replica con CSS puro lo que en Figma son assets:
+ * thumb (16px círculo blanco + inner dot 6px), drop-shadow exacta, y el tail
+ * del tooltip (clip-path triangle en vez de SVG asset).
+ *
+ * Geometría exacta (Figma):
+ *   - Track (BG):    6px alto, radius-full, bg-soft-200
+ *   - Progress line: 6px alto, radius-full, primary-base (naranja brand)
+ *   - Thumb / dot:   16×16 círculo blanco, drop-shadow Figma
+ *   - Inner dot:     6×6 círculo; primary cuando hay progreso, bg-soft-200 zero
+ *   - Tooltip:       bg-strong-950, white 12px/16px, padding 2px 6px, radius-4,
+ *                    tail 8×4 hacia abajo, top -28px; hover/drag/always
+ *   - Label row:     12px; label text-sub-600, sublabel text-soft-400,
+ *                    amount derecha text-sub-600, gap 2px
+ *
+ * Props (mapeo Figma → Stencil):
+ *   percentage  → value          (single, 0–100 continuo + step)
+ *   leftRange   → minValue       (range, handle izquierdo)
+ *   rightRange  → maxValue       (range, handle derecho)
+ *   label       → label  (string|'') — vacío oculta toda la fila
+ *   sublabel    → sublabel (string|'') — vacío oculta el subtexto
+ *   tooltip     → tooltip (bool) — muestra tooltip flotante en hover/drag
+ *   editAmount  → amount (string|null) — texto a la derecha del label
+ *
+ * Eventos: `valueChange` / `minValueChange` / `maxValueChange`, mismos nombres que
+ * el Angular (homologado 05-11-2026).
+ *
+ * Homologado 05-11-2026: `size` (medium/large), a11y (`unit` → aria-valuetext,
+ * `ariaLabel`, label visible enlazado con aria-labelledby, nombre por manija en
+ * range «X, mínimo/máximo»), thumb static-white en dark, touch pasivo.
+ * Omitido (Angular-only): ControlValueAccessor y textos por DI (`provideSuiTextos`).
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-sui-*])`
+ * y el track/thumb/tooltip translan limpio. Misma estrategia que el Angular
+ * original y que `<sui-button>`.
+ */
+export declare class SuiSlider {
+    el: HTMLElement;
+    /** `single` (un thumb) o `range` (dos thumbs). Default `single`. */
+    type: SuiSliderType;
+    /** `medium` (default, Figma) o `large` (mobile, extensión SUI). */
+    size: SuiSliderSize;
+    /** Borde inferior de la escala numérica. Default `0`. */
+    min: number;
+    /** Borde superior de la escala numérica. Default `100`. */
+    max: number;
+    /** Salto discreto del valor (snap). Default `1`. */
+    step: number;
+    /** Label row (Figma `label` bool). Vacío => fila oculta. */
+    label: string;
+    /** Sublabel opcional (Figma `sublabel` bool). Solo aparece junto a label. */
+    sublabel: string;
+    /**
+     * Texto a la derecha del label (Figma `editAmount`). `null` => cae al valor
+     * numérico actual (value en single; "min–max" en range).
+     */
+    amount: string | null;
+    /** Unidad para el lector de pantalla (`aria-valuetext`: «12 km»). En single, si se pasa `amount` manda ese texto. */
+    unit: string | null;
+    /** Nombre accesible cuando no hay `label` visible (o para reemplazarlo). */
+    ariaLabel: string | null;
+    /** Muestra tooltip flotante sobre el thumb activo (hover/drag). Default `false`. */
+    tooltip: boolean;
+    /** Fuerza el tooltip siempre visible (no solo hover/drag). Default `false`. */
+    tooltipAlways: boolean;
+    /** Deshabilitado: bloquea drag/teclado, tokens grises. Default `false`. */
+    disabled: boolean;
+    /** Valor en modo single (0–100 por default). Default `0`. */
+    value: number;
+    /** Emite el nuevo valor en modo single (mismo nombre que el output del Angular). */
+    valueChange: EventEmitter<number>;
+    /** Handle izquierdo en modo range. Default `0`. */
+    minValue: number;
+    /** Emite el nuevo valor del handle izquierdo. */
+    minValueChange: EventEmitter<number>;
+    /** Handle derecho en modo range. Default `0`. */
+    maxValue: number;
+    /** Emite el nuevo valor del handle derecho. */
+    maxValueChange: EventEmitter<number>;
+    /** Handle siendo arrastrado: null | 'single' | 'min' | 'max'. */
+    dragging: null | 'single' | 'min' | 'max';
+    /** Handle bajo hover (para tooltip): mismo dominio que dragging. */
+    hovering: null | 'single' | 'min' | 'max';
+    private clamp;
+    private get effectiveValue();
+    private get effectiveMin();
+    private get effectiveMax();
+    private pct;
+    private get valuePct();
+    private get minPct();
+    private get maxPct();
+    /** Inner dot coloreado cuando hay progreso; gris en zero-state. */
+    private get singleHasProgress();
+    private get rangeMinColored();
+    private get rangeMaxColored();
+    /** Texto del label de la derecha. */
+    private get amountText();
+    /** El label visible nombra a la manija. */
+    private readonly labelId;
+    /** «12 km»: el valor con su unidad, o null si no hay unidad. */
+    valueText(v: number): string | null;
+    /** Single: el texto de `amount` (lo que se ve) o el valor con la unidad. */
+    get singleValueText(): string | null;
+    /** Range: cada manija dice cuál es («Precio, mínimo» / «Precio, máximo»). */
+    thumbLabel(cual: 'min' | 'max'): string;
+    connectedCallback(): void;
+    /** iOS: listeners PASIVOS (igual que `SuiToque` del Angular) — engage del :active sin frenar el scroll. */
+    onTouchStart(): void;
+    onTouchEnd(e: TouchEvent): void;
+    private showTooltipFor;
+    private get showSingleTooltip();
+    private get showMinTooltip();
+    private get showMaxTooltip();
+    private snap;
+    private emitSingle;
+    private emitMin;
+    private emitMax;
+    private trackEl;
+    private valueFromClientX;
+    private onTrackPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private onThumbKeydown;
+    private onThumbEnter;
+    private onThumbLeave;
+    private renderTooltip;
+    render(): any;
+}

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

@@ -0,0 +1,122 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiSocialButtonBrand = 'apple' | 'x-twitter' | 'google' | 'facebook' | 'linkedin' | 'github' | 'dropbox';
+export type SuiSocialButtonStyle = 'filled' | 'stroke';
+export type SuiSocialButtonType = 'button' | 'submit' | 'reset';
+/** `medium` (40, default) · `large` (48, piso táctil 44 en el teléfono; espeja el large de sui-button). */
+export type SuiSocialButtonSize = 'medium' | 'large';
+/**
+ * `<sui-social-button>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 (API + variantes + VALORES) desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-social-button/). Misma API
+ * pública (brand/variantStyle/onlyIcon/label/disabled/loading/href/target/rel/
+ * type/ariaLabel + evento `clicked`), mismas variantes (7 brands × 2 styles ×
+ * onlyIcon × estados) y mismos VALORES exactos (tokens del DS + brand colors
+ * pulled de Figma). El accent del DS es NARANJA brand (#fa7319 =
+ * --sui-primary-base), NO el azul de Figma — el halo focus/active usa
+ * --sui-primary-alpha-10.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Frame: 180:4264 ("Social Buttons [1.1]") — 84 variants
+ *   7 brands × 2 styles (filled / stroke) × 3 states (default/hover/focus) × 2 onlyIcon.
+ *
+ * EXACT specs (pulled de Figma, idénticos al Angular):
+ *  - Container (with-text): pl=10 pr=16 py=10 (asimétrico), gap=8, radius-10,
+ *    height 40 (Medium), items-center justify-center.
+ *  - Container (only-icon): padding 10 all-around (cuadrado 40×40).
+ *  - Size `large` (04-10-2026): 48 de alto, texto Label/Medium 16/24, logo 20.
+ *  - Typography: Inter Medium 14/20/-0.6%, font-feature 'ss11' 1 'calt' 0 'liga' 0.
+ *  - Filled: bg = brand color (BRAND_FILLED_BG), text static-white.
+ *      Hover  → overlay rgba(0,0,0,0.16) (node 181:4552 Google Hover).
+ *      Active → overlay rgba(0,0,0,0.24) (extraFeature, un step más oscuro).
+ *  - Stroke: bg-white-0, 1px stroke-soft-200, regular-shadow x-small, text-strong-950.
+ *      Hover → bg-weak-50, Active → bg-soft-200 (convención project).
+ *  - Focus/active halo: primary-alpha-10 (extraFeature canon, homologado con sui-button).
+ *  - Disabled (convención project, NO Figma): opacity 0.5 + pointer-events:none.
+ *  - Loading (extraFeature, NO Figma): el logo se reemplaza por un spinner
+ *    (sui-icon 'loader-4-line' con spin) y el botón queda disabled (no emite clicked).
+ *
+ * Divergencias del stack Stencil vs Angular (documentadas):
+ *  - Logo: `<sui-brand-logo>` (SVGs oficiales) igual que el Angular: `white` en
+ *    filled; `original` en stroke, salvo dark (`data-theme="dark"` en <html>) +
+ *    marca monocromática oscura (apple/x/github), donde va `white`.
+ *  - Textos: el Angular los toma de `provideSuiTextos` (i18n por DI). Acá el
+ *    default es «Continuar con {marca}» y se cambia con `label`.
+ *  - Custom element (no `<button>` nativo): el `clicked` se emite vía
+ *    EventEmitter; type=submit/reset busca el `<form>` padre y dispara
+ *    requestSubmit()/reset() (mismo patrón que sui-button del stack).
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-sui-*])` y
+ * el `<sui-icon>` proyectado translan limpio, igual que sui-button.
+ *
+ * Usage:
+ *   <sui-social-button brand="google"></sui-social-button>
+ *   <sui-social-button brand="apple" variant-style="stroke" only-icon></sui-social-button>
+ *   <sui-social-button brand="github" label="Continuar con GitHub para empresas"
+ *     href="https://oauth.example.com/github" target="_blank"></sui-social-button>
+ */
+export declare class SuiSocialButton {
+    el: HTMLElement;
+    /** Marca social. Requerido. */
+    brand: SuiSocialButtonBrand;
+    /** Estilo visual: `filled` (bg de marca) o `stroke` (bordeado blanco). Default `filled`. */
+    variantStyle: SuiSocialButtonStyle;
+    /** Botón solo-ícono: cuadrado 40×40, sin texto. Default `false`. */
+    onlyIcon: boolean;
+    /** `medium` (40, default) · `large` (48, piso táctil 44 en el teléfono). */
+    size: SuiSocialButtonSize;
+    /** Texto del botón. Si es null cae al copy por defecto de la marca («Continuar con {marca}»). */
+    label: string | null;
+    /** Deshabilitado: bloquea click, opacity 0.5, no emite clicked. Default `false`. */
+    disabled: boolean;
+    /**
+     * Loading: reemplaza el logo por un spinner y deshabilita el botón.
+     * ExtraFeature del proyecto (NO está en Figma). Default `false`.
+     */
+    loading: boolean;
+    /** Si está seteado (y no disabled/loading), renderiza `<a>` en vez de `<button>`. */
+    href: string | null;
+    /** Target del `<a>` (solo aplica con href). */
+    target: string | null;
+    /** Rel del `<a>` (solo aplica con href). Default `noopener noreferrer`. */
+    rel: string | null;
+    /** Comportamiento de form (cuando NO es anchor): submit/reset disparan el form padre. Default `button`. */
+    type: SuiSocialButtonType;
+    /** aria-label explícito. Si null y onlyIcon, cae al label resuelto. */
+    ariaLabel: string | null;
+    /**
+     * Se emite al hacer click cuando NO está disabled/loading. El inner element es
+     * un `<button>`/`<a>` nativo, así que Enter/Space disparan un click sintético
+     * que también pasa por acá (espeja el `output<MouseEvent>('clicked')` del Angular).
+     */
+    clicked: EventEmitter<MouseEvent>;
+    /** Disabled efectivo: el prop disabled O el estado loading. */
+    private get isDisabled();
+    /** Renderiza `<a>` solo si hay href y no está disabled/loading. */
+    private get isAnchor();
+    /** Dark mode leído del `data-theme` de <html> (mecanismo del DS): el logo es un asset por tema. */
+    isDark: boolean;
+    private themeObs?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** filled → `white`; stroke → `original`, salvo dark + marca monocromática oscura. */
+    get logoStyle(): 'white' | 'original';
+    /** Color de fondo brand-specific (solo aplica si style=filled). */
+    private get filledBg();
+    /** Label final: prop label > default por brand. */
+    private get resolvedLabel();
+    /** aria-label: explícito > (si only-icon) label resuelto > null. */
+    private get resolvedAriaLabel();
+    /**
+     * iOS WKWebView fix (listeners PASIVOS, igual que `SuiToque` del Angular): la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline para que `:active` dispare/se libere. Sin esto,
+     * `:active` "stickea" 300-500ms en pages standalone. (Mismo patrón que sui-button.)
+     */
+    onTouchStart(): void;
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd(): void;
+    private onClick;
+    /** El leading: spinner si loading, sino el logo de marca vía <sui-brand-logo>. */
+    private renderLeading;
+    render(): any;
+}

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

@@ -0,0 +1,102 @@
+export type SuiStatusBadgeStatus = 'completed' | 'pending' | 'failed' | 'information' | 'disabled';
+export type SuiStatusBadgeAppearance = 'stroke' | 'light';
+/** medium 24 (default, Figma) · large 28 · xlarge 32 — extensión SUI para mobile (03-10-2026). */
+export type SuiStatusBadgeSize = 'medium' | 'large' | 'xlarge';
+/**
+ * `<sui-status-badge>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-status-badge/). Misma API
+ * pública (status/appearance/withDot), mismas variantes/estados, mismo
+ * comportamiento (icono semántico fijo por status, switch dot↔icon, role=status)
+ * y mismos VALORES exactos (tokens del DS, no hex). El accent del DS es NARANJA
+ * brand (#fa7319) — `pending` mapea a `state-warning` que ya es naranja, NO el
+ * azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node 171:5100 (Status Badge 11).
+ *
+ * Separado del `sui-badge` regular. A diferencia del Badge:
+ *   - radius 6 (NO full)
+ *   - Figma trae solo medium (24, Label/X Small 12/16); `large` 28 y `xlarge` 32
+ *     son extensión SUI para mobile (icono 16/20, dot 8)
+ *   - solo 2 appearances: `stroke` + `light` (NO filled/lighter/dark)
+ *   - status enum cerrado (5 valores) — cada uno con su icono semántico fijo
+ *   - `withDot` reemplaza el icono por un dot 6×6 (diámetro 6px, r=3 — asset
+ *     Figma 171:5156) del color del status
+ *
+ * EXACT (pulled from Figma 171:5100):
+ *   - Container: padding `4px 8px 4px 4px` (4 top/bottom, 4 left, 8 right)
+ *   - Radius:    --sui-radius-6 (6px)
+ *   - Gap:       4px (con icono) · 2px (con dot)
+ *   - Typography Label/X Small: Inter Medium 12/16, letter-spacing 0
+ *   - Icono: container 16×16 — sui-icon interno size 12 (inset 12.5% del Figma)
+ *   - Dot:   container 16×16, círculo interno DIÁMETRO 6px (r=3)
+ *
+ * Color rules:
+ *   appearance STROKE (siempre):
+ *     - bg:     --sui-bg-white-0           (#ffffff)
+ *     - border: 1px solid --sui-stroke-soft-200 (#ebebeb)
+ *     - icon/dot color: --sui-state-{status}-base
+ *     - text:   --sui-text-sub-600         (gris neutro siempre)
+ *
+ *   appearance LIGHT:
+ *     - bg:     --sui-state-{status}-lighter
+ *     - border: ninguno
+ *     - icon/dot color: --sui-state-{status}-base
+ *     - text:
+ *         · status != 'disabled' → --sui-state-{status}-base (color)
+ *         · status === 'disabled' → --sui-text-sub-600 (gris)
+ *
+ * Mapeo status → state token + icono Remix:
+ *   - 'completed'   → state-success     + ri-checkbox-circle-fill
+ *   - 'pending'     → state-warning      + ri-alert-fill
+ *   - 'failed'      → state-error        + ri-error-warning-fill
+ *   - 'information' → state-information   + ri-information-fill
+ *   - 'disabled'    → state-faded        + ri-forbid-fill
+ *
+ * Homologado con el SUI Angular el 05-11-2026: `size` (medium/large/xlarge),
+ * `icon` (icono propio en lugar del del status) y alto fijo de 24/28/32.
+ *
+ * Behavior:
+ *   - El texto del badge se proyecta vía slot default. Si vacío, el componente
+ *     queda como pastilla compacta con solo el icono/dot.
+ *   - role="status" para accesibilidad.
+ *   - Display-only (el frame Figma no expone ejes de interacción). Sin :host
+ *     gating de pointer-events — es un status indicator, no un botón.
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-sui-*])` y
+ * el slot del label translan limpio, y el `<sui-icon>` interno hereda el
+ * `currentColor` del host sin pelear con shadow DOM. Misma estrategia que el
+ * Angular original (sin shadow) y que `sui-button`.
+ */
+export declare class SuiStatusBadge {
+    /** Status semántico. Default `completed`. Cada valor fija su icono Remix. */
+    status: SuiStatusBadgeStatus;
+    /**
+     * Variante visual del badge (`stroke` vs `light`). Se llama `appearance`
+     * para no colisionar con el atributo HTML nativo `style="..."`. Default
+     * `stroke`.
+     */
+    appearance: SuiStatusBadgeAppearance;
+    /**
+     * Si `true`, reemplaza el icono semántico por un dot 6×6 (diámetro 6px,
+     * radio 3px — confirmado en Figma 171:5156) del color del status. El gap
+     * baja a 2px. En appearance="stroke" el texto ya es gris neutro; en
+     * appearance="light" el texto mantiene state-base salvo status="disabled".
+     * Default `false`.
+     */
+    withDot: boolean;
+    /** Tamaño: medium 24 (default, Figma) · large 28 · xlarge 32 (mobile). */
+    size: SuiStatusBadgeSize;
+    /**
+     * Icono propio (nombre Remix SIN prefijo, igual que `sui-icon`) en lugar del
+     * que trae el status. El status sigue mandando el color. Vacío = el del status.
+     * No hace nada con `withDot`. El README desaconseja usarlo salvo esperas por hora.
+     */
+    icon: string;
+    /** Px del glyph del sui-icon interno por tamaño (12 / 16 / 20). */
+    get iconSize(): number;
+    /** El icono que se pinta: el propio si lo hay, si no el del status. Solo con withDot=false. */
+    get iconName(): string;
+    render(): any;
+}

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

@@ -0,0 +1,117 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiStepperItem, SuiStepperSize, SuiStepperVariant } from './sui-stepper.data';
+/**
+ * `<sui-stepper>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Process / step indicator. NO confundir con quantity stepper (+/-).
+ *
+ * Homologado con el SUI Angular (sui-design-system, lib/sui-stepper). Misma API
+ * pública, TODAS las variantes (dot / horizontal / vertical), sizes (small /
+ * xsmall de Figma — solo cambian el dot — y medium, extensión SUI para mobile:
+ * dot 10, indicador 24, label 16/24, card vertical de 44), states (default /
+ * active / completed / error), el mismo
+ * comportamiento (state auto-derivado, clamp de currentStep, error mode,
+ * length resuelto desde steps || count, interactive con stepClick) y los 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 / --sui-primary-base), NO el azul
+ * de Figma. Divergencia visual deliberada (consistente con todo el SUI).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO. Nodes verificados:
+ *   479:14398  Stepper Dot [1.1]              (small=8px, xsmall=4px)
+ *   3505:3498  Step Indicator Horizontal Item (circle 20px + label)
+ *   3507:28    Step Indicator Horizontal      (full con chevron separator)
+ *   3507:227   Step Indicator Vertical        (cards apilados + shadow active)
+ *
+ * Variantes:
+ *   - 'dot'        -> dots simples (carousel / multi-page indicator).
+ *   - 'horizontal' -> numbered + chevron separator (multi-step form header).
+ *   - 'vertical'   -> numbered + cards apilados (sidebar / wizard sidebar).
+ *
+ * Estados (auto-derivados desde currentStep):
+ *   - 'default'   -> index > currentStep
+ *   - 'active'    -> index === currentStep
+ *   - 'completed' -> index < currentStep
+ * Error mode (errorStep set): anteriores completed, ese error, posteriores default.
+ *
+ * Valores Figma verificados (nodes 3505:3498 / 3507:27 / 3507:227):
+ *   indicator 20x20 radius-full, numero caja 16px centrada, overflow:clip.
+ *   horizontal default border 1px stroke/soft-200 (impl box-shadow inset).
+ *   vertical default indicator bg-white-0 + regular-shadow/x-small SIN border.
+ *   active indicator bg primary-base + numero static-white.
+ *   completed icon checkbox-circle-fill (state/success-base) size 20.
+ *   error icon close-circle-fill (state/error-base) size 20.
+ *   numero Label/X-Small (12/500/16/0). label Paragraph/Small (14/400/20/-0.084px).
+ *   font-feature-settings ss11/calt/liga en todos los text nodes.
+ *   horizontal container gap 16, item gap 8, separator arrow-right-s-line icon/soft-400.
+ *   vertical container gap 8, item gap 10, padding 8, radius-10, card active bg-white-0.
+ *   vertical chevron solo en active, arrow-right-s-line icon/sub-600.
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-variant])`
+ * y los `<sui-icon>` internos heredan font/tokens del global sin pelear con
+ * shadow DOM. Misma estrategia que el resto del SUI Stencil.
+ *
+ * GOTCHAS Stencil:
+ *  - `count`, `steps`, `currentStep`, `errorStep`, `size`, `interactive`,
+ *    `variant`, `ariaLabel` NO son nombres reservados del DOM (a diferencia de
+ *    `title` / `prefix` / `role`) -> se conservan igual que el Angular.
+ *  - `steps` lleva objetos -> en HTML/lit pasarlo como PROPERTY (`.steps=${[...]}`).
+ *  - Botones internos (interactive) llevan onTouchStart/onTouchEnd para el fix
+ *    iOS `:active` stuck (los @Listen del host no aplican a botones internos).
+ */
+export declare class SuiStepper {
+    el: HTMLElement;
+    /** Variante visual. Default `horizontal`. */
+    variant: SuiStepperVariant;
+    /**
+     * Array de items con label (horizontal / vertical). Lleva objetos ->
+     * pasarlo como PROPERTY en lit/HTML (`.steps=${[...]}`).
+     */
+    steps: SuiStepperItem[];
+    /**
+     * Cantidad de dots (variant='dot' only). Si se pasan `steps`, tiene
+     * precedencia el length de `steps`.
+     */
+    count: number;
+    /**
+     * Step actual, 0-indexed. index < cur = completed, === cur = active,
+     * > cur = default. Se clampa al rango [0, length]; cur === length ⇒ todos
+     * los items quedan completed (flow finalizado).
+     */
+    currentStep: number;
+    /**
+     * Index 0-based del step que debe marcarse como 'error' (rojo). Si está set,
+     * los steps anteriores quedan completed, este queda error y los posteriores
+     * default. Útil para flows abortados (cancelled, failed).
+     */
+    errorStep: number | null;
+    /**
+     * Tamaño. `small` / `xsmall` (Figma) solo cambian el dot (8 / 4); `medium`
+     * (extensión SUI para mobile) agranda los tres variants: dot 10, indicador
+     * 24, número 14/20, label 16/24, card vertical de 44 de alto.
+     */
+    size: SuiStepperSize;
+    /**
+     * Si `true`, los steps son `<button>` y emiten `stepClick`. El host pasa de
+     * `role="list"` a `role="group"` (un botón no puede ser `listitem`).
+     */
+    interactive: boolean;
+    /** aria-label del host (role=list / group). Default 'Progreso'. */
+    ariaLabel: string;
+    /** Index del step clickeado (solo si `interactive=true`). */
+    stepClick: EventEmitter<number>;
+    /**
+     * Vista pre-computada de items. Resuelve length (steps.length || count),
+     * clampa currentStep al rango [0, length] y asigna state por índice.
+     * Equivale al `computed items()` del Angular.
+     */
+    private get items();
+    private onItemClick;
+    /** Indicador (h+v): check / X / número según state. El ícono ES el indicador: 24 en medium, 20 si no. */
+    private renderIndicator;
+    private renderDot;
+    private renderHorizontalItem;
+    private renderVerticalItem;
+    render(): any;
+}

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

@@ -0,0 +1,37 @@
+/**
+ * Tipos compartidos del `<sui-stepper>`. 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á.
+ *
+ * Homologado con el SUI Angular (sui-design-system, lib/sui-stepper). Misma API
+ * pública, mismas variantes / sizes / states y mismos valores (tokens del DS).
+ */
+/**
+ * Variante visual del stepper.
+ *  - 'dot'        -> dots simples (carousel / multi-page indicator).
+ *  - 'horizontal' -> numbered + chevron separator (multi-step form header).
+ *  - 'vertical'   -> numbered + cards apilados (sidebar / wizard sidebar).
+ */
+export type SuiStepperVariant = 'dot' | 'horizontal' | 'vertical';
+/**
+ * Tamaño del stepper. small / xsmall (Figma) solo cambian el dot (8 / 4);
+ * medium (extensión SUI para mobile) agranda los tres variants.
+ */
+export type SuiStepperSize = 'small' | 'xsmall' | 'medium';
+/** Estado de un step (auto-derivado desde currentStep / errorStep). */
+export type SuiStepperState = 'default' | 'active' | 'completed' | 'error';
+/** Item declarativo del stepper (horizontal / vertical). */
+export interface SuiStepperItem {
+    /** Etiqueta del step. Ignorada en variant='dot'. */
+    label?: string;
+}
+/** Vista pre-computada de un item (interno — driver del render y del SCSS). */
+export interface SuiStepperItemView {
+    index: number;
+    state: SuiStepperState;
+    label: string;
+    number: string;
+    isLast: boolean;
+}

package/dist/types/components/sui-store-card/sui-store-card.d.ts

@@ -0,0 +1,117 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiStoreCardData, SuiStoreCardSize, SuiStoreRatingClickDetail } from './sui-store-card.data';
+/**
+ * `<sui-store-card>` — SUI Design System (SUI Design System 2.0).
+ *
+ * COMPUESTO homologado con el SUI Angular (sui-design-system,
+ * lib/sui-store-card). Misma API (`store` + `isFavorite` + `disableLink` +
+ * `linkBase` + `size` + `deliveryText` / `distanceText`), TODOS los estados
+ * (cliente abierto/cerrado/suspendido + owner-preview draft/pending/rejected),
+ * mismo comportamiento (link gateado, fav toggle, nota que NO navega) y mismos
+ * tokens. El accent del DS es NARANJA brand (--sui-primary-base).
+ *
+ * Mapeo Angular → web component:
+ *  - `store` (input.required)   → `@Prop() store` (objeto, por property; o el
+ *    atributo `store-json` para HTML plano / Storybook).
+ *  - `toggleFavorite` / `ratingClicked` → eventos con el mismo nombre.
+ *  - `routerLink` → `<a href>` (`linkBase/:id`). El consumer con router propio
+ *    intercepta el click; `null` → no navega (suspendido / disableLink).
+ *  - `suiImgRetry` (reintentos de carga) no existe en Stencil: el `<img>` del
+ *    cover hace fade-in al cargar y, si falla, se oculta y queda el placeholder.
+ *
+ * La tarjeta DIBUJA, no decide: el costo de envío y la distancia los escribe
+ * quien la usa (`deliveryText` / `distanceText`); deducirlos acá fue un bug
+ * real (la tarjeta decía un precio y el checkout cobraba otro).
+ *
+ * Estados:
+ *  - suspendido: opacity .6, cursor not-allowed, link bloqueado, pill roja
+ *    "No disponible", click preventDefault.
+ *  - cerrado (no abierto, no suspendido, no preview): cover en grayscale.
+ *  - owner-preview: SIN grayscale, SIN fav, cursor default, pill custom
+ *    (Borrador / En revisión con dot pulse / Rechazado), meta reducida a
+ *    Ubicación + Envío.
+ *
+ * `scoped: true` (light DOM, NO shadow), como el resto del DS.
+ */
+export declare class SuiStoreCard {
+    el: HTMLElement;
+    /**
+     * Datos del local. Equivalente del `input.required<SuiStoreCardData>()` de
+     * Angular. Se setea por property binding (`el.store = {...}`). Para uso HTML
+     * plano / Storybook, usar el atributo `store-json` (string JSON) que este
+     * componente parsea como fallback.
+     */
+    store?: SuiStoreCardData;
+    /** Fallback string-JSON para setear `store` desde un atributo HTML. */
+    storeJson?: string;
+    /** Marca el local como favorito (corazón relleno). Default `false`. */
+    isFavorite: boolean;
+    /** Si true, NO se navega al detalle (el padre puede sobreescribir). Default `false`. */
+    disableLink: boolean;
+    /**
+     * Ruta base del detalle: la tarjeta enlaza a `linkBase/:id`. El default es la
+     * ruta del cliente de Master Pedidos; otra app pasa la suya.
+     */
+    linkBase: string;
+    /**
+     * Corazón de favorito: `small` 36 (default) · `medium` 40 · `large` 44 para
+     * el teléfono (además la nota se toca en 44 de alto).
+     */
+    size: SuiStoreCardSize;
+    /**
+     * Texto de Envío ya escrito por quien llama. Sin pasar (`undefined`) la
+     * tarjeta lo deduce de `deliveryType` / `deliveryFee`; un string se muestra
+     * tal cual; `null` (solo por property) quita la columna.
+     */
+    deliveryText?: string | null;
+    /**
+     * Texto de Distancia ya escrito por quien llama («menos de 500 m»). Mismos
+     * tres estados que `deliveryText`: sin pasar se deduce de `distanceKm`,
+     * string tal cual, `null` quita la columna.
+     */
+    distanceText?: string | null;
+    /** Emite cuando el usuario toca el corazón (preventDefault + stopPropagation ya aplicados). */
+    toggleFavorite: EventEmitter<globalThis.Event>;
+    /**
+     * Emite cuando el usuario toca la nota. El padre abre el modal de opiniones
+     * con `{ id, name, logoUrl }`.
+     */
+    ratingClicked: EventEmitter<SuiStoreRatingClickDetail>;
+    /** Resuelve `store` priorizando el objeto; cae al parse de `store-json`. */
+    private get data();
+    /** Path del detalle, o null cuando el link está bloqueado (suspendido / disableLink). */
+    private get link();
+    /** Inicial del nombre, fallback del logo. */
+    private get initial();
+    /**
+     * El puntaje con cuántas opiniones lo sostienen: «4.67 (12)». Hasta DOS
+     * decimales y sin cero de relleno («4.6», «5.0»), con punto (Perú). Sin
+     * opiniones dice «5.0 (0)»: el cero se tiene que ver, para que un 5 sin
+     * reseñas no pase por reputación ganada.
+     */
+    private get ratingLabel();
+    /** Distancia: la que pasaron, o la deducida de `distanceKm`. `null` = sin columna. */
+    private get distanceLabel();
+    /**
+     * Badge custom de owner-preview (Borrador/En revisión/Rechazado). Null en
+     * modo cliente normal.
+     */
+    private get previewBadge();
+    /** Envío: el que pasaron, o la etiqueta corta deducida (Gratis/Recojo/Courier/S/X). `null` = sin columna. */
+    private get deliveryLabel();
+    /** Tap del corazón: no navega, emite al padre. */
+    private onFavClick;
+    /** Click de la card: bloquea navegación si está suspendido. */
+    private onCardClick;
+    /** Tap de la calificación: no navega ni dispara el link de la card, emite al padre. */
+    private onRatingClick;
+    /** iOS WKWebView fix del stat clickeable (Calificación): blur al touchend. */
+    private onRatingTouchEnd;
+    /** Imagen rota (cover o logo): se oculta por CSS y queda el placeholder / el fondo. */
+    private onImgError;
+    /** Fade-in del cover al cargar. */
+    private onCoverLoad;
+    /** Stat de Ubicación: el distrito es el único dato de largo variable, por eso es el que cede. */
+    private renderUbicacion;
+    render(): any;
+}