@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,100 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/** Config de la imagen. `image` también acepta string (= solo la `url`, `position` 50). */
+export interface SuiProductCardImage {
+    url: string;
+    /** Foto grande a la que caer si `url` (normalmente una miniatura) no carga. */
+    fallbackUrl?: string;
+    /** Encuadre vertical (CSS object-position Y, 0–100). Default 50. */
+    position?: number;
+}
+/** Tamaño de los botones del pie: `small` 36 (default) · `medium` 40 · `large` 44. */
+export type SuiProductCardSize = 'small' | 'medium' | 'large';
+/** Config del fallback sin imagen. */
+export interface SuiProductCardFallback {
+    /** `'name'` = banda de color + nombre (default) · `'icon'` = ícono. */
+    variant?: 'name' | 'icon';
+    /** Color de la banda del variant `'name'` (CSS color o `var(--sui-...)`). */
+    color?: string | null;
+}
+/**
+ * `<sui-product-card>` — SUI Design System 2.0.
+ *
+ * Portado desde el `SuiProductCard` Angular (sui-design-system). Card de
+ * producto del catálogo del cliente. Presentacional: recibe los datos por props
+ * y emite eventos; el consumer cablea el carrito. El grid lo pone el consumer;
+ * la card llena su celda.
+ *
+ * - Sin imagen: fallback `'name'` (banda de color determinista por nombre, o
+ *   `fallback.color`) o `'icon'` (gradiente brand + ícono).
+ * - Con imagen: shimmer mientras carga; si la miniatura falla y hay
+ *   `fallbackUrl`, cae a la foto grande antes de rendirse.
+ * - `available=false` → atenuada + chapa «Agotado», sin «+».
+ * - `quantity > 0` → stepper en vez del «+». `closed` deshabilita agregar.
+ * - `action="edit"` → lápiz (grilla del dueño): siempre visible, nunca stepper.
+ * - `precioLista > price` → precio rebajado en rojo, chapa «-N%» y tachado.
+ *
+ * La card NO es un `<button>`: lo que la abre es `.product__hit`, un botón
+ * invisible estirado sobre toda la card (sin botón dentro de botón); los
+ * botones del pie van por encima.
+ *
+ * Eventos (outputs del Angular): `openDetail`, `add`, `increment`,
+ * `decrement`, `edit`. `image` y `fallback` aceptan objeto: por propiedad JS.
+ */
+export declare class SuiProductCard {
+    el: HTMLElement;
+    /** Nombre del producto (título + fuente del color del fallback). Requerido. */
+    name: string;
+    /** Descripción corta (1 línea, opcional). */
+    description: string;
+    /** Precio numérico; se formatea a 2 decimales. Requerido. */
+    price: number;
+    /** Imagen: URL (string) o `{ url, fallbackUrl?, position? }`. null → fallback. */
+    image: SuiProductCardImage | string | null;
+    /** false → card atenuada + chapa «Agotado», sin botón de agregar. */
+    available: boolean;
+    /** Cantidad en el carrito. > 0 → stepper en vez del «+». */
+    quantity: number;
+    /** Local cerrado → deshabilita agregar / incrementar. */
+    closed: boolean;
+    /** Prefijo de moneda. */
+    currencySymbol: string;
+    /** Fallback sin imagen — `{ variant?, color? }`. Sin color: determinista por nombre. */
+    fallback: SuiProductCardFallback | null;
+    /** Texto de la chapa cuando no está disponible. */
+    unavailableLabel: string;
+    /** `'add'` (default): «+» y stepper · `'edit'`: lápiz, visible siempre, nunca stepper. */
+    action: 'add' | 'edit';
+    /** Precio de referencia. Si es MAYOR que `price`: rebajado + «-N%» + tachado. */
+    precioLista: number | null;
+    /** Tamaño de los botones del pie: `small` 36 · `medium` 40 · `large` 44. */
+    size: SuiProductCardSize;
+    /** Tap en la card (abrir detalle). */
+    openDetail: EventEmitter<void>;
+    /** Tap en el «+» (agregar al carrito). */
+    add: EventEmitter<void>;
+    /** Tap en «+» del stepper. */
+    increment: EventEmitter<void>;
+    /** Tap en «−» / basurero del stepper. */
+    decrement: EventEmitter<void>;
+    /** Tap en el lápiz (solo con `action="edit"`). */
+    edit: EventEmitter<void>;
+    /** La foto está viajando: shimmer. Se apaga con load o con el error final. */
+    private cargandoImagen;
+    /** La miniatura no cargó: se pasó a la foto grande. */
+    private cayoAlOriginal;
+    /** Cada imagen nueva vuelve a «cargando» (card reciclada en una lista). */
+    onImageChange(): void;
+    /** iOS WKWebView: la presencia del touchstart (pasivo) engancha el `:active`. */
+    onTouchStart(): void;
+    /** touchend.blur() suelta el `:active` del botón tocado al instante en iOS. */
+    onTouchEnd(ev: TouchEvent): void;
+    private get imageCfg();
+    private get descuento();
+    /** Color del fallback `'name'`: `fallback.color` o determinista por nombre. */
+    private get fallbackColor();
+    private imagenLista;
+    private imagenFallo;
+    private stop;
+    private renderAction;
+    render(): any;
+}

package/dist/types/components/sui-product-card/sui-product-card.data.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Paleta sugerida para el fallback `'name'`: tokens semánticos del DS
+ * (`--sui-state-*-base`), los mismos que el badge `filled` usa con texto
+ * blanco. Se exporta para que el consumer implemente su propia estrategia
+ * (ej. random por visita) y la pase en `fallback.color`. El componente no hace
+ * random: es presentacional y puro.
+ */
+export declare const SUI_PRODUCT_FALLBACK_COLORS: readonly ["var(--sui-state-information-base)", "var(--sui-state-warning-base)", "var(--sui-state-error-base)", "var(--sui-state-success-base)", "var(--sui-state-feature-base)", "var(--sui-state-highlighted-base)"];

package/dist/types/components/sui-progress-bar/sui-progress-bar.d.ts

@@ -0,0 +1,79 @@
+export type SuiProgressBarColor = 'blue' | 'green' | 'orange' | 'red' | 'purple';
+/** `xlarge` (10 px) es extensión SUI: sigue el paso de 2 px de small → large. */
+export type SuiProgressBarSize = 'small' | 'medium' | 'large' | 'xlarge';
+/**
+ * `<sui-progress-bar>` — SUI Design System (SUI Design System 2.0) · Progress Bar (Line).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-progress-bar/). Misma API
+ * pública (value/color/size/ariaLabel), mismo comportamiento (clamp 0–100,
+ * NaN→0, role=progressbar con aria) y mismos VALORES exactos (tokens del DS,
+ * no hex). El accent del DS es NARANJA brand (#fa7319), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ *   - Frame "Progress Bar [1.1]"      node 450:17821 (eje Percentage 0–100 step 10)
+ *   - Frame "Progress Bar Line [1.1]" node 450:17810 (eje Color: Empty/Blue/Red/Orange/Green)
+ * VERIFIED via MCP (`get_metadata` + `get_design_context` + `get_variable_defs`).
+ *
+ * EXACT (pulled del Figma 2026-05-29, verificado):
+ *  - Container: w=320 (Figma fija; en uso real el host es `width:100%`),
+ *    h=6, bg=`bg/soft-200` (#ebebeb), radius=`radius-full` (999), overflow=clip.
+ *  - Fill height=100%, radius hereda.
+ *  - Color axis del DS (node 450:17810) confirma 4 colores activos + track vacío:
+ *      Blue   = state/information/base #335cff  (default)
+ *      Red    = state/error/base       #fb3748
+ *      Orange = state/warning/base     #fa7319
+ *      Green  = state/success/base     #1fc16b
+ *    OJO: en este proyecto `--sui-primary-base` = #fa7319 (naranja brand),
+ *    distinto al `primary-base` azul del Figma del DS. El azul del DS mapea a
+ *    `--sui-state-information-base`, NO a `--sui-primary-base`.
+ *
+ * PENDING VERIFY (inferido — no confirmable en el Figma publicado, PRESERVADO):
+ *  1. [STATE] color='purple' (state/feature-base #7d52f4) NO existe en el eje
+ *     de color del Figma (node 450:17810 sólo expone Blue/Red/Orange/Green).
+ *     Es una extensión del proyecto con uso real (master-preview demo).
+ *  2. [STATE] Size variants — el Figma publicado SÓLO expone h=6px (medium).
+ *     `small` (4px) y `large` (8px) son convención del proyecto, consumidas
+ *     por sui-file-upload-card y master-preview.
+ *  3. [MOTION] La transición `width 300ms ease-out` no está en el frame
+ *     estático de Figma — convención de progress animado del proyecto. Se
+ *     desactiva bajo `prefers-reduced-motion`.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-*])`
+ * translan limpio igual que el Angular original.
+ *
+ * Inputs / Props:
+ *  - value:      number 0–100 (clamp interno, NaN→0).
+ *  - color:      'blue' (default) | 'green' | 'orange' | 'red' | 'purple'.
+ *  - size:       'small' (4px) | 'medium' (6px, default) | 'large' (8px).
+ *  - ariaLabel:  string opcional para `aria-label` del role=progressbar.
+ */
+export declare class SuiProgressBar {
+    el: HTMLElement;
+    /** Valor de progreso 0–100. Fuera de rango se clampea; NaN cae a 0. Default 0. */
+    value: number;
+    /** Color del fill. Default `blue` (state/information). NO confundir con naranja brand. */
+    color: SuiProgressBarColor;
+    /** Altura de la barra. Default `medium` (6px). */
+    size: SuiProgressBarSize;
+    /**
+     * Nombre accesible del `role=progressbar`. Sin él (ni `ariaLabelledby`) cae a
+     * «Progreso» (en Angular sale de provideSuiTextos): un progressbar sin nombre
+     * se anuncia vacío.
+     */
+    ariaLabel: string | null;
+    /** Id del texto visible que nombra la barra (p. ej. su título). Pierde contra `ariaLabel`. */
+    ariaLabelledby: string | null;
+    /**
+     * `ariaLabel` está atado al atributo `aria-label` del host: lo que el render
+     * escribe ahí vuelve al prop. Por eso el piso se pone ANTES del primer render
+     * (sin cambiar el prop durante el render) y se reconoce después: un
+     * `ariaLabel` igual al piso no es un nombre del consumer.
+     */
+    componentWillLoad(): void;
+    /** Nombre puesto por el consumer (el piso no cuenta). */
+    private get nombrePropio();
+    /** Valor clampeado a [0, 100], con NaN→0. Misma lógica que el computed Angular. */
+    private get clampedValue();
+    render(): any;
+}

package/dist/types/components/sui-progress-bar-label/sui-progress-bar-label.d.ts

@@ -0,0 +1,110 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiProgressBarColor, SuiProgressBarSize } from '../sui-progress-bar/sui-progress-bar';
+import type { SuiLinkConfig } from '../sui-link-button/sui-link-button';
+export type SuiProgressBarLabelType = 'on-top' | 'on-right';
+/**
+ * `<sui-progress-bar-label>` — SUI Design System (SUI Design System 2.0) · Progress Bar with Label.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (sui-design-system/.../src/lib/sui-progress-bar-label/). Misma
+ * API pública, todas las variantes/sizes/states, mismo comportamiento y mismos
+ * VALORES exactos (tokens del DS, no hex). El accent del DS es NARANJA brand
+ * (#fa7319), NO el azul de Figma.
+ *
+ * Es un COMPUESTO: reusa el primitivo ya portado `<sui-progress-bar>` como única
+ * fuente de verdad del fill (no proyecta contenido, lo COMPONE), y le agrega
+ * título, %, descripción y un link opcional.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — frame "Progress Bar Label [1.1]" node 515:3758.
+ * VERIFIED via MCP (`get_metadata` + `get_design_context` + `get_variable_defs`).
+ *
+ * Tres layouts (variantes del frame):
+ *
+ *  ┌ Type=On Top, Show Bottom=On (node 515:3755) ────────────────────────┐
+ *  │  [ título ............................. %% ]   ← fila gap-6, items-start
+ *  │  [ ▰▰▰▰▰▰▰▰▱▱ barra 100% ]                                           │
+ *  │  [ link  descripción ................... ]   ← fila gap-4, items-start │
+ *  └──────────────────────────────────────────────────────────────────────┘
+ *  Type=On Top, Show Bottom=Off (node 515:3819): igual sin la fila inferior.
+ *  Type=On Right, Show Bottom=Off (node 515:3859): fila única gap-8,
+ *     items-center → barra(flex:1) + %% a la derecha. Sin título ni descripción.
+ *
+ * EXACT (pulled del Figma 2026-05-29, verificado):
+ *  - Contenedor on-top:  flex-col, gap 6px, width 100% (Figma fija 320).
+ *  - Contenedor on-right: flex-row, gap 8px, align-items center.
+ *  - Fila título "Title & Detail": flex gap 6px, align-items start.
+ *  - Fila descripción "Description": flex gap 4px, align-items start.
+ *  - Título:      text/strong-950 #171717, Inter Medium 14/lh20/tracking-0.084px.
+ *  - Porcentaje:  text/sub-600 #5c5c5c, Inter Regular 12/lh16, whitespace-nowrap.
+ *  - Descripción: text/sub-600 #5c5c5c, Inter Regular 12/lh16, flex:1.
+ *  - Link:        Inter Medium 12/lh16 underline. Figma define el color como
+ *                 `primary-base` (#335cff, azul del DS); en este proyecto
+ *                 `--sui-primary-base` es naranja, así que el link se pinta con
+ *                 `--sui-state-information-base` (= ese mismo #335cff). DESVIACIÓN
+ *                 PERMANENTE de mapping de token (no un pending-verify).
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-type])`
+ * translan limpio y el `<sui-progress-bar>` interno comparte tokens sin pelear
+ * con shadow DOM. Misma estrategia que el Angular original.
+ *
+ * NOTA Stencil: la prop `title` del Angular se llama `heading` porque `title`
+ * es un atributo reservado del DOM (tooltip nativo gris). Si el host trae
+ * `title`, vale como `heading` y se quita (Host title={undefined} no lo borra).
+ *
+ * Props:
+ *  - value:       number 0–100 (delegado a sui-progress-bar).
+ *  - type:        'on-top' (default) | 'on-right'.
+ *  - heading:     string — título (sólo on-top). Nombra la barra (aria-labelledby).
+ *  - percentage:  true (default) = `${value}%` · string = texto propio · false
+ *                 (o "false" como atributo) = oculto.
+ *  - showBottom:  boolean (default false) — fila inferior link+descripción (sólo on-top).
+ *  - description: string — texto descriptivo (fila inferior).
+ *  - link:        string (solo label: el <a> no navega y emite linkClick) o
+ *                 `{ label, href?, target?, rel? }` por property (con href navega;
+ *                 rel automático para _blank). null (default) = sin link.
+ *  - color / size / ariaLabel: delegados a sui-progress-bar.
+ *
+ * Event:
+ *  - linkClick: emitido al click del link.
+ */
+export declare class SuiProgressBarLabel {
+    el: HTMLElement;
+    /** Valor de progreso 0–100 (delegado a sui-progress-bar). Default 0. */
+    value: number;
+    /** Layout. `on-top` (default) apila título/%/barra/bottom; `on-right` inline. */
+    type: SuiProgressBarLabelType;
+    /** Título (sólo on-top). Es el `title` del Angular (ver NOTA). */
+    heading: string;
+    /** % textual — true = `${value}%` automático · string = texto propio · false = oculto. */
+    percentage: boolean | string;
+    /** Fila inferior link+descripción (sólo on-top). Default `false`. */
+    showBottom: boolean;
+    /** Texto descriptivo de la fila inferior. Default `''`. */
+    description: string;
+    /** Link de la fila inferior: string (solo label) o SuiLinkConfig (por property). null = sin link. */
+    link: SuiLinkConfig | string | null;
+    /** Color del fill (delegado a sui-progress-bar). Default `blue`. */
+    color: SuiProgressBarColor;
+    /** Altura de la barra (delegado a sui-progress-bar). Default `medium`. */
+    size: SuiProgressBarSize;
+    /** Nombre accesible de la barra (gana al título). Default `null`. */
+    ariaLabel: string | null;
+    /** Emitido al click del link. */
+    linkClick: EventEmitter<void>;
+    /** a11y (04-10-2026): el título visible nombra la barra (aria-labelledby). */
+    private readonly titleId;
+    componentWillLoad(): void;
+    alTocar(): void;
+    alSoltar(event: TouchEvent): void;
+    /** Config resuelta del link (string → { label }, rel automático). */
+    private get linkCfg();
+    /** Valor clampeado a [0, 100], con NaN→0. Misma lógica que el computed Angular. */
+    private get clampedValue();
+    /** Mostrar el bloque de % (percentage !== false; como atributo llega «false»). */
+    private get showPercent();
+    /** Texto del % mostrado: override explícito o `${value}%`. */
+    private get percentLabel();
+    private onLinkClick;
+    private renderBar;
+    render(): any;
+}

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

@@ -0,0 +1,119 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiRadioValue = string | number | null;
+export type SuiRadioSize = 'medium' | 'large' | 'xlarge';
+/**
+ * `<sui-radio>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-radio/). Misma API
+ * pública (size/value/disabled + estado checked), mismas variantes/sizes/estados,
+ * mismo comportamiento (toggle por click/Space/Enter, selección exclusiva en
+ * grupo, disabled bloquea, iOS :active fix) 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). El Angular original referencia `--sui-primary-base`; en
+ * este token-set ese token es naranja, así que el port queda naranja sin tocar.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set `Radio` (node 515:4242).
+ *
+ * ── Dos modos (igual que el Angular) ─────────────────────────────────────
+ *  1. GRUPO: envolver radios en `<sui-radio-group value="...">` para selección
+ *     exclusiva. Cada radio declara `value`. El `model(value)` + CVA de Angular
+ *     se mapea acá a un `<sui-radio-group>` con `@Prop value` mutable + un
+ *     `@Event suiChange`. El radio emite un evento burbujeante `suiRadioSelect`
+ *     con su `value`; el group lo captura, fija su `value` y sincroniza el
+ *     `checked` de todos los hijos.
+ *  2. STANDALONE (sin group): `[(standaloneChecked)]` de Angular → `@Prop checked`
+ *     mutable + reflect + `@Event suiChange<boolean>` (idiom web component). El
+ *     click togglea `checked` y emite el nuevo valor.
+ *
+ * El modo se autodetecta en `componentWillLoad` vía `closest('sui-radio-group')`.
+ *
+ * ── Estructura (matchea el Angular, Figma 515:4242) ──────────────────────
+ *  - Host (container outer): medium 20×20
+ *  - bg (círculo exterior): 16×16, radius 999px
+ *  - box (superficie blanca interna): 13×13 círculo unchecked, 8×8 punto checked
+ *  - No hay SVG: el "check" es el punto encogiéndose sobre el bg sólido
+ *
+ * ── Estados × valor (medium) ─────────────────────────────────────────────
+ *  - Unchecked default: bg-soft-200 · hover: bg-sub-300 · focus: primary-base
+ *  - Checked: primary-base · hover: primary-dark · focus: primary-darkest
+ *  - Disabled unchecked: bg-soft-200, box oculto, no focusable
+ *  - Disabled checked: bg-soft-200, punto 8×8 blanco visible
+ *
+ * ── Sizes ────────────────────────────────────────────────────────────────
+ *  - medium: spec Figma (515:4242)
+ *  - large / xlarge: extensión del proyecto (no-Figma), escala Δ4px
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-sui-*])`
+ * translan limpio, el componente hereda los tokens del global sin re-incluirlos,
+ * y el evento `suiRadioSelect` burbujea hasta el `<sui-radio-group>` sin pelear
+ * con shadow boundaries. Misma estrategia que el resto del DS y que el Angular.
+ */
+export declare class SuiRadio {
+    el: HTMLElement;
+    /** Tamaño. `medium` 20 (default) · `large` 24 · `xlarge` 28. */
+    size: SuiRadioSize;
+    /**
+     * Valor de este radio dentro de un `<sui-radio-group>`. El group compara su
+     * propio `value` contra este para resolver el estado checked exclusivo.
+     * Ignorado en modo standalone.
+     */
+    value: SuiRadioValue;
+    /** Deshabilitado: bloquea toggle, tokens grises, no focusable. Default `false`. */
+    disabled: boolean;
+    /**
+     * `false` = fuera del orden de Tab y del roving del grupo. Para cuando un padre
+     * (sui-radio-label) es el radio enfocable y este solo dibuja. Default `true`.
+     */
+    focusable: boolean;
+    /**
+     * Estado marcado. Mutable + reflect. En modo standalone equivale al
+     * `[(standaloneChecked)]` de Angular (el consumer puede setear `el.checked` o
+     * leerlo tras un toggle). En modo grupo lo gobierna el `<sui-radio-group>`
+     * padre vía `setChecked()`.
+     */
+    checked: boolean;
+    /** True cuando el radio vive dentro de un `<sui-radio-group>`. Autodetectado. */
+    private inGroup;
+    /** En grupo: único tab stop del roving (lo fija el group vía `setChecked`). */
+    private tabStop;
+    /**
+     * Standalone: emite el nuevo valor de `checked` en cada toggle del usuario
+     * (equivalente al `standaloneCheckedChange` de Angular). En modo grupo no se
+     * emite — el group gobierna y emite su propio `suiChange`.
+     */
+    suiChange: EventEmitter<boolean>;
+    /**
+     * Evento burbujeante que el `<sui-radio-group>` padre captura para resolver la
+     * selección exclusiva. `detail` = el `value` de este radio. Interno al DS;
+     * el consumer normalmente escucha `suiChange` del group, no este evento.
+     */
+    suiRadioSelect: EventEmitter<SuiRadioValue>;
+    componentWillLoad(): void;
+    /**
+     * Fija el estado checked desde el `<sui-radio-group>` padre (selección
+     * exclusiva). API interna del DS — el group la llama tras cada cambio de su
+     * `value`. No dispara `suiChange` (el group ya emite el suyo).
+     */
+    setChecked(checked: boolean, tabStop?: boolean): Promise<void>;
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo que hace que `:active` dispare y se libere bien.
+     * Sin esto, `:active` "stickea" 300-500ms en pages standalone.
+     */
+    onTouchStart(): void;
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd(): void;
+    onClick(event: Event): void;
+    onKeydown(event: KeyboardEvent): void;
+    /**
+     * Activa el radio. Disabled bloquea todo. En modo grupo emite `suiRadioSelect`
+     * con su `value` y deja que el group resuelva la selección exclusiva. En modo
+     * standalone togglea `checked` y emite `suiChange` (comportamiento toggle
+     * legacy, igual que el Angular).
+     */
+    private toggle;
+    render(): any;
+}

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

@@ -0,0 +1,186 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiEmojiName } from '../sui-emoji/sui-emoji';
+import type { SuiBadgeColor, SuiBadgeSize, SuiBadgeVariant } from '../sui-badge/sui-badge';
+import type { SuiBrandLogoCompany } from '../sui-brand-logo/sui-brand-logo';
+import type { SuiRadioSize } from '../sui-radio/sui-radio';
+/**
+ * Tipo del leading slot del radio-card. Gobierna qué se renderiza a la
+ * izquierda del texto:
+ *  - `basic`     → sin leading.
+ *  - `left-icon` → círculo 40×40 con icono / emoji.
+ *  - `avatar`        → `<sui-avatar size="lg">` (40×40 redondo).
+ *  - `card-provider` → tile 32×24 rounded-4 con el logo del provider (`imageUrl`).
+ *  - `brand`         → `<sui-brand-logo size="xl">` (40) o `imageUrl` circular.
+ *  - `company`       → logo circular 40×40 (`imageUrl`) o iniciales del label.
+ */
+export type SuiRadioCardType = 'basic' | 'left-icon' | 'avatar' | 'card-provider' | 'brand' | 'company';
+/** Badge junto al label (mismo objeto que `SuiBadgeConfig` del SUI Angular). */
+export interface SuiRadioCardBadge {
+    label: string;
+    color?: SuiBadgeColor;
+    variant?: SuiBadgeVariant;
+    size?: SuiBadgeSize;
+}
+/**
+ * `<sui-radio-card>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (sui-design-system/.../src/lib/sui-radio-card/). Misma API
+ * pública (type/value/label/sublabel/description/icon/emoji/iconSrc/imageUrl/
+ * brand/badge/size/disabled + estado checked), mismas variantes/tipos/estados,
+ * mismo comportamiento (toggle por click/Space/Enter, selección exclusiva en
+ * `<sui-radio-group>`, disabled bloquea, iOS :active fix) y mismos VALORES
+ * exactos (tokens del DS, no hex).
+ *
+ * Es un COMPUESTO: reusa los primitivos ya portados — `<sui-icon>`,
+ * `<sui-emoji>`, `<sui-avatar>`, `<sui-brand-logo>` y `<sui-badge>`. No re-implementa nada.
+ *
+ * El accent del DS es NARANJA brand (#fa7319 = --sui-primary-base), NO el azul
+ * de Figma (#335cff). El Angular original referencia `--sui-primary-base`; en
+ * este token-set ese token es naranja, así que el port queda naranja sin tocar.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set `Radio Card [1.1]` (515:4347).
+ *
+ * EXACT (pulled from Figma, verificado per type × state — ver Angular JSDoc):
+ *  - Container: padding 16, gap 14, radius-12, border 1px stroke-soft-200,
+ *    shadow x-small, bg white-0. Active: border primary-base, NO shadow.
+ *  - Label 14/20 medium strong-950 (-0.6%) · Sublabel + Description 12/16 sub-600.
+ *  - Badge: `<sui-badge>` real (default blue light small, fiel a Figma).
+ *  - Radio dot 20×20: bg inset 10% (soft-200 → primary checked), box inset 17.5%
+ *    blanco (→ 30% sin shadow checked).
+ *  - left-icon leading: 40×40 circle, 1px stroke-soft-200, shadow x-small, pad 10.
+ *  - avatar leading: sui-avatar size=lg (40×40), fallback a iniciales del label.
+ *  - Hover (desktop only): card bg-weak-50, sin border/shadow; radio bg-sub-300.
+ *  - Disabled: bg-white-0 + 1px stroke, sin shadow; label→sub-600, sub/desc→soft-400;
+ *    badge sin fill + stroke + disabled-300; radio dot soft-200; box oculto si
+ *    unchecked.
+ *
+ * ── Dos modos (igual que el Angular) ─────────────────────────────────────
+ *  1. GRUPO: envolver cards en `<sui-radio-group value="...">` para selección
+ *     exclusiva. Cada card declara `value`. El card emite el evento burbujeante
+ *     `suiRadioSelect` con su `value`; el group lo captura, fija su `value` y
+ *     sincroniza el `checked` de los hijos vía el `@Method setChecked()`.
+ *  2. STANDALONE (sin group): `@Prop checked` mutable + reflect + `@Event
+ *     suiChange<boolean>`. El click selecciona y emite `selected` con el `value`.
+ *
+ * El modo se autodetecta en `componentWillLoad` vía `closest('sui-radio-group')`.
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-sui-*])`
+ * translan limpio, el card hereda los tokens del global, los primitivos
+ * proyectados (`<sui-icon>`/`<sui-emoji>`/`<sui-avatar>`) no pelean con shadow
+ * boundaries, y el `suiRadioSelect` burbujea hasta el group. Misma estrategia
+ * que el Angular original (sin shadow DOM).
+ */
+export declare class SuiRadioCard {
+    el: HTMLElement;
+    /** Tipo del leading slot — gobierna qué se renderiza a la izquierda. Default `basic`. */
+    type: SuiRadioCardType;
+    /** Tamaño del radio interno: medium 20 (default) · large 24 · xlarge 28. */
+    size: SuiRadioSize;
+    /** Valor del radio (requerido para uso en grupo). */
+    value: string;
+    /** Título principal del card (label de la fila Title). */
+    label: string;
+    /** Sublabel opcional (12/16 regular sub-600 al lado del label). */
+    sublabel: string | null;
+    /** Descripción secundaria opcional (12/16 regular sub-600 debajo del Title). */
+    description: string | null;
+    /**
+     * RemixIcon name (sin prefijo "ri-") para type='left-icon'. Si está, se usa.
+     * Precedencia: icon > emoji > iconSrc.
+     */
+    icon: string | null;
+    /**
+     * Emoji del catálogo SUI_EMOJI_MAP — alternativa a `icon` para type='left-icon'.
+     * Si ambos están, `icon` tiene precedencia.
+     */
+    emoji: SuiEmojiName | null;
+    /**
+     * URL directa al emoji para type='left-icon'. Útil cuando el consumer ya tiene
+     * la URL y no quiere registrar el emoji en SUI_EMOJI_MAP.
+     * Precedencia: icon > emoji > iconSrc.
+     */
+    iconSrc: string | null;
+    /**
+     * URL de imagen para type='avatar' — se renderiza con `<sui-avatar size="lg">`
+     * (40×40 redonda). Si la imagen falla, fallback automático a iniciales del
+     * label. Para los otros types se ignora.
+     */
+    imageUrl: string | null;
+    /**
+     * Company del `<sui-brand-logo>` para type='brand' (Figma 515:4383 — logo 40px).
+     * Para logos fuera del catálogo, usar `imageUrl` (fallback circular).
+     */
+    brand: SuiBrandLogoCompany | null;
+    /**
+     * Badge junto al label: string (`badge="NEW"`) o `{ label, color?, variant?,
+     * size? }` por property. `null` = sin badge. Default visual blue light small.
+     */
+    badge: SuiRadioCardBadge | string | null;
+    /** Deshabilitado: bloquea selección, tokens grises, no focusable. Default `false`. */
+    disabled: boolean;
+    /**
+     * Estado marcado. Mutable + reflect. En modo standalone equivale al
+     * `[(checked)]` model del Angular (el consumer setea `el.checked` o lo lee tras
+     * un toggle). En modo grupo lo gobierna el `<sui-radio-group>` padre vía
+     * `setChecked()`.
+     */
+    checked: boolean;
+    /** True cuando el card vive dentro de un `<sui-radio-group>`. Autodetectado. */
+    private inGroup;
+    /** En grupo: único tab stop del roving (lo fija el group vía `setChecked`). */
+    private tabStop;
+    /**
+     * Standalone: emite el nuevo valor de `checked` en cada selección del usuario
+     * (idiom web component, ≈ `checkedChange` del model Angular). En modo grupo no
+     * se emite — el group gobierna y emite su propio `suiChange`.
+     */
+    suiChange: EventEmitter<boolean>;
+    /**
+     * Emite el `value` cuando se selecciona (equivalente al `output selected` del
+     * Angular). Útil sin `<sui-radio-group>`.
+     */
+    selected: EventEmitter<string>;
+    /**
+     * Evento burbujeante que el `<sui-radio-group>` padre captura para resolver la
+     * selección exclusiva. `detail` = el `value` de este card. Mismo evento que
+     * emite `<sui-radio>`, así el group existente lo coordina sin cambios de API.
+     */
+    suiRadioSelect: EventEmitter<string>;
+    componentWillLoad(): void;
+    /**
+     * Fija el estado checked desde el `<sui-radio-group>` padre (selección
+     * exclusiva). API interna del DS — el group la llama tras cada cambio de su
+     * `value`. No dispara eventos (el group ya emite el suyo).
+     */
+    setChecked(checked: boolean, tabStop?: boolean): Promise<void>;
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo que hace que `:active` dispare y se libere bien.
+     * Sin esto, `:active` "stickea" 300-500ms en pages standalone.
+     */
+    onTouchStart(): void;
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd(): void;
+    onClick(event: Event): void;
+    onKeydown(event: KeyboardEvent): void;
+    /**
+     * Selecciona el card. Disabled bloquea todo. En modo grupo emite
+     * `suiRadioSelect` con su `value` y deja que el group resuelva la selección
+     * exclusiva. En standalone fija `checked=true` y emite `suiChange`. En ambos
+     * casos emite `selected` con el `value` (≈ output del Angular).
+     */
+    private activate;
+    /**
+     * Iniciales para el fallback de `<sui-avatar>` cuando la imagen no carga.
+     * Toma la 1ra letra de cada palabra (max 2). Si label vacío, vacío.
+     */
+    private get initialsFromLabel();
+    /** Renderiza el contenido del leading slot según el type. */
+    private renderLeading;
+    /** Config resuelta del badge (string → { label }). */
+    private get badgeCfg();
+    /** Lado en px del radio: medium 20 · large 24 · xlarge 28 (los insets son %). */
+    private get radioPx();
+    render(): any;
+}