@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-kbd/sui-kbd.js

@@ -0,0 +1,105 @@
+import { Host, h } from "@stencil/core";
+/**
+ * `<sui-kbd>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Shortcut chip / keyboard-key pill. Primitivo utilitario reusable fuera del
+ * command menu (también útil en tooltips, menu items, help overlays).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-kbd/). Misma API pública
+ * (un solo input `variant`), mismo comportamiento y mismos VALORES exactos
+ * (tokens del DS, no hex). El accent del DS es NARANJA brand (#fa7319), pero
+ * el kbd no usa primary — su color de texto es `--sui-text-soft-400`.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Pulled from:
+ *   - 4172:16051 (Footer shortcut con icono, bg=weak-50, padding 2px all sides)
+ *   - 4171:15855 (Search input shortcut con texto, bg=white, padding 6/2)
+ *   - 4172:16936 (Item shortcut, similar al search)
+ *
+ * EXACT specs:
+ *   Container:
+ *     height: 20px (canon h-5 fixed)
+ *     border: 1px solid var(--sui-stroke-soft-200) #ebebeb
+ *     radius: var(--sui-radius-4) 4px
+ *     gap: 2px (separa multi-keys ⌘ + K)
+ *     bg:
+ *       default → var(--sui-bg-white-0)  #ffffff (texto sobre superficies tintadas)
+ *       subtle  → var(--sui-bg-weak-50)  #f7f7f7 (icono sobre superficies blancas)
+ *   Text content:
+ *     font: subheading-xs (12/16 Inter Medium 500), uppercase
+ *     color: var(--sui-text-soft-400) #a3a3a3
+ *     letter-spacing: 0.04em (0.48px @ 12px)
+ *     padding: 0 6px (px-1.5, height fija)
+ *   Icon content (16×16):
+ *     padding: 2px all sides (variant subtle)
+ *     color: var(--sui-text-sub-600) #5c5c5c (Figma 4172:16051)
+ *
+ * `scoped: true` (light DOM, NO shadow): el `<sui-icon>` proyectado vive en
+ * light DOM y el styling escopeado por `:host` lo alcanza sin pelear con shadow
+ * DOM. Misma estrategia que el Angular original (`scoped`/sin shadow).
+ *
+ * Uso:
+ *   <sui-kbd>⌘K</sui-kbd>                                 <!-- text default -->
+ *   <sui-kbd variant="subtle">
+ *     <sui-icon name="arrow-up-line" size="16"></sui-icon>
+ *   </sui-kbd>
+ */
+export class SuiKbd {
+    constructor() {
+        /**
+         * Variante visual.
+         *  - `default` → bg white-0, padding horizontal 6px. Para keys con texto
+         *    (⌘K, ESC, ⏎) sobre superficies tintadas.
+         *  - `subtle`  → bg weak-50, padding 2px uniforme. Para contener un solo
+         *    `<sui-icon>` 16×16 sin texto, sobre superficies blancas.
+         * Default `default`.
+         */
+        this.variant = 'default';
+    }
+    render() {
+        return (h(Host, { key: '42afa0452e71f6e30e234610fc032cff38656aa7', "data-sui-variant": this.variant }, h("slot", { key: 'a848476cf63940c26437f2c6ceb687374b87e63e' })));
+    }
+    static get is() { return "sui-kbd"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-kbd.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-kbd.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiKbdVariant",
+                    "resolved": "\"default\" | \"subtle\"",
+                    "references": {
+                        "SuiKbdVariant": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-kbd/sui-kbd.tsx",
+                            "id": "src/components/sui-kbd/sui-kbd.tsx::SuiKbdVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variante visual.\n - `default` \u2192 bg white-0, padding horizontal 6px. Para keys con texto\n   (\u2318K, ESC, \u23CE) sobre superficies tintadas.\n - `subtle`  \u2192 bg weak-50, padding 2px uniforme. Para contener un solo\n   `<sui-icon>` 16\u00D716 sin texto, sobre superficies blancas.\nDefault `default`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

package/dist/collection/components/sui-key-icon/sui-key-icon.css

@@ -0,0 +1,115 @@
+@charset "UTF-8";
+/* ═══ SUI Key Icon — SUI Design System 2.0 ════════════════════════════════════════════
+ * Port 1:1 del Angular homologado (master-pedidos). Specs de
+ * Figma 8p1k72aKKvzJV4XcvPS4VO — "Key Components" → "KeyIcons [1.1]".
+ *
+ * Contenedor circular de icono. 90 combinaciones:
+ *   Style(stroke|lighter) × Color(9) × Size(5: 32/40/48/56/64).
+ *
+ * Estructura:
+ *   :host (size×size, círculo)  ← bg/border/shadow según style+color
+ *     └── sui-icon.sui-key-icon__icon (size/2, color = *-base del color)
+ *
+ * Drivers (host attrs + custom prop desde el .tsx):
+ *   --sui-key-icon-size  → ancho/alto del contenedor (px)
+ *   data-sui-style       → stroke | lighter
+ *   data-sui-color       → gray|blue|orange|red|green|yellow|purple|pink|teal
+ *
+ * El tamaño del icono interno NO viaja por CSS var: `<sui-icon>` lo recibe
+ * directo vía su prop `size` (size/2). sui-icon NO lee custom props.
+ *
+ * --sui-key-icon-fg  = color del icono (siempre el *-base del color).
+ * --sui-key-icon-bg  = bg del contenedor (white-0 en stroke; *-lighter en lighter).
+ *                      stroke = --sui-bg-white-0 (token DS-wide; adapta a nivel
+ *                      token si se agrega dark mode — no hardcodear acá).
+ * El accent naranja brand entra por color="orange" → --sui-state-warning-base
+ * (#fa7319 = --sui-primary-base), NUNCA el azul de Figma.
+ * ════════════════════════════════════════════════════════════════════════════ */
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  box-sizing: border-box; /* el border 1px de stroke NO debe agrandar el box */
+  width: var(--sui-key-icon-size, 40px);
+  height: var(--sui-key-icon-size, 40px);
+  border-radius: var(--sui-radius-full);
+  vertical-align: middle;
+  /* Defaults (gray). Cada [data-sui-color] sobrescribe fg + lighter-bg abajo. */
+  --sui-key-icon-fg: var(--sui-state-faded-base);
+  --sui-key-icon-lighter: var(--sui-state-faded-lighter);
+  background: var(--sui-key-icon-bg);
+}
+
+/* ── Color → tokens (fg = *-base, lighter = *-lighter) ────────────────────── */
+:host([data-sui-color=gray]) {
+  --sui-key-icon-fg: var(--sui-state-faded-base);
+  --sui-key-icon-lighter: var(--sui-state-faded-lighter);
+}
+
+:host([data-sui-color=blue]) {
+  --sui-key-icon-fg: var(--sui-state-information-base);
+  --sui-key-icon-lighter: var(--sui-state-information-lighter);
+}
+
+:host([data-sui-color=orange]) {
+  --sui-key-icon-fg: var(--sui-state-warning-base);
+  --sui-key-icon-lighter: var(--sui-state-warning-lighter);
+}
+
+:host([data-sui-color=red]) {
+  --sui-key-icon-fg: var(--sui-state-error-base);
+  --sui-key-icon-lighter: var(--sui-state-error-lighter);
+}
+
+:host([data-sui-color=green]) {
+  --sui-key-icon-fg: var(--sui-state-success-base);
+  --sui-key-icon-lighter: var(--sui-state-success-lighter);
+}
+
+:host([data-sui-color=yellow]) {
+  --sui-key-icon-fg: var(--sui-state-away-base);
+  --sui-key-icon-lighter: var(--sui-state-away-lighter);
+}
+
+:host([data-sui-color=purple]) {
+  --sui-key-icon-fg: var(--sui-state-feature-base);
+  --sui-key-icon-lighter: var(--sui-state-feature-lighter);
+}
+
+:host([data-sui-color=pink]) {
+  --sui-key-icon-fg: var(--sui-state-highlighted-base);
+  --sui-key-icon-lighter: var(--sui-state-highlighted-lighter);
+}
+
+:host([data-sui-color=teal]) {
+  --sui-key-icon-fg: var(--sui-state-verified-base);
+  --sui-key-icon-lighter: var(--sui-state-verified-lighter);
+}
+
+/* ── Style: stroke ─────────────────────────────────────────────────────────
+ * bg white-0 + border 1px stroke-soft-200 + drop-shadow x-small. */
+:host([data-sui-style=stroke]) {
+  --sui-key-icon-bg: var(--sui-bg-white-0);
+  border: 1px solid var(--sui-stroke-soft-200);
+  box-shadow: var(--sui-shadow-x-small);
+}
+
+/* ── Style: lighter ────────────────────────────────────────────────────────
+ * bg del *-lighter del color. Sin borde ni sombra. */
+:host([data-sui-style=lighter]) {
+  --sui-key-icon-bg: var(--sui-key-icon-lighter);
+  border: none;
+  box-shadow: none;
+}
+
+/* ── Icono interno ─────────────────────────────────────────────────────────
+ * El color del icono lo aplica `<sui-icon>` heredando currentColor; lo seteamos
+ * con `color` para que el font de RemixIcon y los SVG custom (currentColor)
+ * tomen el *-base correcto. `<sui-icon>` ya recibe size vía su prop `size`.
+ * Scoped DOM: el sui-icon vive en light DOM, se targetea por la clase. */
+.sui-key-icon__icon {
+  display: inline-flex;
+  color: var(--sui-key-icon-fg);
+  line-height: 0;
+}

package/dist/collection/components/sui-key-icon/sui-key-icon.data.js

@@ -0,0 +1,14 @@
+/** Set de los 9 colores SUI Design System 2.0 para iterar desde el consumer (previews, demos). */
+export const SUI_KEY_ICON_COLORS = [
+    'gray',
+    'blue',
+    'orange',
+    'red',
+    'green',
+    'yellow',
+    'purple',
+    'pink',
+    'teal',
+];
+/** Set de los 5 tamaños canon, para iterar desde el consumer. */
+export const SUI_KEY_ICON_SIZES = [32, 40, 48, 56, 64];

package/dist/collection/components/sui-key-icon/sui-key-icon.js

@@ -0,0 +1,199 @@
+import { Host, h } from "@stencil/core";
+/**
+ * `<sui-key-icon>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-key-icon/). Misma API
+ * pública (style/color/size + name), TODAS sus variantes/colors/sizes y los
+ * VALORES exactos vía tokens del DS (no hex). El accent del DS es NARANJA
+ * brand (#fa7319 = --sui-primary-base = --sui-state-warning-base), por eso el
+ * color `orange` mapea a `warning` y queda naranja — NUNCA el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — "Key Components" → "KeyIcons [1.1]".
+ * Contenedor circular de icono usado como leading element en list rows,
+ * content-labels, empty-states, notificaciones, etc.
+ *
+ * 90 combinaciones = Style(2: stroke|lighter) × Color(9) × Size(5: 32/40/48/56/64).
+ *
+ * ── Style ──────────────────────────────────────────────────────────────────
+ *   stroke   → bg `--sui-bg-white-0` + border 1px `--sui-stroke-soft-200`
+ *              + drop-shadow `--sui-shadow-x-small` + radius-full.
+ *              El icono interior toma el `*-base` del color.
+ *   lighter  → bg del `*-lighter` del color (sin borde, sin sombra) + radius-full.
+ *              El icono interior toma el `*-base` del color.
+ *
+ * ── Color → token map (Figma exacto) ─────────────────────────────────────────
+ *   gray   → faded        base #7b7b7b / lighter #f5f5f5
+ *   blue   → information  base #335cff / lighter #ebf1ff
+ *   orange → warning      base #fa7319 / lighter #fff3eb  (= accent naranja brand)
+ *   red    → error        base #fb3748 / lighter #ffebec
+ *   green  → success      base #1fc16b / lighter #e3f7ec
+ *   yellow → away         base #f6b51e / lighter #fffaeb
+ *   purple → feature      base #7d52f4 / lighter #efebff
+ *   pink   → highlighted  base #fb4ba3 / lighter #ffebf4
+ *   teal   → verified     base #47c2ff / lighter #ebf8ff
+ *
+ * ── Icono ────────────────────────────────────────────────────────────────────
+ *   Render SIEMPRE vía `<sui-icon name="...">` (regla del proyecto — nunca SVG
+ *   inline). Tamaño = max(20, size / 2) (Figma 263:1850: Small 32 → 20).
+ *   El `<sui-icon>` recibe su tamaño DIRECTO vía su prop `size` (NO vía custom
+ *   prop CSS — sui-icon lee solo su prop `size`, no una variable). El color del
+ *   icono = `*-base` del color, vía la custom prop `--sui-key-icon-fg`.
+ *
+ * Display-only: NO es un control de formulario y NO es clickeable (sin
+ * touchstart/touchend ni role=button — a diferencia de `<sui-button>`). Si en
+ * el futuro se vuelve interactivo habría que envolverlo en un `<button>` con
+ * el fix iOS :active.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * translan limpio y el `<sui-icon>` proyectado hereda el `@font-face` + las
+ * clases `.ri-*` del global `sui-tokens.css` sin re-incluirlas por instancia.
+ * Misma estrategia que `<sui-button>` y el Angular original.
+ *
+ * Drivers del styling (host attrs + custom prop):
+ *   data-sui-style       → stroke | lighter
+ *   data-sui-color       → gray|blue|orange|red|green|yellow|purple|pink|teal
+ *   --sui-key-icon-size  → ancho/alto del contenedor (px). El size NO se expone
+ *                          como data-attr (contrato del .spec original).
+ */
+export class SuiKeyIcon {
+    constructor() {
+        /**
+         * Estilo del contenedor. Default `stroke`. En el Angular original el input se
+         * llama `styleVariant` (para no chocar con la property `style` del HTMLElement);
+         * acá expuesto como prop `style-variant` (el attr `style` nativo tampoco
+         * debe reusarse).
+         */
+        this.styleVariant = 'stroke';
+        /** Color del set canon (9). Default `gray`. */
+        this.color = 'gray';
+        /** Tamaño del contenedor en px. Uno de 32/40/48/56/64. Default `40`. */
+        this.size = 40;
+    }
+    /** Tamaño del icono interno = 50% del contenedor, con piso de 20px
+     *  (Figma 263:1850: Small 32 → ícono 20, no 16). */
+    get iconSize() {
+        return Math.max(20, this.size / 2);
+    }
+    /** Strip del `title` nativo del host (el browser lo muestra como tooltip gris). */
+    componentDidLoad() {
+        this.el.removeAttribute('title');
+    }
+    render() {
+        return (h(Host, { key: '88bb4efee47a0231008d0116c376744c64683633', "data-sui-style": this.styleVariant, "data-sui-color": this.color, style: { '--sui-key-icon-size': `${this.size}px` } }, h("sui-icon", { key: '41af1db7433de807e17c89eb0121a05b80641016', class: "sui-key-icon__icon", name: this.name, size: this.iconSize })));
+    }
+    static get is() { return "sui-key-icon"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-key-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-key-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "RemixIcon name (sin prefijo), ej. 'mail-line', 'home-5-fill'. Se pasa a `<sui-icon>`. Requerido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "styleVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiKeyIconStyle",
+                    "resolved": "\"lighter\" | \"stroke\"",
+                    "references": {
+                        "SuiKeyIconStyle": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-key-icon/sui-key-icon.tsx",
+                            "id": "src/components/sui-key-icon/sui-key-icon.tsx::SuiKeyIconStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estilo del contenedor. Default `stroke`. En el Angular original el input se\nllama `styleVariant` (para no chocar con la property `style` del HTMLElement);\nac\u00E1 expuesto como prop `style-variant` (el attr `style` nativo tampoco\ndebe reusarse)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "style-variant",
+                "defaultValue": "'stroke'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiKeyIconColor",
+                    "resolved": "\"blue\" | \"gray\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"teal\" | \"yellow\"",
+                    "references": {
+                        "SuiKeyIconColor": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-key-icon/sui-key-icon.tsx",
+                            "id": "src/components/sui-key-icon/sui-key-icon.tsx::SuiKeyIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color del set canon (9). Default `gray`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "color",
+                "defaultValue": "'gray'"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiKeyIconSize",
+                    "resolved": "32 | 40 | 48 | 56 | 64",
+                    "references": {
+                        "SuiKeyIconSize": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-key-icon/sui-key-icon.tsx",
+                            "id": "src/components/sui-key-icon/sui-key-icon.tsx::SuiKeyIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o del contenedor en px. Uno de 32/40/48/56/64. Default `40`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "40"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/sui-link-button/sui-link-button.css

@@ -0,0 +1,206 @@
+@charset "UTF-8";
+/* ═══ SUI Link Button — SUI Design System 2.0 ══════════════════════════════════════
+ * Port 1:1 del Angular homologado (master-pedidos). Specs pulled de
+ * Figma 8p1k72aKKvzJV4XcvPS4VO — frame 168:4889 (`Link Buttons [1.1]`).
+ * Scope: 5 variants × 4 states × 2 sizes × 2 underline.
+ *
+ * El accent del DS es NARANJA brand (#fa7319 = --sui-primary-base), NO el azul
+ * de Figma. El Focus mantiene el color BASE + underline; solo el Hover oscurece.
+ *
+ * UNDERLINE: el subrayado NO usa `text-decoration` sobre el contenedor flex
+ * (.sui-link-button__el) porque text-decoration en un flex se fragmenta por
+ * cada flex item → dibuja 3 trazos sueltos icon|text|icon en hover/focus. Se
+ * reemplaza por un ::after en .sui-link-button__text, que da UNA sola línea
+ * continua bajo el texto. Matchea Figma 169:1391 / 169:1419: la clase
+ * `underline` vive solo en el <p> del texto; los iconos chevron NUNCA van
+ * subrayados.
+ * ════════════════════════════════════════════════════════════════════════ */
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: baseline;
+  /* iOS WebKit: el listener touchstart (sui-link-button.tsx) engage el touch
+     pipeline; estas dos props evitan el highlight gris nativo + el delay. */
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sui-link-button__el {
+  /* Reset native button/anchor */
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  text-decoration: none;
+  cursor: pointer;
+  color: inherit;
+  /* Anatomy */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  white-space: nowrap;
+  word-break: break-word;
+  /* Typography base (size-specific values applied via host attr) */
+  font-family: var(--sui-font-sans);
+  font-style: normal;
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+  font-optical-sizing: auto;
+  /* Color (driven by variant tokens declared below) */
+  color: var(--sui-link-button-color, currentColor);
+  /* Tactile press — project canon */
+  transition: transform var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1)), color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+.sui-link-button__el:active:not(:disabled) {
+  transform: scale(0.97);
+}
+.sui-link-button__el:hover:not(:disabled) {
+  color: var(--sui-link-button-color-hover, var(--sui-link-button-color));
+}
+.sui-link-button__el:focus-visible:not(:disabled) {
+  outline: none;
+  color: var(--sui-link-button-color-focus, var(--sui-link-button-color));
+}
+.sui-link-button__el:disabled {
+  cursor: not-allowed;
+}
+.sui-link-button__el {
+  /* Underline en hover/focus — se dibuja como ::after bajo el TEXTO únicamente
+     (matches Figma 169:1391/169:1419: el `underline` vive solo en el <p>, los
+     iconos chevron NO van subrayados). Ver bloque .sui-link-button__text. */
+}
+.sui-link-button__el:hover:not(:disabled) .sui-link-button__text::after, .sui-link-button__el:focus-visible:not(:disabled) .sui-link-button__text::after {
+  opacity: 1;
+}
+
+.sui-link-button__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sui-link-button__text {
+  /* Caja relativa para anclar la línea ::after. inline-block evita que el
+     ::after se fragmente como lo hace `text-decoration` dentro de un flex
+     (que dibuja un trazo separado por cada flex item → icon|text|icon). */
+  position: relative;
+  display: inline-block;
+  /* Línea CONTINUA bajo el texto. Reemplaza `text-decoration: underline`:
+     - no se fragmenta (es 1 pseudo-elemento, no decoration por flex-item),
+     - queda solo bajo el texto, nunca bajo los iconos (canon Figma),
+     - hereda el color del texto vía currentColor en los 4 estados. */
+}
+.sui-link-button__text::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  /* `text-underline-position: from-font` ≈ pegado al baseline; 1px thickness
+     aprox. equivale a `decoration-thickness: from-font` a 12/14px. */
+  bottom: -1px;
+  height: 1px;
+  background-color: currentColor;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* === SIZE ============================================================ */
+:host([data-sui-size=medium]) .sui-link-button__el {
+  font-size: var(--sui-type-label-sm-size, 14px); /* 14 */
+  line-height: var(--sui-type-label-sm-line, 20px); /* 20 */
+  letter-spacing: var(--sui-type-label-sm-spacing, -0.006em); /* -0.6% */
+  font-weight: var(--sui-type-label-sm-weight, 500);
+}
+
+:host([data-sui-size=medium]) .sui-link-button__icon {
+  width: 20px;
+  height: 20px;
+}
+
+:host([data-sui-size=small]) .sui-link-button__el {
+  font-size: var(--sui-type-label-xs-size, 12px); /* 12 */
+  line-height: var(--sui-type-label-xs-line, 16px); /* 16 */
+  letter-spacing: var(--sui-type-label-xs-spacing, 0); /* 0% */
+  font-weight: var(--sui-type-label-xs-weight, 500);
+}
+
+:host([data-sui-size=small]) .sui-link-button__icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Large — extension SUI (03-10-2026): texto label-md 16/24 para mobile, icono
+   20 (igual que el sui-button large). El alto es el del texto (24); el area
+   tactil la sigue poniendo el contenedor. */
+:host([data-sui-size=large]) .sui-link-button__el {
+  font-size: var(--sui-type-label-md-size, 16px); /* 16 */
+  line-height: var(--sui-type-label-md-line, 24px); /* 24 */
+  letter-spacing: var(--sui-type-label-md-spacing, -0.011em);
+  font-weight: var(--sui-type-label-md-weight, 500);
+}
+
+:host([data-sui-size=large]) .sui-link-button__icon {
+  width: 20px;
+  height: 20px;
+}
+
+/* === VARIANT (color tokens per style) =============================== */
+:host([data-sui-variant=gray]) {
+  --sui-link-button-color: var(--sui-text-sub-600);
+  --sui-link-button-color-hover: var(--sui-text-sub-600);
+  --sui-link-button-color-focus: var(--sui-text-strong-950);
+}
+
+:host([data-sui-variant=black]) {
+  --sui-link-button-color: var(--sui-text-strong-950);
+  --sui-link-button-color-hover: var(--sui-text-strong-950);
+  --sui-link-button-color-focus: var(--sui-text-strong-950);
+}
+
+/* Focus PULLED de Figma (2026-05-29): el Focus mantiene el color BASE (igual
+   que default) + underline; solo el Hover oscurece. Nodos:
+   Primary focus 169:1138 → primary-base | Error focus 169:1187 → error-base. */
+:host([data-sui-variant=primary]) {
+  --sui-link-button-color: var(--sui-primary-base);
+  --sui-link-button-color-hover: var(--sui-primary-dark);
+  --sui-link-button-color-focus: var(--sui-primary-base);
+}
+
+:host([data-sui-variant=error]) {
+  --sui-link-button-color: var(--sui-state-error-base);
+  --sui-link-button-color-hover: var(--sui-red-700);
+  --sui-link-button-color-focus: var(--sui-state-error-base);
+}
+
+:host([data-sui-variant=modifiable]) {
+  --sui-link-button-color: currentColor;
+  --sui-link-button-color-hover: currentColor;
+  --sui-link-button-color-focus: currentColor;
+}
+
+/* === STATES override ================================================ */
+/* Underline=On: línea visible desde default (bajo el texto únicamente).
+   Hover/focus ya la muestran vía el ::after de arriba; acá la fuerza desde
+   el estado base. Disabled la cancela más abajo. */
+:host([data-sui-underline]) .sui-link-button__text::after {
+  opacity: 1;
+}
+
+/* Disabled: gana sobre todo — sin línea en ningún estado. */
+:host([data-sui-disabled]) .sui-link-button__el,
+.sui-link-button__el:disabled {
+  color: var(--sui-text-disabled-300);
+  cursor: not-allowed;
+}
+:host([data-sui-disabled]) .sui-link-button__el:hover, :host([data-sui-disabled]) .sui-link-button__el:focus-visible,
+.sui-link-button__el:disabled:hover,
+.sui-link-button__el:disabled:focus-visible {
+  color: var(--sui-text-disabled-300);
+}
+:host([data-sui-disabled]) .sui-link-button__el .sui-link-button__text::after,
+.sui-link-button__el:disabled .sui-link-button__text::after {
+  opacity: 0;
+}