@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-circular-progress-bar/sui-circular-progress-bar.css

@@ -0,0 +1,95 @@
+@charset "UTF-8";
+/* ═══ SUI Circular Progress Bar — SUI Design System 2.0 ════════════════════════════
+ * Port 1:1 del Angular homologado (master-pedidos). Specs pulled de
+ * Figma 8p1k72aKKvzJV4XcvPS4VO node 466:4652.
+ *   - track  bg/soft-200      #ebebeb → --sui-bg-soft-200
+ *   - fill   primary-base del Figma (#335cff) → --sui-state-information-base
+ *            (el DS de este proyecto tiene --sui-primary-base NARANJA, por eso
+ *            el azul del DS se obtiene del token state-information).
+ *   - texto  text/strong-950  #171717 → --sui-text-strong-950
+ *   - Label centrado: left/right 12px + top calc(50% − lineHeight/2).
+ *   - Size 48 NO lleva texto (Figma 466:4745 sólo renderiza el anillo).
+ *   - Stroke = valor canónico por size (0.08·size para 56–80, 0.14·size para 48).
+ *   - Arco con extremos planos (butt) — ver el .tsx.
+ * ════════════════════════════════════════════════════════════════════════ */
+:host {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  box-sizing: border-box;
+}
+
+.sui-circular-progress-bar__svg {
+  display: block;
+}
+
+.sui-circular-progress-bar__track {
+  stroke: var(--sui-bg-soft-200, #ebebeb);
+}
+
+/* Fill default = blue del DS (state-information). La transición del arco NO está
+   en Figma (estático) — convención del proyecto, off bajo reduced-motion. */
+.sui-circular-progress-bar__fill {
+  stroke: var(--sui-state-information-base, #335cff);
+  transition: stroke-dashoffset var(--sui-motion-duration-base, 300ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+/* ── Color variants (Blue/Red/Orange/Green del DS + purple extra del proyecto) ── */
+:host([data-sui-color=green]) .sui-circular-progress-bar__fill {
+  stroke: var(--sui-state-success-base, #1fc16b);
+}
+
+:host([data-sui-color=orange]) .sui-circular-progress-bar__fill {
+  stroke: var(--sui-state-warning-base, #fa7319);
+}
+
+:host([data-sui-color=red]) .sui-circular-progress-bar__fill {
+  stroke: var(--sui-state-error-base, #fb3748);
+}
+
+:host([data-sui-color=purple]) .sui-circular-progress-bar__fill {
+  stroke: var(--sui-state-feature-base, #7d52f4);
+}
+
+/* ── Label central ─────────────────────────────────────────────────────────
+ * Posición verificada en Figma (símbolos size=64 / size=80): label absolute,
+ * left 12px / right 12px, centrado horizontal, y `top: calc(50% - lineHeight/2)`
+ * para centrarlo verticalmente dentro del anillo (lh20 → 10px; lh16 → 8px).
+ * El inset horizontal SIEMPRE es 12px — sólo cambia la escala tipográfica.
+ */
+.sui-circular-progress-bar__label {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  /* Centrado vertical: top = 50% − (lineHeight / 2). Label/Small lh20 → 10px. */
+  top: calc(50% - 10px);
+  text-align: center;
+  color: var(--sui-text-strong-950, #171717);
+  /* Label/Small: Inter Medium 14 / lh20 / tracking -0.6% */
+  font-family: var(--sui-font-sans);
+  font-size: var(--sui-type-label-sm-size, 14px);
+  font-weight: var(--sui-type-label-sm-weight, 500);
+  line-height: var(--sui-type-label-sm-line, 20px);
+  letter-spacing: var(--sui-type-label-sm-spacing, -0.006em);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+  font-optical-sizing: auto;
+  pointer-events: none;
+}
+
+/* Size 56 → Label/X Small (12 / lh16 / tracking 0). Sólo cambia la tipografía
+ * y el offset vertical (lh16 → 8px); el inset horizontal sigue siendo 12px. */
+.sui-circular-progress-bar__label--compact {
+  top: calc(50% - 8px);
+  font-size: var(--sui-type-label-xs-size, 12px);
+  line-height: var(--sui-type-label-xs-line, 16px);
+  letter-spacing: var(--sui-type-label-xs-spacing, 0);
+}
+
+/* Reduced motion — desactivar la transición del arco */
+@media (prefers-reduced-motion: reduce) {
+  .sui-circular-progress-bar__fill {
+    transition: none;
+  }
+}

package/dist/collection/components/sui-circular-progress-bar/sui-circular-progress-bar.js

@@ -0,0 +1,274 @@
+import { Host, h } from "@stencil/core";
+/**
+ * `<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 class SuiCircularProgressBar {
+    constructor() {
+        /** Valor 0–100 (clamp interno). Default 0. */
+        this.value = 0;
+        /** Diámetro exterior en px: 48 | 56 | 64 | 72 | 80. Default 64. */
+        this.size = 64;
+        /** Color del arco. Default `blue` (= azul del DS, #335cff). */
+        this.color = 'blue';
+        /** Muestra el % en el centro. Default `true`. Ignorado en size 48 (sin texto en Figma). */
+        this.number = true;
+        /** Override del grosor del anillo (px). null → valor canónico por size. */
+        this.strokeWidth = null;
+        /** `aria-label` opcional para el role=progressbar. */
+        this.ariaLabel = 'Progreso';
+    }
+    /** Valor clampeado a [0, 100]; NaN → 0. */
+    get clampedValue() {
+        const v = this.value;
+        if (Number.isNaN(v))
+            return 0;
+        return Math.max(0, Math.min(100, v));
+    }
+    /**
+     * 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).
+     */
+    get resolvedStroke() {
+        const override = this.strokeWidth;
+        if (override != null && override > 0)
+            return override;
+        // size 48: anillo más grueso (6.72px = 0.14·48). Resto: 0.08·size.
+        return this.size === 48 ? this.size * 0.14 : this.size * 0.08;
+    }
+    /** Radio del path SVG (centrado, descontando medio stroke para no clippear). */
+    get radius() {
+        return (this.size - this.resolvedStroke) / 2;
+    }
+    /** Centro del viewBox = mitad del diámetro. */
+    get center() {
+        return this.size / 2;
+    }
+    /** Circunferencia del anillo = 2πr. */
+    get circumference() {
+        return 2 * Math.PI * this.radius;
+    }
+    /** dashoffset = parte NO completada de la circunferencia. */
+    get dashOffset() {
+        const c = this.circumference;
+        return c - (this.clampedValue / 100) * c;
+    }
+    /** Texto central formateado (% entero). */
+    get label() {
+        return `${Math.round(this.clampedValue)}%`;
+    }
+    /**
+     * Muestra el texto central. Requiere `number` Y size ≥ 56: el size=48 nunca
+     * renderiza texto en Figma (anillo demasiado chico tras descontar el stroke).
+     */
+    get showLabel() {
+        return this.number && this.size >= 56;
+    }
+    /** Size 56 usa tipografía Label/X Small (12/lh16) para no desbordar. */
+    get compactLabel() {
+        return this.size < 64;
+    }
+    render() {
+        const { size, center, radius, resolvedStroke, circumference, dashOffset } = this;
+        return (h(Host, { key: '6bd823f6e04caf89097a883f70cc08d544b35e62', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": String(this.clampedValue), "aria-label": this.ariaLabel || 'Progreso', "data-sui-color": this.color, style: { width: `${size}px`, height: `${size}px` } }, h("svg", { key: '73b79e81de8536cff900a8b5d4639bc370a55cc0', class: "sui-circular-progress-bar__svg", viewBox: `0 0 ${size} ${size}`, width: size, height: size, "aria-hidden": "true" }, h("circle", { key: '2f4d54ecc7fdad8af186c624110f6aff26c2e45d', class: "sui-circular-progress-bar__track", cx: center, cy: center, r: radius, "stroke-width": resolvedStroke, fill: "none" }), h("circle", { key: '61aa56493667db1732006b2d38f01bb13b2fdef8', class: "sui-circular-progress-bar__fill", cx: center, cy: center, r: radius, "stroke-width": resolvedStroke, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset, transform: `rotate(-90 ${center} ${center})`, "stroke-linecap": "butt", fill: "none" })), this.showLabel && (h("span", { key: '03f7f4d9d0a40df94bb95f331408ade89371953d', class: {
+                'sui-circular-progress-bar__label': true,
+                'sui-circular-progress-bar__label--compact': this.compactLabel,
+            } }, this.label))));
+    }
+    static get is() { return "sui-circular-progress-bar"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-circular-progress-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-circular-progress-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor 0\u2013100 (clamp interno). Default 0."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiCircularProgressBarSize",
+                    "resolved": "48 | 56 | 64 | 72 | 80",
+                    "references": {
+                        "SuiCircularProgressBarSize": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-circular-progress-bar/sui-circular-progress-bar.tsx",
+                            "id": "src/components/sui-circular-progress-bar/sui-circular-progress-bar.tsx::SuiCircularProgressBarSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Di\u00E1metro exterior en px: 48 | 56 | 64 | 72 | 80. Default 64."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "64"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiCircularProgressBarColor",
+                    "resolved": "\"blue\" | \"green\" | \"orange\" | \"purple\" | \"red\"",
+                    "references": {
+                        "SuiCircularProgressBarColor": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-circular-progress-bar/sui-circular-progress-bar.tsx",
+                            "id": "src/components/sui-circular-progress-bar/sui-circular-progress-bar.tsx::SuiCircularProgressBarColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color del arco. Default `blue` (= azul del DS, #335cff)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "color",
+                "defaultValue": "'blue'"
+            },
+            "number": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Muestra el % en el centro. Default `true`. Ignorado en size 48 (sin texto en Figma)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "number",
+                "defaultValue": "true"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override del grosor del anillo (px). null \u2192 valor can\u00F3nico por size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "null"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`aria-label` opcional para el role=progressbar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "'Progreso'"
+            }
+        };
+    }
+}

package/dist/collection/components/sui-color-dot/sui-color-dot.css

@@ -0,0 +1,196 @@
+@charset "UTF-8";
+/* ═══ SUI Color Dot — SUI Design System 2.0 ═══════════════════════════════════════
+ * Port 1:1 del Angular homologado (master-pedidos). Specs pulled de
+ * Figma 8p1k72aKKvzJV4XcvPS4VO — node 3365:22464 "Color Dots [1.1]".
+ *
+ * Render 100% CSS — sin SVG, sin <input type="color">, sin assets. Para que se
+ * vea idéntico en iOS / Android / desktop dentro de Capacitor.
+ *
+ * Estructura:
+ *   :host (24×24, inline-block, no clickable)
+ *     └── button.sui-color-dot__inner (24×24, hit target completo)
+ *           - ::after  → el dot mismo (inset define el tamaño visible)
+ *           - ::before → ring outer 24×24 border 2px (solo cuando selected)
+ *
+ * Dot inner usa `inset` desde el button (que es 24×24):
+ *   - default:  inset 4px → 16×16
+ *   - hover:    inset 5px → 14×14 (el dot ENCOGE — Figma inset 20.83%)
+ *   - selected: inset 6px → 12×12 (deja hueco para el ring)
+ *
+ * El preset `orange` y el fallback usan el NARANJA brand (#fa7319), NO el azul
+ * de Figma. gray = neutral/gray/500 (#7b7b7b acromático), NO slate-500.
+ * ══════════════════════════════════════════════════════════════════════ */
+:host {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  vertical-align: middle;
+  /* Color del dot por variant — pasado al child via custom prop --c.
+     Fallback gray = neutral/gray/500 (#7b7b7b acromático) — Figma 3365:22464 /
+     166331:4100, NO slate-500 (#717784) que tiene shift azul. */
+  --c: var(--sui-neutral-500);
+}
+
+:host([data-sui-color=gray]) {
+  --c: var(--sui-neutral-500);
+}
+
+:host([data-sui-color=blue]) {
+  --c: var(--sui-blue-500);
+}
+
+:host([data-sui-color=orange]) {
+  --c: var(--sui-orange-500);
+}
+
+:host([data-sui-color=red]) {
+  --c: var(--sui-red-500);
+}
+
+:host([data-sui-color=green]) {
+  --c: var(--sui-green-500);
+}
+
+:host([data-sui-color=yellow]) {
+  --c: var(--sui-yellow-500);
+}
+
+:host([data-sui-color=purple]) {
+  --c: var(--sui-purple-500);
+}
+
+:host([data-sui-color=sky]) {
+  --c: var(--sui-sky-500);
+}
+
+:host([data-sui-color=pink]) {
+  --c: var(--sui-pink-500);
+}
+
+:host([data-sui-color=teal]) {
+  --c: var(--sui-teal-500);
+}
+
+/* Disabled override: dot gris pálido, ignorar color (NO opacity — state
+   uniforme, matchea Figma). El custom-hex también queda neutralizado. */
+:host([data-sui-state=disabled]) {
+  --c: var(--sui-bg-soft-200) !important;
+}
+
+.sui-color-dot__inner {
+  /* Native button reset */
+  position: relative;
+  display: block;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent; /* el bg real lo aplican ::after / ::before */
+  cursor: pointer;
+  appearance: none;
+  outline: none;
+  border-radius: 50%;
+  /* iOS WebKit: el listener touchstart (sui-color-dot.tsx) engage el touch
+     pipeline; estas dos props evitan el highlight gris nativo + el delay. */
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);
+}
+
+/* El dot mismo — un círculo interior via ::after (full 24×24 con inset que
+   define el tamaño del dot visible). Más limpio que tocar el bg del button
+   directo (que conflictaría con el outline de focus). */
+.sui-color-dot__inner::after {
+  content: "";
+  position: absolute;
+  inset: 4px; /* 24 - 8 = 16×16 default */
+  border-radius: 50%;
+  background: var(--c);
+  transition: inset var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);
+}
+
+/* Selected: dot 12×12 + ring outer 2px */
+:host([data-sui-state=selected]) .sui-color-dot__inner::after {
+  inset: 6px; /* 12×12 */
+}
+
+.sui-color-dot__inner::before {
+  /* Ring exterior: solo visible cuando selected */
+  content: "";
+  position: absolute;
+  /* Figma 3365:22565 (Blue/Selected) medido píxel a píxel: ring de diámetro
+     exterior ~18px ceñido al dot (gap ~1-2px), NO un anillo de 24 pegado al borde. */
+  inset: 3px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  transition: border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);
+}
+
+:host([data-sui-state=selected]) .sui-color-dot__inner::before {
+  border-color: var(--c);
+}
+
+/* El dot ya tiene su propio feedback; evitar cualquier scale global de
+   button:active que rompa la geometría circular. */
+.sui-color-dot__inner:active {
+  transform: none;
+}
+
+/* Hover — el dot se ACHICA (no crece). Figma 3365:22464 hover usa inset-[20.83%]
+   sobre el container 24×24 → 5px → dot 14×14. Canon = encoger en hover.
+   Dos vías:
+     · `:hover` real del browser (sobre estado default).
+     · `[data-sui-state='hover']` forzado por el consumer (testing / animación /
+       previews) — Figma define "Hover" como estado nombrado explícito. */
+:host([data-sui-state=default]) .sui-color-dot__inner:hover::after,
+:host([data-sui-state=hover]) .sui-color-dot__inner::after {
+  inset: 5px; /* 24 - 10 = 14×14 (Figma inset 20.83%) */
+}
+
+/* Focus visible — ring outline accesibilidad. Usa el color del dot mismo para
+   mantener jerarquía visual con la selección. */
+.sui-color-dot__inner:focus-visible {
+  outline: 2px solid var(--c);
+  outline-offset: 2px;
+}
+
+/* Disabled — sin pointer events, dot gris pálido */
+:host([data-sui-state=disabled]) .sui-color-dot__inner {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ─────────── Large (32) — extensión SUI (03-10-2026) ───────────
+ * Pedido del dueño: en mobile el dot de 24 queda chico para el dedo. Escala
+ * ×4/3 de las medidas de Figma, redondeada a px enteros:
+ *   default  inset 5 → dot 22    (Figma 16 ×4/3 ≈ 21)
+ *   hover    inset 7 → dot 18    (Figma 14 ×4/3 ≈ 19)
+ *   selected inset 8 → dot 16    (Figma 12 ×4/3 = 16)
+ *   anillo   inset 4 → 24, borde 2 → queda el mismo hueco de 2px con el dot */
+:host([data-sui-size=large]) {
+  width: 32px;
+  height: 32px;
+}
+
+:host([data-sui-size=large]) .sui-color-dot__inner {
+  width: 32px;
+  height: 32px;
+}
+
+:host([data-sui-size=large]) .sui-color-dot__inner::after {
+  inset: 5px;
+}
+
+:host([data-sui-size=large][data-sui-state=default]) .sui-color-dot__inner:hover::after,
+:host([data-sui-size=large][data-sui-state=hover]) .sui-color-dot__inner::after {
+  inset: 7px;
+}
+
+:host([data-sui-size=large][data-sui-state=selected]) .sui-color-dot__inner::after {
+  inset: 8px;
+}
+
+:host([data-sui-size=large]) .sui-color-dot__inner::before {
+  inset: 4px;
+}

package/dist/collection/components/sui-color-dot/sui-color-dot.data.js

@@ -0,0 +1,63 @@
+/**
+ * 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 const SUI_COLOR_DOT_COLORS = [
+    'gray',
+    'blue',
+    'orange',
+    'red',
+    'green',
+    'yellow',
+    'purple',
+    'sky',
+    'pink',
+    'teal',
+];
+/**
+ * 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 const SUI_COLOR_DOT_HEX = {
+    gray: '#7b7b7b',
+    blue: '#335cff',
+    orange: '#fa7319',
+    red: '#fb3748',
+    green: '#1fc16b',
+    yellow: '#f6b51e',
+    purple: '#7d52f4',
+    sky: '#47c2ff',
+    pink: '#fb4ba3',
+    teal: '#22d3bb',
+};
+/** Mapa inverso: hex (lowercase, 6 chars con #) → preset name. */
+export const SUI_HEX_TO_COLOR = Object.entries(SUI_COLOR_DOT_HEX).reduce((acc, [name, hex]) => {
+    acc[hex.toLowerCase()] = name;
+    return acc;
+}, {});
+/**
+ * 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 function normalizeHex(input) {
+    if (!input)
+        return null;
+    const raw = input.trim().replace(/^#/, '').toLowerCase();
+    if (/^[0-9a-f]{3}$/.test(raw)) {
+        // Expand 3-digit shorthand
+        return '#' + raw
+            .split('')
+            .map((c) => c + c)
+            .join('');
+    }
+    if (/^[0-9a-f]{6}$/.test(raw)) {
+        return '#' + raw;
+    }
+    return null;
+}