@mozaic-ds/vue 2.17.0 → 2.19.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 (69) hide show
  1. package/dist/mozaic-vue.css +1 -1
  2. package/dist/mozaic-vue.d.ts +158 -72
  3. package/dist/mozaic-vue.js +1728 -4748
  4. package/dist/mozaic-vue.js.map +1 -1
  5. package/dist/mozaic-vue.umd.cjs +6 -25
  6. package/dist/mozaic-vue.umd.cjs.map +1 -1
  7. package/package.json +16 -10
  8. package/src/components/BrandPresets.mdx +20 -2
  9. package/src/components/Migration.mdx +651 -0
  10. package/src/components/accordionlistitem/MAccordionListItem.spec.ts +22 -3
  11. package/src/components/accordionlistitem/MAccordionListItem.vue +38 -28
  12. package/src/components/actionlistbox/MActionListbox.spec.ts +99 -0
  13. package/src/components/actionlistbox/MActionListbox.vue +54 -7
  14. package/src/components/breadcrumb/MBreadcrumb.vue +1 -1
  15. package/src/components/builtinmenu/MBuiltInMenu.spec.ts +30 -1
  16. package/src/components/builtinmenu/MBuiltInMenu.vue +26 -17
  17. package/src/components/builtinmenu/README.md +2 -0
  18. package/src/components/button/MButton.spec.ts +26 -0
  19. package/src/components/button/MButton.vue +2 -0
  20. package/src/components/callout/MCallout.spec.ts +35 -0
  21. package/src/components/callout/MCallout.stories.ts +0 -3
  22. package/src/components/callout/MCallout.vue +26 -7
  23. package/src/components/callout/README.md +4 -2
  24. package/src/components/carousel/MCarousel.spec.ts +26 -2
  25. package/src/components/carousel/MCarousel.vue +10 -4
  26. package/src/components/checklistmenu/MCheckListMenu.spec.ts +12 -1
  27. package/src/components/checklistmenu/MCheckListMenu.vue +6 -0
  28. package/src/components/checklistmenu/README.md +2 -0
  29. package/src/components/combobox/MCombobox.vue +7 -0
  30. package/src/components/datatable/datatable.mdx +3 -2
  31. package/src/components/drawer/MDrawer.spec.ts +102 -3
  32. package/src/components/drawer/MDrawer.vue +73 -14
  33. package/src/components/field/MField.vue +1 -0
  34. package/src/components/fileuploader/MFileUploader.vue +2 -2
  35. package/src/components/fileuploaderitem/MFileUploaderItem.vue +2 -7
  36. package/src/components/iconbutton/MIconButton.spec.ts +15 -0
  37. package/src/components/iconbutton/MIconButton.vue +1 -0
  38. package/src/components/kpiitem/MKpiItem.spec.ts +13 -0
  39. package/src/components/kpiitem/MKpiItem.vue +1 -1
  40. package/src/components/modal/MModal.spec.ts +115 -3
  41. package/src/components/modal/MModal.vue +91 -11
  42. package/src/components/modal/README.md +1 -1
  43. package/src/components/navigationindicator/MNavigationIndicator.spec.ts +75 -18
  44. package/src/components/navigationindicator/MNavigationIndicator.vue +10 -12
  45. package/src/components/optionListbox/MOptionListbox.vue +16 -1
  46. package/src/components/overlay/MOverlay.spec.ts +1 -1
  47. package/src/components/overlay/MOverlay.vue +1 -1
  48. package/src/components/phonenumber/MPhoneNumber.spec.ts +6 -2
  49. package/src/components/phonenumber/MPhoneNumber.vue +20 -16
  50. package/src/components/popover/MPopover.spec.ts +126 -0
  51. package/src/components/popover/MPopover.vue +36 -1
  52. package/src/components/segmentedcontrol/MSegmentedControl.spec.ts +92 -0
  53. package/src/components/segmentedcontrol/MSegmentedControl.vue +61 -2
  54. package/src/components/sidebarexpandableitem/MSidebarExpandableItem.spec.ts +12 -0
  55. package/src/components/sidebarexpandableitem/MSidebarExpandableItem.vue +1 -0
  56. package/src/components/starrating/MStarRating.spec.ts +19 -22
  57. package/src/components/starrating/MStarRating.vue +3 -2
  58. package/src/components/steppercompact/MStepperCompact.spec.ts +9 -0
  59. package/src/components/steppercompact/MStepperCompact.vue +1 -1
  60. package/src/components/stepperinline/MStepperInline.spec.ts +11 -0
  61. package/src/components/stepperinline/MStepperInline.vue +1 -1
  62. package/src/components/stepperstacked/MStepperStacked.spec.ts +13 -0
  63. package/src/components/stepperstacked/MStepperStacked.vue +1 -0
  64. package/src/components/tabs/MTabs.vue +90 -4
  65. package/src/components/tabs/Mtabs.spec.ts +162 -0
  66. package/src/components/textinput/MTextInput.vue +2 -2
  67. package/src/components/toggle/MToggle.vue +1 -1
  68. package/src/main.ts +1 -0
  69. package/src/components/ComponentsMapping.mdx +0 -98
@@ -50,6 +50,7 @@ onBack?: (() => any) | undefined;
50
50
  }>, {
51
51
  scroll: boolean;
52
52
  }, {}, {}, {}, string, ComponentProvideOptions, false, {
53
+ sectionRef: HTMLElement;
53
54
  titleRef: HTMLHeadingElement;
54
55
  }, any>;
55
56
 
@@ -101,9 +102,13 @@ declare const __VLS_component_19: DefineComponent<__VLS_Props_31, {}, {}, {}, {}
101
102
  }>, {
102
103
  scroll: boolean;
103
104
  closable: boolean;
104
- }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
105
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {
106
+ modalRef: HTMLElement;
107
+ }, any>;
105
108
 
106
- declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
109
+ declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {
110
+ tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
111
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
107
112
 
108
113
  declare const __VLS_component_20: DefineComponent<__VLS_Props_34, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_34> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
109
114
 
@@ -121,7 +126,9 @@ size: "s" | "m" | "l";
121
126
  position: "top" | "right" | "bottom" | "left";
122
127
  closable: boolean;
123
128
  pointer: boolean;
124
- }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
129
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {
130
+ popoverRef: HTMLDivElement;
131
+ }, any>;
125
132
 
126
133
  declare const __VLS_component_23: DefineComponent<__VLS_Props_46, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
127
134
  "update:modelValue": (value: boolean) => any;
@@ -229,10 +236,10 @@ onClose?: (() => any) | undefined;
229
236
  status: "info" | "success" | "warning" | "error";
230
237
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
231
238
 
232
- declare const __VLS_component_28: DefineComponent<__VLS_Props_62, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
239
+ declare const __VLS_component_28: DefineComponent<__VLS_Props_63, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
233
240
  "update:modelValue": (value: boolean) => any;
234
241
  "remove-tag": (id: string) => any;
235
- }, string, PublicProps, Readonly<__VLS_Props_62> & Readonly<{
242
+ }, string, PublicProps, Readonly<__VLS_Props_63> & Readonly<{
236
243
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
237
244
  "onRemove-tag"?: ((id: string) => any) | undefined;
238
245
  }>, {
@@ -241,15 +248,15 @@ contextualisedNumber: number;
241
248
  removableLabel: string;
242
249
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
243
250
 
244
- declare const __VLS_component_29: DefineComponent<__VLS_Props_64, {
251
+ declare const __VLS_component_29: DefineComponent<__VLS_Props_65, {
245
252
  focus: typeof focus_2;
246
253
  }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
247
254
  "update:modelValue": (value: string | number) => any;
248
- }, string, PublicProps, Readonly<__VLS_Props_64> & Readonly<{
255
+ }, string, PublicProps, Readonly<__VLS_Props_65> & Readonly<{
249
256
  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
250
257
  }>, {
251
258
  size: "s" | "m";
252
- inputType: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
259
+ inputType: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text";
253
260
  clearLabel: string;
254
261
  }, {}, {}, {}, string, ComponentProvideOptions, false, {
255
262
  textInput: HTMLInputElement;
@@ -257,14 +264,14 @@ textInput: HTMLInputElement;
257
264
 
258
265
  declare const __VLS_component_3: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
259
266
 
260
- declare const __VLS_component_30: DefineComponent<__VLS_Props_65, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_65> & Readonly<{}>, {
267
+ declare const __VLS_component_30: DefineComponent<__VLS_Props_66, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_66> & Readonly<{}>, {
261
268
  appearance: "primary" | "secondary" | "inverse";
262
269
  bordered: boolean;
263
270
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
264
271
 
265
- declare const __VLS_component_31: DefineComponent<__VLS_Props_66, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
272
+ declare const __VLS_component_31: DefineComponent<__VLS_Props_67, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
266
273
  action: () => any;
267
- }, string, PublicProps, Readonly<__VLS_Props_66> & Readonly<{
274
+ }, string, PublicProps, Readonly<__VLS_Props_67> & Readonly<{
268
275
  onAction?: (() => any) | undefined;
269
276
  }>, {
270
277
  appearance: "primary" | "secondary" | "inverse";
@@ -272,16 +279,16 @@ iconPosition: "bottom" | "right";
272
279
  bordered: boolean;
273
280
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
274
281
 
275
- declare const __VLS_component_32: DefineComponent<__VLS_Props_67, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_67> & Readonly<{}>, {
282
+ declare const __VLS_component_32: DefineComponent<__VLS_Props_68, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_68> & Readonly<{}>, {
276
283
  appearance: "primary" | "secondary";
277
284
  label: string;
278
285
  trigger: "container" | "icon" | "button";
279
286
  bordered: boolean;
280
287
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
281
288
 
282
- declare const __VLS_component_33: DefineComponent<__VLS_Props_68, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
289
+ declare const __VLS_component_33: DefineComponent<__VLS_Props_69, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
283
290
  "update:modelValue": (value: boolean) => any;
284
- }, string, PublicProps, Readonly<__VLS_Props_68> & Readonly<{
291
+ }, string, PublicProps, Readonly<__VLS_Props_69> & Readonly<{
285
292
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
286
293
  }>, {
287
294
  inputType: "checkbox" | "radio";
@@ -289,16 +296,16 @@ bordered: boolean;
289
296
  inputPosition: "left" | "right";
290
297
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
291
298
 
292
- declare const __VLS_component_34: DefineComponent<__VLS_Props_69, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
299
+ declare const __VLS_component_34: DefineComponent<__VLS_Props_70, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
293
300
  "update:open": (value: boolean) => any;
294
- }, string, PublicProps, Readonly<__VLS_Props_69> & Readonly<{
301
+ }, string, PublicProps, Readonly<__VLS_Props_70> & Readonly<{
295
302
  "onUpdate:open"?: ((value: boolean) => any) | undefined;
296
303
  }>, {
297
304
  status: "info" | "success" | "warning" | "error";
298
305
  closable: boolean;
299
306
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
300
307
 
301
- declare const __VLS_component_35: DefineComponent<__VLS_Props_72, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_72> & Readonly<{}>, {
308
+ declare const __VLS_component_35: DefineComponent<__VLS_Props_73, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_73> & Readonly<{}>, {
302
309
  position: "top" | "bottom" | "left" | "right";
303
310
  pointer: boolean;
304
311
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
@@ -313,6 +320,7 @@ onAction?: ((value: string | number) => any) | undefined;
313
320
  position: "top" | "bottom" | "left" | "right";
314
321
  }, {}, {}, {}, string, ComponentProvideOptions, false, {
315
322
  popover: HTMLDivElement;
323
+ menuEl: HTMLUListElement;
316
324
  }, any>;
317
325
 
318
326
  declare const __VLS_component_5: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{}>, {
@@ -327,6 +335,7 @@ size: "s" | "m" | "l";
327
335
 
328
336
  declare const __VLS_component_7: DefineComponent<__VLS_Props_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_9> & Readonly<{}>, {
329
337
  appearance: "standard" | "accent" | "tips" | "inverse";
338
+ tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
330
339
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
331
340
 
332
341
  declare const __VLS_component_8: DefineComponent<__VLS_Props_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_10> & Readonly<{}>, {
@@ -384,7 +393,7 @@ readonly id: string;
384
393
  readonly name?: string | undefined;
385
394
  readonly modelValue?: string | number | undefined;
386
395
  readonly placeholder?: string | undefined;
387
- readonly inputType?: "date" | "email" | "number" | "password" | "search" | "tel" | "text" | undefined;
396
+ readonly inputType?: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text" | undefined;
388
397
  readonly isInvalid?: boolean | undefined;
389
398
  readonly disabled?: boolean | undefined;
390
399
  readonly size?: "s" | "m" | undefined;
@@ -414,7 +423,7 @@ id: string;
414
423
  name?: string;
415
424
  modelValue?: string | number;
416
425
  placeholder?: string;
417
- inputType?: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
426
+ inputType?: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text";
418
427
  isInvalid?: boolean;
419
428
  disabled?: boolean;
420
429
  size?: "s" | "m";
@@ -431,7 +440,7 @@ focus: () => void;
431
440
  "update:modelValue": (value: string | number) => any;
432
441
  }, string, {
433
442
  size: "s" | "m";
434
- inputType: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
443
+ inputType: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text";
435
444
  clearLabel: string;
436
445
  }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
437
446
  beforeCreate?: (() => void) | (() => void)[];
@@ -455,14 +464,14 @@ $nextTick: nextTick;
455
464
  $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
456
465
  } & Readonly<{
457
466
  size: "s" | "m";
458
- inputType: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
467
+ inputType: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text";
459
468
  clearLabel: string;
460
469
  }> & Omit<Readonly<{
461
470
  id: string;
462
471
  name?: string;
463
472
  modelValue?: string | number;
464
473
  placeholder?: string;
465
- inputType?: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
474
+ inputType?: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text";
466
475
  isInvalid?: boolean;
467
476
  disabled?: boolean;
468
477
  size?: "s" | "m";
@@ -695,6 +704,11 @@ declare type __VLS_Props_13 = {
695
704
  * When enabled, adds a visible border around the wrapper to highlight or separate its content.
696
705
  */
697
706
  outlined?: boolean;
707
+ /**
708
+ * Accessible label for the navigation landmark. Should describe the purpose
709
+ * of this menu to distinguish it from other navigations on the page.
710
+ */
711
+ label?: string;
698
712
  };
699
713
 
700
714
  /**
@@ -925,6 +939,11 @@ declare type __VLS_Props_2 = {
925
939
  * Icon component to display before the item title.
926
940
  */
927
941
  icon?: Component;
942
+ /**
943
+ * Heading level for the accordion trigger (h2–h6). Adjust to match the
944
+ * heading hierarchy of the page where the accordion is used.
945
+ */
946
+ tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
928
947
  };
929
948
 
930
949
  /**
@@ -1226,7 +1245,7 @@ declare type __VLS_Props_31 = {
1226
1245
  /**
1227
1246
  * Title of the modal.
1228
1247
  */
1229
- title: string;
1248
+ title?: string;
1230
1249
  /**
1231
1250
  * Description of the modal.
1232
1251
  */
@@ -2144,9 +2163,40 @@ declare type __VLS_Props_60 = {
2144
2163
  };
2145
2164
 
2146
2165
  /**
2147
- * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
2166
+ * A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.
2148
2167
  */
2149
2168
  declare type __VLS_Props_61 = {
2169
+ /**
2170
+ * Defines the currently active step.
2171
+ *
2172
+ * - If a `number` is provided, it represents the 1-based position of the step
2173
+ * in the `steps` array (e.g. `1` for the first step).
2174
+ * - If a `string` is provided, it must match the `id` of one of the steps.
2175
+ */
2176
+ currentStep?: string | number;
2177
+ /**
2178
+ * Steps of the stepper inline.
2179
+ */
2180
+ steps?: Array<{
2181
+ /**
2182
+ * Unique identifier for the step.
2183
+ */
2184
+ id?: string;
2185
+ /**
2186
+ * Label of the step.
2187
+ */
2188
+ label: string;
2189
+ /**
2190
+ * Optional additional information under the label.
2191
+ */
2192
+ additionalInfo?: string;
2193
+ }>;
2194
+ };
2195
+
2196
+ /**
2197
+ * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
2198
+ */
2199
+ declare type __VLS_Props_62 = {
2150
2200
  /**
2151
2201
  * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
2152
2202
  */
@@ -2196,7 +2246,7 @@ declare type __VLS_Props_61 = {
2196
2246
  /**
2197
2247
  * A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).
2198
2248
  */
2199
- declare type __VLS_Props_62 = {
2249
+ declare type __VLS_Props_63 = {
2200
2250
  /**
2201
2251
  * Defines the behavior and layout of the tag.
2202
2252
  */
@@ -2238,7 +2288,7 @@ declare type __VLS_Props_62 = {
2238
2288
  /**
2239
2289
  * A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#textarea).
2240
2290
  */
2241
- declare type __VLS_Props_63 = {
2291
+ declare type __VLS_Props_64 = {
2242
2292
  /**
2243
2293
  * A unique identifier for the textarea, used to associate the label with the form element.
2244
2294
  */
@@ -2284,7 +2334,7 @@ declare type __VLS_Props_63 = {
2284
2334
  /**
2285
2335
  * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
2286
2336
  */
2287
- declare type __VLS_Props_64 = {
2337
+ declare type __VLS_Props_65 = {
2288
2338
  /**
2289
2339
  * A unique identifier for the input element, used to associate the label with the form element.
2290
2340
  */
@@ -2304,7 +2354,7 @@ declare type __VLS_Props_64 = {
2304
2354
  /**
2305
2355
  * Defines the type of input.
2306
2356
  */
2307
- inputType?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';
2357
+ inputType?: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';
2308
2358
  /**
2309
2359
  * If `true`, applies an invalid state to the input.
2310
2360
  */
@@ -2342,7 +2392,7 @@ declare type __VLS_Props_64 = {
2342
2392
  /**
2343
2393
  * A tile is a container component used to group related content and actions within a structured layout. It provides a clickable or static area that can display text, images, icons, or interactive elements. Tiles are commonly used to present key information, navigate to detailed views, or trigger specific actions in dashboards, cards, and grid-based layouts. Their adaptable design allows them to accommodate various content types while maintaining a consistent and organized interface.
2344
2394
  */
2345
- declare type __VLS_Props_65 = {
2395
+ declare type __VLS_Props_66 = {
2346
2396
  /**
2347
2397
  * Defines the visual style of the tile.
2348
2398
  */
@@ -2356,7 +2406,7 @@ declare type __VLS_Props_65 = {
2356
2406
  /**
2357
2407
  * A tile is a container component used to group related content and actions within a structured layout. It provides a clickable or static area that can display text, images, icons, or interactive elements. Tiles are commonly used to present key information, navigate to detailed views, or trigger specific actions in dashboards, cards, and grid-based layouts. Their adaptable design allows them to accommodate various content types while maintaining a consistent and organized interface.
2358
2408
  */
2359
- declare type __VLS_Props_66 = {
2409
+ declare type __VLS_Props_67 = {
2360
2410
  /**
2361
2411
  * Defines the visual style of the tile.
2362
2412
  */
@@ -2388,7 +2438,7 @@ declare type __VLS_Props_66 = {
2388
2438
  /**
2389
2439
  * A tile is a container component used to group related content and actions within a structured layout. It provides a clickable or static area that can display text, images, icons, or interactive elements. Tiles are commonly used to present key information, navigate to detailed views, or trigger specific actions in dashboards, cards, and grid-based layouts. Their adaptable design allows them to accommodate various content types while maintaining a consistent and organized interface.
2390
2440
  */
2391
- declare type __VLS_Props_67 = {
2441
+ declare type __VLS_Props_68 = {
2392
2442
  /**
2393
2443
  * Defines the visual style of the tile.
2394
2444
  */
@@ -2410,7 +2460,7 @@ declare type __VLS_Props_67 = {
2410
2460
  /**
2411
2461
  * A tile is a container component used to group related content and actions within a structured layout. It provides a clickable or static area that can display text, images, icons, or interactive elements. Tiles are commonly used to present key information, navigate to detailed views, or trigger specific actions in dashboards, cards, and grid-based layouts. Their adaptable design allows them to accommodate various content types while maintaining a consistent and organized interface.
2412
2462
  */
2413
- declare type __VLS_Props_68 = {
2463
+ declare type __VLS_Props_69 = {
2414
2464
  /**
2415
2465
  * The current value of the tile (selected or not).
2416
2466
  */
@@ -2437,10 +2487,30 @@ declare type __VLS_Props_68 = {
2437
2487
  hideInput?: boolean;
2438
2488
  };
2439
2489
 
2490
+ declare type __VLS_Props_7 = {
2491
+ /**
2492
+ * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.
2493
+ */
2494
+ modelValue?: number;
2495
+ /**
2496
+ * Defines the menu items, each of which can include an icon and act as a button, link, or router-link.
2497
+ */
2498
+ items: MenuItem[];
2499
+ /**
2500
+ * When enabled, adds a visible border around the wrapper to highlight or separate its content.
2501
+ */
2502
+ outlined?: boolean;
2503
+ /**
2504
+ * Accessible label for the navigation landmark. Should describe the purpose
2505
+ * of this menu to distinguish it from other navigations on the page.
2506
+ */
2507
+ label?: string;
2508
+ };
2509
+
2440
2510
  /**
2441
2511
  * A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.
2442
2512
  */
2443
- declare type __VLS_Props_69 = {
2513
+ declare type __VLS_Props_70 = {
2444
2514
  /**
2445
2515
  * If `true`, display the Toaster.
2446
2516
  */
@@ -2471,25 +2541,10 @@ declare type __VLS_Props_69 = {
2471
2541
  timeout?: number;
2472
2542
  };
2473
2543
 
2474
- declare type __VLS_Props_7 = {
2475
- /**
2476
- * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.
2477
- */
2478
- modelValue?: number;
2479
- /**
2480
- * Defines the menu items, each of which can include an icon and act as a button, link, or router-link.
2481
- */
2482
- items: MenuItem[];
2483
- /**
2484
- * When enabled, adds a visible border around the wrapper to highlight or separate its content.
2485
- */
2486
- outlined?: boolean;
2487
- };
2488
-
2489
2544
  /**
2490
2545
  * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.
2491
2546
  */
2492
- declare type __VLS_Props_70 = {
2547
+ declare type __VLS_Props_71 = {
2493
2548
  /**
2494
2549
  * A unique identifier for the toggle, used to associate the label with the form element.
2495
2550
  */
@@ -2519,7 +2574,7 @@ declare type __VLS_Props_70 = {
2519
2574
  /**
2520
2575
  * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field Group section](/docs/form-elements-field-group--docs#toggle-group).
2521
2576
  */
2522
- declare type __VLS_Props_71 = {
2577
+ declare type __VLS_Props_72 = {
2523
2578
  /**
2524
2579
  * The name attribute for the toggle element, typically used for form submission.
2525
2580
  */
@@ -2548,7 +2603,7 @@ declare type __VLS_Props_71 = {
2548
2603
  /**
2549
2604
  * A tooltip is a small, contextual message that appears when users hover over, focus on, or tap an element, providing additional information or guidance without cluttering the interface. Tooltips are commonly used to explain icons, abbreviations, or complex actions. They typically disappear automatically when the user moves away from the trigger element.
2550
2605
  */
2551
- declare type __VLS_Props_72 = {
2606
+ declare type __VLS_Props_73 = {
2552
2607
  /**
2553
2608
  * A unique identifier for the tooltip, used to describe the tooltip.
2554
2609
  */
@@ -2616,15 +2671,20 @@ declare type __VLS_Props_9 = {
2616
2671
  /**
2617
2672
  * Title of the callout.
2618
2673
  */
2619
- title: string;
2674
+ title?: string;
2620
2675
  /**
2621
2676
  * Description of the callout.
2622
2677
  */
2623
- description: string;
2678
+ description?: string;
2624
2679
  /**
2625
2680
  * Allows to define the callout appearance.
2626
2681
  */
2627
2682
  appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
2683
+ /**
2684
+ * Heading level for the callout title (h2–h6). Adjust to match the
2685
+ * heading hierarchy of the page where the callout is used.
2686
+ */
2687
+ tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
2628
2688
  };
2629
2689
 
2630
2690
  declare type __VLS_PublicProps = {
@@ -2704,6 +2764,7 @@ declare function __VLS_template_12(): {
2704
2764
  footer?: VNode;
2705
2765
  };
2706
2766
  refs: {
2767
+ sectionRef: HTMLElement;
2707
2768
  titleRef: HTMLHeadingElement;
2708
2769
  };
2709
2770
  rootEl: any;
@@ -2900,7 +2961,9 @@ declare function __VLS_template_19(): {
2900
2961
  */
2901
2962
  footer?: VNode;
2902
2963
  };
2903
- refs: {};
2964
+ refs: {
2965
+ modalRef: HTMLElement;
2966
+ };
2904
2967
  rootEl: any;
2905
2968
  };
2906
2969
 
@@ -3010,7 +3073,9 @@ declare function __VLS_template_22(): {
3010
3073
  */
3011
3074
  footer?: VNode;
3012
3075
  };
3013
- refs: {};
3076
+ refs: {
3077
+ popoverRef: HTMLDivElement;
3078
+ };
3014
3079
  rootEl: any;
3015
3080
  };
3016
3081
 
@@ -3420,6 +3485,7 @@ declare function __VLS_template_4(): {
3420
3485
  };
3421
3486
  refs: {
3422
3487
  popover: HTMLDivElement;
3488
+ menuEl: HTMLUListElement;
3423
3489
  };
3424
3490
  rootEl: any;
3425
3491
  };
@@ -3571,7 +3637,7 @@ declare function __VLS_template_9(): {
3571
3637
  readonly name?: string | undefined;
3572
3638
  readonly modelValue?: string | number | undefined;
3573
3639
  readonly placeholder?: string | undefined;
3574
- readonly inputType?: "date" | "email" | "number" | "password" | "search" | "tel" | "text" | undefined;
3640
+ readonly inputType?: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text" | undefined;
3575
3641
  readonly isInvalid?: boolean | undefined;
3576
3642
  readonly disabled?: boolean | undefined;
3577
3643
  readonly size?: "s" | "m" | undefined;
@@ -3601,7 +3667,7 @@ declare function __VLS_template_9(): {
3601
3667
  name?: string;
3602
3668
  modelValue?: string | number;
3603
3669
  placeholder?: string;
3604
- inputType?: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
3670
+ inputType?: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text";
3605
3671
  isInvalid?: boolean;
3606
3672
  disabled?: boolean;
3607
3673
  size?: "s" | "m";
@@ -3618,7 +3684,7 @@ declare function __VLS_template_9(): {
3618
3684
  "update:modelValue": (value: string | number) => any;
3619
3685
  }, string, {
3620
3686
  size: "s" | "m";
3621
- inputType: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
3687
+ inputType: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text";
3622
3688
  clearLabel: string;
3623
3689
  }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
3624
3690
  beforeCreate?: (() => void) | (() => void)[];
@@ -3642,14 +3708,14 @@ declare function __VLS_template_9(): {
3642
3708
  $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
3643
3709
  } & Readonly<{
3644
3710
  size: "s" | "m";
3645
- inputType: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
3711
+ inputType: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text";
3646
3712
  clearLabel: string;
3647
3713
  }> & Omit<Readonly<{
3648
3714
  id: string;
3649
3715
  name?: string;
3650
3716
  modelValue?: string | number;
3651
3717
  placeholder?: string;
3652
- inputType?: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
3718
+ inputType?: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text";
3653
3719
  isInvalid?: boolean;
3654
3720
  disabled?: boolean;
3655
3721
  size?: "s" | "m";
@@ -4163,7 +4229,9 @@ export declare const MBuiltInMenu: DefineComponent<__VLS_Props_7, {}, {}, {}, {}
4163
4229
  "update:modelValue": (value: number) => any;
4164
4230
  }, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{
4165
4231
  "onUpdate:modelValue"?: ((value: number) => any) | undefined;
4166
- }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
4232
+ }>, {
4233
+ label: string;
4234
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
4167
4235
 
4168
4236
  export declare const MButton: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
4169
4237
 
@@ -4267,7 +4335,7 @@ onAction?: (() => any) | undefined;
4267
4335
  }>, {
4268
4336
  action: "pause" | "resume";
4269
4337
  player: boolean;
4270
- }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
4338
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
4271
4339
 
4272
4340
  export declare const MNumberBadge: DefineComponent<__VLS_Props_33, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_33> & Readonly<{}>, {
4273
4341
  appearance: "danger" | "accent" | "inverse" | "standard";
@@ -4409,8 +4477,8 @@ export declare const MQuantitySelector: DefineComponent<__VLS_Props_41, {}, {},
4409
4477
  }>, {
4410
4478
  modelValue: number;
4411
4479
  size: "s" | "m";
4412
- step: number;
4413
4480
  name: string;
4481
+ step: number;
4414
4482
  min: number;
4415
4483
  max: number;
4416
4484
  incrementlabel: string;
@@ -4436,7 +4504,7 @@ export declare const MSegmentedControl: DefineComponent<__VLS_Props_44, {}, {},
4436
4504
  }>, {
4437
4505
  modelValue: string | number;
4438
4506
  size: "s" | "m";
4439
- }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
4507
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
4440
4508
 
4441
4509
  export declare const MSelect: DefineComponent<__VLS_Props_45, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
4442
4510
  "update:modelValue": (value: string | number) => any;
@@ -4534,9 +4602,27 @@ additionalInfo?: string;
4534
4602
  currentStep: string | number;
4535
4603
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
4536
4604
 
4537
- export declare const MTabs: DefineComponent<__VLS_Props_61, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
4605
+ export declare const MStepperStacked: DefineComponent<__VLS_Props_61, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_61> & Readonly<{}>, {
4606
+ steps: Array<{
4607
+ /**
4608
+ * Unique identifier for the step.
4609
+ */
4610
+ id?: string;
4611
+ /**
4612
+ * Label of the step.
4613
+ */
4614
+ label: string;
4615
+ /**
4616
+ * Optional additional information under the label.
4617
+ */
4618
+ additionalInfo?: string;
4619
+ }>;
4620
+ currentStep: string | number;
4621
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
4622
+
4623
+ export declare const MTabs: DefineComponent<__VLS_Props_62, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
4538
4624
  "update:modelValue": (value?: string | number | undefined) => any;
4539
- }, string, PublicProps, Readonly<__VLS_Props_61> & Readonly<{
4625
+ }, string, PublicProps, Readonly<__VLS_Props_62> & Readonly<{
4540
4626
  "onUpdate:modelValue"?: ((value?: string | number | undefined) => any) | undefined;
4541
4627
  }>, {
4542
4628
  modelValue: string | number;
@@ -4547,9 +4633,9 @@ tab: HTMLButtonElement;
4547
4633
 
4548
4634
  export declare const MTag: __VLS_WithTemplateSlots_28<typeof __VLS_component_28, __VLS_TemplateResult_28["slots"]>;
4549
4635
 
4550
- export declare const MTextArea: DefineComponent<__VLS_Props_63, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
4636
+ export declare const MTextArea: DefineComponent<__VLS_Props_64, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
4551
4637
  "update:modelValue": (value: string | number) => any;
4552
- }, string, PublicProps, Readonly<__VLS_Props_63> & Readonly<{
4638
+ }, string, PublicProps, Readonly<__VLS_Props_64> & Readonly<{
4553
4639
  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
4554
4640
  }>, {
4555
4641
  rows: number;
@@ -4567,17 +4653,17 @@ export declare const MTileSelectable: __VLS_WithTemplateSlots_33<typeof __VLS_co
4567
4653
 
4568
4654
  export declare const MToaster: __VLS_WithTemplateSlots_34<typeof __VLS_component_34, __VLS_TemplateResult_34["slots"]>;
4569
4655
 
4570
- export declare const MToggle: DefineComponent<__VLS_Props_70, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
4656
+ export declare const MToggle: DefineComponent<__VLS_Props_71, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
4571
4657
  "update:modelValue": (value: boolean) => any;
4572
- }, string, PublicProps, Readonly<__VLS_Props_70> & Readonly<{
4658
+ }, string, PublicProps, Readonly<__VLS_Props_71> & Readonly<{
4573
4659
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
4574
4660
  }>, {
4575
4661
  size: "s" | "m";
4576
4662
  }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
4577
4663
 
4578
- export declare const MToggleGroup: DefineComponent<__VLS_Props_71, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
4664
+ export declare const MToggleGroup: DefineComponent<__VLS_Props_72, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
4579
4665
  "update:modelValue": (value: string[]) => any;
4580
- }, string, PublicProps, Readonly<__VLS_Props_71> & Readonly<{
4666
+ }, string, PublicProps, Readonly<__VLS_Props_72> & Readonly<{
4581
4667
  "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
4582
4668
  }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
4583
4669