@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-drawer-footer/sui-drawer-footer.js

@@ -0,0 +1,490 @@
+import { Host, h } from "@stencil/core";
+import { resolverBotonPie, resolverLink, } from "../../utils/sui-configs";
+let siguienteId = 0;
+/**
+ * `<sui-drawer-footer>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el SUI Angular
+ * (projects/sui-design-system/src/lib/sui-drawer-footer). Misma API
+ * pública, TODAS las variantes (6), mismo comportamiento (slot leading por type,
+ * stepper dinámico, link conditional, disabled gates) y mismos VALORES exactos
+ * (tokens del DS, no hex). Reusa los compuestos/primitivos ya portados
+ * `<sui-button>`, `<sui-checkbox>`, `<sui-switch>`, `<sui-link-button>` (NO los
+ * re-implementa). El accent del DS es NARANJA brand (#fa7319 = --sui-primary-base),
+ * NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO.
+ * Component set: 4096:21416 ("Drawer Footer [1.1]") — 6 variants.
+ *   Type: stretch / basic / checkbox / toggle / stepper / link-button.
+ *
+ * Anatomy EXACT (pulled from Figma):
+ *   Container       bg-white-0 padding 20, flex items-center, border-top 1px stroke-soft-200
+ *                   width 100%, height 80.
+ *   Gap base        0 (stretch/basic), 16 (checkbox/toggle/stepper/link).
+ *
+ *   stretch         2 buttons, cada uno flex-1 (50% del width), gap 16
+ *   basic           2 buttons, alineados a la derecha (justify-end), gap 16
+ *   checkbox        Checkbox label + actions (2 buttons) a la derecha
+ *   toggle          Switch + label + actions a la derecha
+ *   stepper         dot stepper (8x8 cada uno) + actions a la derecha
+ *   link-button     Underlined link button gray/medium (14/20/-0.6%, text/sub-600)
+ *                   + actions a la derecha
+ *
+ *   Buttons         primary (filled primary-base) + secondary (stroke + bg-white).
+ *
+ * Confirmado contra Figma live (2026-05-29):
+ *   - Stepper Dot [1.1] (479:14399): gap inter-dot = 10px exacto, dots 8x8,
+ *     activo = primary-base, inactivo = bg/soft-200.
+ *
+ * API como el Angular (21-07-2026, props → objetos):
+ *   - `primaryButton` / `secondaryButton`: string (solo label) o
+ *     `SuiFooterButtonConfig { label, disabled? }`. `secondaryButton=null` (o label
+ *     vacío) lo oculta. Sin pasar: «Continuar» / «Cancelar».
+ *   - `stepper`: `{ current (0-indexed), total }`; null = 3 puntos, el primero activo.
+ *   - `link`: string (emite `linkClick`) o `SuiLinkConfig` (con href, `<a>` real y
+ *     rel automático para `_blank`). Vacío no renderiza el link.
+ *   - `size`: large (48) para el teléfono; el texto del checkbox/switch sube a 16/24.
+ *   - a11y (09-10-2026): el texto del checkbox / switch los nombra por
+ *     aria-labelledby; el stepper es progressbar con «Paso N de M».
+ *
+ * Mapeo Angular -> Stencil:
+ *   - El `model(checkboxActive)` two-way de Angular -> @Prop mutable+reflect
+ *     `checkboxActive` + @Event `checkboxActiveChange` (idiom web component).
+ *   - El `model(toggleActive)` -> @Prop mutable+reflect `toggleActive` +
+ *     @Event `toggleActiveChange`.
+ *   - Outputs `primaryClick` / `secondaryClick` / `linkClick` se conservan tal cual.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los `<sui-button>`/`<sui-checkbox>`/
+ * `<sui-switch>`/`<sui-link-button>` proyectados heredan font + tokens del global
+ * y el host puede estilar el width del button interno (stretch) sin pelear con
+ * shadow DOM. Misma estrategia que el resto del DS y que el Angular original.
+ */
+export class SuiDrawerFooter {
+    constructor() {
+        /** Variante del footer. Default `stretch`. */
+        this.type = 'stretch';
+        /** Botones del pie: `medium` 40 (default) · `large` 48 para el teléfono. */
+        this.size = 'medium';
+        /** Botón primario (filled primary) — string (solo label) o `SuiFooterButtonConfig`.
+         *  Sin pasar: «Continuar». */
+        this.primaryButton = null;
+        /** Botón secundario (stroke neutral) — string o `SuiFooterButtonConfig`.
+         *  `null` (o label vacío) lo oculta. Sin pasar: «Cancelar». */
+        this.secondaryButton = undefined;
+        // ── Type-specific props ─────────────────────────────────────────────
+        /** Label del checkbox (type='checkbox'). */
+        this.checkboxLabel = '';
+        /** Estado del checkbox (type='checkbox'). Mutable: el `model(checkboxActive)`
+         *  del Angular; emite `checkboxActiveChange` al cambiar. */
+        this.checkboxActive = false;
+        /** Label del switch (type='toggle'). */
+        this.toggleLabel = '';
+        /** Estado del switch (type='toggle'). Mutable: el `model(toggleActive)`
+         *  del Angular; emite `toggleActiveChange` al cambiar. */
+        this.toggleActive = false;
+        /** Stepper (type='stepper') — `{ current (0-indexed), total }`. `null` = 3 puntos,
+         *  el primero activo (default de Figma). */
+        this.stepper = null;
+        /** Link (type='link-button') — string (solo label, emite `linkClick`) o
+         *  `SuiLinkConfig { label, href?, target?, rel? }`. Vacío = sin link. */
+        this.link = null;
+        this.uid = `sui-drawer-footer-${++siguienteId}`;
+        this.onPrimary = (event) => {
+            if (this.primaryCfg.disabled)
+                return;
+            this.primaryClick.emit(event);
+        };
+        this.onSecondary = (event) => {
+            var _a;
+            if ((_a = this.secondaryCfg) === null || _a === void 0 ? void 0 : _a.disabled)
+                return;
+            this.secondaryClick.emit(event);
+        };
+        this.onLink = (event) => {
+            this.linkClick.emit(event.detail);
+        };
+        /** sui-checkbox emite `suiChange` con el nuevo boolean. */
+        this.onCheckbox = (event) => {
+            this.checkboxActive = event.detail;
+            this.checkboxActiveChange.emit(this.checkboxActive);
+        };
+        /** sui-switch emite `checkedChange` con el valor nuevo (patrón controlado). */
+        this.onToggle = (event) => {
+            this.toggleActive = event.detail;
+            this.toggleActiveChange.emit(this.toggleActive);
+        };
+    }
+    get primaryCfg() {
+        var _a;
+        return (_a = resolverBotonPie(this.primaryButton)) !== null && _a !== void 0 ? _a : { label: 'Continuar' };
+    }
+    get secondaryCfg() {
+        const pasado = this.secondaryButton;
+        return resolverBotonPie(pasado === undefined ? 'Cancelar' : pasado);
+    }
+    get stepperCfg() {
+        var _a;
+        return (_a = this.stepper) !== null && _a !== void 0 ? _a : { current: 0, total: 3 };
+    }
+    /** Array de índices para el stepper (mínimo 1 punto). */
+    get stepperIndexes() {
+        return Array.from({ length: Math.max(1, this.stepperCfg.total) }, (_, i) => i);
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        // shortcut: sui-button gana `large` en homolog/H1; en esta rama su tipo todavía no
+        // lo trae (el atributo llega igual). Al integrar H1 se quita el cast.
+        const btnSize = this.size;
+        const primary = this.primaryCfg;
+        const secondary = this.secondaryCfg;
+        const stepper = this.stepperCfg;
+        const link = this.type === 'link-button' ? resolverLink(this.link) : null;
+        const checkboxLabelId = `${this.uid}-checkbox-label`;
+        const toggleLabelId = `${this.uid}-toggle-label`;
+        return (h(Host, { key: '1523555e8c4f5f6f3af2a555b1bfa87783ef15a6', "data-sui-type": this.type, "data-sui-size": this.size }, this.type === 'checkbox' && (h("label", { key: 'f01137e417427fbfd3c90a66721d9826f866ea03', class: "sui-drawer-footer__inline" }, h("sui-checkbox", { key: 'a8a77012a70c69fb64d38716ebfbe6e51b5835c0', "aria-labelledby": this.checkboxLabel ? checkboxLabelId : null, checked: this.checkboxActive, onSuiChange: this.onCheckbox }), h("span", { key: '2f1240be12dc3d9e97f0b7e5869eaf92aef5a9e2', class: "sui-drawer-footer__inline-label", id: checkboxLabelId }, this.checkboxLabel))), this.type === 'toggle' && (h("label", { key: '332322d8f264a1b76987eb0dc33ef878edeaee1b', class: "sui-drawer-footer__inline" }, h("sui-switch", { key: '15b8d92a40fb48c17c8f3076862f0239405a33e1', "aria-labelledby": this.toggleLabel ? toggleLabelId : null, checked: this.toggleActive, onCheckedChange: this.onToggle }), h("span", { key: 'c871360d9ce61e0ce39be42c09541c21144238f1', class: "sui-drawer-footer__inline-label", id: toggleLabelId }, this.toggleLabel))), this.type === 'stepper' && (h("div", { key: '4649e0e545e665da6bee7b81802704876f752f05', class: "sui-drawer-footer__stepper", role: "progressbar", "aria-label": "Progreso", "aria-valuemin": 1, "aria-valuemax": stepper.total, "aria-valuenow": stepper.current + 1, "aria-valuetext": `Paso ${stepper.current + 1} de ${stepper.total}` }, this.stepperIndexes.map((i) => (h("span", { class: {
+                'sui-drawer-footer__dot': true,
+                'sui-drawer-footer__dot--active': i === stepper.current,
+            }, "aria-hidden": "true" }))))), link && (h("sui-link-button", { key: 'bfb32d1c8135da8ba7198d17186d60413c4c67aa', variant: "gray", size: "medium", underline: true, href: (_a = link.href) !== null && _a !== void 0 ? _a : null, target: (_b = link.target) !== null && _b !== void 0 ? _b : null, rel: (_c = link.rel) !== null && _c !== void 0 ? _c : null, onClicked: this.onLink }, link.label)), h("div", { key: '6e43a88f388c9d9b097f46e402ac2ea039b12424', class: "sui-drawer-footer__actions" }, secondary && (h("sui-button", { key: '11971c2700034459fa246e0d5580fe44623dc260', class: "sui-drawer-footer__btn sui-drawer-footer__btn--secondary", variant: "stroke", color: "neutral", size: btnSize, disabled: (_d = secondary.disabled) !== null && _d !== void 0 ? _d : false, onClick: this.onSecondary }, secondary.label)), h("sui-button", { key: '13d35fdd6faec19bb54791cbf199031d71846e52', class: "sui-drawer-footer__btn sui-drawer-footer__btn--primary", variant: "filled", color: "primary", size: btnSize, disabled: (_e = primary.disabled) !== null && _e !== void 0 ? _e : false, onClick: this.onPrimary }, primary.label))));
+    }
+    static get is() { return "sui-drawer-footer"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-drawer-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-drawer-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiDrawerFooterType",
+                    "resolved": "\"basic\" | \"checkbox\" | \"link-button\" | \"stepper\" | \"stretch\" | \"toggle\"",
+                    "references": {
+                        "SuiDrawerFooterType": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-drawer-footer/sui-drawer-footer.tsx",
+                            "id": "src/components/sui-drawer-footer/sui-drawer-footer.tsx::SuiDrawerFooterType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variante del footer. Default `stretch`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'stretch'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiDrawerFooterSize",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {
+                        "SuiDrawerFooterSize": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-drawer-footer/sui-drawer-footer.tsx",
+                            "id": "src/components/sui-drawer-footer/sui-drawer-footer.tsx::SuiDrawerFooterSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Botones del pie: `medium` 40 (default) \u00B7 `large` 48 para el tel\u00E9fono."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "primaryButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiFooterButtonConfig | string | null",
+                    "resolved": "SuiFooterButtonConfig | null | string",
+                    "references": {
+                        "SuiFooterButtonConfig": {
+                            "location": "import",
+                            "path": "../../utils/sui-configs",
+                            "id": "src/utils/sui-configs.ts::SuiFooterButtonConfig",
+                            "referenceLocation": "SuiFooterButtonConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bot\u00F3n primario (filled primary) \u2014 string (solo label) o `SuiFooterButtonConfig`.\nSin pasar: \u00ABContinuar\u00BB."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-button",
+                "defaultValue": "null"
+            },
+            "secondaryButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiFooterButtonConfig | string | null | undefined",
+                    "resolved": "SuiFooterButtonConfig | null | string | undefined",
+                    "references": {
+                        "SuiFooterButtonConfig": {
+                            "location": "import",
+                            "path": "../../utils/sui-configs",
+                            "id": "src/utils/sui-configs.ts::SuiFooterButtonConfig",
+                            "referenceLocation": "SuiFooterButtonConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bot\u00F3n secundario (stroke neutral) \u2014 string o `SuiFooterButtonConfig`.\n`null` (o label vac\u00EDo) lo oculta. Sin pasar: \u00ABCancelar\u00BB."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-button",
+                "defaultValue": "undefined"
+            },
+            "checkboxLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label del checkbox (type='checkbox')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checkbox-label",
+                "defaultValue": "''"
+            },
+            "checkboxActive": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado del checkbox (type='checkbox'). Mutable: el `model(checkboxActive)`\ndel Angular; emite `checkboxActiveChange` al cambiar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checkbox-active",
+                "defaultValue": "false"
+            },
+            "toggleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label del switch (type='toggle')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggle-label",
+                "defaultValue": "''"
+            },
+            "toggleActive": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado del switch (type='toggle'). Mutable: el `model(toggleActive)`\ndel Angular; emite `toggleActiveChange` al cambiar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "toggle-active",
+                "defaultValue": "false"
+            },
+            "stepper": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ current: number; total: number } | null",
+                    "resolved": "null | { current: number; total: number; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stepper (type='stepper') \u2014 `{ current (0-indexed), total }`. `null` = 3 puntos,\nel primero activo (default de Figma)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "link": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiLinkConfig | string | null",
+                    "resolved": "SuiLinkConfig | null | string",
+                    "references": {
+                        "SuiLinkConfig": {
+                            "location": "import",
+                            "path": "../../utils/sui-configs",
+                            "id": "src/utils/sui-configs.ts::SuiLinkConfig",
+                            "referenceLocation": "SuiLinkConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link (type='link-button') \u2014 string (solo label, emite `linkClick`) o\n`SuiLinkConfig { label, href?, target?, rel? }`. Vac\u00EDo = sin link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "link",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "primaryClick",
+                "name": "primaryClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click del bot\u00F3n primario (no se emite si est\u00E1 deshabilitado)."
+                },
+                "complexType": {
+                    "original": "globalThis.Event",
+                    "resolved": "Event",
+                    "references": {
+                        "globalThis": {
+                            "location": "global",
+                            "id": "global::globalThis"
+                        }
+                    }
+                }
+            }, {
+                "method": "secondaryClick",
+                "name": "secondaryClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click del bot\u00F3n secundario (no se emite si est\u00E1 deshabilitado)."
+                },
+                "complexType": {
+                    "original": "globalThis.Event",
+                    "resolved": "Event",
+                    "references": {
+                        "globalThis": {
+                            "location": "global",
+                            "id": "global::globalThis"
+                        }
+                    }
+                }
+            }, {
+                "method": "linkClick",
+                "name": "linkClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click del link button (type='link-button')."
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "checkboxActiveChange",
+                "name": "checkboxActiveChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Two-way del checkbox: emite el nuevo valor de `checkboxActive`."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "toggleActiveChange",
+                "name": "toggleActiveChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Two-way del switch: emite el nuevo valor de `toggleActive`."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/sui-drawer-header/sui-drawer-header.css

@@ -0,0 +1,181 @@
+@charset "UTF-8";
+/* SUI Drawer Header — Figma 3187:2897 (4 variants) */
+:host {
+  position: relative;
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  /* Figma container root usa overflow-clip (3187:2897) — contiene title/badge
+     muy anchos sin exceder el ancho del panel del drawer. */
+  overflow: clip;
+  padding: 20px;
+  background: var(--sui-bg-white-0);
+  font-family: var(--sui-font-sans, "Inter", system-ui, sans-serif);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+}
+
+/* ─── Size ────────────────────────────────────────────────────────────── */
+:host([data-sui-size=small]) {
+  align-items: center;
+  gap: 12px;
+}
+
+:host([data-sui-size=large]) {
+  align-items: flex-start;
+  gap: 16px;
+}
+
+/* xlarge: project extension (no-Figma) — siguiente escalón sobre large.
+   Espeja el patrón de sui-checkbox/sui-radio/sui-switch (xlarge = +Δ sobre large).
+   Escala el container (padding 20→24, gap 16→20 = mismo Δ4 de medium→large),
+   el icon-badge (48→56, padding 12→14), y la tipografía un peldaño arriba
+   (título 18/24→20/28, descripción 14/20→16/22). Mantiene align-items:flex-start
+   y la descripción visible igual que large. */
+:host([data-sui-size=xlarge]) {
+  align-items: flex-start;
+  gap: 20px;
+  padding: 24px;
+}
+
+/* ─── Leading icon (left-icon variant) ───────────────────────────────── */
+.sui-drawer-header__leading {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sui-text-sub-600);
+  /* Size=small: icon raw 24×24, sin frame */
+  width: 24px;
+  height: 24px;
+}
+
+/* Size=large/xlarge: icon-badge con border + shadow (large 48×48, xlarge 56×56) */
+.sui-drawer-header__leading--badge {
+  box-sizing: border-box;
+  width: 48px;
+  height: 48px;
+  padding: 12px;
+  border-radius: var(--sui-radius-full);
+  background: var(--sui-bg-white-0);
+  border: 1px solid var(--sui-stroke-soft-200);
+  box-shadow: var(--sui-regular-shadow-x-small);
+}
+
+/* Size=xlarge: icon-badge 56×56 (frame +8, padding 12→14, icon raw 24×24 igual) */
+:host([data-sui-size=xlarge]) .sui-drawer-header__leading--badge {
+  width: 56px;
+  height: 56px;
+  padding: 14px;
+}
+
+/* ─── Content (title + description) ──────────────────────────────────── */
+.sui-drawer-header__content {
+  flex: 1 0 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+:host([data-sui-size=small]) .sui-drawer-header__content {
+  /* Sin description en small, no gap entre filas */
+  gap: 0;
+}
+
+.sui-drawer-header__title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.sui-drawer-header__title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: -0.015em; /* -1.5% */
+  color: var(--sui-text-strong-950);
+  /* Truncate por ancho */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sui-drawer-header__description {
+  margin: 0;
+  width: 100%;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.006em; /* -0.6% */
+  color: var(--sui-text-sub-600);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Size=xlarge: tipografía un peldaño arriba de large */
+:host([data-sui-size=xlarge]) .sui-drawer-header__title {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+:host([data-sui-size=xlarge]) .sui-drawer-header__description {
+  font-size: 16px;
+  line-height: 22px;
+}
+
+/* ─── Badge estándar (string/SuiBadgeConfig → <sui-badge>) ───────────── */
+.sui-drawer-header__std-badge {
+  /* El title trunca por ancho — el badge no debe dejarse aplastar. */
+  flex-shrink: 0;
+}
+
+/* ─── Badge built-in (numero al lado del title) ──────────────────────── */
+.sui-drawer-header__badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Figma (Badge [1.1] I3187:5677): p-2 + texto w-16/lh-16 → frame 20×20 TOTAL.
+     box-sizing:border-box para que el padding NO sume al frame (sin él,
+     content-box hace footprint 24×24 = falla-patrón #9). min-width mantiene el
+     círculo 20×20 para 1 dígito y permite pill para 2+ dígitos. */
+  box-sizing: border-box;
+  min-width: 20px;
+  height: 20px;
+  padding: 2px;
+  background: var(--sui-state-error-base);
+  color: var(--sui-static-white);
+  border-radius: var(--sui-radius-full);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+/* ─── Link Button inline (Figma button=true) ─────────────────────────── */
+.sui-drawer-header__link {
+  flex-shrink: 0;
+  align-self: center;
+}
+
+/* ─── Close button trailing ──────────────────────────────────────────── */
+/* Estilo (padding 2px, radius-6, ghost icon-sub-600, hover bg-weak-50,
+   active scale, focus-visible) lo aporta <sui-compact-button variantStyle="ghost">.
+   Aquí solo se evita que se encoja en el row flex. */
+.sui-drawer-header__dismiss {
+  flex-shrink: 0;
+}
+
+/* ─── Divider (absolute bottom, 1px) ─────────────────────────────────── */
+.sui-drawer-header__divider {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  background: var(--sui-stroke-soft-200);
+}