@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-switch-card/sui-switch-card.js

@@ -0,0 +1,490 @@
+import { Host, h } from "@stencil/core";
+import { resolverBadge } from "../../utils/sui-configs";
+let nextId = 0;
+/**
+ * `<sui-switch-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-switch-card/). Misma API
+ * pública (type/label/sublabel/description/emoji/imageUrl/badge/
+ * checked/disabled), mismas variantes/types/estados, mismo comportamiento
+ * (toggle por click/Space/Enter sobre toda la card excepto el switch, disabled
+ * bloquea, iOS :active fix) y mismos VALORES exactos (tokens del DS, no hex).
+ * El accent del DS es NARANJA brand (#fa7319 = --sui-primary-base), NO el azul
+ * de Figma.
+ *
+ * Reusa los PRIMITIVOS ya portados: `<sui-switch>`, `<sui-avatar>`,
+ * `<sui-icon>`, `<sui-emoji>`. NO re-implementa el switch/avatar/icon/emoji.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set `Switch Card [1.1]`
+ * (node 385:4733) — 6 types × 4 states (Default/Hover/Active/Disabled).
+ *
+ * Espejo de `sui-checkbox-card` pero con un `<sui-switch>` trailing en vez del
+ * checkbox:
+ *  - Renderea un `sui-switch` interno (no checkbox/radio dot)
+ *  - role="group" + aria-labelledby (título). El ÚNICO tab stop es el sui-switch
+ *    interno (nombre = título, descripción = descripción) y él solo maneja
+ *    Espacio/Enter: el host ya no escucha keydown (antes emitía dos veces por
+ *    tecla por el burbujeo del switch — revisión a11y del SUI Angular 04-10-2026)
+ *  - Cada card es independiente — NO requiere parent group
+ *  - Click en cualquier parte de la card togglea el switch
+ *
+ * 6 types canon (matchea el component_set 385:4733 al 100%):
+ *  - basic: solo título + descripción + switch trailing
+ *  - left-icon: 40×40 circle white-0 + 1px stroke-soft-200 + shadow x-small +
+ *    pad 10 + icon/emoji 20×20 + título + switch
+ *  - avatar: 40×40 imagen circular (sui-avatar size=lg) + título + switch
+ *  - 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 overflow-hidden (Figma 385:4760)
+ *      brand         → 40×40 sin frame, overflow-hidden (Figma 385:4769)
+ *      company       → 40×40 redondo, overflow-hidden (Figma 385:4778)
+ *
+ * EXACT (pulled from Figma 385:4733, verificado per type × state):
+ *  - Container: padding 16, gap 14, radius 12, border 1px stroke-soft-200,
+ *    shadow x-small (0 1px 2px 0 #0a0d1408), bg white-0, overflow hidden
+ *  - Hover (385:4787): bg-weak-50, sin border visible, sin shadow
+ *  - Active/checked (385:4840): bg-white-0, border 1px primary-base, sin shadow
+ *  - Disabled (385:4893): bg-white-0, border stroke-soft-200, sin shadow. Textos
+ *    NO uniformes — label→text/sub-600, sublabel+description→text/soft-400,
+ *    badge→bordeado con texto disabled-300
+ *  - Title row: gap 4, items-center, flex-wrap
+ *  - Label: 14/20 medium strong-950, tracking -0.084px
+ *  - Sublabel / Description: 12/16 regular sub-600
+ *  - Badge: <sui-badge> real (string o SuiBadgeConfig); default blue/light/small
+ *    = information azul fiel a Figma (antes era naranja a mano)
+ *  - Switch slot: flex-shrink 0, self-start, margin-top 2px (baseline align)
+ *
+ * Homologado con el SUI Angular (11-2026): patrón **controlled** (no muta
+ * `checked`; emite `checkedChange` y el padre escribe `checked`), `size` del
+ * switch interno, `badge` string o `SuiBadgeConfig`, `imageUrl`
+ * también para card-provider/brand/company (si no hay, cae al slot `leading`),
+ * sin hundido táctil (`:active` scale) en la card.
+ *
+ * DIVERGENCIA vs Angular: sin ControlValueAccessor; `icon`/`iconSrc` son extras
+ * del port (el Angular proyecta un sui-icon en left-icon).
+ */
+export class SuiSwitchCard {
+    constructor() {
+        /** Tipo del leading slot — gobierna qué se renderiza a la izquierda. Default `basic`. */
+        this.type = 'basic';
+        /** Título principal del card (label de la fila Title). */
+        this.label = '';
+        /** Sublabel opcional (12/16 regular sub-600 al lado del label). */
+        this.sublabel = null;
+        /** Descripción secundaria opcional debajo del Title. */
+        this.description = null;
+        /** RemixIcon name (sin prefijo "ri-") para type='left-icon'. Precedencia: icon > emoji > iconSrc. */
+        this.icon = null;
+        /** Emoji del catálogo SUI_EMOJI_MAP — alternativa a icon para type='left-icon'. */
+        this.emoji = null;
+        /** URL directa al emoji para type='left-icon'. Precedencia: icon > emoji > iconSrc. */
+        this.iconSrc = null;
+        /** URL de imagen para type='avatar'. Si falla, fallback a iniciales del label. */
+        this.imageUrl = null;
+        /** Tamaño del switch interno — lo decide el padre (D16: xlarge táctil, large computadora). Default `medium`. */
+        this.size = 'medium';
+        /**
+         * Badge junto al label: string (`'NEW'`) o `SuiBadgeConfig` (default
+         * blue/light/small). `null` = sin badge.
+         */
+        this.badge = null;
+        /** Deshabilitado: bloquea toggle, tokens grises, switch fuera del Tab. Default `false`. */
+        this.disabled = false;
+        /** Estado del switch. Controlled: no se muta solo; escucha `checkedChange` y escríbelo. */
+        this.checked = false;
+        this.labelId = `sui-switch-card-${++nextId}`;
+        this.descriptionId = `${this.labelId}-desc`;
+    }
+    /**
+     * 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() {
+        /* no-op a propósito: la presencia del binding es el fix. */
+    }
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd() {
+        this.el.blur();
+    }
+    /** Click en la card togglea; el click en el switch lo maneja el switch (sin doble disparo). */
+    onClick(event) {
+        var _a;
+        if (this.disabled)
+            return;
+        if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('sui-switch'))
+            return;
+        this.emit(!this.checked);
+    }
+    onSwitchChange(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.emit(event.detail);
+    }
+    emit(next) {
+        this.checkedChange.emit(next);
+    }
+    /** True si type requiere render del slot leading proyectado. */
+    get hasProjectedLeading() {
+        return this.type === 'card-provider' || this.type === 'brand' || this.type === 'company';
+    }
+    /** Iniciales para fallback de sui-avatar (1ras 2 palabras del label). */
+    get initialsFromLabel() {
+        const l = this.label.trim();
+        if (!l)
+            return '';
+        return l
+            .split(/\s+/)
+            .slice(0, 2)
+            .map((w) => { var _a, _b; return (_b = (_a = w[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== null && _b !== void 0 ? _b : ''; })
+            .join('');
+    }
+    /** Render del leading interno (left-icon / avatar). El proyectado va aparte. */
+    renderLeading() {
+        var _a;
+        if (this.type === 'left-icon') {
+            return (h("div", { class: "sui-switch-card__leading sui-switch-card__leading--icon", "aria-hidden": "true" }, this.icon ? (h("sui-icon", { name: this.icon, size: 20 })) : this.emoji ? (h("sui-emoji", { name: this.emoji, size: "md" })) : this.iconSrc ? (h("sui-emoji", { src: this.iconSrc, size: "full" })) : null));
+        }
+        if (this.type === 'avatar') {
+            return (h("sui-avatar", { class: "sui-switch-card__leading sui-switch-card__leading--avatar", size: "lg", src: (_a = this.imageUrl) !== null && _a !== void 0 ? _a : undefined, initials: this.initialsFromLabel }));
+        }
+        if (this.hasProjectedLeading) {
+            // Leading: imageUrl si viene, si no el slot del consumer (logo de proveedor /
+            // brand / company). El contenedor fija dimensiones + clipping por type
+            // (Figma 385:4760/4769/4778).
+            return (h("div", { class: "sui-switch-card__leading sui-switch-card__leading--slot", "aria-hidden": "true" }, this.imageUrl ? h("img", { src: this.imageUrl, alt: "" }) : h("slot", { name: "leading" })));
+        }
+        return null;
+    }
+    render() {
+        var _a, _b, _c;
+        const badge = resolverBadge(this.badge);
+        return (h(Host, { key: 'd74a7f83c8f9d7c60c22c66788df3aebc3f43300', role: "group", "aria-labelledby": this.labelId, "aria-disabled": this.disabled ? 'true' : undefined, "data-sui-type": this.type, "data-sui-checked": this.checked ? '' : undefined, "data-sui-disabled": this.disabled ? '' : undefined, "data-sui-leading-fill": this.iconSrc ? '' : undefined }, this.renderLeading(), h("div", { key: 'b408341389f332a625063cbae13307e8e2dc3ee6', class: "sui-switch-card__text" }, h("div", { key: '407f7e431720f0d80ac782c0bf52b02b00171d8f', class: "sui-switch-card__title" }, h("span", { key: 'c8e8ad7b9bae3c91b754757603db413af05a5ab1', class: "sui-switch-card__label", id: this.labelId }, this.label), this.sublabel && h("span", { key: '23ac334767870c68d7ee9c30c5b4a112cc5c994b', class: "sui-switch-card__sublabel" }, this.sublabel), badge && (h("sui-badge", { key: 'ba26d391d460840108ffc1518760c2940fdf9eaf', class: "sui-switch-card__badge", color: (_a = badge.color) !== null && _a !== void 0 ? _a : 'blue', variant: (_b = badge.variant) !== null && _b !== void 0 ? _b : 'light', size: (_c = badge.size) !== null && _c !== void 0 ? _c : 'small' }, badge.label))), this.description && (h("p", { key: '7977536ec1a9063e4710732f4323939c2bcd6d62', class: "sui-switch-card__description", id: this.descriptionId }, this.description))), h("sui-switch", { key: '47cbfbee99da980bb2184aa9fedaa6106fc7cde4', class: "sui-switch-card__switch", size: this.size, checked: this.checked, disabled: this.disabled, "aria-labelledby": this.labelId, "aria-describedby": this.description ? this.descriptionId : null, onCheckedChange: (e) => this.onSwitchChange(e) })));
+    }
+    static get is() { return "sui-switch-card"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-switch-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-switch-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiSwitchCardType",
+                    "resolved": "\"avatar\" | \"basic\" | \"brand\" | \"card-provider\" | \"company\" | \"left-icon\"",
+                    "references": {
+                        "SuiSwitchCardType": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-switch-card/sui-switch-card.tsx",
+                            "id": "src/components/sui-switch-card/sui-switch-card.tsx::SuiSwitchCardType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo del leading slot \u2014 gobierna qu\u00E9 se renderiza a la izquierda. Default `basic`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'basic'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "T\u00EDtulo principal del card (label de la fila Title)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "sublabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sublabel opcional (12/16 regular sub-600 al lado del label)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sublabel",
+                "defaultValue": "null"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Descripci\u00F3n secundaria opcional debajo del Title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "null"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "RemixIcon name (sin prefijo \"ri-\") para type='left-icon'. Precedencia: icon > emoji > iconSrc."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "null"
+            },
+            "emoji": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiEmojiName | null",
+                    "resolved": "\"bar-chart\" | \"bell\" | \"bell-with-slash\" | \"birthday-cake\" | \"busts-in-silhouette\" | \"card-index-dividers\" | \"check-mark\" | \"check-mark-button\" | \"clapping-hands\" | \"confused-face\" | \"cross-mark\" | \"delivery-truck\" | \"dollar-banknote\" | \"face-screaming\" | \"face-with-rolling-eyes\" | \"gear\" | \"glowing-star\" | \"grinning-face\" | \"grinning-face-smiling-eyes\" | \"hamburger\" | \"hammer\" | \"handshake\" | \"house\" | \"kick-scooter\" | \"label\" | \"locked\" | \"magnifying-glass-tilted-left\" | \"mobile-phone\" | \"money-bag\" | \"money-with-wings\" | \"motorcycle\" | \"neutral-face\" | \"no-entry\" | \"office-building\" | \"package\" | \"party-popper\" | \"partying-face\" | \"pensive-face\" | \"pizza\" | \"pushpin\" | \"receipt\" | \"rocket\" | \"shop\" | \"shopping-bags\" | \"shopping-cart\" | \"sleeping-face\" | \"slightly-smiling-face\" | \"smiling-face-hearts\" | \"sparkles\" | \"spiral-calendar\" | \"star-struck\" | \"taco\" | \"thinking-face\" | \"thumbs-up\" | \"unlocked\" | \"warning\" | \"waving-hand\" | \"wrench\" | null",
+                    "references": {
+                        "SuiEmojiName": {
+                            "location": "import",
+                            "path": "../sui-emoji/sui-emoji",
+                            "id": "src/components/sui-emoji/sui-emoji.tsx::SuiEmojiName",
+                            "referenceLocation": "SuiEmojiName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emoji del cat\u00E1logo SUI_EMOJI_MAP \u2014 alternativa a icon para type='left-icon'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "emoji",
+                "defaultValue": "null"
+            },
+            "iconSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL directa al emoji para type='left-icon'. Precedencia: icon > emoji > iconSrc."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-src",
+                "defaultValue": "null"
+            },
+            "imageUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL de imagen para type='avatar'. Si falla, fallback a iniciales del label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-url",
+                "defaultValue": "null"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiSwitchSize",
+                    "resolved": "\"large\" | \"medium\" | \"xlarge\"",
+                    "references": {
+                        "SuiSwitchSize": {
+                            "location": "import",
+                            "path": "../sui-switch/sui-switch",
+                            "id": "src/components/sui-switch/sui-switch.tsx::SuiSwitchSize",
+                            "referenceLocation": "SuiSwitchSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o del switch interno \u2014 lo decide el padre (D16: xlarge t\u00E1ctil, large computadora). Default `medium`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "badge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | SuiBadgeConfig | null",
+                    "resolved": "SuiBadgeConfig | null | string",
+                    "references": {
+                        "SuiBadgeConfig": {
+                            "location": "import",
+                            "path": "../../utils/sui-configs",
+                            "id": "src/utils/sui-configs.ts::SuiBadgeConfig",
+                            "referenceLocation": "SuiBadgeConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge junto al label: string (`'NEW'`) o `SuiBadgeConfig` (default\nblue/light/small). `null` = sin badge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge",
+                "defaultValue": "null"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilitado: bloquea toggle, tokens grises, switch fuera del Tab. Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado del switch. Controlled: no se muta solo; escucha `checkedChange` y escr\u00EDbelo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkedChange",
+                "name": "checkedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Intenci\u00F3n de cambio (valor invertido) al tocar la card o el switch."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "touchstart",
+                "method": "onTouchStart",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "onTouchEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/sui-switch-label/sui-switch-label.css

@@ -0,0 +1,160 @@
+@charset "UTF-8";
+/* SUI Switch Label — Figma 8p1k72aKKvzJV4XcvPS4VO, node 385:4580 (8 variants).
+   Portado 1:1 desde el Angular homologado. ESPEJO de <sui-checkbox-label>: mismo
+   layout + tipografía; solo difiere el control interno (<sui-switch> en vez de
+   <sui-checkbox>). COMPUESTO: reusa <sui-switch> y <sui-badge>.
+   Accent = NARANJA brand (#fa7319 = --sui-primary-base), NO azul Figma.
+
+   Anatomy EXACT (pulled from Figma):
+     container         flex gap-8 items-start
+     switch slot       32×20 medium nativo del sui-switch, shrink-0
+     content column    flex flex-col items-start (gap depende del variant)
+
+   align-items: flex-start mantiene la alineación del switch con la primera línea
+   del label cuando el content crece a multi-line (description).
+
+   Flip — order swap vía CSS `order` (DOM order se mantiene para a11y). */
+:host {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+  cursor: pointer;
+  font-family: var(--sui-font-sans, "Inter", system-ui, sans-serif);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* ─── Flip — invierte orden visual (label izquierda, switch derecha) ───── */
+:host([data-sui-flip]) .sui-switch-label__switch {
+  order: 2;
+}
+:host([data-sui-flip]) .sui-switch-label__content {
+  order: 1;
+}
+
+/* ─── Disabled ─────────────────────────────────────────────────────────── */
+:host([data-sui-disabled]) {
+  cursor: not-allowed;
+  /* Mutear el componente entero de forma uniforme (Figma muestra todo el bloque
+     al 50%). El switch ya recibe [disabled] y entra en su propio styling
+     disabled; el opacity adicional iguala su tono al del label. */
+}
+:host([data-sui-disabled]) .sui-switch-label__content {
+  opacity: 0.5;
+}
+:host([data-sui-disabled]) .sui-switch-label__switch {
+  opacity: 0.5;
+}
+
+/* ─── Switch slot ──────────────────────────────────────────────────────── */
+.sui-switch-label__switch {
+  flex-shrink: 0;
+  /* sui-switch size=medium ya es 32×20 nativo. No tocar dimensiones. */
+}
+
+/* ─── Content column ───────────────────────────────────────────────────── */
+.sui-switch-label__content {
+  display: flex;
+  flex: 1 0 0;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+/* Cuando hay description, el gap entre Title/Description/LinkButton es mayor. */
+:host([data-sui-with-description]) .sui-switch-label__content {
+  gap: 10px;
+}
+
+/* ─── Title row (label + sublabel + badge) ─────────────────────────────── */
+.sui-switch-label__title {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.sui-switch-label__label {
+  font-size: 14px;
+  font-weight: 400; /* Regular en variant sin description */
+  line-height: 20px;
+  /* Figma tracking -0.084px (= -0.6% de 14px). `letter-spacing` NO acepta %,
+     se hardcodea el px exacto del Figma. */
+  letter-spacing: -0.006em; /* = -0.084px a 14px y escala con el font-size */
+  color: var(--sui-text-strong-950);
+}
+
+/* Cuando hay description, el label es Medium */
+:host([data-sui-with-description]) .sui-switch-label__label {
+  font-weight: 500;
+}
+
+.sui-switch-label__sublabel {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0;
+  color: var(--sui-text-sub-600);
+}
+
+.sui-switch-label__badge {
+  /* sui-badge color=orange variant=light size=small — color de MARCA naranja
+     (NO azul state/information de SUI): el accent del DS es naranja Master
+     Pedidos. El badge NEW es accent de marca, no un mensaje informativo. */
+  flex-shrink: 0;
+}
+
+/* ─── Description ──────────────────────────────────────────────────────── */
+.sui-switch-label__description {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0;
+  color: var(--sui-text-sub-600);
+  word-break: break-word;
+}
+
+/* Link: <sui-link-button variant=primary size=small> (homologado con el SUI Angular). */
+/* ─── Tamaños large / xlarge — regla del 03-10-2026 (aprobada por el dueño) ──
+   El switch interno ya crecía (40 × 24 en large, 48 × 28 en xlarge) y el label
+   se quedaba en 14. Ahora el label sube un escalón, Paragraph/Medium 16/24 (el
+   peso sigue la regla de arriba: 400, o 500 con description). Sublabel y
+   description se quedan en 12: son texto secundario.
+   En xlarge el switch (28) es 4px más alto que la línea del label (24): el
+   contenido baja 2px para que el texto quede centrado, como en
+   sui-checkbox-label. En large switch y línea miden 24. */
+:host([data-sui-size=large]) .sui-switch-label__label,
+:host([data-sui-size=xlarge]) .sui-switch-label__label {
+  font-size: var(--sui-type-paragraph-md-size, 16px);
+  line-height: var(--sui-type-paragraph-md-line, 24px);
+  letter-spacing: var(--sui-type-paragraph-md-spacing, -0.011em);
+}
+
+:host([data-sui-size=xlarge]) .sui-switch-label__content {
+  padding-top: 2px;
+}
+
+/* ─── Tamaño 2xlarge — canon (dueño, 04-10-2026): piso táctil 44 en el teléfono ──
+   La fila sin descripción medía 28 (el switch de xlarge): el dedo no tenía 44
+   que tocar. `2xlarge` es la fila de 44: mismo switch (48 × 28) y mismo label
+   16/24 que xlarge, pero con `min-height: 44px` y todo centrado en vertical.
+   Sublabel y descripción se quedan en 12/16. Con descripción la fila ya pasa
+   de 44 y vuelve a alinearse arriba. xlarge NO cambia. */
+:host([data-sui-size="2xlarge"]) {
+  min-height: 44px;
+  align-items: center;
+}
+:host([data-sui-size="2xlarge"]) .sui-switch-label__label {
+  font-size: var(--sui-type-paragraph-md-size, 16px);
+  line-height: var(--sui-type-paragraph-md-line, 24px);
+  letter-spacing: var(--sui-type-paragraph-md-spacing, -0.011em);
+}
+
+:host([data-sui-size="2xlarge"][data-sui-with-description]) {
+  align-items: flex-start;
+}
+:host([data-sui-size="2xlarge"][data-sui-with-description]) .sui-switch-label__content {
+  padding-top: 2px;
+}