@ajuarezso/sui-design-system 0.15.8 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ajuarezso/sui-design-system",
-  "version": "0.15.8",
+  "version": "0.17.0",
   "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>;
     /**
@@ -1598,7 +1598,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<"left" | "right" | "none" | "both" | "only">;
     /** Tamaño del icono en px según size del item (small/xsmall=20, 2xsmall=16) */
     readonly iconSize: _angular_core.Signal<number>;
     readonly clicked: _angular_core.OutputEmitterRef<void>;
@@ -2584,7 +2584,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>;
@@ -3266,7 +3266,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;
@@ -5576,7 +5576,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<"default" | "error" | "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>;
@@ -6224,9 +6224,9 @@ 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>;
     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;
@@ -6441,7 +6441,14 @@ declare class SuiInlineSelect<T = string> implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiInlineSelect<any>, "sui-inline-select", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "flag": { "alias": "flag"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "clicked": "clicked"; "selectedChange": "selectedChange"; }, never, never, true, never>;
 }
 
-type SuiInputSize = 'xsmall' | 'small' | 'medium';
+/**
+ * Los tres primeros salen del set de Figma. `large` y `xlarge` son una
+ * EXTENSIÓN nuestra (12-08-2026): el campo se quedaba en 40 px mientras
+ * `sui-button` llega a 48 y 52, así que un campo y un botón puestos lado a lado
+ * nunca se alineaban. Los altos son los del botón a propósito, para que sí lo
+ * hagan.
+ */
+type SuiInputSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 type SuiInputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'amount' | 'card' | 'password-toggle' | 'date' | 'datetime-local' | 'time'
 /**
  * Split-field con divisor vertical: zona de input a la izquierda + acción a
@@ -6457,6 +6464,40 @@ declare class SuiInput implements ControlValueAccessor {
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * Esquinas de píldora en vez del radio por tamaño.
+     *
+     * Se llama `fullRadius` y no `rounded` para hablar el mismo idioma que
+     * `sui-compact-button`, que ya tenía este parámetro con ese nombre —y el
+     * nombre viene del propio Figma, que lista «2 fullRadius» entre sus
+     * variantes—. Dos nombres para la misma idea es cómo un design system deja
+     * de ser un sistema.
+     *
+     * El radio normal del campo sube con el tamaño (8 → 8 → 10) y es el correcto
+     * para un formulario, donde los campos se leen como una columna de cajas. Con
+     * `fullRadius`, el campo pasa a `999px` y se lee como un control suelto — un
+     * buscador arriba de una lista, un filtro al lado de chips redondos.
+     *
+     * No es un capricho estético: al lado de `sui-button` y de los chips, que ya
+     * son píldora en TODOS sus tamaños, un campo con esquina de 10 px se ve como
+     * de otro sistema.
+     *
+     * Sigue siendo opt-in y el default no cambia: los formularios de la app
+     * —onboarding, checkout, panel del dueño— se quedan como están.
+     */
+    readonly fullRadius: _angular_core.InputSignal<boolean>;
+    /**
+     * El tamaño que se le pasa al `sui-form-label`.
+     *
+     * El label NO crece con el campo. Su escala llega a `medium` y ahí se queda a
+     * propósito: en `large` y `xlarge` lo que crece es el ÁREA DE TOQUE del
+     * control, no la jerarquía del formulario. Un rótulo gigante encima de un
+     * campo de 52 px se lee como un título, que es otra cosa.
+     *
+     * Además lo obliga el tipo: `SuiFormLabelSize` no tiene los dos grandes, y el
+     * compilador lo cazó apenas se agregaron.
+     */
+    protected readonly labelSize: _angular_core.Signal<SuiFormLabelSize>;
     readonly error: _angular_core.InputSignal<boolean>;
     readonly errorMessage: _angular_core.InputSignal<string | null>;
     readonly label: _angular_core.InputSignal<string | null>;
@@ -6632,7 +6673,7 @@ declare class SuiInput implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiInput, "sui-input", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "hintIcon": { "alias": "hintIcon"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "paste": { "alias": "paste"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "leadingDivider": { "alias": "leadingDivider"; "required": false; "isSignal": true; }; "trailingDivider": { "alias": "trailingDivider"; "required": false; "isSignal": true; }; "leadingControl": { "alias": "leadingControl"; "required": false; "isSignal": true; }; "trailingControl": { "alias": "trailingControl"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["[data-slot=start]", "[data-slot=end]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiInput, "sui-input", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "fullRadius": { "alias": "fullRadius"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "hintIcon": { "alias": "hintIcon"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "sublabel": { "alias": "sublabel"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "paste": { "alias": "paste"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "closeOnOutsideClick": { "alias": "closeOnOutsideClick"; "required": false; "isSignal": true; }; "leadingDivider": { "alias": "leadingDivider"; "required": false; "isSignal": true; }; "trailingDivider": { "alias": "trailingDivider"; "required": false; "isSignal": true; }; "leadingControl": { "alias": "leadingControl"; "required": false; "isSignal": true; }; "trailingControl": { "alias": "trailingControl"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["[data-slot=start]", "[data-slot=end]"], true, never>;
 }
 
 type SuiIntegrationSwitchType = 'horizontal' | 'vertical';
@@ -7680,7 +7721,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). */
@@ -9016,7 +9057,17 @@ declare class SuiRichEditor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiRichEditor, "sui-rich-editor", never, { "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "showMore": { "alias": "showMore"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "headingLabel": { "alias": "headingLabel"; "required": false; "isSignal": true; }; "fontSizeLabel": { "alias": "fontSizeLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "action": "action"; "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
-type SuiSelectSize = 'xsmall' | 'small' | 'medium';
+/**
+ * `large` y `xlarge` son extensión nuestra (12-08-2026), igual que en
+ * `sui-input`: alturas del `sui-button` para que campo y botón se alineen.
+ *
+ * OJO — crecen el TRIGGER, no la lista. Las opciones son `sui-dropdown-item`,
+ * un componente aparte con su propia escala (36/56/76), y el select NUNCA le
+ * pasó su `size`: hoy todas las opciones salen del mismo tamaño para xsmall y
+ * para medium. No es algo que estos dos tamaños rompan — ya era así —, pero es
+ * la deuda que hay que saldar el día que la lista tenga que acompañar.
+ */
+type SuiSelectSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 /**
  * Tipo de left-decoration del trigger (Figma Select[1.1] · Type variant).
  *   - basic     → 📂 ícono RemixIcon genérico (placeholder: flashlight-line)
@@ -9084,6 +9135,9 @@ interface SuiSelectOption<T = any> {
  */
 declare class SuiSelect<T = any> implements ControlValueAccessor {
     readonly size: _angular_core.InputSignal<SuiSelectSize>;
+    /** El rótulo no crece con el control: su escala llega a `medium`. Ver la nota
+     *  en `sui-input`, que hace exactamente lo mismo. */
+    protected readonly labelSize: _angular_core.Signal<SuiFormLabelSize>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly options: _angular_core.InputSignal<SuiSelectOption<T>[]>;
     readonly disabled: _angular_core.InputSignal<boolean>;