@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-flag/assets/flags/zimbabwe.svg

@@ -0,0 +1,20 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_253_4889)">
+<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F0F0F0"/>
+<path d="M22.8514 6.87197C22.2417 5.58413 21.4096 4.42242 20.4046 3.43594L11.9999 2.60864L3.59525 3.43599C3.56843 3.46228 3.54228 3.48919 3.51575 3.51577L6.872 6.87202L11.9999 7.02863L22.8514 6.87197Z" fill="#FFDA44"/>
+<path d="M3.51562 20.4842C3.55978 20.5284 3.60384 20.5726 3.64866 20.6161L12 21.3912L20.3512 20.6161C21.3665 19.6317 22.2088 18.4699 22.827 17.1801L7.30425 16.6956C5.96864 18.0312 4.42814 19.5716 3.51562 20.4842Z" fill="#FFDA44"/>
+<path d="M23.8807 10.3081L9.91309 9.91309L12.0001 12.0001C11.3819 12.6182 10.4591 13.541 9.91309 14.087L23.8734 13.7442C23.9564 13.1747 24.0001 12.5925 24.0001 12.0001C24.0001 11.4256 23.9588 10.861 23.8807 10.3081Z" fill="black"/>
+<path d="M12 0C8.72684 0 5.76031 1.31109 3.59534 3.43603H20.4047C18.2397 1.31109 15.2732 0 12 0Z" fill="#6DA544"/>
+<path d="M10.308 10.3081H23.8806C23.7094 9.09502 23.357 7.9403 22.8514 6.87207H6.87195L10.308 10.3081Z" fill="#D80027"/>
+<path d="M6.81982 17.1802H22.8271C23.3387 16.1127 23.6966 14.9579 23.8734 13.7441H10.2559C8.92521 15.0748 7.7975 16.2025 6.81982 17.1802Z" fill="#D80027"/>
+<path d="M12 23.9999C15.2463 23.9999 18.191 22.7103 20.3512 20.6161H3.6488C5.80899 22.7103 8.75368 23.9999 12 23.9999Z" fill="#6DA544"/>
+<path d="M4.28504 2.80945C4.01827 3.0336 3.76088 3.26859 3.51465 3.51473L12 12L3.51465 20.4854C3.76084 20.7315 4.01827 20.9665 4.28504 21.1906L13.4756 12L4.28504 2.80945Z" fill="black"/>
+<path d="M4.82455 8.86951L5.6015 11.2609H8.11611L6.08183 12.7389L6.85883 15.1304L4.82455 13.6524L2.79022 15.1304L3.56732 12.7389L1.53308 11.2609H4.04755L4.82455 8.86951Z" fill="#D80027"/>
+<path d="M6.96184 12.1957L4.93694 11.4783C4.93694 11.4783 4.78731 10.0747 4.77827 10.0272C4.70955 9.66515 4.39141 9.39136 4.00937 9.39136C3.57719 9.39136 3.22675 9.74175 3.22675 10.174C3.22675 10.2457 3.2372 10.3147 3.25525 10.3807L2.6875 10.9522H3.697C3.697 12 2.91512 12 2.91512 13.0435L3.34886 14.087H5.95755L6.39236 13.0435H6.39217C6.43572 12.9434 6.46216 12.8401 6.47308 12.737C6.84789 12.5854 6.96184 12.1957 6.96184 12.1957Z" fill="#FFDA44"/>
+</g>
+<defs>
+<clipPath id="clip0_253_4889">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/collection/components/sui-flag/sui-flag.css

@@ -0,0 +1,60 @@
+@charset "UTF-8";
+/* ═══ SUI Flag — SUI Design System 2.0 Country Flag wrapper ════════════════════════
+ * Port 1:1 del Angular homologado (master-pedidos).
+ *
+ * SVG vectorial circular pre-renderizado (la forma circle vive dentro del
+ * viewBox 24×24, no se aplica border-radius en CSS — ya viene bakeada).
+ *
+ * Tamaños canon (compartidos con sui-emoji para consistencia visual):
+ *   xs 16 · sm 20 · md 24 (default, native viewBox) · lg 32 · xl 48 · full
+ * ══════════════════════════════════════════════════════════════════════ */
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  vertical-align: middle;
+  line-height: 1;
+}
+
+.sui-flag__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-drag: none;
+  pointer-events: none;
+}
+
+:host([data-size=xs]) {
+  width: 16px;
+  height: 16px;
+}
+
+:host([data-size=sm]) {
+  width: 20px;
+  height: 20px;
+}
+
+:host([data-size=md]) {
+  width: 24px;
+  height: 24px;
+}
+
+:host([data-size=lg]) {
+  width: 32px;
+  height: 32px;
+}
+
+:host([data-size=xl]) {
+  width: 48px;
+  height: 48px;
+}
+
+/* full: ocupa 100% del padre — útil cuando el container ya define dims
+   (ej. un avatar wrapper o una celda fija de tabla). */
+:host([data-size=full]) {
+  width: 100%;
+  height: 100%;
+}

package/dist/collection/components/sui-flag/sui-flag.data.js

@@ -0,0 +1,277 @@
+/**
+ * Catálogo canon de banderas disponibles en el DS (262 países).
+ *
+ * Source: SUI Design System 2.0 — Country Flags (Figma node 2806:2385).
+ * Generado a partir de los assets `assets/flags/<slug>.svg` (24×24 viewBox).
+ *
+ * NO editar a mano — si se agrega/quita un SVG, regenerar con basename:
+ *   for f in assets/flags/*.svg; do basename "$f" .svg; done
+ *
+ * Separado de sui-flag.tsx porque Stencil prohíbe `export const/function/enum`
+ * junto al `@Component`. Este archivo es el punto de importación para consumers
+ * externos (stories, utilidades) que necesiten el catálogo en runtime.
+ */
+export const SUI_FLAG_NAMES = [
+    'abkhazia',
+    'afghanistan',
+    'aland-islands',
+    'albania',
+    'algeria',
+    'american-samoa',
+    'andorra',
+    'angola',
+    'anguilla',
+    'antigua-and-barbuda',
+    'argentina',
+    'armenia',
+    'aruba',
+    'australia',
+    'austria',
+    'azerbaijan',
+    'azores-islands',
+    'bahamas',
+    'bahrain',
+    'balearic-islands',
+    'bangladesh',
+    'barbados',
+    'basque-country',
+    'belarus',
+    'belgium',
+    'belize',
+    'benin',
+    'bermuda',
+    'bhutan',
+    'bolivia',
+    'bonaire',
+    'bosnia-and-herzegovina',
+    'botswana',
+    'brazil',
+    'british-columbia',
+    'british-indian-ocean-territory',
+    'british-virgin-islands',
+    'brunei',
+    'bulgaria',
+    'burkina-faso',
+    'burundi',
+    'cambodia',
+    'cameroon',
+    'canada',
+    'canary-islands',
+    'cape-verde',
+    'cayman-islands',
+    'central-african-republic',
+    'ceuta',
+    'chad',
+    'chile',
+    'china',
+    'christmas-island',
+    'cocos-island',
+    'colombia',
+    'comoros',
+    'cook-islands',
+    'corsica',
+    'costa-rica',
+    'croatia',
+    'cuba',
+    'curacao',
+    'cyprus',
+    'czech-republic',
+    'democratic-republic-of-congo',
+    'denmark',
+    'djibouti',
+    'dominica',
+    'dominican-republic',
+    'east-timor',
+    'ecuador',
+    'egypt',
+    'el-salvador',
+    'england',
+    'equatorial-guinea',
+    'eritrea',
+    'estonia',
+    'ethiopia',
+    'european-union',
+    'falkland-islands',
+    'faroe-islands',
+    'fiji',
+    'finland',
+    'france',
+    'french-polynesia',
+    'gabon',
+    'galapagos-islands',
+    'gambia',
+    'georgia',
+    'germany',
+    'ghana',
+    'gibraltar',
+    'greece',
+    'greenland',
+    'grenada',
+    'guam',
+    'guatemala',
+    'guernsey',
+    'guinea-bissau',
+    'guinea',
+    'guyana',
+    'haiti',
+    'hawaii',
+    'honduras',
+    'hong-kong',
+    'hungary',
+    'iceland',
+    'india',
+    'indonesia',
+    'iran',
+    'iraq',
+    'ireland',
+    'isle-of-man',
+    'israel',
+    'italy',
+    'ivory-coast',
+    'jamaica',
+    'japan',
+    'jersey',
+    'jordan',
+    'kazakhstan',
+    'kenya',
+    'kiribati',
+    'kosovo',
+    'kuwait',
+    'kyrgyzstan',
+    'laos',
+    'latvia',
+    'lebanon',
+    'lesotho',
+    'liberia',
+    'libya',
+    'liechtenstein',
+    'lithuania',
+    'luxembourg',
+    'macao',
+    'madagascar',
+    'madeira',
+    'malawi',
+    'malaysia',
+    'maldives',
+    'mali',
+    'malta',
+    'marshall-island',
+    'martinique',
+    'mauritania',
+    'mauritus',
+    'melilla',
+    'mexico',
+    'micronesia',
+    'moldova',
+    'monaco',
+    'mongolia',
+    'montenegro',
+    'montserrat',
+    'morocco',
+    'mozambique',
+    'myanmar',
+    'namibia',
+    'nato',
+    'nauru',
+    'nepal',
+    'netherlands',
+    'new-zealand',
+    'nicaragua',
+    'niger',
+    'nigeria',
+    'niue',
+    'norfolk-island',
+    'north-korea',
+    'northern-cyprus',
+    'northern-marianas-islands',
+    'norway',
+    'oman',
+    'orkney-islands',
+    'ossetia',
+    'pakistan',
+    'palau',
+    'palestine',
+    'panama',
+    'papua-new-guinea',
+    'paraguay',
+    'peru',
+    'philippines',
+    'pitcairn-islands',
+    'poland',
+    'portugal',
+    'puerto-rico',
+    'qatar',
+    'rapa-nui',
+    'republic-of-macedonia',
+    'republic-of-the-congo',
+    'romania',
+    'russia',
+    'rwanda',
+    'saba-island',
+    'sahrawi-arab-democratic-republic',
+    'saint-kitts-and-nevis',
+    'samoa',
+    'san-marino',
+    'sao-tome-and-prince',
+    'sardinia',
+    'saudi-arabia',
+    'scotland',
+    'senegal',
+    'serbia',
+    'seychelles',
+    'sierra-leone',
+    'singapore',
+    'sint-eustatius',
+    'sint-maarten',
+    'slovakia',
+    'slovania',
+    'solomon-islands',
+    'somalia',
+    'somaliland',
+    'south-africa',
+    'south-korea',
+    'south-sudan',
+    'spain',
+    'sri-lanka',
+    'st-barts',
+    'st-lucia',
+    'st-vincent-and-the-grenadines',
+    'sudan',
+    'suriname',
+    'swaziland',
+    'sweden',
+    'switzerland',
+    'syria',
+    'taijikistan',
+    'taiwan',
+    'tanzania',
+    'thailand',
+    'tibet',
+    'togo',
+    'tokelau',
+    'tonga',
+    'transnistria',
+    'trinidad-and-tobago',
+    'tunisia',
+    'turkey',
+    'turkmenistan',
+    'turks-and-caicos',
+    'tuvalu',
+    'uganda',
+    'ukraine',
+    'united-arab-emirates',
+    'united-kingdom',
+    'united-nations',
+    'united-states',
+    'uruguay',
+    'uzbekistan',
+    'vanuatu',
+    'vatican-city',
+    'venezuela',
+    'vietnam',
+    'virgin-islands',
+    'wales',
+    'yemen',
+    'zambia',
+    'zimbabwe',
+];

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

@@ -0,0 +1,140 @@
+import { Host, getAssetPath, h } from "@stencil/core";
+/**
+ * `<sui-flag>` — wrapper de banderas circulares del SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-flag/). Misma API pública
+ * (name/size/ariaLabel → name/size/aria-label), mismo comportamiento (decorativo
+ * vs `role="img"` según ariaLabel) y mismos VALORES exactos (tamaños canon del DS).
+ *
+ * Source: SUI Design System 2.0 — Country Flags (Figma node 2806:2385).
+ * Assets: `assets/flags/<slug>.svg` (262 banderas a 24×24 viewBox).
+ *
+ * Las banderas vienen pre-renderizadas como CÍRCULO dentro del viewBox 24×24
+ * (path inicial es un circle cubriendo el viewBox; el contenido externo queda
+ * transparente). Por eso NO se aplica `border-radius` en CSS — la forma circular
+ * ya está bakeada en el SVG.
+ *
+ * Diferencias vs sui-icon / sui-emoji:
+ *  - sui-icon  = SVG monocromo via icon-font (RemixIcon), hereda `currentColor`.
+ *  - sui-emoji = PNG raster animado multi-color (Fluent UI).
+ *  - sui-flag  = SVG vectorial multi-color, sin animación, circular por diseño.
+ *
+ * NOTA accent: este componente NO usa el accent naranja del DS — las banderas son
+ * SVG multi-color con sus propios colores nacionales. No hay tokens de color aquí.
+ *
+ * Tamaños canon (compartidos con sui-emoji para consistencia visual):
+ *   xs 16 · sm 20 · md 24 (default, native viewBox) · lg 32 · xl 48 · full.
+ *
+ * `scoped: true` (light DOM, NO shadow): consistente con sui-button/sui-icon. La
+ * URL del asset se resuelve con `getAssetPath()` (Stencil copia `assets/flags/`
+ * al build via `assetsDirs`), igual filosofía que el `[src]` del Angular original.
+ */
+export class SuiFlag {
+    constructor() {
+        /** Tamaño del flag. Default `md` (24px) — matchea el viewBox nativo del SVG. */
+        this.size = 'md';
+        /**
+         * Aria-label opcional. Si se provee, el flag se anuncia como `<img>` con ese
+         * label (`role="img"`). Si no, se considera decorativo (`aria-hidden="true"`).
+         */
+        this.ariaLabel = null;
+    }
+    /** URL absoluta al SVG, resuelta contra el base path del componente. */
+    get src() {
+        return getAssetPath(`assets/flags/${this.name}.svg`);
+    }
+    render() {
+        var _a, _b;
+        const labelled = !!this.ariaLabel;
+        return (h(Host, { key: 'a98f18909213cd576dca5c989ff17e54eb42f317', "data-size": this.size, role: labelled ? 'img' : null, "aria-hidden": labelled ? null : 'true', "aria-label": (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : null }, h("img", { key: '789bdecded3f8230bd6c80adb303e00b4a12c9b7', class: "sui-flag__img", src: this.src, alt: (_b = this.ariaLabel) !== null && _b !== void 0 ? _b : '', loading: "lazy", decoding: "async" })));
+    }
+    static get is() { return "sui-flag"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-flag.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-flag.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiFlagName",
+                    "resolved": "\"abkhazia\" | \"afghanistan\" | \"aland-islands\" | \"albania\" | \"algeria\" | \"american-samoa\" | \"andorra\" | \"angola\" | \"anguilla\" | \"antigua-and-barbuda\" | \"argentina\" | \"armenia\" | \"aruba\" | \"australia\" | \"austria\" | \"azerbaijan\" | \"azores-islands\" | \"bahamas\" | \"bahrain\" | \"balearic-islands\" | \"bangladesh\" | \"barbados\" | \"basque-country\" | \"belarus\" | \"belgium\" | \"belize\" | \"benin\" | \"bermuda\" | \"bhutan\" | \"bolivia\" | \"bonaire\" | \"bosnia-and-herzegovina\" | \"botswana\" | \"brazil\" | \"british-columbia\" | \"british-indian-ocean-territory\" | \"british-virgin-islands\" | \"brunei\" | \"bulgaria\" | \"burkina-faso\" | \"burundi\" | \"cambodia\" | \"cameroon\" | \"canada\" | \"canary-islands\" | \"cape-verde\" | \"cayman-islands\" | \"central-african-republic\" | \"ceuta\" | \"chad\" | \"chile\" | \"china\" | \"christmas-island\" | \"cocos-island\" | \"colombia\" | \"comoros\" | \"cook-islands\" | \"corsica\" | \"costa-rica\" | \"croatia\" | \"cuba\" | \"curacao\" | \"cyprus\" | \"czech-republic\" | \"democratic-republic-of-congo\" | \"denmark\" | \"djibouti\" | \"dominica\" | \"dominican-republic\" | \"east-timor\" | \"ecuador\" | \"egypt\" | \"el-salvador\" | \"england\" | \"equatorial-guinea\" | \"eritrea\" | \"estonia\" | \"ethiopia\" | \"european-union\" | \"falkland-islands\" | \"faroe-islands\" | \"fiji\" | \"finland\" | \"france\" | \"french-polynesia\" | \"gabon\" | \"galapagos-islands\" | \"gambia\" | \"georgia\" | \"germany\" | \"ghana\" | \"gibraltar\" | \"greece\" | \"greenland\" | \"grenada\" | \"guam\" | \"guatemala\" | \"guernsey\" | \"guinea\" | \"guinea-bissau\" | \"guyana\" | \"haiti\" | \"hawaii\" | \"honduras\" | \"hong-kong\" | \"hungary\" | \"iceland\" | \"india\" | \"indonesia\" | \"iran\" | \"iraq\" | \"ireland\" | \"isle-of-man\" | \"israel\" | \"italy\" | \"ivory-coast\" | \"jamaica\" | \"japan\" | \"jersey\" | \"jordan\" | \"kazakhstan\" | \"kenya\" | \"kiribati\" | \"kosovo\" | \"kuwait\" | \"kyrgyzstan\" | \"laos\" | \"latvia\" | \"lebanon\" | \"lesotho\" | \"liberia\" | \"libya\" | \"liechtenstein\" | \"lithuania\" | \"luxembourg\" | \"macao\" | \"madagascar\" | \"madeira\" | \"malawi\" | \"malaysia\" | \"maldives\" | \"mali\" | \"malta\" | \"marshall-island\" | \"martinique\" | \"mauritania\" | \"mauritus\" | \"melilla\" | \"mexico\" | \"micronesia\" | \"moldova\" | \"monaco\" | \"mongolia\" | \"montenegro\" | \"montserrat\" | \"morocco\" | \"mozambique\" | \"myanmar\" | \"namibia\" | \"nato\" | \"nauru\" | \"nepal\" | \"netherlands\" | \"new-zealand\" | \"nicaragua\" | \"niger\" | \"nigeria\" | \"niue\" | \"norfolk-island\" | \"north-korea\" | \"northern-cyprus\" | \"northern-marianas-islands\" | \"norway\" | \"oman\" | \"orkney-islands\" | \"ossetia\" | \"pakistan\" | \"palau\" | \"palestine\" | \"panama\" | \"papua-new-guinea\" | \"paraguay\" | \"peru\" | \"philippines\" | \"pitcairn-islands\" | \"poland\" | \"portugal\" | \"puerto-rico\" | \"qatar\" | \"rapa-nui\" | \"republic-of-macedonia\" | \"republic-of-the-congo\" | \"romania\" | \"russia\" | \"rwanda\" | \"saba-island\" | \"sahrawi-arab-democratic-republic\" | \"saint-kitts-and-nevis\" | \"samoa\" | \"san-marino\" | \"sao-tome-and-prince\" | \"sardinia\" | \"saudi-arabia\" | \"scotland\" | \"senegal\" | \"serbia\" | \"seychelles\" | \"sierra-leone\" | \"singapore\" | \"sint-eustatius\" | \"sint-maarten\" | \"slovakia\" | \"slovania\" | \"solomon-islands\" | \"somalia\" | \"somaliland\" | \"south-africa\" | \"south-korea\" | \"south-sudan\" | \"spain\" | \"sri-lanka\" | \"st-barts\" | \"st-lucia\" | \"st-vincent-and-the-grenadines\" | \"sudan\" | \"suriname\" | \"swaziland\" | \"sweden\" | \"switzerland\" | \"syria\" | \"taijikistan\" | \"taiwan\" | \"tanzania\" | \"thailand\" | \"tibet\" | \"togo\" | \"tokelau\" | \"tonga\" | \"transnistria\" | \"trinidad-and-tobago\" | \"tunisia\" | \"turkey\" | \"turkmenistan\" | \"turks-and-caicos\" | \"tuvalu\" | \"uganda\" | \"ukraine\" | \"united-arab-emirates\" | \"united-kingdom\" | \"united-nations\" | \"united-states\" | \"uruguay\" | \"uzbekistan\" | \"vanuatu\" | \"vatican-city\" | \"venezuela\" | \"vietnam\" | \"virgin-islands\" | \"wales\" | \"yemen\" | \"zambia\" | \"zimbabwe\"",
+                    "references": {
+                        "SuiFlagName": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-flag/sui-flag.tsx",
+                            "id": "src/components/sui-flag/sui-flag.tsx::SuiFlagName"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Slug del pa\u00EDs (ver SUI_FLAG_NAMES). Ej: 'peru', 'united-states', 'sint-maarten'. Requerido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiFlagSize",
+                    "resolved": "\"full\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "SuiFlagSize": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-flag/sui-flag.tsx",
+                            "id": "src/components/sui-flag/sui-flag.tsx::SuiFlagSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o del flag. Default `md` (24px) \u2014 matchea el viewBox nativo del SVG."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria-label opcional. Si se provee, el flag se anuncia como `<img>` con ese\nlabel (`role=\"img\"`). Si no, se considera decorativo (`aria-hidden=\"true\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+}

package/dist/collection/components/sui-form-hint/sui-form-hint.css

@@ -0,0 +1,68 @@
+@charset "UTF-8";
+/* ═══ SUI Form Hint — SUI Design System 2.0 ════════════════════════════════════════
+ * Port 1:1 del Angular homologado (master-pedidos). Specs derivados
+ * de sui-input __message (verified nodeId 266:5251).
+ * Typography: Paragraph/X-Small = 12px / 400 / 16px / 0 letter-spacing.
+ *
+ * Color tokens por variant:
+ *   neutral  → --sui-text-sub-600
+ *   error    → --sui-state-error-base
+ *   disabled → --sui-text-disabled-300
+ * ══════════════════════════════════════════════════════════════════════ */
+:host {
+  display: block;
+  font-family: var(--sui-font-sans);
+}
+
+/* Sin message → el host no genera caja, evita el espacio fantasma cuando el
+   consumer le da margin-top (ej. `.sui-select__hint-host`). */
+:host(:not([data-sui-has-message])) {
+  display: none;
+}
+
+.sui-form-hint {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 4px;
+  font-family: var(--sui-font-sans);
+  /* ── Typography: Paragraph/X-Small ── */
+  font-size: var(--sui-type-paragraph-xs-size); /* 12px */
+  font-weight: var(--sui-type-paragraph-xs-weight); /* 400 */
+  line-height: var(--sui-type-paragraph-xs-line); /* 16px */
+  letter-spacing: var(--sui-type-paragraph-xs-spacing); /* 0 */
+}
+
+/* ── Color por variant (via host attribute) ──
+   Un solo set de reglas planas: el color cae al texto y al icono por
+   herencia de `currentColor`. */
+/* Default / neutral (data-sui-variant siempre reflejado por el prop). */
+:host(:not([data-sui-variant])) .sui-form-hint,
+:host([data-sui-variant=neutral]) .sui-form-hint {
+  color: var(--sui-text-sub-600);
+}
+
+:host([data-sui-variant=error]) .sui-form-hint {
+  color: var(--sui-state-error-base);
+}
+
+:host([data-sui-variant=disabled]) .sui-form-hint {
+  color: var(--sui-text-disabled-300);
+}
+
+/* ── Icon ──
+   Icon 16×16 (--sui-icon-size-sm) matchea exacto la line-height 16px de
+   Paragraph/X-Small — sin nudge vertical, alineado al top de la 1ª línea.
+   Color hereda de .sui-form-hint via currentColor. */
+.sui-form-hint__icon {
+  flex-shrink: 0;
+}
+
+/* Variante NEUTRAL: Figma (Hint Text 266:5280) pinta el icono con el token
+   neutro `icon/soft-400`, más claro que el texto `text/sub-600`. Solo aplica al
+   neutral; las variantes semánticas comparten color texto↔icono. */
+:host(:not([data-sui-variant])) .sui-form-hint__icon,
+:host([data-sui-variant=neutral]) .sui-form-hint__icon {
+  color: var(--sui-icon-soft-400);
+}
+
+/* ── Text ── (color hereda de .sui-form-hint) */