@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,167 @@
+@charset "UTF-8";
+/* ═══════════════════════════════════════════════════════════════════════
+ *  SUI File Icon — SUI Design System 2.0
+ *
+ *  Port 1:1 del Angular homologado (master-pedidos). Specs pulled de
+ *  Figma 8p1k72aKKvzJV4XcvPS4VO — node 450:17234 ("File Format Icons [1.1]").
+ *
+ *  Visual: silueta de archivo blanca (rounded rect con esquina diagonal-cut +
+ *  borde de doblez peel) outline con stroke gris (sub-300) + badge de formato
+ *  coloreado en bottom-left mostrando la extensión.
+ *
+ *  El cuerpo SIEMPRE es blanco con stroke neutral (sub-300). Solo el badge de
+ *  formato cambia de color a través de las 9 variantes.
+ * ═════════════════════════════════════════════════════════════════════ */
+:host {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  /* Inter explícito (NO --sui-font-sans, que arranca con Satoshi): el badge es
+     Inter SemiBold en Figma, hay que forzarlo para mantener fidelidad. */
+  font-family: "Inter", var(--sui-font-sans, sans-serif);
+  font-feature-settings: "cv09" 1, "ss11" 1, "calt" 0, "liga" 0;
+  vertical-align: middle;
+  user-select: none;
+  overflow: hidden;
+  line-height: 0;
+}
+
+.sui-file-icon__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* ── Silueta de página ───────────────────────────────────────────────────
+ *  Geometría EXACT de Figma (nodes 450:17236/17237 Medium, 450:17281/17282
+ *  X-Small). El body es un rounded-rect con esquina diagonal-cut top-right; el
+ *  peel es el borde de doblez L-shaped drawn como stroke only (sin fill).
+ *
+ *  Body  = surface blanca + stroke perimetral sub-300
+ *  Peel  = borde de doblez sub-300 (stroke only)
+ *
+ *  Stroke widths size-specific (1.5px @40, 1.2px @32) — bajo los size blocks. */
+.sui-file-icon__body {
+  fill: var(--sui-bg-white-0, #ffffff);
+  stroke: var(--sui-stroke-sub-300, #d1d1d1);
+  stroke-linejoin: round;
+}
+
+.sui-file-icon__peel {
+  fill: none;
+  stroke: var(--sui-stroke-sub-300, #d1d1d1);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* ── Format badge (coloreado, bottom-left) ───────────────────────────────
+ *  Position: bottom=Npx, left=0
+ *  Padding:  2px 3px
+ *  Radius:   3px (xsmall) / 4px (medium)
+ *  Text:     Inter SemiBold uppercase, white, letter-spacing 0.02em (=2%) */
+.sui-file-icon__format {
+  position: absolute;
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  padding: 2px 3px;
+  background: var(--sui-state-faded-base, #7b7b7b);
+  /* color overridden per :host([data-sui-color]) below */
+}
+
+.sui-file-icon__format-text {
+  display: block;
+  font-weight: 600; /* Inter SemiBold */
+  color: var(--sui-static-white, #ffffff);
+  text-transform: uppercase;
+  letter-spacing: 0.02em; /* 2% — Figma 0.22px @11px / 0.176px @8.8px */
+  white-space: nowrap;
+}
+
+/* ── Sizes (verified — solo 2 de Figma) ──────────────────────────────── */
+/* X-Small 32 (node 450:17280)
+ *  format: bottom=4px, radius=3px, text 8.8px / line-height 9.6px */
+:host([data-sui-size=xsmall]) {
+  width: 32px;
+  height: 32px;
+}
+
+:host([data-sui-size=xsmall]) .sui-file-icon__body,
+:host([data-sui-size=xsmall]) .sui-file-icon__peel {
+  stroke-width: 1.2;
+}
+
+:host([data-sui-size=xsmall]) .sui-file-icon__format {
+  bottom: 4px;
+  border-radius: 3px;
+}
+
+:host([data-sui-size=xsmall]) .sui-file-icon__format-text {
+  font-size: 8.8px;
+  line-height: 9.6px;
+}
+
+/* Medium 40 (node 450:17235)
+ *  format: bottom=6px, radius=4px, text 11px / line-height 12px */
+:host([data-sui-size=medium]),
+:host(:not([data-sui-size])) {
+  width: 40px;
+  height: 40px;
+}
+
+:host([data-sui-size=medium]) .sui-file-icon__body,
+:host([data-sui-size=medium]) .sui-file-icon__peel,
+:host(:not([data-sui-size])) .sui-file-icon__body,
+:host(:not([data-sui-size])) .sui-file-icon__peel {
+  stroke-width: 1.5;
+}
+
+:host([data-sui-size=medium]) .sui-file-icon__format,
+:host(:not([data-sui-size])) .sui-file-icon__format {
+  bottom: 6px;
+  border-radius: 4px;
+}
+
+:host([data-sui-size=medium]) .sui-file-icon__format-text,
+:host(:not([data-sui-size])) .sui-file-icon__format-text {
+  font-size: 11px;
+  line-height: 12px;
+}
+
+/* ── Colors (format badge only — body queda gris) ──────────────────────── */
+:host([data-sui-color=red]) .sui-file-icon__format {
+  background: var(--sui-state-error-base, #fb3748);
+}
+
+:host([data-sui-color=orange]) .sui-file-icon__format {
+  background: var(--sui-state-warning-base, #fa7319);
+}
+
+:host([data-sui-color=yellow]) .sui-file-icon__format {
+  background: var(--sui-state-away-base, #f6b51e);
+}
+
+:host([data-sui-color=green]) .sui-file-icon__format {
+  background: var(--sui-state-success-base, #1fc16b);
+}
+
+:host([data-sui-color=teal]) .sui-file-icon__format {
+  background: var(--sui-state-verified-base, #47c2ff);
+}
+
+:host([data-sui-color=blue]) .sui-file-icon__format {
+  background: var(--sui-state-information-base, #335cff);
+}
+
+:host([data-sui-color=purple]) .sui-file-icon__format {
+  background: var(--sui-state-feature-base, #7d52f4);
+}
+
+:host([data-sui-color=pink]) .sui-file-icon__format {
+  background: var(--sui-state-highlighted-base, #fb4ba3);
+}
+
+:host([data-sui-color=gray]) .sui-file-icon__format {
+  background: var(--sui-state-faded-base, #7b7b7b);
+}

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

@@ -0,0 +1,223 @@
+import { Host, h } from "@stencil/core";
+/**
+ * `<sui-file-icon>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-file-icon/). Misma API
+ * pública (filename/extension/size/color → props), TODAS sus variantes
+ * (9 colors × 2 sizes), su comportamiento (auto-extracción de extensión +
+ * auto-detect de color desde la extensión) y sus VALORES exactos (tokens del
+ * DS, no hex sueltos).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node 450:17234 ("File Format Icons [1.1]").
+ *
+ * Visual: archivo gris (rounded-rect con esquina diagonal-cut + peel doblado)
+ * outline con stroke gris (sub-300) + badge de formato coloreado en bottom-left
+ * mostrando la extensión en uppercase blanco. El cuerpo SIEMPRE es blanco — solo
+ * el badge cambia de color a través de las 9 variantes.
+ *
+ * EXACT specs (pulled de Figma vía MCP, verified):
+ *  - Container Medium: 40×40 — X-Small: 32×32
+ *  - Body Medium (viewBox 32×40, inset 4px): rounded-rect r=6 + diagonal-cut
+ *    top-right, fill bg-white-0, stroke sub-300 @1.5px
+ *  - Body X-Small (viewBox 26×32, centered): mismo shape, r≈4.8, stroke @1.2px
+ *  - Peel = borde de doblez L-shaped (stroke only, sin fill), sub-300
+ *  - Badge Medium: bottom=6px left=0, padding 2px 3px, radius 4px, text 11/12px
+ *  - Badge X-Small: bottom=4px left=0, padding 2px 3px, radius 3px, text 8.8/9.6px
+ *  - Texto: Inter SemiBold uppercase, white, letter-spacing 0.02em
+ *
+ * Color tokens (verified via get_variable_defs) — solo el badge cambia:
+ *   Red    → --sui-state-error-base        (#fb3748)
+ *   Orange → --sui-state-warning-base       (#fa7319)
+ *   Yellow → --sui-state-away-base          (#f6b51e)
+ *   Green  → --sui-state-success-base       (#1fc16b)
+ *   Teal   → --sui-state-verified-base      (#47c2ff)
+ *   Blue   → --sui-state-information-base    (#335cff)
+ *   Purple → --sui-state-feature-base        (#7d52f4)
+ *   Pink   → --sui-state-highlighted-base    (#fb4ba3)
+ *   Gray   → --sui-state-faded-base          (#7b7b7b)
+ *
+ * El accent del DS es NARANJA brand (#fa7319). El color `blue` del Figma
+ * (state-information #335cff) se mantiene SOLO para el auto-detect de docs;
+ * `orange` mapea a --sui-state-warning-base (que también es #fa7319), NO se
+ * sustituye por azul.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * del SCSS translan limpio. Misma estrategia que sui-button / sui-icon.
+ *
+ * Props:
+ *  - filename: source para auto-extracción de extensión.
+ *  - extension: override explícito del texto de extensión mostrado.
+ *  - size: 'xsmall' (32×32) | 'medium' (40×40). Default `medium`.
+ *  - color: override explícito del color del badge. '' = auto-detect desde la
+ *    extensión; default gray para tipos desconocidos.
+ */
+export class SuiFileIcon {
+    constructor() {
+        /** Source para auto-extracción de extensión (ej. `informe.pdf`). */
+        this.filename = '';
+        /** Override explícito del texto de extensión (gana sobre `filename`). */
+        this.extension = '';
+        /** Tamaño. `xsmall` 32×32 · `medium` 40×40. Default `medium`. */
+        this.size = 'medium';
+        /** Override explícito del color del badge. '' = auto-detect desde la extensión. */
+        this.color = '';
+    }
+    /** Extensión normalizada (uppercase, sin punto inicial, máx 4 chars). */
+    get resolvedExt() {
+        const explicit = this.extension.trim().replace(/^\./, '').toUpperCase();
+        if (explicit)
+            return explicit.slice(0, 4);
+        const fname = this.filename.trim();
+        const dot = fname.lastIndexOf('.');
+        if (dot < 0 || dot === fname.length - 1)
+            return '';
+        return fname.slice(dot + 1).toUpperCase().slice(0, 4);
+    }
+    /** Color final: override explícito > auto-detect por extensión > 'gray'. */
+    get resolvedColor() {
+        if (this.color)
+            return this.color;
+        const ext = this.resolvedExt;
+        if (!ext)
+            return 'gray';
+        if (ext === 'PDF')
+            return 'red';
+        if (['DOC', 'DOCX', 'TXT', 'RTF', 'PAGES', 'ODT'].includes(ext))
+            return 'blue';
+        if (['XLS', 'XLSX', 'CSV', 'NUMB'].includes(ext) || ext.startsWith('XLS'))
+            return 'green';
+        if (['PPT', 'PPTX', 'KEY', 'ODP'].includes(ext))
+            return 'orange';
+        if (['JPG', 'JPEG', 'PNG', 'GIF', 'WEBP', 'SVG', 'HEIC', 'BMP', 'TIFF'].includes(ext))
+            return 'pink';
+        if (['MP4', 'MOV', 'AVI', 'WEBM', 'MKV', 'M4V', 'WMV'].includes(ext))
+            return 'purple';
+        if (['MP3', 'WAV', 'OGG', 'AAC', 'FLAC', 'M4A'].includes(ext))
+            return 'teal';
+        if (['ZIP', 'RAR', '7Z', 'TAR', 'GZ', 'BZ2'].includes(ext))
+            return 'yellow';
+        return 'gray';
+    }
+    render() {
+        const ext = this.resolvedExt;
+        const isXsmall = this.size === 'xsmall';
+        return (h(Host, { key: 'a8bbdcc9b019c88f9c6ab648e267b9ad9e583de8', role: "img", "data-sui-size": this.size, "data-sui-color": this.resolvedColor, "aria-label": ext ? `Archivo ${ext}` : 'Archivo' }, isXsmall ? (
+        /* 32×32 container. Body vector 26 wide, centered (x=3..29), full height.
+           Peel vector 10×10 at x=18..28, y=1..11. Geometría EXACT de Figma
+           (450:17281 body + 450:17282 peel). */
+        h("svg", { class: "sui-file-icon__svg", viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { class: "sui-file-icon__body", d: "M7.7998 0.5996H16.4707C17.5733 0.5996 18.6323 1.034 19.418 1.8076L27.1465 9.417C27.9483 10.2064 28.4004 11.285 28.4004 12.4102V27.2002C28.4003 29.5196 26.5196 31.4003 24.2002 31.4004H7.7998C5.4804 31.4003 3.5997 29.5196 3.5996 27.2002V4.7998C3.5997 2.4804 5.4804 0.5997 7.7998 0.5996Z" }), h("path", { class: "sui-file-icon__peel", d: "M18.6 1V7.8C18.6 9.5673 20.0327 11 21.8 11H28.6" }))) : (
+        /* 40×40 container. Body vector 32 wide, inset 4px (x=4..36), full height.
+           Peel vector 12.75×12.75 at x=23, y=1. Geometría EXACT de Figma
+           (450:17236 body + 450:17237 peel). */
+        h("svg", { class: "sui-file-icon__svg", viewBox: "0 0 40 40", width: "40", height: "40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { class: "sui-file-icon__body", d: "M10 0.75H20.5146C21.907 0.75 23.242 1.3035 24.2266 2.2881L33.7119 11.7734C34.6965 12.758 35.25 14.093 35.25 15.4854V34C35.25 36.8995 32.8995 39.25 30 39.25H10C7.1005 39.25 4.75 36.8995 4.75 34V6C4.75 3.1005 7.1005 0.75 10 0.75Z" }), h("path", { class: "sui-file-icon__peel", d: "M23.75 1V9C23.75 11.2091 25.5409 13 27.75 13H35.75" }))), ext && (h("span", { key: '522627e3a6af95ef47ffed1e776ccefa21fa254f', class: "sui-file-icon__format", "aria-hidden": "true" }, h("span", { key: '49c36a2afb2854ea9c45958ccbb036540c6c471e', class: "sui-file-icon__format-text" }, ext)))));
+    }
+    static get is() { return "sui-file-icon"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-file-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-file-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "filename": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Source para auto-extracci\u00F3n de extensi\u00F3n (ej. `informe.pdf`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filename",
+                "defaultValue": "''"
+            },
+            "extension": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override expl\u00EDcito del texto de extensi\u00F3n (gana sobre `filename`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "extension",
+                "defaultValue": "''"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiFileIconSize",
+                    "resolved": "\"medium\" | \"xsmall\"",
+                    "references": {
+                        "SuiFileIconSize": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-file-icon/sui-file-icon.tsx",
+                            "id": "src/components/sui-file-icon/sui-file-icon.tsx::SuiFileIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o. `xsmall` 32\u00D732 \u00B7 `medium` 40\u00D740. Default `medium`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiFileIconColor | ''",
+                    "resolved": "\"\" | \"blue\" | \"gray\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"teal\" | \"yellow\"",
+                    "references": {
+                        "SuiFileIconColor": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-file-icon/sui-file-icon.tsx",
+                            "id": "src/components/sui-file-icon/sui-file-icon.tsx::SuiFileIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override expl\u00EDcito del color del badge. '' = auto-detect desde la extensi\u00F3n."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

package/dist/collection/components/sui-file-upload/sui-file-upload.css

@@ -0,0 +1,173 @@
+@charset "UTF-8";
+/* ═══ SUI File Upload — SUI Design System 2.0 ════════════════════════════════════════
+ * Homologado con el SUI Angular (05-11-2026). Drop zone con
+ * border dashed, click-to-browse, drag-and-drop nativo HTML5.
+ * Figma 8p1k72aKKvzJV4XcvPS4VO: node 450:9410 (Default) / 450:9429 (Hover) — VERIFIED.
+ *
+ * Estados: default / hover / dragover / error / disabled
+ *   (dragover/error/disabled/focus-visible = extraFeatures, NO en Figma).
+ * Sizes: small / medium (Figma-exact) / large / xlarge (extensión de proyecto).
+ *
+ * El accent del DS es NARANJA brand (#fa7319), NO el azul de Figma.
+ * El host es el dropzone (click + drag/drop); el control de teclado es el botón
+ * interno «Buscar archivo» (el host NO lleva role=button ni tabindex).
+ * ════════════════════════════════════════════════════════════════════════ */
+:host {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* Figma: gap=20px (node 450:9410). */
+  gap: 20px;
+  /* Fluido (extensión SUI, 03-10-2026): Figma lo dibuja de 400, pero en un
+     formulario o un modal tiene que llenar la columna. Para un ancho fijo, se
+     lo pone el consumer al host. */
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+  font-family: var(--sui-font-sans, sans-serif);
+  /* Figma: 1px dashed --sui-stroke-sub-300 (#d1d1d1). */
+  border: 1px dashed var(--sui-stroke-sub-300, #d1d1d1);
+  border-radius: var(--sui-radius-12, 12px);
+  background: var(--sui-bg-white-0, #fff);
+  cursor: pointer;
+  transition: border-color var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1)), background var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+/* ── Sizes (padding) ───────────────────────────────────────────────────────
+ *  medium = Figma-exact (padding 32, gap 20). small/large/xlarge = extensión de
+ *  proyecto. Escala lineal: padding +8px / gap +4px por step. */
+:host([data-sui-size=small]) {
+  padding: 24px;
+  gap: 16px;
+}
+
+:host([data-sui-size=medium]) {
+  padding: 32px;
+}
+
+:host([data-sui-size=large]) {
+  padding: 40px;
+  gap: 24px;
+}
+
+:host([data-sui-size=xlarge]) {
+  padding: 48px;
+  gap: 28px;
+}
+
+/* ── States ────────────────────────────────────────────────────────────────
+ *  Hover (Figma node 450:9429): bg -> weak-50, border SE MANTIENE sub-300. */
+:host(:hover:not([data-sui-state=disabled])) {
+  background: var(--sui-bg-weak-50, #f7f7f7);
+}
+
+/* El foco de teclado vive en el botón interno (el host ya no es role=button). */
+:host(:has(:focus-visible)) {
+  outline: none;
+  border-color: var(--sui-stroke-strong-950, #171717);
+  box-shadow: 0 0 0 2px var(--sui-bg-white-0, #fff), 0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, 0.1607843137));
+}
+
+/* dragover — extraFeature (no en Figma): border + bg primary (naranja brand). */
+:host([data-sui-state=dragover]) {
+  border-color: var(--sui-primary-base, #fa7319);
+  background: var(--sui-primary-alpha-10, rgba(250, 115, 25, 0.1019607843));
+}
+
+/* error — extraFeature (no en Figma): border + bg error. */
+:host([data-sui-state=error]) {
+  border-color: var(--sui-state-error-base, #fb3748);
+  background: var(--sui-state-error-lighter, #ffebec);
+}
+
+:host([data-sui-state=disabled]) {
+  cursor: not-allowed;
+  opacity: 0.5;
+  background: var(--sui-bg-weak-50, #f7f7f7);
+}
+
+/* ── Icon ──────────────────────────────────────────────────────────────────
+ *  Figma: upload-cloud-2-line 24px, color --sui-icon-sub-600, SIN círculo bg. */
+.sui-file-upload__icon {
+  color: var(--sui-icon-sub-600, #5c5c5c);
+  flex-shrink: 0;
+}
+
+:host([data-sui-state=dragover]) .sui-file-upload__icon {
+  color: var(--sui-primary-base, #fa7319);
+}
+
+:host([data-sui-state=error]) .sui-file-upload__icon {
+  color: var(--sui-state-error-base, #fb3748);
+}
+
+/* ── Text ──────────────────────────────────────────────────────────────────
+ *  Figma node 450:9367: flex column, gap=6px, text-center, w-full. */
+.sui-file-upload__text {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  width: 100%;
+}
+
+/* Title: Label/Small — Inter Medium 14/20 weight 500 letter-spacing -0.084px. */
+.sui-file-upload__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.084px;
+  color: var(--sui-text-strong-950, #171717);
+  word-break: break-word;
+}
+
+/* Subtitle: Paragraph/X-Small — Inter Regular 12/16 weight 400 letter-spacing 0. */
+.sui-file-upload__subtitle {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0;
+  color: var(--sui-text-sub-600, #5c5c5c);
+  word-break: break-word;
+}
+
+/* ── Browse File button ──────────────────────────────────────────────────────
+ *  Figma node 450:9384: el botón es h=32 (size xsmall) PERO con padding
+ *  ASIMÉTRICO px=8 py=6 — NO el p=6 uniforme del xsmall estándar. Override del
+ *  horizontal a 8px para igualar el ancho exacto del DS (metadata del nodo
+ *  reporta w=100 h=32). El selector incluye [data-sui-size='xsmall'] para ganar
+ *  especificidad sobre la regla interna del propio sui-button. */
+.sui-file-upload__browse {
+  flex-shrink: 0;
+}
+.sui-file-upload__browse[data-sui-size=xsmall] {
+  /* :host (implícito en scoped) + class + attr gana sobre la regla interna del
+     sui-button (:host([data-sui-size]) = (0,2,0)). */
+  padding: 6px 8px;
+}
+
+/* ── Error message (extraFeature — no en Figma) ────────────────────────────── */
+.sui-file-upload__error {
+  margin: -8px 0 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--sui-state-error-base, #fb3748);
+}
+
+/* ── Hidden native input (visually-hidden, no display:none para que .click() funque) ── */
+.sui-file-upload__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}