@ajuarezso/sui-design-system 0.6.0 → 0.7.1

package/package.json

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

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

@@ -1655,6 +1655,10 @@ type SuiButtonSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlar
 interface SuiFooterButtonConfig {
     label: string;
     disabled?: boolean;
+    /** Color del botón primario — 'error' para acciones destructivas
+     *  (confirmar borrado). Default 'primary'. Solo lo consume el botón
+     *  primario de sui-modal-footer; los secundarios son stroke neutral. */
+    color?: 'primary' | 'error';
 }
 /**
  * SUI Button — SUI Design System 2.0
@@ -6817,7 +6821,7 @@ type SuiModalStatusAlignment = 'horizontal' | 'vertical';
  * @input closeOnEscape   — boolean — close on Escape key (default: true)
  * @input showClose       — boolean — show X button (default: true)
  * @input iconVariant     — SuiModalIconVariant | null — circular icon in header
- * @input statusAlignment — 'horizontal' | 'vertical' — layout del icono+texto.
+ * @input statusAlignment — 'horizontal' | 'vertical' | null — anatomía Status Modal (480:1372); null = header normal.
  *                          'vertical' = patrón Status Modal de Figma (default: 'horizontal')
  * @input backdropBlur    — boolean — blur(10px) del fondo. default true (look
  *                          glass del proyecto); opt-out con [backdropBlur]="false"
@@ -6845,11 +6849,11 @@ declare class SuiModal implements AfterViewInit, OnDestroy {
         contenedor circular bg `neutral-lighter` + color `sub-600`. Si NO se
         pasa y hay `iconVariant`, fallback al variant semántico. */
     readonly headerIcon: _angular_core.InputSignal<string | null>;
-    /** Layout del header con icono. `vertical` = patrón Status Modal de Figma
-        (node 480:1372): icono centrado arriba, texto centrado en columna,
-        tipografía escalada. Requiere `iconVariant` o `headerIcon` para tener
-        efecto visible. */
-    readonly statusAlignment: _angular_core.InputSignal<SuiModalStatusAlignment>;
+    /** Anatomía Status Modal de Figma (set 480:1372) — null (default) = header
+        normal (Modal Header 466:4778). `horizontal`: tile cuadrado + texto en
+        fila dentro del body (480:1366). `vertical`: icono centrado arriba +
+        texto centrado en columna. Requiere `iconVariant` o `headerIcon`. */
+    readonly statusAlignment: _angular_core.InputSignal<SuiModalStatusAlignment | null>;
     /** Aplica `backdrop-filter: blur(10px)` al overlay. Por defecto `true` —
         extra-feature "glass" del proyecto encima del overlay-gray plano del DS
         (rgba(51,51,51,0.24)). Pasar `[backdropBlur]="false"` lo quita y deja el
@@ -6918,14 +6922,12 @@ declare class SuiModal implements AfterViewInit, OnDestroy {
     /** data-variant del círculo: si hay variant semántico lo usa; si solo hay
      *  headerIcon custom, retorna 'neutral'. */
     protected readonly resolvedIconVariant: _angular_core.Signal<string>;
-    /** True cuando el modal está en modo Status vertical Y hay un icono que
-     *  mostrar. En este modo el icono+texto se renderizan centrados en el body,
-     *  no en el header horizontal. */
+    /** Modo Status Modal activo (statusAlignment seteado + icono presente):
+     *  el icono+texto se renderizan en el body con la anatomía 480:1372 y el
+     *  header queda solo con el close flotante. */
+    readonly isStatus: _angular_core.Signal<boolean>;
     readonly isStatusVertical: _angular_core.Signal<boolean>;
-    /** True cuando el header con icono debe renderizar el icono "flat" (24px sin
-     *  círculo): patrón Figma "Modal Header / Small" (size sin description). Solo
-     *  aplica en modo horizontal con icono y SIN description. */
-    readonly isCompactHeader: _angular_core.Signal<boolean>;
+    readonly isStatusHorizontal: _angular_core.Signal<boolean>;
     private _previousFocus;
     private _escapeHandler?;
     ngAfterViewInit(): void;
@@ -6952,23 +6954,28 @@ type SuiModalHeaderVariant = 'info' | 'success' | 'warning' | 'error';
  * Figma file: 8p1k72aKKvzJV4XcvPS4VO
  * Component set: 466:4778 ("Modal Header [1.1]") — 6 Types × 2 Sizes
  *   Types: Basic · Left Icon · Error · Warning · Success · Information
- *   Sizes: Medium (80, title 14/20 Medium + description 12/16) · Small (56, solo title)
- *
- * Componente STANDALONE para componer modales/paneles custom — el mismo header
- * que sui-modal renderiza internamente, ahora como pieza independiente (igual
- * que drawer-header/drawer-footer para drawers).
- *
- * EXACT (Figma 466:4777 medium / 472:298 small):
- *   Container      bg white-0 · border-bottom stroke-soft-200 · flex gap-16
- *                  (small: gap-12) · padding 16px 16px 16px 20px
- *   Title          Inter Medium 14/20 ls -0.084px, text-strong-950
- *   Description    Inter Regular 12/16, text-sub-600 (solo medium)
- *   Status icon    círculo padding-10 radius-full, state lighter bg + base color
- *                  (mismos tokens que sui-modal)
- *   Close          compact button ghost (icon close-line 20), top-right
- *
- * Tipos: `iconVariant` (semántico) o `icon` (custom, tipo Left Icon).
- * `icon` custom tiene prioridad; con ambos null → Basic (sin icono).
+ *   Sizes: Medium (min-height 80, title + description) ·
+ *          Small (min-height 56, título; icono FLAT 24 sin círculo)
+ *
+ * Es la ÚNICA fuente de verdad de la anatomía del header de modal: sui-modal
+ * lo renderiza internamente y también se usa standalone para componer paneles
+ * custom (par de sui-modal-footer).
+ *
+ * EXACT (Figma 466:4777 medium / 472:298 small — homologado con sui-modal):
+ *   Container    flex align-center · padding 16px 56px 16px 20px (pr 56 reserva
+ *                el close absolute) · border-bottom stroke-soft-200 · bg white-0
+ *                · min-height 80 (small: 56) · gap 16 (small: 12; con icono: 14
+ *                en ambos sizes — cascade fix nodo "with-icon")
+ *   Title        Label/Small (14/500/20/−0.006em), strong-950
+ *   Description  Paragraph/X-Small (12/400/16), sub-600, margen-top 4
+ *   Status icon  medium: círculo padding-10 radius-full state lighter/base,
+ *                icono 20 · small: flat 24 sin círculo (Figma "Small")
+ *   Close        sui-compact-button ghost large, absolute top 16 right 16
+ *
+ * Tipos: `iconVariant` (semántico) o `icon` (custom, type Left Icon, círculo
+ * neutral — prioridad). Ambos null → Basic.
+ * `titleId`/`descriptionId` opcionales: ids para aria-labelledby/describedby
+ * del dialog contenedor (los usa sui-modal).
  *
  * Usage:
  *   <sui-modal-header title="Editar producto" description="Cambios en vivo."
@@ -6976,25 +6983,29 @@ type SuiModalHeaderVariant = 'info' | 'success' | 'warning' | 'error';
  *   <sui-modal-header size="small" title="Filtros" (closed)="cerrar()" />
  */
 declare class SuiModalHeader {
-    /** Título del header (14/20 Medium). */
+    /** Título del header (Label/Small). */
     readonly title: _angular_core.InputSignal<string>;
-    /** Descripción bajo el título (solo size medium). */
+    /** Descripción bajo el título (Paragraph/X-Small). */
     readonly description: _angular_core.InputSignal<string | null>;
-    /** medium (80): title + description · small (56): solo title. */
+    /** medium (80): título + descripción · small (56): título; icono flat 24. */
     readonly size: _angular_core.InputSignal<"small" | "medium">;
-    /** Icono semántico de status (círculo state lighter/base). */
+    /** Icono semántico de status (círculo state lighter/base en medium). */
     readonly iconVariant: _angular_core.InputSignal<SuiModalHeaderVariant | null>;
-    /** Icono custom (tipo "Left Icon" de Figma). Prioridad sobre iconVariant. */
+    /** Icono custom (type "Left Icon" de Figma). Prioridad sobre iconVariant. */
     readonly icon: _angular_core.InputSignal<string | null>;
     /** Muestra el botón de cerrar (default true). */
     readonly showClose: _angular_core.InputSignal<boolean>;
+    /** id del h2 del título — para aria-labelledby del dialog contenedor. */
+    readonly titleId: _angular_core.InputSignal<string | null>;
+    /** id del p de la descripción — para aria-describedby del dialog contenedor. */
+    readonly descriptionId: _angular_core.InputSignal<string | null>;
     /** Click en el botón de cerrar. */
     readonly closed: _angular_core.OutputEmitterRef<void>;
     protected readonly iconName: _angular_core.Signal<string | null>;
     /** Variant efectivo para el data-attr del círculo (custom icon = neutral). */
     protected readonly resolvedVariant: _angular_core.Signal<string | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiModalHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiModalHeader, "sui-modal-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconVariant": { "alias": "iconVariant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiModalHeader, "sui-modal-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconVariant": { "alias": "iconVariant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "titleId": { "alias": "titleId"; "required": false; "isSignal": true; }; "descriptionId": { "alias": "descriptionId"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
 }
 
 /**