@haiilo/catalyst 14.3.0 → 14.5.0

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.
Files changed (116) hide show
  1. package/dist/catalyst/catalyst.css +15 -4
  2. package/dist/catalyst/catalyst.esm.js +1 -1
  3. package/dist/catalyst/index.cdn.js +1 -0
  4. package/dist/catalyst/{p-CFGROHMy.js → p-7uZgmxXB.js} +2 -2
  5. package/dist/catalyst/p-7uZgmxXB.js.map +1 -0
  6. package/dist/catalyst/p-fb92a2f1.entry.js +10 -0
  7. package/dist/catalyst/p-fb92a2f1.entry.js.map +1 -0
  8. package/dist/catalyst/scss/core/_nav.scss +2 -1
  9. package/dist/catalyst/scss/core/sanitize-overwrite.scss +3 -0
  10. package/dist/catalyst/scss/index.scss +1 -0
  11. package/dist/cjs/{cat-alert_30.cjs.entry.js → cat-alert_32.cjs.entry.js} +346 -103
  12. package/dist/cjs/catalyst.cjs.js +2 -2
  13. package/dist/cjs/{index-B8-TCsLD.js → index-Ddad39qn.js} +7 -4
  14. package/dist/cjs/index-Ddad39qn.js.map +1 -0
  15. package/dist/cjs/loader.cjs.js +2 -2
  16. package/dist/collection/collection-manifest.json +3 -1
  17. package/dist/collection/components/cat-alert/cat-alert.js +1 -1
  18. package/dist/collection/components/cat-badge/cat-badge.js +1 -1
  19. package/dist/collection/components/cat-button/cat-button.css +9 -2
  20. package/dist/collection/components/cat-button/cat-button.js +26 -1
  21. package/dist/collection/components/cat-button/cat-button.js.map +1 -1
  22. package/dist/collection/components/cat-button-group/cat-button-group.js +1 -1
  23. package/dist/collection/components/cat-card/cat-card.js +1 -1
  24. package/dist/collection/components/cat-checkbox/cat-checkbox.js +2 -2
  25. package/dist/collection/components/cat-date/cat-date.js +2 -2
  26. package/dist/collection/components/cat-date-inline/cat-date-inline.js +4 -4
  27. package/dist/collection/components/cat-datepicker/cat-datepicker.js +3 -3
  28. package/dist/collection/components/cat-datepicker-inline/cat-datepicker-inline.js +2 -2
  29. package/dist/collection/components/cat-dropdown/cat-dropdown.js +116 -47
  30. package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
  31. package/dist/collection/components/cat-menu/cat-menu.css +9 -0
  32. package/dist/collection/components/cat-menu/cat-menu.js +652 -0
  33. package/dist/collection/components/cat-menu/cat-menu.js.map +1 -0
  34. package/dist/collection/components/cat-menu-item/cat-menu-item.js +387 -0
  35. package/dist/collection/components/cat-menu-item/cat-menu-item.js.map +1 -0
  36. package/dist/collection/components/cat-pagination/cat-pagination.js +2 -2
  37. package/dist/collection/components/cat-pagination/cat-pagination.js.map +1 -1
  38. package/dist/collection/components/cat-radio/cat-radio.js +2 -2
  39. package/dist/collection/components/cat-radio-group/cat-radio-group.js +1 -1
  40. package/dist/collection/components/cat-scrollable/cat-scrollable.js +3 -3
  41. package/dist/collection/components/cat-select/cat-select.js +14 -18
  42. package/dist/collection/components/cat-select/cat-select.js.map +1 -1
  43. package/dist/collection/components/cat-select-demo/cat-select-demo.js +1 -1
  44. package/dist/collection/components/cat-skeleton/cat-skeleton.js +1 -1
  45. package/dist/collection/components/cat-spinner/cat-spinner.js +2 -2
  46. package/dist/collection/components/cat-tab/cat-tab.js +1 -1
  47. package/dist/collection/components/cat-tabs/cat-tabs.js +1 -1
  48. package/dist/collection/components/cat-tag/cat-tag.js +1 -1
  49. package/dist/collection/components/cat-textarea/cat-textarea.js +3 -3
  50. package/dist/collection/components/cat-time/cat-time.css +0 -9
  51. package/dist/collection/components/cat-time/cat-time.js +4 -5
  52. package/dist/collection/components/cat-time/cat-time.js.map +1 -1
  53. package/dist/collection/components/cat-toggle/cat-toggle.js +2 -2
  54. package/dist/collection/index.cdn.js +1 -0
  55. package/dist/collection/index.js.map +1 -1
  56. package/dist/collection/scss/core/_nav.scss +2 -1
  57. package/dist/collection/scss/core/sanitize-overwrite.scss +3 -0
  58. package/dist/collection/scss/index.scss +1 -0
  59. package/dist/components/cat-alert.js +1 -1
  60. package/dist/components/cat-badge.js +1 -1
  61. package/dist/components/cat-button-group.js +1 -1
  62. package/dist/components/cat-button2.js +8 -2
  63. package/dist/components/cat-button2.js.map +1 -1
  64. package/dist/components/cat-card.js +1 -1
  65. package/dist/components/cat-checkbox2.js +2 -2
  66. package/dist/components/cat-date-inline2.js +4 -4
  67. package/dist/components/cat-date.js +2 -2
  68. package/dist/components/cat-datepicker-inline.js +2 -2
  69. package/dist/components/cat-datepicker.js +3 -3
  70. package/dist/components/cat-dropdown2.js +69 -44
  71. package/dist/components/cat-dropdown2.js.map +1 -1
  72. package/dist/components/cat-menu-item.d.ts +11 -0
  73. package/dist/components/cat-menu-item.js +9 -0
  74. package/dist/components/cat-menu-item.js.map +1 -0
  75. package/dist/components/cat-menu-item2.js +111 -0
  76. package/dist/components/cat-menu-item2.js.map +1 -0
  77. package/dist/components/cat-menu.d.ts +11 -0
  78. package/dist/components/cat-menu.js +9 -0
  79. package/dist/components/cat-menu.js.map +1 -0
  80. package/dist/components/cat-menu2.js +227 -0
  81. package/dist/components/cat-menu2.js.map +1 -0
  82. package/dist/components/cat-pagination.js +2 -2
  83. package/dist/components/cat-pagination.js.map +1 -1
  84. package/dist/components/cat-radio-group.js +1 -1
  85. package/dist/components/cat-radio.js +2 -2
  86. package/dist/components/cat-scrollable2.js +3 -3
  87. package/dist/components/cat-select-demo.js +1 -1
  88. package/dist/components/cat-select2.js +5 -5
  89. package/dist/components/cat-select2.js.map +1 -1
  90. package/dist/components/cat-skeleton2.js +1 -1
  91. package/dist/components/cat-spinner2.js +2 -2
  92. package/dist/components/cat-tab.js +1 -1
  93. package/dist/components/cat-tabs.js +1 -1
  94. package/dist/components/cat-tag.js +1 -1
  95. package/dist/components/cat-textarea.js +3 -3
  96. package/dist/components/cat-time.js +25 -14
  97. package/dist/components/cat-time.js.map +1 -1
  98. package/dist/components/cat-toggle.js +2 -2
  99. package/dist/esm/{cat-alert_30.entry.js → cat-alert_32.entry.js} +345 -104
  100. package/dist/esm/catalyst.js +3 -3
  101. package/dist/esm/{index-CFGROHMy.js → index-7uZgmxXB.js} +7 -4
  102. package/dist/esm/index-7uZgmxXB.js.map +1 -0
  103. package/dist/esm/loader.js +3 -3
  104. package/dist/types/components/cat-button/cat-button.d.ts +4 -0
  105. package/dist/types/components/cat-dropdown/cat-dropdown.d.ts +14 -2
  106. package/dist/types/components/cat-menu/cat-menu.d.ts +124 -0
  107. package/dist/types/components/cat-menu-item/cat-menu-item.d.ts +80 -0
  108. package/dist/types/components/cat-select/cat-select.d.ts +3 -2
  109. package/dist/types/components.d.ts +426 -7
  110. package/dist/types/index.d.ts +2 -1
  111. package/package.json +2 -2
  112. package/dist/catalyst/p-0df8aaa1.entry.js +0 -10
  113. package/dist/catalyst/p-0df8aaa1.entry.js.map +0 -1
  114. package/dist/catalyst/p-CFGROHMy.js.map +0 -1
  115. package/dist/cjs/index-B8-TCsLD.js.map +0 -1
  116. package/dist/esm/index-CFGROHMy.js.map +0 -1
@@ -12,7 +12,7 @@ import { CatDatepickerMode } from "./components/cat-datepicker/cat-datepicker.mo
12
12
  import { BaseOptions } from "flatpickr/dist/types/options";
13
13
  import { InputType } from "./components/cat-input/input-type";
14
14
  import { FormatDateMaskOptions, FormatTimeMaskOptions } from "./components/cat-input/cat-input";
15
- import { CatSelectConnector, CatSelectMultipleTaggingValue, CatSelectTaggingValue, Item } from "./components/cat-select/cat-select";
15
+ import { CatSelectConnector, CatSelectValue, Item } from "./components/cat-select/cat-select";
16
16
  import { Observable } from "rxjs";
17
17
  import { TooltipPlacement } from "./components/cat-tooltip/cat-tooltip";
18
18
  export { Breakpoint } from "./utils/breakpoints";
@@ -22,7 +22,7 @@ export { CatDatepickerMode } from "./components/cat-datepicker/cat-datepicker.mo
22
22
  export { BaseOptions } from "flatpickr/dist/types/options";
23
23
  export { InputType } from "./components/cat-input/input-type";
24
24
  export { FormatDateMaskOptions, FormatTimeMaskOptions } from "./components/cat-input/cat-input";
25
- export { CatSelectConnector, CatSelectMultipleTaggingValue, CatSelectTaggingValue, Item } from "./components/cat-select/cat-select";
25
+ export { CatSelectConnector, CatSelectValue, Item } from "./components/cat-select/cat-select";
26
26
  export { Observable } from "rxjs";
27
27
  export { TooltipPlacement } from "./components/cat-tooltip/cat-tooltip";
28
28
  export namespace Components {
@@ -194,6 +194,11 @@ export namespace Components {
194
194
  * @default false
195
195
  */
196
196
  "iconRight": boolean;
197
+ /**
198
+ * Link behaves as an inline element.
199
+ * @default false
200
+ */
201
+ "inline": boolean;
197
202
  /**
198
203
  * Displays the button in a loading state with a spinner. Just like a disabled button, an inactive button is unusable and un-clickable. However, it retains the current focus state.
199
204
  * @default false
@@ -769,18 +774,24 @@ export namespace Components {
769
774
  interface CatDropdown {
770
775
  /**
771
776
  * Do not navigate focus inside the dropdown via vertical arrow keys.
777
+ * @deprecated use cat-menu
772
778
  * @default 'vertical'
773
779
  */
774
780
  "arrowNavigation": 'horizontal' | 'vertical' | 'none';
775
781
  /**
776
782
  * Closes the dropdown.
777
783
  */
778
- "close": () => Promise<void>;
784
+ "close": (shouldReturnFocus?: boolean) => Promise<void>;
779
785
  /**
780
786
  * Whether the dropdown trigger should be initialized only before first opening. Can be useful when trigger is rendered dynamically.
781
787
  * @default false
782
788
  */
783
789
  "delayedTriggerInit": boolean;
790
+ /**
791
+ * Whether the focus should be trapped inside dropdown popup. Use it only when the dropdown popup content has role dialog.
792
+ * @default true
793
+ */
794
+ "focusTrap": boolean;
784
795
  /**
785
796
  * Whether the dropdown is open.
786
797
  * @readonly
@@ -809,6 +820,7 @@ export namespace Components {
809
820
  "noResize": boolean;
810
821
  /**
811
822
  * Trigger element will not receive focus when dropdown is closed.
823
+ * @deprecated the property can be removed, focus is arranged internally
812
824
  * @default false
813
825
  */
814
826
  "noReturnFocus": boolean;
@@ -1047,6 +1059,174 @@ export namespace Components {
1047
1059
  */
1048
1060
  "value"?: string;
1049
1061
  }
1062
+ /**
1063
+ * A menu component that provides a dropdown with a built-in configurable trigger button
1064
+ * and proper ARIA semantics and keyboard navigation for menu items.
1065
+ * The trigger is always a cat-button with sensible defaults but fully configurable
1066
+ * through trigger-specific props.
1067
+ */
1068
+ interface CatMenu {
1069
+ /**
1070
+ * The arrow key navigation direction for menu items.
1071
+ * @default 'vertical'
1072
+ */
1073
+ "arrowNavigation": 'horizontal' | 'vertical';
1074
+ /**
1075
+ * Closes the menu.
1076
+ */
1077
+ "close": () => Promise<void>;
1078
+ /**
1079
+ * Whether the dropdown trigger should be initialized only before first opening. Can be useful when trigger is rendered dynamically.
1080
+ * @default false
1081
+ */
1082
+ "delayedTriggerInit": boolean;
1083
+ /**
1084
+ * Disable the menu.
1085
+ * @default false
1086
+ */
1087
+ "disabled": boolean;
1088
+ /**
1089
+ * Make the dropdown match the width of the reference regardless of its contents. Note that this only applies to the minimum width of the dropdown. The maximum width is still limited by the viewport.
1090
+ * @default false
1091
+ */
1092
+ "justify": boolean;
1093
+ /**
1094
+ * Do not change the size of the dropdown to ensure it isn’t too big to fit in the viewport (or more specifically, its clipping context).
1095
+ * @default false
1096
+ */
1097
+ "noResize": boolean;
1098
+ /**
1099
+ * Opens the menu.
1100
+ */
1101
+ "open": () => Promise<void>;
1102
+ /**
1103
+ * Allow overflow when dropdown is open.
1104
+ * @default false
1105
+ */
1106
+ "overflow": boolean;
1107
+ /**
1108
+ * The placement of the dropdown.
1109
+ * @default 'bottom-start'
1110
+ */
1111
+ "placement": Placement;
1112
+ /**
1113
+ * Toggles the menu.
1114
+ */
1115
+ "toggle": () => Promise<void>;
1116
+ /**
1117
+ * The trigger button accessibility label. If not set, falls back to triggerLabel.
1118
+ */
1119
+ "triggerA11yLabel"?: string;
1120
+ /**
1121
+ * Additional CSS class for the trigger button.
1122
+ */
1123
+ "triggerClass"?: string;
1124
+ /**
1125
+ * The color palette of the trigger button.
1126
+ * @default 'secondary'
1127
+ */
1128
+ "triggerColor": 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
1129
+ /**
1130
+ * The trigger button icon.
1131
+ */
1132
+ "triggerIcon"?: string;
1133
+ /**
1134
+ * Show only the icon in the trigger button.
1135
+ */
1136
+ "triggerIconOnly"?: boolean | Breakpoint;
1137
+ /**
1138
+ * The trigger button label.
1139
+ */
1140
+ "triggerLabel"?: string;
1141
+ /**
1142
+ * Native attributes for the trigger button.
1143
+ */
1144
+ "triggerNativeAttributes"?: { [key: string]: string };
1145
+ /**
1146
+ * The trigger button size.
1147
+ * @default 'm'
1148
+ */
1149
+ "triggerSize": 'xs' | 's' | 'm' | 'l' | 'xl';
1150
+ /**
1151
+ * Test ID for the trigger button.
1152
+ */
1153
+ "triggerTestId"?: string;
1154
+ /**
1155
+ * The trigger button variant.
1156
+ * @default 'text'
1157
+ */
1158
+ "triggerVariant": 'filled' | 'outlined' | 'text';
1159
+ }
1160
+ /**
1161
+ * A menu item component that renders as a button with proper ARIA semantics.
1162
+ */
1163
+ interface CatMenuItem {
1164
+ /**
1165
+ * Whether the menu item is active.
1166
+ * @default false
1167
+ */
1168
+ "active": boolean;
1169
+ /**
1170
+ * The color of the menu item.
1171
+ */
1172
+ "color"?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info';
1173
+ /**
1174
+ * Specifies that the menu item should be disabled.
1175
+ * @default false
1176
+ */
1177
+ "disabled": boolean;
1178
+ /**
1179
+ * Programmatically remove focus from the menu item.
1180
+ */
1181
+ "doBlur": () => Promise<void>;
1182
+ /**
1183
+ * Programmatically move focus to the menu item.
1184
+ */
1185
+ "doFocus": (options?: FocusOptions) => Promise<void>;
1186
+ /**
1187
+ * The name of an icon to be displayed in the menu item.
1188
+ */
1189
+ "icon"?: string;
1190
+ /**
1191
+ * Hide the actual button content and only display the icon.
1192
+ * @default false
1193
+ */
1194
+ "iconOnly": boolean | Breakpoint;
1195
+ /**
1196
+ * Display the icon on the right.
1197
+ * @default false
1198
+ */
1199
+ "iconRight": boolean;
1200
+ /**
1201
+ * A unique identifier for the menu item.
1202
+ */
1203
+ "identifier"?: string;
1204
+ /**
1205
+ * The loading state of the menu item.
1206
+ */
1207
+ "loading"?: boolean;
1208
+ /**
1209
+ * Attributes that will be added to the native HTML button element
1210
+ */
1211
+ "nativeAttributes"?: { [key: string]: string };
1212
+ /**
1213
+ * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
1214
+ */
1215
+ "testId"?: string;
1216
+ /**
1217
+ * A destination to link to, rendered in the href attribute of a link.
1218
+ */
1219
+ "url"?: string;
1220
+ /**
1221
+ * Specifies where to open the linked document.
1222
+ */
1223
+ "urlTarget"?: '_blank' | '_self';
1224
+ /**
1225
+ * The variant of the menu item button.
1226
+ * @default 'text'
1227
+ */
1228
+ "variant": 'filled' | 'outlined' | 'text';
1229
+ }
1050
1230
  /**
1051
1231
  * A navigation component to switch between different pages of paged chunks of
1052
1232
  * data such as a table. Pagination is built with list HTML elements and a
@@ -1373,7 +1553,7 @@ export namespace Components {
1373
1553
  /**
1374
1554
  * The value of the select. <br /> <br /> The value of the select depends on whether it is allowed to choose a single item or several items. <br /> When only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br /> <br /> In case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item, in the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created
1375
1555
  */
1376
- "value"?: string | string[] | CatSelectTaggingValue | CatSelectMultipleTaggingValue;
1556
+ "value"?: CatSelectValue;
1377
1557
  }
1378
1558
  interface CatSelectDemo {
1379
1559
  }
@@ -2024,6 +2204,14 @@ export interface CatInputCustomEvent<T> extends CustomEvent<T> {
2024
2204
  detail: T;
2025
2205
  target: HTMLCatInputElement;
2026
2206
  }
2207
+ export interface CatMenuCustomEvent<T> extends CustomEvent<T> {
2208
+ detail: T;
2209
+ target: HTMLCatMenuElement;
2210
+ }
2211
+ export interface CatMenuItemCustomEvent<T> extends CustomEvent<T> {
2212
+ detail: T;
2213
+ target: HTMLCatMenuItemElement;
2214
+ }
2027
2215
  export interface CatPaginationCustomEvent<T> extends CustomEvent<T> {
2028
2216
  detail: T;
2029
2217
  target: HTMLCatPaginationElement;
@@ -2319,6 +2507,51 @@ declare global {
2319
2507
  prototype: HTMLCatInputElement;
2320
2508
  new (): HTMLCatInputElement;
2321
2509
  };
2510
+ interface HTMLCatMenuElementEventMap {
2511
+ "catOpen": FocusEvent;
2512
+ "catClose": FocusEvent;
2513
+ "catTriggerClick": MouseEvent;
2514
+ }
2515
+ /**
2516
+ * A menu component that provides a dropdown with a built-in configurable trigger button
2517
+ * and proper ARIA semantics and keyboard navigation for menu items.
2518
+ * The trigger is always a cat-button with sensible defaults but fully configurable
2519
+ * through trigger-specific props.
2520
+ */
2521
+ interface HTMLCatMenuElement extends Components.CatMenu, HTMLStencilElement {
2522
+ addEventListener<K extends keyof HTMLCatMenuElementEventMap>(type: K, listener: (this: HTMLCatMenuElement, ev: CatMenuCustomEvent<HTMLCatMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
2523
+ addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
2524
+ addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
2525
+ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
2526
+ removeEventListener<K extends keyof HTMLCatMenuElementEventMap>(type: K, listener: (this: HTMLCatMenuElement, ev: CatMenuCustomEvent<HTMLCatMenuElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
2527
+ removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
2528
+ removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
2529
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
2530
+ }
2531
+ var HTMLCatMenuElement: {
2532
+ prototype: HTMLCatMenuElement;
2533
+ new (): HTMLCatMenuElement;
2534
+ };
2535
+ interface HTMLCatMenuItemElementEventMap {
2536
+ "catClick": MouseEvent;
2537
+ }
2538
+ /**
2539
+ * A menu item component that renders as a button with proper ARIA semantics.
2540
+ */
2541
+ interface HTMLCatMenuItemElement extends Components.CatMenuItem, HTMLStencilElement {
2542
+ addEventListener<K extends keyof HTMLCatMenuItemElementEventMap>(type: K, listener: (this: HTMLCatMenuItemElement, ev: CatMenuItemCustomEvent<HTMLCatMenuItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
2543
+ addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
2544
+ addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
2545
+ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
2546
+ removeEventListener<K extends keyof HTMLCatMenuItemElementEventMap>(type: K, listener: (this: HTMLCatMenuItemElement, ev: CatMenuItemCustomEvent<HTMLCatMenuItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
2547
+ removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
2548
+ removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
2549
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
2550
+ }
2551
+ var HTMLCatMenuItemElement: {
2552
+ prototype: HTMLCatMenuItemElement;
2553
+ new (): HTMLCatMenuItemElement;
2554
+ };
2322
2555
  interface HTMLCatPaginationElementEventMap {
2323
2556
  "catChange": number;
2324
2557
  }
@@ -2414,7 +2647,7 @@ declare global {
2414
2647
  interface HTMLCatSelectElementEventMap {
2415
2648
  "catOpen": FocusEvent;
2416
2649
  "catClose": FocusEvent;
2417
- "catChange": InputEvent;
2650
+ "catChange": CatSelectValue;
2418
2651
  "catBlur": FocusEvent;
2419
2652
  }
2420
2653
  /**
@@ -2618,6 +2851,8 @@ declare global {
2618
2851
  "cat-form-group": HTMLCatFormGroupElement;
2619
2852
  "cat-icon": HTMLCatIconElement;
2620
2853
  "cat-input": HTMLCatInputElement;
2854
+ "cat-menu": HTMLCatMenuElement;
2855
+ "cat-menu-item": HTMLCatMenuItemElement;
2621
2856
  "cat-pagination": HTMLCatPaginationElement;
2622
2857
  "cat-radio": HTMLCatRadioElement;
2623
2858
  "cat-radio-group": HTMLCatRadioGroupElement;
@@ -2791,6 +3026,11 @@ declare namespace LocalJSX {
2791
3026
  * @default false
2792
3027
  */
2793
3028
  "iconRight"?: boolean;
3029
+ /**
3030
+ * Link behaves as an inline element.
3031
+ * @default false
3032
+ */
3033
+ "inline"?: boolean;
2794
3034
  /**
2795
3035
  * Displays the button in a loading state with a spinner. Just like a disabled button, an inactive button is unusable and un-clickable. However, it retains the current focus state.
2796
3036
  * @default false
@@ -3369,6 +3609,7 @@ declare namespace LocalJSX {
3369
3609
  interface CatDropdown {
3370
3610
  /**
3371
3611
  * Do not navigate focus inside the dropdown via vertical arrow keys.
3612
+ * @deprecated use cat-menu
3372
3613
  * @default 'vertical'
3373
3614
  */
3374
3615
  "arrowNavigation"?: 'horizontal' | 'vertical' | 'none';
@@ -3405,6 +3646,7 @@ declare namespace LocalJSX {
3405
3646
  "noResize"?: boolean;
3406
3647
  /**
3407
3648
  * Trigger element will not receive focus when dropdown is closed.
3649
+ * @deprecated the property can be removed, focus is arranged internally
3408
3650
  * @default false
3409
3651
  */
3410
3652
  "noReturnFocus"?: boolean;
@@ -3641,6 +3883,170 @@ declare namespace LocalJSX {
3641
3883
  */
3642
3884
  "value"?: string;
3643
3885
  }
3886
+ /**
3887
+ * A menu component that provides a dropdown with a built-in configurable trigger button
3888
+ * and proper ARIA semantics and keyboard navigation for menu items.
3889
+ * The trigger is always a cat-button with sensible defaults but fully configurable
3890
+ * through trigger-specific props.
3891
+ */
3892
+ interface CatMenu {
3893
+ /**
3894
+ * The arrow key navigation direction for menu items.
3895
+ * @default 'vertical'
3896
+ */
3897
+ "arrowNavigation"?: 'horizontal' | 'vertical';
3898
+ /**
3899
+ * Whether the dropdown trigger should be initialized only before first opening. Can be useful when trigger is rendered dynamically.
3900
+ * @default false
3901
+ */
3902
+ "delayedTriggerInit"?: boolean;
3903
+ /**
3904
+ * Disable the menu.
3905
+ * @default false
3906
+ */
3907
+ "disabled"?: boolean;
3908
+ /**
3909
+ * Make the dropdown match the width of the reference regardless of its contents. Note that this only applies to the minimum width of the dropdown. The maximum width is still limited by the viewport.
3910
+ * @default false
3911
+ */
3912
+ "justify"?: boolean;
3913
+ /**
3914
+ * Do not change the size of the dropdown to ensure it isn’t too big to fit in the viewport (or more specifically, its clipping context).
3915
+ * @default false
3916
+ */
3917
+ "noResize"?: boolean;
3918
+ /**
3919
+ * Emitted when the dropdown is closed.
3920
+ */
3921
+ "onCatClose"?: (event: CatMenuCustomEvent<FocusEvent>) => void;
3922
+ /**
3923
+ * Emitted when the dropdown is opened.
3924
+ */
3925
+ "onCatOpen"?: (event: CatMenuCustomEvent<FocusEvent>) => void;
3926
+ /**
3927
+ * Emitted when the trigger button is clicked.
3928
+ */
3929
+ "onCatTriggerClick"?: (event: CatMenuCustomEvent<MouseEvent>) => void;
3930
+ /**
3931
+ * Allow overflow when dropdown is open.
3932
+ * @default false
3933
+ */
3934
+ "overflow"?: boolean;
3935
+ /**
3936
+ * The placement of the dropdown.
3937
+ * @default 'bottom-start'
3938
+ */
3939
+ "placement"?: Placement;
3940
+ /**
3941
+ * The trigger button accessibility label. If not set, falls back to triggerLabel.
3942
+ */
3943
+ "triggerA11yLabel"?: string;
3944
+ /**
3945
+ * Additional CSS class for the trigger button.
3946
+ */
3947
+ "triggerClass"?: string;
3948
+ /**
3949
+ * The color palette of the trigger button.
3950
+ * @default 'secondary'
3951
+ */
3952
+ "triggerColor"?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
3953
+ /**
3954
+ * The trigger button icon.
3955
+ */
3956
+ "triggerIcon"?: string;
3957
+ /**
3958
+ * Show only the icon in the trigger button.
3959
+ */
3960
+ "triggerIconOnly"?: boolean | Breakpoint;
3961
+ /**
3962
+ * The trigger button label.
3963
+ */
3964
+ "triggerLabel"?: string;
3965
+ /**
3966
+ * Native attributes for the trigger button.
3967
+ */
3968
+ "triggerNativeAttributes"?: { [key: string]: string };
3969
+ /**
3970
+ * The trigger button size.
3971
+ * @default 'm'
3972
+ */
3973
+ "triggerSize"?: 'xs' | 's' | 'm' | 'l' | 'xl';
3974
+ /**
3975
+ * Test ID for the trigger button.
3976
+ */
3977
+ "triggerTestId"?: string;
3978
+ /**
3979
+ * The trigger button variant.
3980
+ * @default 'text'
3981
+ */
3982
+ "triggerVariant"?: 'filled' | 'outlined' | 'text';
3983
+ }
3984
+ /**
3985
+ * A menu item component that renders as a button with proper ARIA semantics.
3986
+ */
3987
+ interface CatMenuItem {
3988
+ /**
3989
+ * Whether the menu item is active.
3990
+ * @default false
3991
+ */
3992
+ "active"?: boolean;
3993
+ /**
3994
+ * The color of the menu item.
3995
+ */
3996
+ "color"?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info';
3997
+ /**
3998
+ * Specifies that the menu item should be disabled.
3999
+ * @default false
4000
+ */
4001
+ "disabled"?: boolean;
4002
+ /**
4003
+ * The name of an icon to be displayed in the menu item.
4004
+ */
4005
+ "icon"?: string;
4006
+ /**
4007
+ * Hide the actual button content and only display the icon.
4008
+ * @default false
4009
+ */
4010
+ "iconOnly"?: boolean | Breakpoint;
4011
+ /**
4012
+ * Display the icon on the right.
4013
+ * @default false
4014
+ */
4015
+ "iconRight"?: boolean;
4016
+ /**
4017
+ * A unique identifier for the menu item.
4018
+ */
4019
+ "identifier"?: string;
4020
+ /**
4021
+ * The loading state of the menu item.
4022
+ */
4023
+ "loading"?: boolean;
4024
+ /**
4025
+ * Attributes that will be added to the native HTML button element
4026
+ */
4027
+ "nativeAttributes"?: { [key: string]: string };
4028
+ /**
4029
+ * Emitted when the trigger button is clicked.
4030
+ */
4031
+ "onCatClick"?: (event: CatMenuItemCustomEvent<MouseEvent>) => void;
4032
+ /**
4033
+ * A unique identifier for the underlying native element that is used for testing purposes. The attribute is added as `data-test` attribute and acts as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.
4034
+ */
4035
+ "testId"?: string;
4036
+ /**
4037
+ * A destination to link to, rendered in the href attribute of a link.
4038
+ */
4039
+ "url"?: string;
4040
+ /**
4041
+ * Specifies where to open the linked document.
4042
+ */
4043
+ "urlTarget"?: '_blank' | '_self';
4044
+ /**
4045
+ * The variant of the menu item button.
4046
+ * @default 'text'
4047
+ */
4048
+ "variant"?: 'filled' | 'outlined' | 'text';
4049
+ }
3644
4050
  /**
3645
4051
  * A navigation component to switch between different pages of paged chunks of
3646
4052
  * data such as a table. Pagination is built with list HTML elements and a
@@ -3952,7 +4358,7 @@ declare namespace LocalJSX {
3952
4358
  /**
3953
4359
  * Emitted when the value is changed.
3954
4360
  */
3955
- "onCatChange"?: (event: CatSelectCustomEvent<InputEvent>) => void;
4361
+ "onCatChange"?: (event: CatSelectCustomEvent<CatSelectValue>) => void;
3956
4362
  /**
3957
4363
  * Emitted when the select dropdown is closed.
3958
4364
  */
@@ -3996,7 +4402,7 @@ declare namespace LocalJSX {
3996
4402
  /**
3997
4403
  * The value of the select. <br /> <br /> The value of the select depends on whether it is allowed to choose a single item or several items. <br /> When only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br /> <br /> In case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item, in the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created
3998
4404
  */
3999
- "value"?: string | string[] | CatSelectTaggingValue | CatSelectMultipleTaggingValue;
4405
+ "value"?: CatSelectValue;
4000
4406
  }
4001
4407
  interface CatSelectDemo {
4002
4408
  }
@@ -4620,6 +5026,8 @@ declare namespace LocalJSX {
4620
5026
  "cat-form-group": CatFormGroup;
4621
5027
  "cat-icon": CatIcon;
4622
5028
  "cat-input": CatInput;
5029
+ "cat-menu": CatMenu;
5030
+ "cat-menu-item": CatMenuItem;
4623
5031
  "cat-pagination": CatPagination;
4624
5032
  "cat-radio": CatRadio;
4625
5033
  "cat-radio-group": CatRadioGroup;
@@ -4705,6 +5113,17 @@ declare module "@stencil/core" {
4705
5113
  * including passwords and numbers.
4706
5114
  */
4707
5115
  "cat-input": LocalJSX.CatInput & JSXBase.HTMLAttributes<HTMLCatInputElement>;
5116
+ /**
5117
+ * A menu component that provides a dropdown with a built-in configurable trigger button
5118
+ * and proper ARIA semantics and keyboard navigation for menu items.
5119
+ * The trigger is always a cat-button with sensible defaults but fully configurable
5120
+ * through trigger-specific props.
5121
+ */
5122
+ "cat-menu": LocalJSX.CatMenu & JSXBase.HTMLAttributes<HTMLCatMenuElement>;
5123
+ /**
5124
+ * A menu item component that renders as a button with proper ARIA semantics.
5125
+ */
5126
+ "cat-menu-item": LocalJSX.CatMenuItem & JSXBase.HTMLAttributes<HTMLCatMenuItemElement>;
4708
5127
  /**
4709
5128
  * A navigation component to switch between different pages of paged chunks of
4710
5129
  * data such as a table. Pagination is built with list HTML elements and a
@@ -2,7 +2,8 @@ export { Components, JSX } from './components';
2
2
  export { CatI18nRegistry, CatI18nTranslationFn, catI18nRegistry } from './components/cat-i18n/cat-i18n-registry';
3
3
  export { CatIconRegistry, catIconRegistry } from './components/cat-icon/cat-icon-registry';
4
4
  export { CatNotificationService, ToastOptions, catNotificationService } from './components/cat-notification/cat-notification';
5
- export { CatSelectConnector, CatSelectMultipleTaggingValue, CatSelectTaggingValue, Item, Page, RenderInfo } from './components/cat-select/cat-select';
5
+ export { CatSelectConnector, CatSelectMultipleTaggingValue, CatSelectTaggingValue, Item, Page, RenderInfo, CatSelectValue } from './components/cat-select/cat-select';
6
6
  export { objectArrayConnector, stringArrayConnector, stringMapConnector } from './components/cat-select/connectors';
7
7
  export { TooltipPlacement } from './components/cat-tooltip/cat-tooltip';
8
8
  export { FormatTimeMaskOptions, FormatDateMaskOptions } from './components/cat-input/cat-input';
9
+ export { DropdownPlacement } from './components/cat-dropdown/cat-dropdown';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haiilo/catalyst",
3
- "version": "14.3.0",
3
+ "version": "14.5.0",
4
4
  "description": "Catalyst Design System",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -39,7 +39,7 @@
39
39
  "sanitize.css": "13.0.0",
40
40
  "tabbable": "6.2.0",
41
41
  "toastify-js": "1.12.0",
42
- "@haiilo/catalyst-tokens": "14.3.0"
42
+ "@haiilo/catalyst-tokens": "14.5.0"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@babel/core": "7.28.5",