@ajuarezso/sui-design-system 0.5.1 → 0.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ajuarezso/sui-design-system",
3
- "version": "0.5.1",
3
+ "version": "0.5.3",
4
4
  "description": "SUI Design System — librería de componentes Angular (SUI 2.0).",
5
5
  "license": "UNLICENSED",
6
6
  "publishConfig": {
@@ -904,7 +904,7 @@ declare class SuiAlert {
904
904
  * `small` (12/16) en los compactos (small/xsmall). Mapea el tipo del action al
905
905
  * tamaño del alert.
906
906
  */
907
- readonly actionLinkSize: _angular_core.Signal<"medium" | "small">;
907
+ readonly actionLinkSize: _angular_core.Signal<"small" | "medium">;
908
908
  /**
909
909
  * Tamaño del `sui-compact-button` del cierre, mapeado del size del alert para
910
910
  * conservar el footprint del icono: xsmall (icon 16) → compact `medium`;
@@ -1628,7 +1628,7 @@ declare class SuiButtonGroup {
1628
1628
 
1629
1629
  type SuiButtonColor = 'primary' | 'neutral' | 'error';
1630
1630
  type SuiButtonVariant = 'filled' | 'stroke' | 'lighter' | 'ghost';
1631
- type SuiButtonSize = '2xsmall' | 'xsmall' | 'small' | 'medium';
1631
+ type SuiButtonSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
1632
1632
  /**
1633
1633
  * SUI Button — SUI Design System 2.0
1634
1634
  *
@@ -1644,9 +1644,10 @@ type SuiButtonSize = '2xsmall' | 'xsmall' | 'small' | 'medium';
1644
1644
  * - Font features: 'ss11' 1, 'calt' 0, 'liga' 0
1645
1645
  * - Only-icon (node 129:1489): square, padding uniforme = py del size, radius hereda
1646
1646
  *
1647
- * HOMOLOGACIÓN 2026-05-29: el radius pasó de pill (99999px, override Ontop) a
1648
- * radius-10/8 del DS, y el padding horizontal expandido (que compensaba el pill)
1649
- * se redujo al p-uniforme exacto de Figma. Cambio visual app-wide → ver newQuestions.
1647
+ * RADIUS: pill (999px) en todos los sizes — decisión visual del proyecto
1648
+ * confirmada 2026-07-12 (la homologación 2026-05-29 lo había pasado a
1649
+ * radius-10/8 del Figma y el user pidió revertirlo). El resto de medidas
1650
+ * (height/gap/padding) sí son Figma-exactas.
1650
1651
  *
1651
1652
  * NOTE on gap: Figma's inner Text-wrap has px=4 padding. The exposed gap in the component
1652
1653
  * is outer-gap + 4 on each side. 2XS/XS use gap-2 (outer) + 4 (text-wrap) = 6 total,
@@ -1699,7 +1700,7 @@ declare class SuiButton {
1699
1700
  readonly disabled: _angular_core.InputSignal<boolean>;
1700
1701
  readonly leftIcon: _angular_core.InputSignal<string | null>;
1701
1702
  readonly rightIcon: _angular_core.InputSignal<string | null>;
1702
- readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
1703
+ readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
1703
1704
  /** Intercept click/Enter/Space — cuando type=submit, busca el form padre y
1704
1705
  dispara requestSubmit(). Reset hace lo mismo con form.reset(). Disabled
1705
1706
  bloquea todo. */
@@ -1912,7 +1913,7 @@ declare class SuiCheckboxCard implements ControlValueAccessor {
1912
1913
  /** RemixIcon name (sin prefijo "ri-") para type='left-icon'. */
1913
1914
  readonly icon: _angular_core.InputSignal<string | null>;
1914
1915
  /** Emoji del catálogo SUI_EMOJI_MAP — alternativa a icon para type='left-icon'. */
1915
- readonly emoji: _angular_core.InputSignal<"warning" | "label" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
1916
+ readonly emoji: _angular_core.InputSignal<"label" | "warning" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
1916
1917
  /** URL directa al emoji para type='left-icon'. Precedencia: icon > emoji > iconSrc. */
1917
1918
  readonly iconSrc: _angular_core.InputSignal<string | null>;
1918
1919
  /** URL de imagen para type='avatar'. Si falla, fallback a iniciales del label. */
@@ -2819,7 +2820,7 @@ declare class SuiCompactButton {
2819
2820
  readonly href: _angular_core.InputSignal<string | null>;
2820
2821
  readonly target: _angular_core.InputSignal<string | null>;
2821
2822
  readonly rel: _angular_core.InputSignal<string | null>;
2822
- readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
2823
+ readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
2823
2824
  readonly ariaLabel: _angular_core.InputSignal<string>;
2824
2825
  readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
2825
2826
  readonly iconSize: _angular_core.Signal<number>;
@@ -4464,7 +4465,7 @@ type SuiEmojiName = keyof typeof SUI_EMOJI_MAP;
4464
4465
  type SuiEmojiSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
4465
4466
  declare class SuiEmoji {
4466
4467
  /** Nombre del emoji del catálogo. Si se proveé `src`, este se ignora. */
4467
- readonly name: _angular_core.InputSignal<"warning" | "label" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
4468
+ readonly name: _angular_core.InputSignal<"label" | "warning" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
4468
4469
  /** URL directa al emoji (override del catálogo). Útil para usar emojis fuera del map. */
4469
4470
  readonly src: _angular_core.InputSignal<string | null>;
4470
4471
  /** Tamaño del emoji. */
@@ -4640,7 +4641,7 @@ declare class SuiFancyButton {
4640
4641
  readonly href: _angular_core.InputSignal<string | null>;
4641
4642
  readonly target: _angular_core.InputSignal<string | null>;
4642
4643
  readonly rel: _angular_core.InputSignal<string | null>;
4643
- readonly htmlType: _angular_core.InputSignal<"reset" | "submit" | "button">;
4644
+ readonly htmlType: _angular_core.InputSignal<"button" | "submit" | "reset">;
4644
4645
  readonly ariaLabel: _angular_core.InputSignal<string | null>;
4645
4646
  readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
4646
4647
  readonly iconSize: _angular_core.Signal<number>;
@@ -4945,7 +4946,7 @@ declare class SuiFileUpload {
4945
4946
  protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
4946
4947
  protected readonly dragging: _angular_core.WritableSignal<boolean>;
4947
4948
  protected readonly internalError: _angular_core.WritableSignal<string | null>;
4948
- protected readonly state: _angular_core.Signal<"error" | "dragover" | "default" | "disabled">;
4949
+ protected readonly state: _angular_core.Signal<"error" | "default" | "disabled" | "dragover">;
4949
4950
  protected readonly resolvedTitle: _angular_core.Signal<string>;
4950
4951
  protected readonly resolvedSubtitle: _angular_core.Signal<string>;
4951
4952
  protected readonly resolvedErrorMessage: _angular_core.Signal<string | null>;
@@ -5173,7 +5174,7 @@ declare class SuiFilterPanelFooter {
5173
5174
  readonly clearDisabled: _angular_core.InputSignal<boolean>;
5174
5175
  readonly applyDisabled: _angular_core.InputSignal<boolean>;
5175
5176
  /** Tamaño de los botones. Default 'small' (Figma: p-8px/radius-8 = size small). */
5176
- readonly size: _angular_core.InputSignal<"medium" | "small">;
5177
+ readonly size: _angular_core.InputSignal<"small" | "medium">;
5177
5178
  readonly clear: _angular_core.OutputEmitterRef<void>;
5178
5179
  readonly apply: _angular_core.OutputEmitterRef<void>;
5179
5180
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiFilterPanelFooter, never>;
@@ -5609,7 +5610,7 @@ declare class SuiImageUpload {
5609
5610
  * (matchea el escalado del contenedor 32→40 en SCSS). */
5610
5611
  protected readonly iconSize: _angular_core.Signal<20 | 16>;
5611
5612
  protected readonly hasSrc: _angular_core.Signal<boolean>;
5612
- protected readonly state: _angular_core.Signal<"dragover" | "filled" | "disabled" | "empty">;
5613
+ protected readonly state: _angular_core.Signal<"filled" | "disabled" | "dragover" | "empty">;
5613
5614
  protected readonly resolvedTitle: _angular_core.Signal<string>;
5614
5615
  protected readonly resolvedSubtitle: _angular_core.Signal<string>;
5615
5616
  onHostClick(): void;
@@ -6390,7 +6391,7 @@ declare class SuiLinkButton {
6390
6391
  readonly href: _angular_core.InputSignal<string | null>;
6391
6392
  readonly target: _angular_core.InputSignal<string | null>;
6392
6393
  readonly rel: _angular_core.InputSignal<string | null>;
6393
- readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
6394
+ readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
6394
6395
  readonly ariaLabel: _angular_core.InputSignal<string | null>;
6395
6396
  readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
6396
6397
  readonly iconSize: _angular_core.Signal<number>;
@@ -6999,7 +7000,7 @@ declare class SuiNotification {
6999
7000
  readonly dismissible: _angular_core.InputSignal<boolean>;
7000
7001
  readonly unread: _angular_core.InputSignal<boolean>;
7001
7002
  /** Item body type. 'basic' keeps the legacy/alert layout (no body slot). */
7002
- readonly type: _angular_core.InputSignal<"message" | "file" | "button" | "basic">;
7003
+ readonly type: _angular_core.InputSignal<"button" | "file" | "basic" | "message">;
7003
7004
  /** When true, item paints the Figma hover bg + reveals the more-2-line button. */
7004
7005
  readonly showMore: _angular_core.InputSignal<boolean>;
7005
7006
  /** Forces the hover affordance visible (e.g. keyboard-focused row). */
@@ -7670,7 +7671,7 @@ declare class SuiRadioCard implements ControlValueAccessor {
7670
7671
  * Emoji del catálogo SUI_EMOJI_MAP — alternativa a icon para type='left-icon'.
7671
7672
  * Si ambos están, icon tiene precedencia.
7672
7673
  */
7673
- readonly emoji: _angular_core.InputSignal<"warning" | "label" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
7674
+ readonly emoji: _angular_core.InputSignal<"label" | "warning" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
7674
7675
  /**
7675
7676
  * URL directa al emoji para type='left-icon'. Útil cuando el consumer ya tiene
7676
7677
  * la URL (ej. FLUENT_EMOJI map del proyecto) y no quiere registrar el emoji
@@ -8599,7 +8600,7 @@ declare class SuiSocialButton {
8599
8600
  readonly href: _angular_core.InputSignal<string | null>;
8600
8601
  readonly target: _angular_core.InputSignal<string | null>;
8601
8602
  readonly rel: _angular_core.InputSignal<string | null>;
8602
- readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
8603
+ readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
8603
8604
  readonly ariaLabel: _angular_core.InputSignal<string | null>;
8604
8605
  readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
8605
8606
  /** Disabled efectivo: el input disabled O el estado loading. */
@@ -9120,7 +9121,7 @@ declare class SuiSwitchCard implements ControlValueAccessor {
9120
9121
  * `<sui-icon>` proyectado vía `[sui-switch-card-leading]` y se renderiza
9121
9122
  * con las MISMAS dimensiones (20×20 dentro del círculo de 40px).
9122
9123
  */
9123
- readonly emoji: _angular_core.InputSignal<"warning" | "label" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
9124
+ readonly emoji: _angular_core.InputSignal<"label" | "warning" | "thinking-face" | "grinning-face" | "smiling-face-hearts" | "face-with-rolling-eyes" | "face-screaming" | "partying-face" | "star-struck" | "sleeping-face" | "pensive-face" | "confused-face" | "neutral-face" | "slightly-smiling-face" | "grinning-face-smiling-eyes" | "package" | "receipt" | "money-bag" | "money-with-wings" | "shopping-cart" | "shopping-bags" | "card-index-dividers" | "bell" | "bell-with-slash" | "pushpin" | "mobile-phone" | "gear" | "locked" | "unlocked" | "wrench" | "hammer" | "magnifying-glass-tilted-left" | "spiral-calendar" | "bar-chart" | "delivery-truck" | "motorcycle" | "rocket" | "house" | "office-building" | "shop" | "dollar-banknote" | "glowing-star" | "kick-scooter" | "check-mark" | "check-mark-button" | "cross-mark" | "no-entry" | "sparkles" | "party-popper" | "waving-hand" | "thumbs-up" | "clapping-hands" | "handshake" | "busts-in-silhouette" | "pizza" | "hamburger" | "taco" | "birthday-cake" | null>;
9124
9125
  /**
9125
9126
  * URL de imagen para type='avatar' — se renderiza con sui-avatar size=lg
9126
9127
  * (40×40 redonda). Si la imagen falla, fallback automático a iniciales del
@@ -10516,7 +10517,7 @@ declare class SuiTimePicker implements ControlValueAccessor {
10516
10517
  readonly error: _angular_core.InputSignal<boolean>;
10517
10518
  readonly placeholder: _angular_core.InputSignal<string>;
10518
10519
  readonly disabled: _angular_core.InputSignal<boolean>;
10519
- readonly size: _angular_core.InputSignal<"medium" | "small">;
10520
+ readonly size: _angular_core.InputSignal<"small" | "medium">;
10520
10521
  /** Formato de display: '12h' (AM/PM) o '24h'. */
10521
10522
  readonly format: _angular_core.InputSignal<SuiTimeFormat>;
10522
10523
  /** Incremento de minutos de la lista (1, 5, 15, ...). Default 5. */