@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/types/components/sui-chart-legend-dot/sui-chart-legend-dot.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Colores canon de series de chart — SUI 2.0.
+ * Los 11 colores del set de dots (Figma 2942:9880) + `disabled`
+ * (variant extra que solo existe en el set de legends, Figma 3871:20344:
+ * mismo dot que `light-gray` pero con el label apagado en el legend).
+ */
+export type SuiChartLegendColor = 'gray' | 'light-gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'sky' | 'pink' | 'teal' | 'disabled';
+export type SuiChartLegendDotSize = 'medium' | 'small';
+/**
+ * `<sui-chart-legend-dot>` — SUI Design System 2.0.
+ *
+ * Portado 1:1 desde el SUI Angular (`sui-design-system/.../sui-chart-legend-dot`).
+ * Misma API (color/size/customColor), mismo render 100% CSS (fill + ring blanco
+ * interno + drop shadow, sin assets) y los mismos tokens.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node 2942:9880 "Chart Legend Dots [1.1]".
+ *  - 22 variants = 11 colores × 2 sizes (Medium 20 / Small 16).
+ *  - Ellipse SIEMPRE 12×12 centrado; solo cambia el container.
+ *  - Ring interno blanco 2px (`stroke/white-0`) + drop shadow `regular-shadow/small`
+ *    (sin token: literal `0 2px 4px 0 #1b1c1d0a`).
+ *
+ * `customColor` acepta cualquier CSS color y sobreescribe el preset vía la var
+ * inline `--sui-chart-legend-dot-c` (mismo patrón que `customHex` de sui-color-dot).
+ *
+ * Las constantes `SUI_CHART_LEGEND_COLORS`, `SUI_CHART_SERIES_COLORS` y
+ * `SUI_CHART_LEGEND_HEX` viven en `sui-chart-legend-dot.data.ts` (Stencil solo
+ * deja exportar la clase desde el archivo del componente).
+ *
+ * A11y: decorativo puro (aria-hidden). El significado lo lleva el label del
+ * `<sui-chart-legend>` que lo compone.
+ */
+export declare class SuiChartLegendDot {
+    /** Color canon de la serie. Default `gray` (variant default del set Figma). */
+    color: SuiChartLegendColor;
+    /** Size del container: `medium` 20×20 / `small` 16×16. El dot es 12×12 en ambos. */
+    size: SuiChartLegendDotSize;
+    /**
+     * CSS color custom (override del preset) para series fuera de la paleta
+     * canon — ej. colores de una paleta echarts propia. Si presente, ignora
+     * `color` a nivel visual.
+     */
+    customColor: string | null;
+    render(): any;
+}

package/dist/types/components/sui-chart-legend-dot/sui-chart-legend-dot.data.d.ts

@@ -0,0 +1,18 @@
+import type { SuiChartLegendColor } from './sui-chart-legend-dot';
+/** Orden EXACTO del set de Figma 2942:9880 (11 colores; `disabled` no es un color de serie). */
+export declare const SUI_CHART_LEGEND_COLORS: readonly SuiChartLegendColor[];
+/**
+ * Ciclo de auto-asignación de colores para series de chart (usado por
+ * `<sui-chart-legend>` cuando un item no trae color explícito).
+ * NO es canon de Figma (el set no define orden de series): arranca en `blue`
+ * (primera serie de facto del DS) y deja los grises al final para que los
+ * primeros N series de cualquier chart salgan con color.
+ */
+export declare const SUI_CHART_SERIES_COLORS: readonly SuiChartLegendColor[];
+/**
+ * Mapa color → hex canónico resuelto (valores de los tokens `--sui-state-*-base`
+ * que Figma bindea en cada variant). Útil para alimentar la MISMA paleta a la
+ * lib de charts del consumer (echarts `series[].color`, etc.) y que el dot de
+ * la leyenda matchee 1:1 el color pintado en la gráfica.
+ */
+export declare const SUI_CHART_LEGEND_HEX: Record<SuiChartLegendColor, string>;

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

@@ -0,0 +1,83 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiCheckboxSize = 'small' | 'medium' | 'large' | 'xlarge';
+/**
+ * `<sui-checkbox>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-checkbox/). Misma API
+ * pública (size/checked/indeterminate/disabled), mismo comportamiento
+ * (toggle por click/Space/Enter, disabled bloquea, tri-state aria-checked,
+ * iOS :active fix) y mismos VALORES exactos (tokens del DS, no hex).
+ *
+ * El `model(checked)` two-way de Angular se mapea acá a un `@Prop mutable +
+ * reflect` `checked` más un `@Event` `suiChange` (idiom web component): el
+ * consumer lee `el.checked` y escucha `suiChange.detail`. El accent del DS es
+ * NARANJA brand (#fa7319 = --sui-primary-base), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set `Checkbox` (node 227:2002).
+ *
+ * Estructura (matchea el Angular):
+ *  - Host (container outer): Medium=20×20, Small=16×16 (sin fill/border)
+ *  - bg (capa coloreada): Medium=16×16, Small=14×14, radius=4px
+ *  - box (superficie blanca interna): Medium=13×13, Small=11×11, radius=2.6px
+ *  - Check icon: SVG tick blanco 9.06×6.59px, strokeWidth=1.5
+ *  - Indeterminate dash: rectángulo blanco 8×1.5px
+ *
+ * Estados × valor:
+ *  - Unchecked default: bg-soft-200 · hover: bg-sub-300 · focus: primary-base
+ *  - Checked/indeterminate: primary-base · hover: primary-dark · focus: primary-darkest
+ *  - Disabled: bg-soft-200, sin box interno, no focusable
+ *
+ * Sizes:
+ *  - small / medium: spec Figma (227:2002)
+ *  - large / xlarge: extensión del proyecto (no-Figma), escala con Δ4px
+ *
+ * El check es un SVG inline (path custom 9.06×6.59 strokeWidth=1.5) — NO un
+ * `<sui-icon>`/RemixIcon, porque la geometría del tick es propia del DS y debe
+ * ser pixel-exact contra Figma; ningún glyph RemixIcon reproduce ese tamaño.
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-sui-*])`
+ * translan limpio y el componente hereda los tokens del global sin re-incluirlos.
+ * Misma estrategia que el resto del DS y que el Angular original.
+ */
+export declare class SuiCheckbox {
+    el: HTMLElement;
+    /** Tamaño. `small` 16 · `medium` 20 (default) · `large` 24 · `xlarge` 28. */
+    size: SuiCheckboxSize;
+    /**
+     * Estado marcado. Mutable + reflect: el consumer puede setear `el.checked`
+     * o leerlo tras un toggle. El equivalente del `model(checked)` de Angular.
+     */
+    checked: boolean;
+    /** Estado mixto (tri-state). Pinta el dash en vez del tick. Default `false`. */
+    indeterminate: boolean;
+    /** Deshabilitado: bloquea toggle, tokens grises, no focusable. Default `false`. */
+    disabled: boolean;
+    /**
+     * `false` = fuera del orden de Tab (tabindex -1). Para cuando un padre
+     * (card, label) es el control enfocable y este checkbox solo dibuja el estado.
+     */
+    focusable: boolean;
+    /**
+     * Emite el nuevo valor de `checked` en cada toggle del usuario
+     * (equivalente al `checkedChange` + `registerOnChange` de Angular).
+     */
+    suiChange: EventEmitter<boolean>;
+    /**
+     * 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;
+    /**
+     * Toggle del estado. Disabled bloquea. Como en el Angular, desde indeterminate
+     * o desde unchecked el siguiente estado es checked (se invierte `checked`);
+     * el `indeterminate` lo gobierna el consumer, no el toggle interno.
+     */
+    private toggle;
+    render(): any;
+}

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

@@ -0,0 +1,153 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiCheckboxSize } from '../sui-checkbox/sui-checkbox';
+import { type SuiBadgeConfig } from '../../utils/sui-configs';
+export type SuiCheckboxCardType = 'basic' | 'left-icon' | 'avatar' | 'card-provider' | 'brand' | 'company';
+/**
+ * `<sui-checkbox-card>` — SUI Design System (SUI Design System 2.0).
+ *
+ * COMPUESTO portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-checkbox-card/). Misma API
+ * pública (type/label/sublabel/description/icon/emoji/iconSrc/imageUrl/badge/
+ * indeterminate/disabled/checked), mismo comportamiento (toggle por
+ * click/Space/Enter, disabled bloquea, tri-state aria-checked, 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.
+ *
+ * Reusa los PRIMITIVOS ya portados: <sui-checkbox>, <sui-avatar>, <sui-icon>,
+ * <sui-emoji>. NO re-implementa el checkbox/avatar/icon/emoji.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set `Checkbox Card [1.1]`
+ * (node 261:3896) — 24 variants: 6 types × 4 states (Default/Hover/Active/Disabled).
+ *
+ * Espejo de `sui-radio-card` pero multi-select:
+ *  - Renderea un `sui-checkbox` interno (no radio dot custom)
+ *  - role="checkbox" + aria-checked: true/false/mixed (indeterminate)
+ *  - Cada card es independiente — NO requiere parent group
+ *  - Click togglea (no select-only)
+ *
+ * 6 types canon (matchea el component_set 261:3896 al 100%):
+ *  - basic: solo título + descripción + checkbox trailing
+ *  - left-icon: 40×40 circle + icon/emoji + título + checkbox
+ *  - avatar: 40×40 imagen circular (sui-avatar size=lg) + título + checkbox
+ *  - card-provider / brand / company: leading proyectado por el consumer via
+ *    `<elemento slot="leading">` (logo Mastercard/Visa, brand Spotify, logo de
+ *    company, etc.). El componente NO bundlea los assets de marca — son del
+ *    consumer. Geometría del slot por type:
+ *      card-provider → 32×24 radius-4 (formato tarjeta, Figma 265:539)
+ *      brand         → 40×40 sin frame (Figma 265:699)
+ *      company       → 40×40 redondo (Figma 265:863)
+ *
+ * EXACT (pulled from Figma 261:3921 — Basic Default, espejado a Checkbox Card):
+ *  - Container: w 360, padding 16, gap 14, radius 12, border 1px stroke-soft-200,
+ *    shadow x-small (0 1px 2px 0 #0a0d1408), bg white-0
+ *  - Active border: 1px primary-base, sin shadow (Figma 262:232)
+ *  - Title row: gap 4, items-center, flex-wrap
+ *  - Label: 14/20 medium strong-950, tracking -0.084px
+ *  - Sublabel / Description: 12/16 regular sub-600
+ *  - Checkbox slot: size 20×20 (medium), flex-shrink 0, self-start
+ *
+ * VERIFIED contra Figma 261:3896 (homologación 2026-05-29):
+ *  - Hover: bg-weak-50, sin border, sin shadow (262:210).
+ *  - Active/Checked/Indeterminate: bg-white-0, border 1px primary-base, sin shadow (262:232).
+ *  - Disabled: bg-white-0, border stroke-soft-200, sin shadow. Textos NO se
+ *    desvanecen uniforme — label→text/sub-600, sublabel+description→text/soft-400,
+ *    badge→bordeado con texto disabled-300 (262:254/258/259).
+ *  - Badge "NEW": en el proyecto usa tokens NARANJA brand (state/warning/light +
+ *    dark), coherente con radio-card/switch-card/checkbox-label — NO el azul de Figma.
+ *
+ * Form integration (web component idiom):
+ *  - El `model(checked)` two-way de Angular se mapea a un `@Prop mutable + reflect`
+ *    `checked` más un `@Event` `suiChange` (detail boolean): el consumer lee
+ *    `el.checked` y escucha `suiChange.detail`. El `[(checked)]` + CVA de Angular
+ *    se reemplaza por este patrón controlled/uncontrolled de web component.
+ *
+ * iOS WKWebView fix: touchstart/touchend en host (CLAUDE.md) — sin esto :active
+ * stickea 300-500ms en pages standalone.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los `:host([data-sui-*])` translan
+ * limpio, el slot leading proyectado se estiliza sin pelear con shadow DOM, y el
+ * componente hereda los tokens del global. Misma estrategia que el resto del DS.
+ *
+ * Slots:
+ *  - `leading` → graphic proyectado para types card-provider/brand/company
+ *    (ej. `<img slot="leading" src="...">`).
+ *
+ * Usage:
+ *   <sui-checkbox-card label="Notificaciones por email" checked></sui-checkbox-card>
+ *
+ *   <sui-checkbox-card
+ *     type="left-icon" icon="mail-line"
+ *     label="Promos semanales" description="Recibe ofertas cada lunes">
+ *   </sui-checkbox-card>
+ *
+ *   <sui-checkbox-card type="avatar" image-url="..." label="James Brown" sublabel="Admin">
+ *   </sui-checkbox-card>
+ *
+ *   <sui-checkbox-card type="brand" label="Spotify">
+ *     <img slot="leading" src="/spotify.svg" alt="" />
+ *   </sui-checkbox-card>
+ */
+export declare class SuiCheckboxCard {
+    el: HTMLElement;
+    /** Tipo del leading slot — gobierna qué se renderiza a la izquierda. Default `basic`. */
+    type: SuiCheckboxCardType;
+    /** 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 debajo del Title. */
+    description: string | null;
+    /** RemixIcon name (sin prefijo "ri-") para type='left-icon'. */
+    icon: string | null;
+    /** Emoji del catálogo SUI_EMOJI_MAP — alternativa a icon para type='left-icon'. */
+    emoji: string | null;
+    /** URL directa al emoji para type='left-icon'. Precedencia: icon > emoji > iconSrc. */
+    iconSrc: string | null;
+    /** URL de imagen para type='avatar'. Si falla, fallback a iniciales del label. */
+    imageUrl: string | null;
+    /**
+     * Badge junto al label — string shorthand (`badge="NEW"`) o `SuiBadgeConfig`
+     * (label + color/variant/size). Renderiza un `<sui-badge>` real; defaults
+     * blue/light/small (information, fiel a Figma 261:3928). `null` = sin badge.
+     */
+    badge: SuiBadgeConfig | string | null;
+    /** Tamaño del checkbox interno — lo decide el padre (componente dumb). Default `medium`. */
+    size: SuiCheckboxSize;
+    /** Indeterminate state (tri-state checkbox). Pinta aria-checked=mixed. Default `false`. */
+    indeterminate: boolean;
+    /** Deshabilitado: bloquea toggle, tokens grises, no focusable. Default `false`. */
+    disabled: boolean;
+    /**
+     * Estado marcado. Mutable + reflect: el consumer puede setear `el.checked`
+     * o leerlo tras un toggle. Equivalente del `model(checked)` de Angular.
+     */
+    checked: boolean;
+    /**
+     * Emite el nuevo valor de `checked` en cada toggle del usuario (equivalente al
+     * `checkedChange` + `registerOnChange` de Angular).
+     */
+    suiChange: EventEmitter<boolean>;
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo que hace que `:active` dispare y se libere bien.
+     */
+    onTouchStart(): void;
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd(): void;
+    onClick(event: Event): void;
+    onKeydown(event: KeyboardEvent): void;
+    /**
+     * Toggle del estado. Disabled bloquea. Cada click invierte `checked` y emite
+     * `suiChange`. El sui-checkbox interno tiene tabindex=-1 + aria-hidden y NO
+     * gobierna la a11y; el host es la fuente de verdad. Su `pointer-events:none`
+     * (SCSS) evita un doble-toggle: el click siempre cae en el host.
+     */
+    private toggle;
+    /** True si type requiere render del slot leading proyectado. */
+    private get hasProjectedLeading();
+    /** Iniciales para fallback de sui-avatar (1ras 2 palabras del label). */
+    private get initialsFromLabel();
+    /** Render del leading interno (left-icon / avatar). El proyectado va aparte. */
+    private renderLeading;
+    render(): any;
+}

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

@@ -0,0 +1,108 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type SuiBadgeConfig, type SuiLinkConfig } from '../../utils/sui-configs';
+export type SuiCheckboxLabelSize = 'medium' | 'large' | 'xlarge' | '2xlarge';
+/**
+ * `<sui-checkbox-label>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-checkbox-label/). Misma API
+ * pública (label/sublabel/description/badge/link/size/flip/disabled/
+ * indeterminate/active), TODAS las variantes/states del Figma, mismo comportamiento
+ * (click en el label togglea, click en el link NO togglea + emite evento, disabled
+ * bloquea) y mismos VALORES exactos vía tokens del DS (no hex). El accent del DS es
+ * NARANJA brand (#fa7319 = --sui-primary-base), NO el azul de Figma.
+ *
+ * Es un COMPUESTO: reusa los primitivos ya portados <sui-checkbox> y <sui-badge>.
+ * NO re-implementa la geometría del check ni del badge.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set `Checkbox Label [1.1]`
+ * (node 231:4897, 8 variants): Active(off/on) × Description(off/on) × Flip(off/on).
+ *
+ * Anatomía EXACT (pulled from Figma 231:5040 + otros):
+ *   Container         flex gap-8 items-start
+ *   Checkbox slot     20×20 (medium), shrink-0
+ *   Content column
+ *     description=off → flex gap-4 items-center: Label + Sublabel + Badge
+ *     description=on  → flex flex-col gap-10:
+ *                         Title row (gap-4 items-center): Label + Sublabel + Badge
+ *                         Description (12/16 sub-600)
+ *                         Link Button (12/16 primary-base, opcional)
+ *   Flip              swap order checkbox ↔ content (label a la izquierda) vía CSS `order`
+ *
+ * Typography (pixel-perfect):
+ *   Label sin description    Inter Regular 14/20, ls -0.084px, text/strong-950
+ *   Label con description    Inter Medium  14/20, ls -0.084px, text/strong-950
+ *   Sublabel                 Inter Regular 12/16, ls 0,        text/sub-600
+ *   Description              Inter Regular 12/16, ls 0,        text/sub-600
+ *   Badge "NEW"              sui-badge color=orange variant=light (size según `size`)
+ *   Link Button              sui-link-button variant=primary (small en medium, medium arriba)
+ *
+ * Sizes (extensión SUI 03/04-10-2026 para mobile): `medium` (Figma) control 20 ·
+ * `large` control 24, label 16 · `xlarge` control 28, label 16 · `2xlarge` fila
+ * min-height 44 (piso táctil), control 28. Sublabel y descripción quedan 12/16.
+ *
+ * El `model(active)` two-way de Angular se mapea acá a un `@Prop mutable + reflect`
+ * `active` más un `@Event` `suiChange` (idiom web component): el consumer lee
+ * `el.active` y escucha `suiChange.detail`. El `linkClick` output de Angular se
+ * mapea a `@Event suiLinkClick`. Sin ControlValueAccessor (no existe en web
+ * components) — la paridad de form se cubre con `active` reflect + `suiChange`.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los primitivos proyectados
+ * (<sui-checkbox>, <sui-badge>) heredan tokens del global y los selectores
+ * `:host([data-sui-*])` translan limpio. Misma estrategia que el Angular original.
+ *
+ * iOS WKWebView fix: touchstart/touchend en host (vía @Listen) — replica el patrón
+ * del Angular wrapper, evita el :active stuck 300-500ms en pages standalone.
+ */
+export declare class SuiCheckboxLabel {
+    el: HTMLElement;
+    /** El sui-checkbox interno es el tab stop: toma su nombre del texto del label
+     *  (aria-labelledby) y su descripción de la descripción. */
+    private readonly labelId;
+    private readonly descriptionId;
+    /** 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. Cambia el variant a "with description". */
+    description: string | null;
+    /**
+     * Badge junto al label — string shorthand (`badge="NEW"`) o `SuiBadgeConfig`
+     * (label + color/variant/size). `null` = sin badge. Default orange/light.
+     */
+    badge: SuiBadgeConfig | string | null;
+    /**
+     * Link Button bajo la descripción (solo con `description`) — string shorthand
+     * (solo label, emite `suiLinkClick`) o `SuiLinkConfig { label, href?, target?, rel? }`:
+     * con href renderiza `<a>` real; rel automático `noopener noreferrer` para `_blank`.
+     */
+    link: SuiLinkConfig | string | null;
+    /** Tamaño. `medium` (default, Figma) · `large` · `xlarge` · `2xlarge` (fila de 44). */
+    size: SuiCheckboxLabelSize;
+    /** Si true, invierte orden: [content] [checkbox] (label a la izquierda). */
+    flip: boolean;
+    /** Deshabilita el checkbox + wrapper. */
+    disabled: boolean;
+    /** Indeterminate state propagado al sui-checkbox interno. */
+    indeterminate: boolean;
+    /** Estado activo (espejo de sui-checkbox.checked). Mutable + reflect. */
+    active: boolean;
+    /** Emite el nuevo valor de `active` en cada toggle. */
+    suiChange: EventEmitter<boolean>;
+    /** Click en el Link Button (no togglea el checkbox). */
+    suiLinkClick: EventEmitter<MouseEvent>;
+    /** iOS WKWebView: la presencia del listener engage el touch pipeline (:active). */
+    onTouchStart(): void;
+    onTouchEnd(): void;
+    /** Click en cualquier parte del label togglea. Excluye el checkbox interno
+     *  (dispara su propio suiChange) y el Link Button (tiene su handler). */
+    onLabelClick(event: MouseEvent): void;
+    private onCheckboxChange;
+    private onLinkClick;
+    private setActive;
+    /** `2xlarge` es un alto de fila: el control se queda en su mayor (28). */
+    private get controlSize();
+    /** Badge por default según el tamaño (si la config no fija uno). */
+    private get badgeSize();
+    render(): any;
+}

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

@@ -0,0 +1,94 @@
+export type SuiCircularProgressBarColor = 'blue' | 'green' | 'orange' | 'red' | 'purple';
+/** Tamaños canónicos del DS (px del diámetro exterior). */
+export type SuiCircularProgressBarSize = 48 | 56 | 64 | 72 | 80;
+/**
+ * `<sui-circular-progress-bar>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-circular-progress-bar/).
+ * Misma API pública (value/size/color/number/strokeWidth/ariaLabel → props),
+ * mismas variantes/sizes/states, mismo comportamiento (clamp, geometría SVG,
+ * label central) y mismos VALORES exactos vía tokens del DS (NO hex sueltos).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — frame "Circular Progress Bar [1.1]"
+ * (node 466:4652). VERIFIED via MCP en el Angular original.
+ *
+ * EXACT specs (verificados contra Figma):
+ *  - Eje Size (5):       48 / 56 / 64 / 72 / 80 px (diámetro exterior cuadrado).
+ *  - Eje Percentage (5): 0 / 25 / 50 / 75 / 100 % en Figma; acá se acepta
+ *    cualquier valor 0–100 con clamp interno.
+ *  - Prop `number` (bool): muestra el % en el centro. Default ON (igual Figma).
+ *  - Track:   `bg/soft-200`  #ebebeb → --sui-bg-soft-200.
+ *  - Fill:    en el Figma del DS es `primary-base` #335cff (azul). En este DS
+ *             `--sui-primary-base` es NARANJA brand (#fa7319); por eso el default
+ *             `color='blue'` mapea a `--sui-state-information-base` (#335cff),
+ *             que ES el azul del DS (mismo criterio que sui-progress-bar línea).
+ *             El accent NARANJA del proyecto se obtiene con `color='orange'`.
+ *  - Texto central: `text/strong-950` #171717 → --sui-text-strong-950.
+ *             · size ≥ 64 → Label/Small (Inter Medium 14 / lh20 / tracking -0.6%).
+ *             · size 56   → Label/X Small (Inter Medium 12 / lh16 / tracking 0).
+ *             · size 48   → SIN texto (el símbolo Figma 466:4745 no expone el %;
+ *               tras descontar el stroke no queda espacio interno).
+ *             Inset horizontal = 12px para TODOS los sizes; sólo cambian la
+ *             escala tipográfica y el offset vertical (= lineHeight / 2).
+ *
+ * GEOMETRÍA VERIFICADA (de los SVG canónicos de Figma):
+ *  - [STROKE] grosor del anillo NO es ratio 1/10. Medido del BG annulus:
+ *        size 80 → 6.40px (ratio 0.08)   size 72 → 5.76px (0.08)
+ *        size 64 → 5.12px (0.08)         size 56 → 4.48px (0.08)
+ *        size 48 → 6.72px (ratio 0.14 — CASO ESPECIAL, anillo más grueso)
+ *    `resolvedStroke` devuelve estos valores; `strokeWidth` los overridea.
+ *  - [CAP] el arco usa `stroke-linecap="butt"` (extremos PLANOS) para reproducir
+ *    los cortes rectos del path relleno del SVG canónico.
+ *  - El anillo se reimplementa con dos `<circle>` + `stroke-dasharray` dinámico
+ *    en vez de los SVG efímeros de Figma → acepta cualquier %, es accesible
+ *    (role=progressbar), escala sin pérdida, sin assets externos.
+ *
+ * EXTENSIONES (no en Figma, preservadas del Angular):
+ *  - [COLOR] color='purple' es extensión del proyecto (igual que la barra
+ *    lineal); no está en el eje de color del Circular en Figma.
+ *  - [MOTION] transición del arco (stroke-dashoffset) — convención del proyecto,
+ *    desactivada bajo prefers-reduced-motion.
+ *
+ * `scoped: true` (light DOM, NO shadow): consistente con el resto de los SUI
+ * (sui-button, sui-icon). Permite que los `:host([data-sui-*])` translen limpio.
+ */
+export declare class SuiCircularProgressBar {
+    /** Valor 0–100 (clamp interno). Default 0. */
+    value: number;
+    /** Diámetro exterior en px: 48 | 56 | 64 | 72 | 80. Default 64. */
+    size: SuiCircularProgressBarSize;
+    /** Color del arco. Default `blue` (= azul del DS, #335cff). */
+    color: SuiCircularProgressBarColor;
+    /** Muestra el % en el centro. Default `true`. Ignorado en size 48 (sin texto en Figma). */
+    number: boolean;
+    /** Override del grosor del anillo (px). null → valor canónico por size. */
+    strokeWidth: number | null;
+    /** `aria-label` opcional para el role=progressbar. */
+    ariaLabel: string | null;
+    /** Valor clampeado a [0, 100]; NaN → 0. */
+    private get clampedValue();
+    /**
+     * Grosor del anillo: override explícito, o el valor canónico medido del SVG
+     * de Figma por size. Sizes 56–80 usan ratio 0.08; size 48 es especial (0.14).
+     */
+    private get resolvedStroke();
+    /** Radio del path SVG (centrado, descontando medio stroke para no clippear). */
+    private get radius();
+    /** Centro del viewBox = mitad del diámetro. */
+    private get center();
+    /** Circunferencia del anillo = 2πr. */
+    private get circumference();
+    /** dashoffset = parte NO completada de la circunferencia. */
+    private get dashOffset();
+    /** Texto central formateado (% entero). */
+    private get label();
+    /**
+     * Muestra el texto central. Requiere `number` Y size ≥ 56: el size=48 nunca
+     * renderiza texto en Figma (anillo demasiado chico tras descontar el stroke).
+     */
+    private get showLabel();
+    /** Size 56 usa tipografía Label/X Small (12/lh16) para no desbordar. */
+    private get compactLabel();
+    render(): any;
+}

package/dist/types/components/sui-color-dot/sui-color-dot.d.ts

@@ -0,0 +1,89 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiColorDotColor = 'gray' | 'blue' | 'orange' | 'red' | 'green' | 'yellow' | 'purple' | 'sky' | 'pink' | 'teal';
+export type SuiColorDotState = 'default' | 'hover' | 'selected' | 'disabled';
+/** `large` (32) es extensión SUI (03-10-2026) para tocar en mobile. */
+export type SuiColorDotSize = 'medium' | 'large';
+/**
+ * `<sui-color-dot>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-color-dot/). Misma API
+ * pública (color/customHex/state/ariaLabel → props, clicked → event), mismas
+ * variantes (10 colores × 4 estados = 40 variants de Figma), mismo comportamiento
+ * y mismos VALORES exactos (tokens del DS, no hex). El preset `orange` y el accent
+ * del DS son NARANJA brand (#fa7319 = --sui-primary-base), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node 3365:22464 "Color Dots [1.1]".
+ *
+ * Átomo individual del color picker. CSS-only — NO usa `<input type="color">`
+ * (que abre un picker nativo distinto en iOS vs Android vs desktop) ni assets
+ * SVG. Todo se pinta con `background` + ring vía pseudo-elementos.
+ *
+ * EXACT specs (Figma 3365:22464):
+ *  - 40 variants = 10 colores × 4 estados (default/hover/selected/disabled)
+ *  - Container: 24×24
+ *  - Dot inner default: 16×16 (inset 4px sobre el button 24×24)
+ *  - Dot inner hover: 14×14 (inset 5px — el dot ENCOGE en hover, Figma inset 20.83%)
+ *  - Dot inner selected: 12×12 (inset 6px) + ring outer 2px del mismo color
+ *  - Disabled: dot gris pálido (--sui-bg-soft-200), color tint descartado,
+ *    SIN opacity (state uniforme, no "current-color faded")
+ *
+ * Color tokens (Figma `neutral/gray/500` y `<color>/500`):
+ *   gray → --sui-neutral-500 (#7b7b7b acromático, NO slate-500), blue → --sui-blue-500,
+ *   orange → --sui-orange-500 (#fa7319), red → --sui-red-500, green → --sui-green-500,
+ *   yellow → --sui-yellow-500, purple → --sui-purple-500, sky → --sui-sky-500,
+ *   pink → --sui-pink-500, teal → --sui-teal-500.
+ *
+ * Custom hex: si el consumer pasa `custom-hex="#abc123"` el dot pinta con ese hex
+ * via inline `--c` (ignora el preset `color`). Útil cuando el color picker permite
+ * hex personalizado fuera de los 10 canon.
+ *
+ * Behavior: el click emite `clicked` solo si NO disabled. `state="selected"` lo
+ * setea el consumer.
+ *
+ * `scoped: true` (light DOM, NO shadow): igual estrategia que el resto del DS;
+ * los selectores `:host([data-sui-*])` y el ring vía pseudo-elementos translan
+ * limpio sin pelear con shadow DOM.
+ *
+ * iOS active fix: el hit target es un `<button>` interno con touchstart/touchend.
+ */
+export declare class SuiColorDot {
+    el: HTMLElement;
+    /** Nombre del preset. Default `gray`. Cuando se usa `customHex`, el preset no aplica visualmente. */
+    color: SuiColorDotColor;
+    /**
+     * Hex personalizado (override del preset). Si presente, el dot toma ese color
+     * via inline `--c` y el preset `color` queda sin efecto visual. Útil para
+     * previsualizar hex custom del color picker. Default `null`.
+     */
+    customHex: string | null;
+    /**
+     * Estado visual. Figma 3365:22464 define 4 estados nombrados por color:
+     *  - `default`  → dot 16×16, sin ring.
+     *  - `hover`    → dot 14×14 (achicado). El CSS `:hover` lo maneja solo en la
+     *    interacción real del browser; este valor además lo fuerza de forma
+     *    programática (testing, secuencias de animación, previews).
+     *  - `selected` → dot 12×12 + ring 2px.
+     *  - `disabled` → dot gris pálido, sin pointer events.
+     * Default `default`.
+     */
+    state: SuiColorDotState;
+    /** Tamaño. `medium` 24 (Figma, default) · `large` 32 (mobile). */
+    size: SuiColorDotSize;
+    /** aria-label override. Si vacío, cae al label por default (nombre del color o el hex). */
+    ariaLabel: string;
+    /** Emite al hacer click cuando NO está disabled. */
+    clicked: EventEmitter<void>;
+    /** Label por default: nombre del color capitalizado en español, o el hex custom. */
+    private get defaultAriaLabel();
+    /**
+     * iOS WKWebView fix sobre el button interno: la presencia del listener
+     * touchstart engage el touch pipeline; touchend.blur() empuja la deselección
+     * inmediata del :active. Sin esto, :active "stickea" 300-500ms en pages
+     * standalone.
+     */
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    private onClick;
+    render(): any;
+}

package/dist/types/components/sui-color-dot/sui-color-dot.data.d.ts

@@ -0,0 +1,24 @@
+import type { SuiColorDotColor } from './sui-color-dot';
+/**
+ * Set canon de 10 colores SUI Design System 2.0 — usable como referencia desde el consumer.
+ * Útil para iterar en pickers, badges, tag selectors.
+ */
+export declare const SUI_COLOR_DOT_COLORS: readonly SuiColorDotColor[];
+/**
+ * Mapa preset → hex canónico (Figma `<color>/500`).
+ * Útil para que el `sui-color-picker` emita hex y para que el dot trigger
+ * encuentre si un hex matchea un preset y muestre el dot estilizado.
+ *
+ * gray = neutral/gray/500 (#7b7b7b acromático) — Figma 3365:22464 / 166331:4100.
+ * NO slate-500 (#717784, shift azul). orange = #fa7319 = NARANJA brand
+ * (--sui-primary-base), NO el azul de Figma.
+ */
+export declare const SUI_COLOR_DOT_HEX: Record<SuiColorDotColor, string>;
+/** Mapa inverso: hex (lowercase, 6 chars con #) → preset name. */
+export declare const SUI_HEX_TO_COLOR: Record<string, SuiColorDotColor>;
+/**
+ * Normaliza un string hex al formato canon `#rrggbb` (lowercase, con #).
+ * Devuelve null si el input no es un hex válido (3 o 6 chars).
+ * Aceptado: '#fff', 'FFF', '#FFFFFF', 'ffffff'.
+ */
+export declare function normalizeHex(input: string | null | undefined): string | null;