@ajuarezso/sui-design-system 0.7.18 → 0.7.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ajuarezso/sui-design-system",
-  "version": "0.7.18",
+  "version": "0.7.20",
   "description": "SUI Design System — librería de componentes Angular (SUI 2.0).",
   "license": "UNLICENSED",
   "publishConfig": {

package/types/ajuarezso-sui-design-system.d.ts

@@ -1587,7 +1587,7 @@ declare class SuiButtonGroupItem {
     /** aria-label para icon-only buttons */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Estado del data-attribute para CSS scoping */
-    readonly state: _angular_core.Signal<"default" | "active" | "disabled">;
+    readonly state: _angular_core.Signal<"disabled" | "default" | "active">;
     /** True cuando solo tiene icon (left o right) sin label */
     readonly onlyIcon: _angular_core.Signal<boolean>;
     /**
@@ -2411,7 +2411,7 @@ declare class SuiColorDot {
      *   - `selected` → dot 12×12 + ring 2px.
      *   - `disabled` → dot gris pálido, sin pointer events.
      */
-    readonly state: _angular_core.InputSignal<"default" | "disabled" | "hover" | "selected">;
+    readonly state: _angular_core.InputSignal<"disabled" | "default" | "hover" | "selected">;
     /** aria-label override. */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly clicked: _angular_core.OutputEmitterRef<void>;
@@ -3510,7 +3510,93 @@ declare class SuiContentDivider {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiContentDivider, "sui-content-divider", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; "itemClick": "itemClick"; }, never, never, true, never>;
 }
 
-type SuiCounterInputSize = 'xsmall' | 'small' | 'medium';
+type SuiFormLabelSize = 'xsmall' | 'small' | 'medium';
+/**
+ * SUI Form Label — SUI DS 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Figma group: "Key Components" → Label [1.1]
+ *   (nodos auditados: 263:1850 / 266:2814 — frame Label)
+ *
+ * Matriz Figma decodificada (audit reports.json "Key Components"):
+ *   Label(Normal/Disabled) × Required × Sublabel × Info × Button (~16 combinaciones)
+ *   - Normal/Disabled  → input `disabled`
+ *   - Required         → input `required` (asterisco)
+ *   - Sublabel         → input `sublabel` (texto secundario)
+ *   - Info             → input `tooltip` (icono ℹ + tooltip)
+ *   - Button           → input `link` + output `linkClick` (link tipo "Help?" a la derecha)
+ *
+ * @input label: string (required) — Texto principal del label
+ * @input sublabel: string | null — Texto secundario pequeño (ej. "Optional", "Required")
+ * @input required: boolean — Muestra asterisco al final del label principal
+ * @input tooltip: string | null — Tooltip sobre icono info (ℹ) al final del label
+ * @input link: SuiLinkConfig | string | null — Link de acción a la derecha (variante
+ *   "Button" de Figma, ej. "Help?"). String shorthand = solo label (emite `linkClick`);
+ *   SuiLinkConfig { label, href?, target?, rel? } = <a> real con rel automático
+ *   'noopener noreferrer' si target='_blank' (patrón canon sui-checkbox-label).
+ *   Si null, no se renderiza el link.
+ * @input size: 'xsmall' | 'small' | 'medium' — Tamaño visual, default 'medium'
+ * @input disabled: boolean — Atenúa todo el label (text/sublabel/asterisco/icono/link)
+ * @input for: string | null — Attr `for` del <label> para accesibilidad
+ * @output linkClick: MouseEvent — Emite cuando se clickea el link de acción ("Button" variant)
+ *
+ * Variantes (todas verificadas contra el variantMatrix de la auditoría;
+ *  los valores cromáticos exactos quedan PENDING VERIFY hasta re-correr MCP Figma):
+ *   - required: asterisco (*) en --sui-state-error-base.
+ *       NOTA token: SUI 2.0 base pinta el asterisco con --primary-base (#335cff azul).
+ *       En ESTE proyecto --primary-base fue rebrandeado a naranja (#fa7319), y el asterisco
+ *       de "requerido" es semánticamente un error/alerta → se usa --sui-state-error-base
+ *       (#fb3748). Decisión consciente, NO copia ciega del token azul de SUI.
+ *   - sublabel: texto en --sui-text-sub-600, weight 400 (override del 500 del label).
+ *   - tooltip: botón info, icono custom `info-custom-fill` (node 125:279) vía sui-icon
+ *       (registrado en SUI_CUSTOM_ICONS) — círculo relleno con "i" serif, NO el
+ *       ri-information-fill de RemixIcon (i recta). Color --sui-icon-disabled-300 (#d1d1d1)
+ *       via currentColor; el vector queda ~12.5px centrado en slot 20px (padding 18.75%).
+ *   - link: sui-link-button variant="gray" size="small" alineado a la derecha
+ *       (margin-left: auto). En Figma el nodo del link ES una instancia de
+ *       "Link Buttons [1.1]" (266:2814) → se renderiza con el COMPONENTE real,
+ *       no un <button> maqueta (canon: ningún button custom donde un SUI sirve).
+ *       Variant gray = 12/16/500 text/sub-600 base + disabled-300, idéntico al
+ *       spec verificado del label.
+ *   - disabled: --sui-text-disabled-300 / --sui-icon-disabled-300 en todo, sin cursor pointer.
+ *   - sizes: xsmall/small/medium — tipografía escala con el field que acompaña.
+ *
+ * extraFeatures preservadas (audit): variante `size` (xsmall/small/medium) derivada del
+ *   contexto de sui-input/sui-select — NO está en los nodos Figma auditados pero se mantiene.
+ */
+declare class SuiFormLabel {
+    /** Texto principal del label (imperativo) */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Sublabel opcional (texto secundario pequeño después del label principal) */
+    readonly sublabel: _angular_core.InputSignal<string | null>;
+    /** Marca como requerido — muestra asterisco al final del label principal */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /** Tooltip opcional sobre un icono info (ℹ) al final del label */
+    readonly tooltip: _angular_core.InputSignal<string | null>;
+    /** Link de acción a la derecha (variante "Button" de Figma, ej. "Help?") —
+     *  string shorthand (solo label, emite `linkClick`) o SuiLinkConfig
+     *  { label, href?, target?, rel? }: con href renderiza <a> real; rel
+     *  automático 'noopener noreferrer' para _blank. Si null/vacío, no se
+     *  renderiza el link. (Patrón canon `link` de sui-checkbox-label.) */
+    readonly link: _angular_core.InputSignal<string | SuiLinkConfig | null>;
+    /** Config resuelta del link (string → { label }, rel automático). */
+    protected readonly linkCfg: _angular_core.Signal<SuiLinkConfig | null>;
+    /** Tamaño visual — matchea al field que acompaña */
+    readonly size: _angular_core.InputSignal<SuiFormLabelSize>;
+    /** Atenúa todo el label (estado Disabled de Figma) */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** ID del field controlado (para accesibilidad `for` attribute) */
+    readonly for: _angular_core.InputSignal<string | null>;
+    /** Emite cuando se clickea el link de acción (variante "Button" de Figma) */
+    readonly linkClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    /** Click del link: stop-propagation para no disparar la activación del <label>
+     *  contenedor. sui-link-button ya bloquea el click cuando está disabled. */
+    onLinkClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiFormLabel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiFormLabel, "sui-form-label", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "for": { "alias": "for"; "required": false; "isSignal": true; }; }, { "linkClick": "linkClick"; }, never, never, true, never>;
+}
+
+type SuiCounterInputSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 /**
  * SUI Counter Input — SUI Design System 2.0
  *
@@ -3570,6 +3656,8 @@ type SuiCounterInputSize = 'xsmall' | 'small' | 'medium';
  */
 declare class SuiCounterInput implements ControlValueAccessor {
     readonly size: _angular_core.InputSignal<SuiCounterInputSize>;
+    /** El form-label no tiene 'large' — se capea a medium (el label no escala). */
+    protected readonly labelSize: _angular_core.Signal<SuiFormLabelSize>;
     readonly label: _angular_core.InputSignal<string | null>;
     readonly sublabel: _angular_core.InputSignal<string | null>;
     readonly required: _angular_core.InputSignal<boolean>;
@@ -5193,7 +5281,7 @@ declare class SuiFileUpload {
     protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
     protected readonly dragging: _angular_core.WritableSignal<boolean>;
     protected readonly internalError: _angular_core.WritableSignal<string | null>;
-    protected readonly state: _angular_core.Signal<"error" | "default" | "disabled" | "dragover">;
+    protected readonly state: _angular_core.Signal<"error" | "disabled" | "default" | "dragover">;
     protected readonly resolvedTitle: _angular_core.Signal<string>;
     protected readonly resolvedSubtitle: _angular_core.Signal<string>;
     protected readonly resolvedErrorMessage: _angular_core.Signal<string | null>;
@@ -5501,92 +5589,6 @@ declare class SuiFormHint {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiFormHint, "sui-form-hint", never, { "message": { "alias": "message"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type SuiFormLabelSize = 'xsmall' | 'small' | 'medium';
-/**
- * SUI Form Label — SUI DS 2.0
- *
- * Figma file: 8p1k72aKKvzJV4XcvPS4VO
- * Figma group: "Key Components" → Label [1.1]
- *   (nodos auditados: 263:1850 / 266:2814 — frame Label)
- *
- * Matriz Figma decodificada (audit reports.json "Key Components"):
- *   Label(Normal/Disabled) × Required × Sublabel × Info × Button (~16 combinaciones)
- *   - Normal/Disabled  → input `disabled`
- *   - Required         → input `required` (asterisco)
- *   - Sublabel         → input `sublabel` (texto secundario)
- *   - Info             → input `tooltip` (icono ℹ + tooltip)
- *   - Button           → input `link` + output `linkClick` (link tipo "Help?" a la derecha)
- *
- * @input label: string (required) — Texto principal del label
- * @input sublabel: string | null — Texto secundario pequeño (ej. "Optional", "Required")
- * @input required: boolean — Muestra asterisco al final del label principal
- * @input tooltip: string | null — Tooltip sobre icono info (ℹ) al final del label
- * @input link: SuiLinkConfig | string | null — Link de acción a la derecha (variante
- *   "Button" de Figma, ej. "Help?"). String shorthand = solo label (emite `linkClick`);
- *   SuiLinkConfig { label, href?, target?, rel? } = <a> real con rel automático
- *   'noopener noreferrer' si target='_blank' (patrón canon sui-checkbox-label).
- *   Si null, no se renderiza el link.
- * @input size: 'xsmall' | 'small' | 'medium' — Tamaño visual, default 'medium'
- * @input disabled: boolean — Atenúa todo el label (text/sublabel/asterisco/icono/link)
- * @input for: string | null — Attr `for` del <label> para accesibilidad
- * @output linkClick: MouseEvent — Emite cuando se clickea el link de acción ("Button" variant)
- *
- * Variantes (todas verificadas contra el variantMatrix de la auditoría;
- *  los valores cromáticos exactos quedan PENDING VERIFY hasta re-correr MCP Figma):
- *   - required: asterisco (*) en --sui-state-error-base.
- *       NOTA token: SUI 2.0 base pinta el asterisco con --primary-base (#335cff azul).
- *       En ESTE proyecto --primary-base fue rebrandeado a naranja (#fa7319), y el asterisco
- *       de "requerido" es semánticamente un error/alerta → se usa --sui-state-error-base
- *       (#fb3748). Decisión consciente, NO copia ciega del token azul de SUI.
- *   - sublabel: texto en --sui-text-sub-600, weight 400 (override del 500 del label).
- *   - tooltip: botón info, icono custom `info-custom-fill` (node 125:279) vía sui-icon
- *       (registrado en SUI_CUSTOM_ICONS) — círculo relleno con "i" serif, NO el
- *       ri-information-fill de RemixIcon (i recta). Color --sui-icon-disabled-300 (#d1d1d1)
- *       via currentColor; el vector queda ~12.5px centrado en slot 20px (padding 18.75%).
- *   - link: sui-link-button variant="gray" size="small" alineado a la derecha
- *       (margin-left: auto). En Figma el nodo del link ES una instancia de
- *       "Link Buttons [1.1]" (266:2814) → se renderiza con el COMPONENTE real,
- *       no un <button> maqueta (canon: ningún button custom donde un SUI sirve).
- *       Variant gray = 12/16/500 text/sub-600 base + disabled-300, idéntico al
- *       spec verificado del label.
- *   - disabled: --sui-text-disabled-300 / --sui-icon-disabled-300 en todo, sin cursor pointer.
- *   - sizes: xsmall/small/medium — tipografía escala con el field que acompaña.
- *
- * extraFeatures preservadas (audit): variante `size` (xsmall/small/medium) derivada del
- *   contexto de sui-input/sui-select — NO está en los nodos Figma auditados pero se mantiene.
- */
-declare class SuiFormLabel {
-    /** Texto principal del label (imperativo) */
-    readonly label: _angular_core.InputSignal<string>;
-    /** Sublabel opcional (texto secundario pequeño después del label principal) */
-    readonly sublabel: _angular_core.InputSignal<string | null>;
-    /** Marca como requerido — muestra asterisco al final del label principal */
-    readonly required: _angular_core.InputSignal<boolean>;
-    /** Tooltip opcional sobre un icono info (ℹ) al final del label */
-    readonly tooltip: _angular_core.InputSignal<string | null>;
-    /** Link de acción a la derecha (variante "Button" de Figma, ej. "Help?") —
-     *  string shorthand (solo label, emite `linkClick`) o SuiLinkConfig
-     *  { label, href?, target?, rel? }: con href renderiza <a> real; rel
-     *  automático 'noopener noreferrer' para _blank. Si null/vacío, no se
-     *  renderiza el link. (Patrón canon `link` de sui-checkbox-label.) */
-    readonly link: _angular_core.InputSignal<string | SuiLinkConfig | null>;
-    /** Config resuelta del link (string → { label }, rel automático). */
-    protected readonly linkCfg: _angular_core.Signal<SuiLinkConfig | null>;
-    /** Tamaño visual — matchea al field que acompaña */
-    readonly size: _angular_core.InputSignal<SuiFormLabelSize>;
-    /** Atenúa todo el label (estado Disabled de Figma) */
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    /** ID del field controlado (para accesibilidad `for` attribute) */
-    readonly for: _angular_core.InputSignal<string | null>;
-    /** Emite cuando se clickea el link de acción (variante "Button" de Figma) */
-    readonly linkClick: _angular_core.OutputEmitterRef<MouseEvent>;
-    /** Click del link: stop-propagation para no disparar la activación del <label>
-     *  contenedor. sui-link-button ya bloquea el click cuando está disabled. */
-    onLinkClick(event: MouseEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiFormLabel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiFormLabel, "sui-form-label", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "for": { "alias": "for"; "required": false; "isSignal": true; }; }, { "linkClick": "linkClick"; }, never, never, true, never>;
-}
-
 /**
  * Iconos CUSTOM de SUI que NO existen en RemixIcon (forma propia del DS).
  * Cuando `name` matchea una key de acá, sui-icon renderiza el SVG inline; para
@@ -5888,7 +5890,7 @@ declare class SuiImageUpload {
      *  (matchea el escalado del contenedor 32→40 en SCSS). */
     protected readonly iconSize: _angular_core.Signal<20 | 16>;
     protected readonly hasSrc: _angular_core.Signal<boolean>;
-    protected readonly state: _angular_core.Signal<"filled" | "disabled" | "dragover" | "empty">;
+    protected readonly state: _angular_core.Signal<"disabled" | "filled" | "dragover" | "empty">;
     protected readonly resolvedTitle: _angular_core.Signal<string>;
     protected readonly resolvedSubtitle: _angular_core.Signal<string>;
     onHostClick(): void;