@ajuarezso/sui-design-system 0.23.0 → 0.24.0

package/package.json

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

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

@@ -1614,7 +1614,7 @@ declare class SuiButtonGroupItem {
      *   - 'both'  → ambos iconos: padding cuadrado (p)
      *   - 'only'  → icon-only:    padding cuadrado (p) → square box
      */
-    readonly iconLayout: _angular_core.Signal<"none" | "left" | "right" | "both" | "only">;
+    readonly iconLayout: _angular_core.Signal<"both" | "none" | "left" | "right" | "only">;
     /** Tamaño del icono en px según size del item (large/medium/small/xsmall=20, 2xsmall=16).
      *  En large y medium el ícono se queda en 20, igual que `sui-button`: el ícono
      *  que acompaña texto no escala. */
@@ -1779,7 +1779,7 @@ declare class SuiButton {
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly leftIcon: _angular_core.InputSignal<string | null>;
     readonly rightIcon: _angular_core.InputSignal<string | null>;
-    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
     private _spacePressed;
     private _esDelHost;
     _onEnter(event: Event): void;
@@ -2311,7 +2311,7 @@ declare class SuiLinkButton {
     readonly href: _angular_core.InputSignal<string | null>;
     readonly target: _angular_core.InputSignal<string | null>;
     readonly rel: _angular_core.InputSignal<string | null>;
-    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
     readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
     /** Px de los íconos por tamaño: large 20 · medium 20 · small 16. */
@@ -3272,7 +3272,7 @@ declare class SuiCompactButton {
     readonly href: _angular_core.InputSignal<string | null>;
     readonly target: _angular_core.InputSignal<string | null>;
     readonly rel: _angular_core.InputSignal<string | null>;
-    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
     readonly ariaLabel: _angular_core.InputSignal<string>;
     readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
     readonly iconSize: _angular_core.Signal<number>;
@@ -3369,7 +3369,7 @@ declare class SuiCompactSelectForInput<T = string> implements ControlValueAccess
     readonly arrowIcon: _angular_core.Signal<"arrow-up-s-line" | "arrow-down-s-line">;
     readonly displayValue: _angular_core.Signal<string>;
     readonly displayFlag: _angular_core.Signal<"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" | null>;
-    readonly flagSizePx: _angular_core.Signal<20 | 16>;
+    readonly flagSizePx: _angular_core.Signal<16 | 20>;
     onHostClick(event: Event): void;
     protected onMenuOpenedChange(open: boolean): void;
     protected selectItem(item: SuiCompactSelectForInputItem<T>): void;
@@ -5483,7 +5483,7 @@ declare class SuiFancyButton {
     readonly href: _angular_core.InputSignal<string | null>;
     readonly target: _angular_core.InputSignal<string | null>;
     readonly rel: _angular_core.InputSignal<string | null>;
-    readonly htmlType: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    readonly htmlType: _angular_core.InputSignal<"reset" | "submit" | "button">;
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
     readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
     readonly iconSize: _angular_core.Signal<number>;
@@ -5806,13 +5806,13 @@ 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<"default" | "error" | "disabled" | "dragover">;
+    protected readonly state: _angular_core.Signal<"dragover" | "error" | "default" | "disabled">;
     protected readonly resolvedTitle: _angular_core.Signal<string>;
     protected readonly resolvedSubtitle: _angular_core.Signal<string>;
     protected readonly resolvedErrorMessage: _angular_core.Signal<string | null>;
     /** Icon size px. Figma verified = 24 (medium). small/large/xlarge escalan +4
      *  (small 20 → medium 24 → large 28 → xlarge 32) — extensión de proyecto. */
-    protected readonly iconSize: _angular_core.Signal<20 | 24 | 32 | 28>;
+    protected readonly iconSize: _angular_core.Signal<32 | 20 | 24 | 28>;
     onClick(): void;
     /** Browse File button — abre el picker. stopPropagation evita doble-open
      *  (el host también es clickeable). */
@@ -6458,15 +6458,15 @@ declare class SuiImageUpload {
     protected readonly sizePx: _angular_core.Signal<number>;
     /** Camera icon px en el empty state. xl escala a 20, resto 16
      *  (matchea el escalado del contenedor 32→40 en SCSS). */
-    protected readonly iconSize: _angular_core.Signal<20 | 16>;
+    protected readonly iconSize: _angular_core.Signal<16 | 20>;
     /** Ícono del lápiz y el tacho (editable): 20 en botones de 40, 16 en sm (32). */
-    protected readonly ctrlIconSize: _angular_core.Signal<20 | 16>;
+    protected readonly ctrlIconSize: _angular_core.Signal<16 | 20>;
     protected readonly hasSrc: _angular_core.Signal<boolean>;
     /** Hay imagen y se muestra el botón «Quitar» debajo (sin `editable`). */
     protected readonly conQuitar: _angular_core.Signal<boolean>;
     /** Valor del `accept` del input file (incluye HEIC/HEIF). */
     protected readonly accept: string;
-    protected readonly state: _angular_core.Signal<"filled" | "disabled" | "dragover" | "empty">;
+    protected readonly state: _angular_core.Signal<"dragover" | "filled" | "disabled" | "empty">;
     protected readonly resolvedTitle: _angular_core.Signal<string>;
     protected readonly resolvedSubtitle: _angular_core.Signal<string>;
     onHostClick(): void;
@@ -8261,7 +8261,7 @@ declare class SuiNotification {
     readonly dismissible: _angular_core.InputSignal<boolean>;
     readonly unread: _angular_core.InputSignal<boolean>;
     /** Item body type. 'basic' keeps the legacy/alert layout (no body slot). */
-    readonly type: _angular_core.InputSignal<"basic" | "file" | "button" | "message">;
+    readonly type: _angular_core.InputSignal<"button" | "basic" | "file" | "message">;
     /** When true, item paints the Figma hover bg + reveals the more-2-line button. */
     readonly showMore: _angular_core.InputSignal<boolean>;
     /** Forces the hover affordance visible (e.g. keyboard-focused row). */
@@ -9535,7 +9535,7 @@ declare class SuiRating implements ControlValueAccessor {
      *  bar/bar-area usan 20px hardcoded en el template (no pasan por aquí). */
     readonly iconPx: _angular_core.Signal<number>;
     /** Rol del host: `img` para la nota de solo lectura (o `group` si trae link), `radiogroup` para pedirla. */
-    protected readonly hostRole: _angular_core.Signal<"group" | "img" | "radiogroup">;
+    protected readonly hostRole: _angular_core.Signal<"img" | "group" | "radiogroup">;
     /** Nombre accesible: interactivo = `ariaLabel`; readonly = «Calificación: 4,5 de 5, 120 calificaciones». */
     protected readonly hostAriaLabel: _angular_core.Signal<string>;
     /** Índice (1..max) de la celda con tabindex 0: la elegida, o la primera. */
@@ -10353,7 +10353,7 @@ declare class SuiSocialButton {
     readonly href: _angular_core.InputSignal<string | null>;
     readonly target: _angular_core.InputSignal<string | null>;
     readonly rel: _angular_core.InputSignal<string | null>;
-    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
     readonly ariaLabel: _angular_core.InputSignal<string | null>;
     readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
     /** Disabled efectivo: el input disabled O el estado loading. */
@@ -10888,7 +10888,7 @@ declare class SuiProductCard {
     /** Glyph del «+» / lápiz: 18 en small, 20 en medium y large. */
     readonly iconSize: _angular_core.Signal<20 | 18>;
     /** Glyph del stepper: 16 en small, 20 en medium y large. */
-    readonly stepIconSize: _angular_core.Signal<20 | 16>;
+    readonly stepIconSize: _angular_core.Signal<16 | 20>;
     readonly showStepper: _angular_core.Signal<boolean>;
     /** Config resuelta de la imagen (string → { url }; `position` default 50).
      *  null = sin imagen → fallback. */
@@ -11281,8 +11281,14 @@ declare class SuiTabChips implements AfterViewInit, OnDestroy {
     readonly size: _angular_core.InputSignal<SuiTabChipsSize>;
     /** Auto-scroll horizontal del chip activo al cambiar `value`. */
     readonly autoScroll: _angular_core.InputSignal<boolean>;
+    /**
+     * Pista de desborde (canon, dueño 05-10-2026): degradado en el borde con chips
+     * ocultos y, con mouse, flechas que desplazan. `false` la apaga.
+     */
+    readonly pistaDeScroll: _angular_core.InputSignal<boolean>;
     sentinelRef?: ElementRef<HTMLDivElement>;
     navRef?: ElementRef<HTMLElement>;
+    private pistaRef?;
     /** Estado interno: chip pegado al top del viewport (solo si sticky=true). */
     protected readonly stuck: _angular_core.WritableSignal<boolean>;
     /** Normaliza el input a SuiTabChipItem[] para iteración uniforme. */
@@ -11308,7 +11314,7 @@ declare class SuiTabChips implements AfterViewInit, OnDestroy {
     protected onKeydown(event: KeyboardEvent): void;
     private scrollToChip;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiTabChips, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTabChips, "sui-tab-chips", never, { "chips": { "alias": "chips"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "autoScroll": { "alias": "autoScroll"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTabChips, "sui-tab-chips", never, { "chips": { "alias": "chips"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "autoScroll": { "alias": "autoScroll"; "required": false; "isSignal": true; }; "pistaDeScroll": { "alias": "pistaDeScroll"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 /**
@@ -11517,6 +11523,11 @@ declare class SuiTable<T = any> {
     readonly striped: _angular_core.InputSignal<boolean>;
     readonly selectable: _angular_core.InputSignal<boolean>;
     readonly rowKey: _angular_core.InputSignal<keyof T | ((row: T) => any) | undefined>;
+    /**
+     * Pista de desborde (canon, dueño 05-10-2026): degradado en el borde con
+     * columnas ocultas y, con mouse, flechas que desplazan. `false` la apaga.
+     */
+    readonly pistaDeScroll: _angular_core.InputSignal<boolean>;
     readonly selectedRows: _angular_core.ModelSignal<Set<any>>;
     readonly sortKey: _angular_core.ModelSignal<string | null>;
     readonly sortDir: _angular_core.ModelSignal<"desc" | "asc" | null>;
@@ -11526,6 +11537,7 @@ declare class SuiTable<T = any> {
         dir: "asc" | "desc" | null;
     }>;
     private readonly scrollEl;
+    private readonly pista;
     private readonly destroyRef;
     private readonly doc;
     constructor();
@@ -11579,7 +11591,7 @@ declare class SuiTable<T = any> {
     /** Genera skeleton cells basado en columnas */
     get skeletonCells(): number[];
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiTable<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTable<any>, "sui-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "selectedRows": { "alias": "selectedRows"; "required": false; "isSignal": true; }; "sortKey": { "alias": "sortKey"; "required": false; "isSignal": true; }; "sortDir": { "alias": "sortDir"; "required": false; "isSignal": true; }; }, { "selectedRows": "selectedRowsChange"; "sortKey": "sortKeyChange"; "sortDir": "sortDirChange"; "rowClicked": "rowClicked"; "sortChanged": "sortChanged"; }, ["cellTemplates"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTable<any>, "sui-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "striped": { "alias": "striped"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "pistaDeScroll": { "alias": "pistaDeScroll"; "required": false; "isSignal": true; }; "selectedRows": { "alias": "selectedRows"; "required": false; "isSignal": true; }; "sortKey": { "alias": "sortKey"; "required": false; "isSignal": true; }; "sortDir": { "alias": "sortDir"; "required": false; "isSignal": true; }; }, { "selectedRows": "selectedRowsChange"; "sortKey": "sortKeyChange"; "sortDir": "sortDirChange"; "rowClicked": "rowClicked"; "sortChanged": "sortChanged"; }, ["cellTemplates"], never, true, never>;
 }
 
 type SuiTabMenuHorizontalSize = 'small' | 'medium' | 'large' | 'xlarge';