@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,67 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiRadioValue } from '../sui-radio/sui-radio';
+/**
+ * `<sui-radio-group>` — Agrupa sui-radio, sui-radio-card o sui-radio-label para que solo uno quede marcado.
+ *
+ * Portado 1:1 desde el `SuiRadioGroup` Angular (sui-design-system,
+ * sui-radio/sui-radio-group.ts). Da selección exclusiva a un set de
+ * `<sui-radio>`, `<sui-radio-card>` o `<sui-radio-label>` hijos (los tres
+ * exponen `value` + el `@Method setChecked()` y emiten `suiRadioSelect`).
+ *
+ * El Angular usa DI + `ControlValueAccessor` para coordinar group ↔ radios y
+ * group ↔ form. En web components no hay CVA; el patrón idiomático equivalente:
+ *  - `@Prop value` mutable + reflect (≈ el `value` signal del group Angular y su
+ *    `writeValue`): el consumer setea `el.value` o lo lee tras una selección.
+ *  - Los radios hijos emiten un evento burbujeante `suiRadioSelect` con su
+ *    `value` al ser activados. El group lo captura, fija `value` y sincroniza
+ *    el `checked` exclusivo de cada hijo.
+ *  - `@Event suiChange` (≈ `registerOnChange` del CVA): emite el nuevo `value`
+ *    seleccionado por el usuario.
+ *
+ * La sincronización group → hijos se hace vía el `@Method setChecked()` de cada
+ * `<sui-radio>`: en cada cambio de `value` (por click o seteado por el consumer)
+ * el group recorre los radios y marca exactamente el que matchea.
+ *
+ * `scoped: true`: light DOM, así el evento burbujeante de los hijos llega al
+ * group sin cruzar shadow boundaries.
+ */
+export declare class SuiRadioGroup {
+    el: HTMLElement;
+    /**
+     * Valor seleccionado del grupo. Mutable + reflect. El radio cuyo `value`
+     * matchee queda checked; el resto, unchecked. Equivale al `value` signal +
+     * `writeValue` del group Angular.
+     */
+    value: SuiRadioValue;
+    /**
+     * Deshabilita el grupo entero: `aria-disabled`, sin tab stop, las flechas y los
+     * clicks no cambian el valor. Equivale al `setDisabledState` (forms) del Angular.
+     */
+    disabled: boolean;
+    /**
+     * Emite el nuevo `value` en cada selección del usuario (equivalente al
+     * `registerOnChange` del CVA Angular). No se emite cuando el consumer setea
+     * `value` programáticamente.
+     */
+    suiChange: EventEmitter<SuiRadioValue>;
+    componentDidLoad(): void;
+    /** Re-sincroniza el checked de los hijos cuando el consumer cambia `value`. */
+    onValueChange(): void;
+    /**
+     * Captura el evento burbujeante de un `<sui-radio>` hijo. Fija el `value` del
+     * group, sincroniza la selección exclusiva y emite `suiChange`.
+     */
+    onRadioSelect(event: CustomEvent<SuiRadioValue>): void;
+    /**
+     * Marca el hijo cuyo `value` matchee el del group; desmarca el resto.
+     * Cubre tanto `<sui-radio>` como `<sui-radio-card>` (ambos exponen
+     * `value` + el `@Method setChecked()`).
+     */
+    private syncChildren;
+    private children;
+    /** Hijos que participan del roving, en orden de documento. */
+    private enabledChildren;
+    /** ↑ ← / ↓ → mueven el foco y seleccionan (con vuelta), como el SuiRadioGroup Angular. */
+    onKeydown(event: KeyboardEvent): void;
+    render(): any;
+}

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

@@ -0,0 +1,104 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiBadgeConfig } from '../sui-badge/sui-badge';
+import type { SuiLinkConfig } from '../sui-link-button/sui-link-button';
+/**
+ * Tamaño del radio-label. `medium` es el de Figma (control 20, label 14/20);
+ * `large`, `xlarge` y `2xlarge` son extensión SUI para mobile.
+ */
+export type SuiRadioLabelSize = 'medium' | 'large' | 'xlarge' | '2xlarge';
+/**
+ * `<sui-radio-label>` — SUI Design System 2.0.
+ *
+ * Portado desde el `SuiRadioLabel` Angular (sui-design-system).
+ * Figma: 8p1k72aKKvzJV4XcvPS4VO — set "Radio Label [1.1]" (515:4282), 8 variants
+ * Active × Description × Flip. Anatomía de la familia label (igual que
+ * sui-checkbox-label): radio + label/sublabel/badge, descripción y Link Button.
+ *
+ * Semántica de GRUPO (patrón sui-radio-card):
+ *  - Dentro de `<sui-radio-group>` el group manda: el label emite el evento
+ *    burbujeante `suiRadioSelect` con su `value` y el group lo marca vía
+ *    `setChecked()`. Un radio marcado no se desmarca al re-click.
+ *  - Teclado en grupo (roving): un solo tab stop —el marcado o el primero
+ *    habilitado— y las flechas mueven foco y selección (lo resuelve el group).
+ *  - Standalone: `checked` mutable + reflect, `suiChange` (boolean) y `selected`
+ *    (value) al seleccionar.
+ *  - El `<sui-radio>` interno es solo visual (`inert`, `aria-hidden`,
+ *    pointer-events none): una sola fuente de selección.
+ *
+ * A11y: el `role="radio"` vive en el contenedor interno
+ * `.sui-radio-label__control` (círculo + textos) y el Link Button va FUERA de
+ * él, como hermano, para no anidar un botón dentro de un radio (axe
+ * nested-interactive). El click de toda la fila sigue en el host.
+ *
+ * `badge` y `link` aceptan string (shorthand) u objeto; el objeto se pasa por
+ * propiedad JS. Con `link.href` el Link Button renderiza un `<a>` real y
+ * `target="_blank"` agrega `rel="noopener noreferrer"`.
+ */
+export declare class SuiRadioLabel {
+    el: HTMLElement;
+    private readonly labelId;
+    private readonly descriptionId;
+    /** Valor que representa esta opción dentro del grupo. Requerido. */
+    value: string;
+    /** Texto principal del label. */
+    label: string;
+    /** Sublabel opcional (12/16 sub-600 al lado del label). */
+    sublabel: string | null;
+    /** Descripción opcional debajo del title (variant «with description»). */
+    description: string | null;
+    /** Badge junto al label — string ('NEW') u objeto `{ label, color?, variant?, size? }`. */
+    badge: SuiBadgeConfig | string | null;
+    /**
+     * Link Button bajo la descripción (solo con `description`) — string (solo
+     * label, emite `linkClick`) u objeto `{ label, href?, target?, rel? }`.
+     */
+    link: SuiLinkConfig | string | null;
+    /**
+     * Tamaño. `medium` (Figma): control 20, label 14/20. `large`: control 24,
+     * label 16/24, badge medium. `xlarge`: control 28. `2xlarge`: fila de 44 como
+     * mínimo (piso táctil), control 28. Sublabel y descripción quedan en 12/16.
+     */
+    size: SuiRadioLabelSize;
+    /** Si true, invierte el orden: [contenido] [radio]. */
+    flip: boolean;
+    /** Deshabilita el radio y la fila. */
+    disabled: boolean;
+    /** Estado marcado. Standalone: lo fija el click; en grupo lo gobierna el group. */
+    checked: boolean;
+    /** True cuando vive dentro de un `<sui-radio-group>`. Autodetectado. */
+    private inGroup;
+    /**
+     * Roving del grupo: `true` = este es el único tab stop, `false` = fuera del
+     * Tab (se llega con flechas). `null` = el group no lo fijó: queda enfocable.
+     */
+    private tabStop;
+    /** Standalone: emite `true` al seleccionarse (≈ `checkedChange` del model Angular). */
+    suiChange: EventEmitter<boolean>;
+    /** Emite el `value` cuando se selecciona (≈ output `selected` del Angular). */
+    selected: EventEmitter<string>;
+    /** Click en el Link Button (no selecciona). */
+    linkClick: EventEmitter<MouseEvent>;
+    /** Evento burbujeante que captura el `<sui-radio-group>` padre. `detail` = `value`. */
+    suiRadioSelect: EventEmitter<string>;
+    componentWillLoad(): void;
+    /**
+     * API interna del DS: el `<sui-radio-group>` fija el checked exclusivo y,
+     * si lo pasa, si esta opción es el tab stop del grupo. No emite eventos.
+     */
+    setChecked(checked: boolean, tabStop?: boolean): Promise<void>;
+    /** iOS WKWebView: la presencia del touchstart (pasivo) engancha el `:active`. */
+    onTouchStart(): void;
+    /** touchend.blur() suelta el foco del control al instante en iOS. */
+    onTouchEnd(): void;
+    onLabelClick(event: MouseEvent): void;
+    private onKeydown;
+    private select;
+    private onLinkClick;
+    /** Size del sui-radio interno: `2xlarge` es un alto de fila, el control queda en 28. */
+    private get controlSize();
+    /** Badge default por tamaño: medium → small · large → medium · xlarge/2xlarge → large. */
+    private get badgeSize();
+    private get badgeCfg();
+    private get linkCfg();
+    render(): any;
+}

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

@@ -0,0 +1,170 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiRatingAlignment, SuiRatingAppearance, SuiRatingReviewLink, SuiRatingSize, SuiRatingType } from './sui-rating.data';
+/**
+ * `<sui-rating>` — SUI Design System (SUI Design System 2.0). COMPUESTO + complejo.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-rating/). Misma API
+ * publica, TODAS las appearances (4) x types (4) x sizes (3) x states, mismo
+ * comportamiento (overlays/estados por celda, hover preview, half-step display,
+ * re-click no-op, textarea cohesivo en bar-area, teclado/a11y radiogroup) y
+ * mismos VALORES exactos (tokens del DS, no hex). Reusa los primitivos
+ * `<sui-icon>` y `<sui-emoji>` ya portados (NO re-implementa iconos ni emojis).
+ * El accent del DS es NARANJA brand (#fa7319) para los focus rings; star sigue
+ * dorado (yellow-500) y heart rojo (error-base) por canon Figma del rating.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO.
+ * Nodes verificados:
+ *   532:4137  Rating Items [1.0]   (empty-line / empty-filled / half / full x star/heart)
+ *   532:4160  Rating Cell [1.1]    (cell card: icon 32, pad 12, radius 10, shadow x-small)
+ *   532:4340  Rating Review [1.0]  (inline display: stars + value text + review link)
+ *   535:4535  Rating Bar Items     (cell de bar: emoji/number/star/heart x default/hover/selected)
+ *   535:4658  Rating Bar [1.1]     (5 cells horizontal segmented bar)
+ *   535:5057  Rating Bar Area [1.1] (card rounded-12 132px = bar 36px + input 96px)
+ *
+ * Cuatro appearances:
+ *   - 'inline'   -> 5 iconos inline bare, gap 2px. Display read-only de promedio o
+ *     input compacto. Soporta half-step si readonly. Sin card.
+ *   - 'cell'     -> 5 iconos envueltos en card individual (pad 12, radius 10, icon 32,
+ *     shadow x-small). default/selected -> bg white + border + shadow; hover -> bg weak-50.
+ *   - 'bar'      -> 5 cells horizontales segmentadas (border + dividers). Input de
+ *     formulario. Permite type emoji/number ademas de star/heart.
+ *   - 'bar-area' -> PIEZA UNICA: card rounded-12 que integra la bar arriba + el
+ *     textarea «Cuéntanos por qué» abajo. El textarea vive dentro del card y se enlaza a
+ *     `reason`. Las cells crecen flex. Captura value + reason de una sola interaccion.
+ *
+ * Estados por celda (bar/bar-area) — Figma Rating Bar Items 535:4535:
+ *   default -> empty-line gris | hover -> EMPTY FILLED gris (relleno neutro) |
+ *   selected -> full dorado/rojo. number: hover Y selected usan strong-950; selected
+ *   agrega bg weak-50. emoji: solo selected sale de grayscale.
+ *
+ * Tamaños (icon size): small 16 / medium 20 (default) / large 24 / xlarge 28 /
+ * 2xlarge 32 en un botón de 44 (piso táctil del teléfono). En cell siempre 32px.
+ * En bar 20px (2xlarge sube la celda a 44 de alto).
+ *
+ * ── Modelo de datos (equivalente al CVA + two-way del Angular) ───────────
+ * Stencil no tiene ControlValueAccessor. El contrato se mapea a:
+ *   - `value`  (@Prop mutable) + evento `valueChange` -> two-way del numero 1..max.
+ *     0 = sin seleccion. El consumer hace `el.value = n` o escucha `valueChange`.
+ *   - `disabled` (@Prop) -> equivalente a setDisabledState: bloquea clicks/hover
+ *     igual que readonly, con affordance visual (opacity .5 + pointer-events none).
+ *   - `reason` (@Prop mutable) + evento `reasonChange` -> two-way del textarea de
+ *     bar-area. Canal SEPARADO del value (igual que el Angular: el value primario
+ *     es el numero, reason es independiente).
+ *
+ * a11y (04-10-2026, igual que el Angular): readonly es una NOTA, no una pregunta
+ * → host `role="img"` con «Calificación: 4,5 de 5, 120 calificaciones» (o `group`
+ * si trae link de reseñas, para que el link siga alcanzable) y las celdas
+ * aria-hidden. Interactivo: `radiogroup` con un solo tab stop (la nota elegida o
+ * la 1) y flechas ← ↑ / → ↓ / Home / End, sin vuelta.
+ *
+ * iOS `:active`: listeners touchstart/touchend PASIVOS en el host (homólogo del
+ * `SuiToque` del Angular); el touchend suelta el foco del botón tocado.
+ *
+ * `scoped: true` (light DOM, NO shadow): los `<sui-icon>`/`<sui-emoji>` internos
+ * heredan font/tokens del global y los selectores `:host([data-*])` funcionan.
+ */
+export declare class SuiRating {
+    el: HTMLElement;
+    /** Apariencia. Default `inline`. */
+    appearance: SuiRatingAppearance;
+    /** Tipo visual. Default `star`. emoji/number solo aplican en bar/bar-area. */
+    type: SuiRatingType;
+    /** Value actual 0..max (mutable, two-way via evento `valueChange`). */
+    value: number;
+    /** Numero de cells. Default `5`. */
+    max: number;
+    /** Tamaño del icon. Default `medium`. Ignorado en cell (32); en bar solo 2xlarge cambia la celda. */
+    size: SuiRatingSize;
+    /** Deshabilita clicks (display only). */
+    readonly: boolean;
+    /**
+     * Equivalente al setDisabledState del CVA Angular: deshabilita por completo
+     * (atenua + bloquea cursor) igual que readonly, pero semanticamente distinto
+     * (readonly = display intencional; disabled = el form/consumer lo apago).
+     */
+    disabled: boolean;
+    /** inline + readonly: renderiza half-fill basado en value decimal. */
+    halfStep: boolean;
+    /** inline: muestra "4.5" al lado de los iconos. */
+    showValue: boolean;
+    /** inline: muestra "5.2K Ratings" al lado (formato corto). */
+    reviewCount: number | null;
+    /** inline: link "18 reviews" al lado. Lleva objeto -> pasar como property. */
+    reviewLink: SuiRatingReviewLink | null;
+    /** inline: alineacion del bloque meta. Default `inline`. */
+    alignment: SuiRatingAlignment;
+    /**
+     * Lista de emoji names para type='emoji' (default: 5 caras CSAT). Cada string
+     * debe ser un `name` valido del catalogo de `<sui-emoji>`. Lleva array -> pasar
+     * como property (`el.emojis = [...]`).
+     */
+    emojis: string[];
+    /** Nombre accesible del grupo (en Angular sale de provideSuiTextos). */
+    ariaLabel: string;
+    /** bar-area: texto del reason (textarea). Mutable, two-way via `reasonChange`. */
+    reason: string;
+    /** bar-area: placeholder del textarea (en Angular sale de provideSuiTextos). */
+    reasonPlaceholder: string;
+    /** bar-area: filas iniciales del textarea (el min-height lo fija el CSS = 72px). */
+    reasonRows: number;
+    /** Hover preview (desktop). En mobile no se setea — touch va directo al click. */
+    hoverIndex: number | null;
+    /** Se emite con el index 1..max cuando el user selecciona (0 nunca, re-click es no-op). */
+    valueChange: EventEmitter<number>;
+    /** Se emite con el texto del reason (bar-area) en cada input. */
+    reasonChange: EventEmitter<string>;
+    /** Limpia el hover cuando se vuelve no-interactive (evita estado pegado). */
+    onInteractiveChange(): void;
+    /** True cuando acepta interaccion: NO readonly Y NO disabled. */
+    private get isInteractive();
+    /** Vista pre-computada de cells (delegada al helper puro del .data.ts). */
+    private get cells();
+    private get iconPx();
+    private onCellClick;
+    private onCellEnter;
+    private onCellLeave;
+    private onReasonInput;
+    alTocar(): void;
+    alSoltar(event: TouchEvent): void;
+    /** Índice (1..max) de la celda con tabindex 0: la elegida, o la primera. */
+    private get tabStopIndex();
+    /**
+     * Patrón radiogroup (interactivo): ← ↑ bajan la nota, → ↓ la suben, Home/End
+     * van a 1 / max. Las flechas eligen. Sin vuelta.
+     */
+    onKeydown(event: KeyboardEvent): void;
+    /** Rol del host: `img` para la nota de solo lectura (o `group` si trae link), `radiogroup` para pedirla. */
+    private get hostRole();
+    /**
+     * `ariaLabel` está atado al atributo `aria-label` del host: lo que se escribe ahí
+     * vuelve al prop. Como el nombre de solo lectura es más largo que el prop
+     * («Calificación: 4,5 de 5»), escribirlo desde el render lo realimentaba y
+     * crecía sin fin. El nombre base del consumer se guarda aparte y el atributo
+     * se escribe después del render.
+     */
+    private nombreBase;
+    private ultimoNombre;
+    componentWillLoad(): void;
+    onAriaLabelChange(v: string | null): void;
+    componentDidRender(): void;
+    /** Nombre accesible: interactivo = `ariaLabel`; readonly = «Calificación: 4,5 de 5, 120 calificaciones». */
+    private get hostAriaLabel();
+    /**
+     * En appearance='cell' el EMPTY es el glyph RELLENO gris (Figma Rating Cell
+     * 532:4160 «Empty Filled»), no el outline del inline.
+     */
+    private cellIconName;
+    /** Single icon (appearance='inline' y 'cell'). */
+    private renderIconCell;
+    /** Contenido de una cell de bar/bar-area segun type. */
+    private renderCellContent;
+    /** Bar row (5 cells horizontal). Reusada por appearance='bar' y 'bar-area'. */
+    private renderBarRow;
+    /** Meta (value + reviewCount + link), inline vertical/horizontal. */
+    private renderMeta;
+    private renderInline;
+    /** Contenido interno segun appearance (todo lo que va dentro del Host). */
+    private renderInner;
+    render(): any;
+}

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

@@ -0,0 +1,74 @@
+/**
+ * Tipos, catálogos y helpers de `<sui-rating>`.
+ *
+ * Vive en archivo hermano (NO en el .tsx) porque el .tsx solo puede exportar
+ * `export class` + `export type/interface` — cualquier `export const`/`function`
+ * rompe el build de Stencil entero. La lógica de derivación de cells (que el
+ * Angular tenía en un `computed`) se externaliza acá como función pura.
+ */
+export type SuiRatingAppearance = 'inline' | 'cell' | 'bar' | 'bar-area';
+export type SuiRatingType = 'star' | 'heart' | 'emoji' | 'number';
+/** small 16 · medium 20 · large 24 · xlarge 28 · 2xlarge 32 en un botón de 44 (piso táctil del teléfono). */
+export type SuiRatingSize = 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
+export type SuiRatingAlignment = 'inline' | 'vertical' | 'horizontal';
+export interface SuiRatingReviewLink {
+    label: string;
+    href?: string;
+}
+/**
+ * Estado visual por celda (appearance='bar' | 'bar-area'). Figma define 3 estados
+ * distintos por celda:
+ *  - 'default'  -> icono empty-line gris (star/heart) | texto sub-600 (number) | emoji desaturado
+ *  - 'hover'    -> icono EMPTY FILLED gris (star/heart, relleno solido pero neutro)
+ *                  | texto strong-950 (number) | emoji desaturado (sin cambio)
+ *  - 'selected' -> icono FULL dorado/rojo (star/heart) | texto strong-950 + bg weak-50 (number)
+ *                  | emoji full color + bg weak-50
+ */
+export type SuiRatingCellState = 'default' | 'hover' | 'selected';
+export interface SuiRatingCellView {
+    /** 1..max (1-based, NO 0-based). */
+    index: number;
+    fill: 'empty' | 'half' | 'full';
+    /** Estado visual derivado de hoverIndex + value. Solo relevante en bar/bar-area/cell. */
+    cellState: SuiRatingCellState;
+    emoji: string;
+}
+/**
+ * Lista default de emojis para type='emoji' (5 caras CSAT de Fluent Emoji
+ * animado — homologado iOS/Android). Cada string es un `name` valido del
+ * catalogo SUI_EMOJI_MAP de `<sui-emoji>`.
+ */
+export declare const SUI_RATING_DEFAULT_EMOJIS: string[];
+/**
+ * Deriva la vista pre-computada de cells (equivalente al `computed cells()` del
+ * Angular). Una sola pasada: resuelve fill por index considerando hover (preview),
+ * value y halfStep; asigna emoji por slot; y deriva cellState segun appearance.
+ *
+ * @param max         numero de cells
+ * @param value       value actual 0..max
+ * @param hover       indice bajo el cursor (1..max) o null
+ * @param interactive true si acepta clicks/hover (NO readonly y NO disabled)
+ * @param appearance  inline | cell | bar | bar-area
+ * @param halfStep    solo aplica en inline + readonly (half-fill por decimal)
+ * @param readonly    necesario para gatear el halfStep
+ * @param emojis      lista de emoji names por slot
+ */
+export declare function buildRatingCells(max: number, value: number, hover: number | null, interactive: boolean, appearance: SuiRatingAppearance, halfStep: boolean, readonly: boolean, emojis: string[]): SuiRatingCellView[];
+/**
+ * Map del fill al icon name de Remix (star/heart). Consistencia de familia:
+ * heart-3-line (outline) <-> heart-3-fill (relleno) usan el MISMO corazon.
+ */
+export declare function ratingIconName(type: SuiRatingType, fill: 'empty' | 'half' | 'full'): string;
+/**
+ * Icon name para una celda de bar/bar-area segun su estado visual (Figma 535:4535).
+ * HOVER ("Empty Filled") y SELECTED ("Full") comparten el mismo relleno solido
+ * (star-fill / heart-3-fill); la diferencia es SOLO de color (la maneja el SCSS).
+ * DEFAULT usa el outline (star-line / heart-3-line).
+ */
+export declare function ratingBarIconName(type: SuiRatingType, cellState: SuiRatingCellState): string;
+/** Tamaño del icon en px para inline/cell (bar usa 20 hardcoded). */
+export declare function ratingIconPx(appearance: SuiRatingAppearance, size: SuiRatingSize): number;
+/** Formato user-facing del rating value: "4.5" sin trailing zeros. */
+export declare function ratingValueLabel(value: number): string;
+/** Formato corto del review count: 1234 -> "1.2K", 5200 -> "5.2K", 950 -> "950". */
+export declare function ratingReviewCountLabel(n: number | null): string | null;

package/dist/types/components/sui-rich-editor/sui-rich-editor.d.ts

@@ -0,0 +1,137 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Layout del toolbar (Figma 166926:17605 "Rich Editor [1.1]" — eje
+ * "Toolbar Layout" con 4 variantes):
+ *   - `full`       (01) → Título / 14px / B I U S / align / chat link @ / more
+ *   - `compact`    (02) → Título / 14px / more
+ *   - `formatting` (03) → B I U S / align / more
+ *   - `social`     (04) → chat link @ / more
+ */
+export type SuiRichEditorLayout = 'full' | 'compact' | 'formatting' | 'social';
+/**
+ * Comando de formato emitido al hacer click en un item del toolbar.
+ * Cubre EXACTAMENTE los items que renderizan los 4 layouts de Figma.
+ */
+export type SuiRichEditorCommand = 'heading' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'strikeThrough' | 'align' | 'comment' | 'link' | 'mention' | 'more';
+/** Evento emitido por la toolbar cuando se acciona un comando. */
+export interface SuiRichEditorAction {
+    command: SuiRichEditorCommand;
+    /** True si el comando dejó el estado activo tras el toggle. */
+    active: boolean;
+}
+/**
+ * `<sui-rich-editor>` — SUI Design System (SUI Design System 2.0). COMPUESTO (WYSIWYG).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-rich-editor/). Misma API
+ * pública, TODAS las variantes (4 layouts × showMore × editable), mismo
+ * comportamiento (toolbar pixel-fiel + contenteditable nativo con
+ * execCommand para inline formatting, sync value ↔ innerHTML, placeholder,
+ * estado active leído desde la selección) y mismos VALORES exactos (tokens del
+ * DS, no hex). El accent activo del DS es NARANJA brand (#fa7319 =
+ * --sui-primary-base), NO el azul de Figma. Compone `<sui-rich-editor-item>`
+ * (ya portado) para cada botón del toolbar.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ *   Component-set: 166926:17605 "Rich Editor [1.1]"
+ *     · Toolbar Layout: 01 Full / 02 Compact / 03 Icon-formatting / 04 Icon-social
+ *     · ShowMore: boolean (divider + more-2-line al final)
+ *   Sub-componente: 166251:2701 "Rich Editor Items [1.1]" → sui-rich-editor-item
+ *   Color dots:     166331:4100 "Rich Editor Colors [1.1]" → dot inline 16x16
+ *
+ * ── ARQUITECTURA ──
+ *   :host
+ *     ├── .sui-rich-editor__toolbar  (pill flotante, Figma shell)
+ *     │     └── N x <sui-rich-editor-item> + dividers, por layout
+ *     └── .sui-rich-editor__editable  (contenteditable, opcional)
+ *
+ * Toolbar shell (Figma 166926:17605): bg/white-0, border 1px stroke/soft-200,
+ * radius 8px, overflow:clip, padding 2px, gap 2px, shadow regular-shadow/x-small.
+ * Divider vertical entre grupos: 4px ancho x 16px alto, stroke/soft-200. showMore
+ * (default true): divider + item icon `more-2-line` al final.
+ *
+ * ── EDICIÓN RICA (contenteditable nativo) ──
+ *   Usa `contenteditable` + `document.execCommand` (deprecated pero el camino más
+ *   liviano sin lib externa). Cubre bold/italic/underline/strike. heading /
+ *   fontSize / align / link / color / mention quedan como hooks que emiten el
+ *   comando hacia el consumer (event `action`) — la UI de selección la provee el
+ *   consumer. El foco de este componente es la TOOLBAR pixel-fiel; la lógica rica
+ *   es parcial (igual que el Angular original).
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * translan limpio y el contenteditable hereda font/tokens del global. Misma
+ * estrategia que el Angular original.
+ *
+ * GOTCHA Stencil: el `title` del host se quita en componentWillLoad (sin tooltip
+ * nativo). iOS WKWebView :active fix: cada `<sui-rich-editor-item>` trae sus
+ * listeners táctiles pasivos.
+ */
+export declare class SuiRichEditor {
+    el: HTMLElement;
+    /** Layout del toolbar (4 variantes Figma). Default `full`. */
+    layout: SuiRichEditorLayout;
+    /** Muestra el divider + botón `more-2-line` (overflow) al final. Default true. */
+    showMore: boolean;
+    /**
+     * Renderiza el área editable (contenteditable) bajo la toolbar.
+     * - false (default): solo la toolbar flotante (matchea Figma).
+     * - true: incluye un `<div contenteditable>` con placeholder.
+     */
+    editable: boolean;
+    /** Placeholder del área editable. */
+    placeholder: string;
+    /**
+     * Contenido HTML del editable. Two-way (`value` mutable + event `valueChange`).
+     * Default `''`.
+     */
+    value: string;
+    /** Label de heading mostrado en el item tipo text (layout full/compact). */
+    headingLabel: string;
+    /** Label de tamaño de fuente mostrado en el item tipo text. */
+    fontSizeLabel: string;
+    /** Emitido cada vez que se acciona un comando del toolbar. */
+    action: EventEmitter<SuiRichEditorAction>;
+    /** Emitido cuando cambia el contenido del editable. */
+    valueChange: EventEmitter<string>;
+    /** True cuando el editable está vacío (para mostrar placeholder via CSS). */
+    isEmpty: boolean;
+    /**
+     * Lista de comandos actualmente activos (bold/italic/etc.). Se mantiene como
+     * array en @State (Stencil re-renderiza por identidad; reemplazar el array
+     * dispara render). Equivale al `signal<Set>` del Angular original.
+     */
+    activeCommands: SuiRichEditorCommand[];
+    /** Ref al área editable (cuando editable=true). */
+    private editableRef?;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /** Al cambiar value desde afuera, re-sincroniza el innerHTML del editable. */
+    onValueChange(): void;
+    private get showTextGroup();
+    private get showFormatGroup();
+    private get showAlignGroup();
+    private get showSocialGroup();
+    /** Devuelve el estado del item para un comando dado. */
+    private itemState;
+    /**
+     * Maneja el click de un item del toolbar.
+     * - Comandos de formato inline (bold/italic/underline/strikeThrough) →
+     *   togglean via execCommand y reflejan el estado active.
+     * - Comandos con UI propia (heading/fontSize/align/link/comment/mention/more) →
+     *   solo emiten `action` para que el consumer abra su selector.
+     */
+    private onCommand;
+    /** Toggle del estado active de un comando (uso interno). */
+    private toggleActive;
+    /** Relee el estado de formato desde la selección actual del editable. */
+    private syncActiveFromSelection;
+    /** Input del editable → propaga value. */
+    private onEditableInput;
+    /** Selección cambia dentro del editable → refresca estado active. */
+    private onEditableSelect;
+    private emitValue;
+    private syncEditableFromValue;
+    private focusEditable;
+    private stripHtml;
+    render(): any;
+}

package/dist/types/components/sui-rich-editor-item/sui-rich-editor-item.d.ts

@@ -0,0 +1,99 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiRichEditorItemType = 'text' | 'dropdown' | 'icon' | 'color';
+export type SuiRichEditorItemState = 'default' | 'hover' | 'active';
+export type SuiRichEditorItemColor = 'gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'sky' | 'pink' | 'teal';
+/**
+ * `<sui-rich-editor-item>` — Botón de la barra de sui-rich-editor (negrita, alineación, color, tamaño de texto…).
+ *
+ * Portado 1:1 desde el SUI Angular (`sui-rich-editor/sui-rich-editor-item.*`).
+ * Misma API pública (type/state/label/icon/color/colorHex/ariaLabel/disabled →
+ * props, clicked → event), TODAS las variantes (4 tipos × 3 estados = 12
+ * variants de Figma) y mismos VALORES exactos (tokens del DS, no hex). El accent
+ * activo del DS es NARANJA brand (#fa7319 = --sui-primary-base), NO el azul de
+ * Figma. Reusa el primitivo `<sui-icon>` ya portado (glyph + caret).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node 166251:2701 "Rich Editor Items [1.1]".
+ *
+ * Sub-componente presentacional: un solo botón clickeable del toolbar. El padre
+ * `<sui-rich-editor>` lo orquesta (renderiza N items por layout) y controla el
+ * estado active según la selección del editor.
+ *
+ * Tipos:
+ *  - `text`     → label (Label/Small) + caret. Ej "Header", "14px".
+ *  - `dropdown` → glyph 20x20 + caret. Ej formato con menú.
+ *  - `icon`     → solo glyph 20x20 (SIN caret). Ej B / I / U / S / chat / link / @.
+ *  - `color`    → color dot 16x16 (plano, sin ring) + caret. Selector de color.
+ *
+ * Estados (data-sui-state, driver del SCSS):
+ *  - `default` → bg/white-0, caret down, texto sub-600, glyph sub-600.
+ *  - `hover`   → bg/weak-50 (forzable por el padre + :hover real del browser).
+ *  - `active`  → bg/weak-50, caret UP, texto strong-950, glyph primary (NARANJA).
+ *
+ * Padding por tipo (Figma confirma 4 paddings distintos):
+ *  - text     → pl-10 pr-4 py-4, gap 2px
+ *  - dropdown → p-4, gap 2px
+ *  - icon     → p-4 (sin gap)
+ *  - color    → pl-8 pr-4 py-4, gap 2px
+ *
+ * Color dot: 10 colores canon SUI (mismos del sui-color-dot), dot 16x16 plano
+ * sin ring. `colorHex` (override del preset) pinta inline. gray = neutral/gray/500
+ * (#7b7b7b acromático, NO slate-500 azulado).
+ *
+ * `scoped: true` (light DOM, NO shadow): igual estrategia que el resto del DS;
+ * los selectores `:host([data-sui-*])` y el `<sui-icon>` interno heredan el
+ * font/tokens del global sin pelear con shadow DOM.
+ *
+ * GOTCHA Stencil: el `title` del host se quita en componentWillLoad (sin tooltip
+ * nativo). iOS WKWebView :active fix: listeners pasivos en el host.
+ */
+export declare class SuiRichEditorItem {
+    el: HTMLElement;
+    /** Tipo de item. Default `icon` (caso más común en el toolbar). */
+    type: SuiRichEditorItemType;
+    /** Estado visual. El padre lo setea según la selección activa del editor. Default `default`. */
+    state: SuiRichEditorItemState;
+    /** Label del item tipo `text` (ej. "Header", "14px"). Default `''`. */
+    label: string;
+    /**
+     * Nombre RemixIcon del glyph (tipos `icon` y `dropdown`). Ej. 'bold', 'italic',
+     * 'underline', 'strikethrough', 'align-left', 'chat-1-line', 'link', 'at-line',
+     * 'more-2-line'. Default `''`.
+     */
+    icon: string;
+    /** Color preset del dot (tipo `color`). Default `gray`. */
+    color: SuiRichEditorItemColor;
+    /** Hex custom del dot (tipo `color`) — override del preset. Default `null`. */
+    colorHex: string | null;
+    /** aria-label override (útil para items icon-only). Default `''`. */
+    ariaLabel: string;
+    /** Deshabilita el item (sin pointer events, sin emit). Default `false`. */
+    disabled: boolean;
+    /** Click del item (no emite si disabled). */
+    clicked: EventEmitter<void>;
+    /** True cuando el caret apunta hacia arriba (active en text/dropdown/color). */
+    private get caretUp();
+    /** Nombre del icono del caret según el estado. */
+    private get caretIcon();
+    /** True para tipos que muestran caret (text, dropdown, color — NO icon). */
+    private get hasCaret();
+    /** True para mostrar el glyph principal (icon, dropdown). */
+    private get hasIcon();
+    private onClick;
+    /**
+     * Nombre del consumer. `ariaLabel` está atado al atributo `aria-label` del host,
+     * pero el nombre va en el `<button>` interno (lo que recibe el foco): se guarda
+     * aquí y el atributo se quita del host, que no tiene rol (un `aria-label` en un
+     * elemento genérico no se anuncia).
+     */
+    private nombre;
+    componentWillLoad(): void;
+    onAriaLabelChange(v: string | null): void;
+    /**
+     * iOS WKWebView fix: listeners PASIVOS en el host (homólogo del `SuiToque` del
+     * Angular). La presencia del touchstart engage el touch pipeline; el touchend
+     * suelta el foco del botón interno. Pasivos para no frenar el scroll.
+     */
+    alTocar(): void;
+    alSoltar(event: TouchEvent): void;
+    render(): any;
+}