@mozaic-ds/vue 2.16.0 → 2.18.0

package/dist/mozaic-vue.d.ts

@@ -18,7 +18,6 @@ import { OnCleanup } from '@vue/reactivity';
 import { PublicProps } from 'vue';
 import { Ref } from 'vue';
 import { ShallowRef } from 'vue';
-import { ShallowUnwrapRef } from 'vue';
 import { Slot } from 'vue';
 import { VNode } from 'vue';
 import { VNodeProps } from 'vue';
@@ -104,7 +103,9 @@ scroll: boolean;
 closable: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {
+tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_20: DefineComponent<__VLS_Props_34, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_34> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
@@ -122,7 +123,9 @@ size: "s" | "m" | "l";
 position: "top" | "right" | "bottom" | "left";
 closable: boolean;
 pointer: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+popoverRef: HTMLDivElement;
+}, any>;
 
 declare const __VLS_component_23: DefineComponent<__VLS_Props_46, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
@@ -207,9 +210,9 @@ onListboxKeydown: (event: KeyboardEvent) => void;
 hideFloatingItem: () => void;
 }> & Readonly<{
 "onLog-out"?: (() => any) | undefined;
-}>, "container"> & ShallowUnwrapRef<    {
-container: Readonly<ShallowRef<HTMLDivElement | null>>;
-}> & {} & ComponentCustomProperties & {} & {
+}>, "container"> & {
+container: HTMLDivElement | null;
+} & {} & ComponentCustomProperties & {} & {
 $slots: {
 default?(_: {}): any;
 };
@@ -230,11 +233,23 @@ onClose?: (() => any) | undefined;
 status: "info" | "success" | "warning" | "error";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
-declare const __VLS_component_28: DefineComponent<__VLS_Props_64, {
+declare const __VLS_component_28: DefineComponent<__VLS_Props_63, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: boolean) => any;
+"remove-tag": (id: string) => any;
+}, string, PublicProps, Readonly<__VLS_Props_63> & Readonly<{
+"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+"onRemove-tag"?: ((id: string) => any) | undefined;
+}>, {
+type: "informative" | "interactive" | "contextualised" | "removable" | "selectable";
+contextualisedNumber: number;
+removableLabel: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_29: DefineComponent<__VLS_Props_65, {
 focus: typeof focus_2;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string | number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_64> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_65> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
 size: "s" | "m";
@@ -244,16 +259,16 @@ clearLabel: string;
 textInput: HTMLInputElement;
 }, any>;
 
-declare const __VLS_component_29: DefineComponent<__VLS_Props_65, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_65> & Readonly<{}>, {
+declare const __VLS_component_3: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare const __VLS_component_30: DefineComponent<__VLS_Props_66, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_66> & Readonly<{}>, {
 appearance: "primary" | "secondary" | "inverse";
 bordered: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_3: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
-
-declare const __VLS_component_30: DefineComponent<__VLS_Props_66, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_31: DefineComponent<__VLS_Props_67, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 action: () => any;
-}, string, PublicProps, Readonly<__VLS_Props_66> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_67> & Readonly<{
 onAction?: (() => any) | undefined;
 }>, {
 appearance: "primary" | "secondary" | "inverse";
@@ -261,16 +276,16 @@ iconPosition: "bottom" | "right";
 bordered: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_31: DefineComponent<__VLS_Props_67, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_67> & Readonly<{}>, {
+declare const __VLS_component_32: DefineComponent<__VLS_Props_68, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_68> & Readonly<{}>, {
 appearance: "primary" | "secondary";
 label: string;
 trigger: "container" | "icon" | "button";
 bordered: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_32: DefineComponent<__VLS_Props_68, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_33: DefineComponent<__VLS_Props_69, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_68> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_69> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
 inputType: "checkbox" | "radio";
@@ -278,16 +293,16 @@ bordered: boolean;
 inputPosition: "left" | "right";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_33: DefineComponent<__VLS_Props_69, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_34: DefineComponent<__VLS_Props_70, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:open": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_69> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_70> & Readonly<{
 "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
 status: "info" | "success" | "warning" | "error";
 closable: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
-declare const __VLS_component_34: DefineComponent<__VLS_Props_72, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_72> & Readonly<{}>, {
+declare const __VLS_component_35: DefineComponent<__VLS_Props_73, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_73> & Readonly<{}>, {
 position: "top" | "bottom" | "left" | "right";
 pointer: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
@@ -316,6 +331,7 @@ size: "s" | "m" | "l";
 
 declare const __VLS_component_7: DefineComponent<__VLS_Props_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_9> & Readonly<{}>, {
 appearance: "standard" | "accent" | "tips" | "inverse";
+tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
 declare const __VLS_component_8: DefineComponent<__VLS_Props_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_10> & Readonly<{}>, {
@@ -337,7 +353,6 @@ placeholder: string;
 clearLabel: string;
 searchPlaceholder: string;
 selectLabel: string;
-counterLabel: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 combobox: HTMLDivElement;
 comboboxControl: HTMLButtonElement;
@@ -463,9 +478,9 @@ prefix?: string;
 suffix?: string;
 }> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
-}>, "focus" | ("size" | "inputType" | "clearLabel")> & ShallowUnwrapRef<    {
+}>, "focus" | ("size" | "inputType" | "clearLabel")> & {
 focus: () => void;
-}> & {} & ComponentCustomProperties & {} & {
+} & {} & ComponentCustomProperties & {} & {
 $slots: Readonly<{
 icon?: VNode;
 }> & {
@@ -553,17 +568,21 @@ options: Array<ListboxOption>;
 "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | null) => any) | undefined;
 onOpen?: (() => any) | undefined;
 onClose?: (() => any) | undefined;
-}>, "listboxEl" | "handleKeydown" | "toggleValue" | "clearSelection" | "activeIndex" | ("clearLabel" | "searchPlaceholder" | "selectLabel")> & ShallowUnwrapRef<    {
+}>, "listboxEl" | "handleKeydown" | "toggleValue" | "clearSelection" | "activeIndex" | ("clearLabel" | "searchPlaceholder" | "selectLabel")> & {
 handleKeydown: (event: KeyboardEvent) => void;
 toggleValue: (item?: ListboxOption) => void;
 clearSelection: () => void;
-listboxEl: Readonly<ShallowRef<HTMLDivElement | null>>;
-activeIndex: Ref<number, number>;
-}> & {} & ComponentCustomProperties & {} & {
+listboxEl: HTMLDivElement | null;
+activeIndex: number;
+} & {} & ComponentCustomProperties & {} & {
 $slots: Readonly<{
-optionPrefix: VNode;
+item(props: {
+item: ListboxOption;
+}): VNode;
 }> & {
-optionPrefix: VNode;
+item(props: {
+item: ListboxOption;
+}): VNode;
 };
 }) | null;
 }, HTMLDivElement>;
@@ -681,6 +700,11 @@ declare type __VLS_Props_13 = {
      * When enabled, adds a visible border around the wrapper to highlight or separate its content.
      */
     outlined?: boolean;
+    /**
+     * Accessible label for the navigation landmark. Should describe the purpose
+     * of this menu to distinguish it from other navigations on the page.
+     */
+    label?: string;
 };
 
 /**
@@ -911,6 +935,11 @@ declare type __VLS_Props_2 = {
      * Icon component to display before the item title.
      */
     icon?: Component;
+    /**
+     * Heading level for the accordion trigger (h2–h6). Adjust to match the
+     * heading hierarchy of the page where the accordion is used.
+     */
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 };
 
 /**
@@ -1982,6 +2011,11 @@ declare type __VLS_Props_56 = {
      * Allows to define the status message style.
      */
     status?: 'info' | 'success' | 'warning' | 'error' | 'neutral' | 'inprogress';
+    /**
+     * Allows to define the status message appearance.
+     * The accent status is used to highlight a specific message.
+     */
+    appearance?: 'standard' | 'accent';
     /**
      * Label of the status message.
      */
@@ -2125,9 +2159,40 @@ declare type __VLS_Props_60 = {
 };
 
 /**
- * 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.
+ * 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.
  */
 declare type __VLS_Props_61 = {
+    /**
+     * Defines the currently active step.
+     *
+     * - If a `number` is provided, it represents the 1-based position of the step
+     *   in the `steps` array (e.g. `1` for the first step).
+     * - If a `string` is provided, it must match the `id` of one of the steps.
+     */
+    currentStep?: string | number;
+    /**
+     * Steps of the stepper inline.
+     */
+    steps?: Array<{
+        /**
+         * Unique identifier for the step.
+         */
+        id?: string;
+        /**
+         * Label of the step.
+         */
+        label: string;
+        /**
+         * Optional additional information under the label.
+         */
+        additionalInfo?: string;
+    }>;
+};
+
+/**
+ * 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.
+ */
+declare type __VLS_Props_62 = {
     /**
      * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
      */
@@ -2177,7 +2242,7 @@ declare type __VLS_Props_61 = {
 /**
  * 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).
  */
-declare type __VLS_Props_62 = {
+declare type __VLS_Props_63 = {
     /**
      * Defines the behavior and layout of the tag.
      */
@@ -2219,7 +2284,7 @@ declare type __VLS_Props_62 = {
 /**
  * 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).
  */
-declare type __VLS_Props_63 = {
+declare type __VLS_Props_64 = {
     /**
      * A unique identifier for the textarea, used to associate the label with the form element.
      */
@@ -2265,7 +2330,7 @@ declare type __VLS_Props_63 = {
 /**
  * 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).
  */
-declare type __VLS_Props_64 = {
+declare type __VLS_Props_65 = {
     /**
      * A unique identifier for the input element, used to associate the label with the form element.
      */
@@ -2323,7 +2388,7 @@ declare type __VLS_Props_64 = {
 /**
  * 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.
  */
-declare type __VLS_Props_65 = {
+declare type __VLS_Props_66 = {
     /**
      * Defines the visual style of the tile.
      */
@@ -2337,7 +2402,7 @@ declare type __VLS_Props_65 = {
 /**
  * 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.
  */
-declare type __VLS_Props_66 = {
+declare type __VLS_Props_67 = {
     /**
      * Defines the visual style of the tile.
      */
@@ -2369,7 +2434,7 @@ declare type __VLS_Props_66 = {
 /**
  * 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.
  */
-declare type __VLS_Props_67 = {
+declare type __VLS_Props_68 = {
     /**
      * Defines the visual style of the tile.
      */
@@ -2391,7 +2456,7 @@ declare type __VLS_Props_67 = {
 /**
  * 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.
  */
-declare type __VLS_Props_68 = {
+declare type __VLS_Props_69 = {
     /**
      * The current value of the tile (selected or not).
      */
@@ -2418,10 +2483,30 @@ declare type __VLS_Props_68 = {
     hideInput?: boolean;
 };
 
+declare type __VLS_Props_7 = {
+    /**
+     * 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.
+     */
+    modelValue?: number;
+    /**
+     * Defines the menu items, each of which can include an icon and act as a button, link, or router-link.
+     */
+    items: MenuItem[];
+    /**
+     * When enabled, adds a visible border around the wrapper to highlight or separate its content.
+     */
+    outlined?: boolean;
+    /**
+     * Accessible label for the navigation landmark. Should describe the purpose
+     * of this menu to distinguish it from other navigations on the page.
+     */
+    label?: string;
+};
+
 /**
  * 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.
  */
-declare type __VLS_Props_69 = {
+declare type __VLS_Props_70 = {
     /**
      * If `true`, display the Toaster.
      */
@@ -2452,25 +2537,10 @@ declare type __VLS_Props_69 = {
     timeout?: number;
 };
 
-declare type __VLS_Props_7 = {
-    /**
-     * 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.
-     */
-    modelValue?: number;
-    /**
-     * Defines the menu items, each of which can include an icon and act as a button, link, or router-link.
-     */
-    items: MenuItem[];
-    /**
-     * When enabled, adds a visible border around the wrapper to highlight or separate its content.
-     */
-    outlined?: boolean;
-};
-
 /**
  * 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.
  */
-declare type __VLS_Props_70 = {
+declare type __VLS_Props_71 = {
     /**
      * A unique identifier for the toggle, used to associate the label with the form element.
      */
@@ -2500,7 +2570,7 @@ declare type __VLS_Props_70 = {
 /**
  * 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).
  */
-declare type __VLS_Props_71 = {
+declare type __VLS_Props_72 = {
     /**
      * The name attribute for the toggle element, typically used for form submission.
      */
@@ -2529,7 +2599,7 @@ declare type __VLS_Props_71 = {
 /**
  * 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.
  */
-declare type __VLS_Props_72 = {
+declare type __VLS_Props_73 = {
     /**
      * A unique identifier for the tooltip, used to describe the tooltip.
      */
@@ -2606,6 +2676,11 @@ declare type __VLS_Props_9 = {
      * Allows to define the callout appearance.
      */
     appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
+    /**
+     * Heading level for the callout title (h2–h6). Adjust to match the
+     * heading hierarchy of the page where the callout is used.
+     */
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 };
 
 declare type __VLS_PublicProps = {
@@ -2991,7 +3066,9 @@ declare function __VLS_template_22(): {
          */
         footer?: VNode;
     };
-    refs: {};
+    refs: {
+        popoverRef: HTMLDivElement;
+    };
     rootEl: any;
 };
 
@@ -3134,9 +3211,9 @@ declare function __VLS_template_25(): {
             hideFloatingItem: () => void;
         }> & Readonly<{
             "onLog-out"?: (() => any) | undefined;
-        }>, "container"> & ShallowUnwrapRef<    {
-        container: Readonly<ShallowRef<HTMLDivElement | null>>;
-        }> & {} & ComponentCustomProperties & {} & {
+        }>, "container"> & {
+            container: HTMLDivElement | null;
+        } & {} & ComponentCustomProperties & {} & {
             $slots: {
                 default?(_: {}): any;
             };
@@ -3187,18 +3264,16 @@ declare function __VLS_template_28(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
-         * Use this slot to insert an icon in the input.
+         * Use this slot to insert an icon in the tag.
          */
         icon?: VNode;
     }> & {
         /**
-         * Use this slot to insert an icon in the input.
+         * Use this slot to insert an icon in the tag.
          */
         icon?: VNode;
     };
-    refs: {
-        textInput: HTMLInputElement;
-    };
+    refs: {};
     rootEl: any;
 };
 
@@ -3206,33 +3281,19 @@ declare function __VLS_template_29(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
-         * Default slot for the main content of the tile.
-         */
-        default?: VNode[];
-        /**
-         * Named slot for additional content shown below the main content.
-         */
-        details?: VNode[];
-        /**
-         * Named slot for action element, such as a button or link.
+         * Use this slot to insert an icon in the input.
          */
-        action?: VNode[];
+        icon?: VNode;
     }> & {
         /**
-         * Default slot for the main content of the tile.
-         */
-        default?: VNode[];
-        /**
-         * Named slot for additional content shown below the main content.
-         */
-        details?: VNode[];
-        /**
-         * Named slot for action element, such as a button or link.
+         * Use this slot to insert an icon in the input.
          */
-        action?: VNode[];
+        icon?: VNode;
     };
-    refs: {};
-    rootEl: HTMLDivElement;
+    refs: {
+        textInput: HTMLInputElement;
+    };
+    rootEl: any;
 };
 
 declare function __VLS_template_3(): {
@@ -3261,6 +3322,39 @@ declare function __VLS_template_3(): {
 };
 
 declare function __VLS_template_30(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Default slot for the main content of the tile.
+         */
+        default?: VNode[];
+        /**
+         * Named slot for additional content shown below the main content.
+         */
+        details?: VNode[];
+        /**
+         * Named slot for action element, such as a button or link.
+         */
+        action?: VNode[];
+    }> & {
+        /**
+         * Default slot for the main content of the tile.
+         */
+        default?: VNode[];
+        /**
+         * Named slot for additional content shown below the main content.
+         */
+        details?: VNode[];
+        /**
+         * Named slot for action element, such as a button or link.
+         */
+        action?: VNode[];
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_31(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
@@ -3285,7 +3379,7 @@ declare function __VLS_template_30(): {
     rootEl: any;
 };
 
-declare function __VLS_template_31(): {
+declare function __VLS_template_32(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
@@ -3310,7 +3404,7 @@ declare function __VLS_template_31(): {
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_32(): {
+declare function __VLS_template_33(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
@@ -3335,7 +3429,7 @@ declare function __VLS_template_32(): {
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_33(): {
+declare function __VLS_template_34(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
@@ -3352,7 +3446,7 @@ declare function __VLS_template_33(): {
     rootEl: HTMLElement;
 };
 
-declare function __VLS_template_34(): {
+declare function __VLS_template_35(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
@@ -3486,14 +3580,18 @@ declare function __VLS_template_9(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
-         * Use this slot to add a prefix to options.
+         * Use this slot to customize the content of each item.
          */
-        optionPrefix: VNode;
+        item(props: {
+            item: ListboxOption;
+        }): VNode;
     }> & {
         /**
-         * Use this slot to add a prefix to options.
+         * Use this slot to customize the content of each item.
          */
-        optionPrefix: VNode;
+        item(props: {
+            item: ListboxOption;
+        }): VNode;
     };
     refs: {
         combobox: HTMLDivElement;
@@ -3620,9 +3718,9 @@ declare function __VLS_template_9(): {
                     suffix?: string;
                 }> & Readonly<{
                     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
-                }>, "focus" | ("size" | "inputType" | "clearLabel")> & ShallowUnwrapRef<    {
-                focus: () => void;
-                }> & {} & ComponentCustomProperties & {} & {
+                }>, "focus" | ("size" | "inputType" | "clearLabel")> & {
+                    focus: () => void;
+                } & {} & ComponentCustomProperties & {} & {
                     $slots: Readonly<{
                         icon?: VNode;
                     }> & {
@@ -3710,17 +3808,21 @@ declare function __VLS_template_9(): {
             "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | null) => any) | undefined;
             onOpen?: (() => any) | undefined;
             onClose?: (() => any) | undefined;
-        }>, "listboxEl" | "handleKeydown" | "toggleValue" | "clearSelection" | "activeIndex" | ("clearLabel" | "searchPlaceholder" | "selectLabel")> & ShallowUnwrapRef<    {
-        handleKeydown: (event: KeyboardEvent) => void;
-        toggleValue: (item?: ListboxOption) => void;
-        clearSelection: () => void;
-        listboxEl: Readonly<ShallowRef<HTMLDivElement | null>>;
-        activeIndex: Ref<number, number>;
-        }> & {} & ComponentCustomProperties & {} & {
+        }>, "listboxEl" | "handleKeydown" | "toggleValue" | "clearSelection" | "activeIndex" | ("clearLabel" | "searchPlaceholder" | "selectLabel")> & {
+            handleKeydown: (event: KeyboardEvent) => void;
+            toggleValue: (item?: ListboxOption) => void;
+            clearSelection: () => void;
+            listboxEl: HTMLDivElement | null;
+            activeIndex: number;
+        } & {} & ComponentCustomProperties & {} & {
             $slots: Readonly<{
-                optionPrefix: VNode;
+                item(props: {
+                    item: ListboxOption;
+                }): VNode;
             }> & {
-                optionPrefix: VNode;
+                item(props: {
+                    item: ListboxOption;
+                }): VNode;
             };
         }) | null;
     };
@@ -3783,6 +3885,8 @@ declare type __VLS_TemplateResult_33 = ReturnType<typeof __VLS_template_33>;
 
 declare type __VLS_TemplateResult_34 = ReturnType<typeof __VLS_template_34>;
 
+declare type __VLS_TemplateResult_35 = ReturnType<typeof __VLS_template_35>;
+
 declare type __VLS_TemplateResult_4 = ReturnType<typeof __VLS_template_4>;
 
 declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
@@ -3963,6 +4067,12 @@ declare type __VLS_WithTemplateSlots_34<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_35<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_4<T, S> = T & {
     new (): {
         $slots: S;
@@ -4111,7 +4221,9 @@ export declare const MBuiltInMenu: DefineComponent<__VLS_Props_7, {}, {}, {}, {}
 "update:modelValue": (value: number) => any;
 }, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{
 "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
+}>, {
+label: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
 export declare const MButton: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
 
@@ -4215,7 +4327,7 @@ onAction?: (() => any) | undefined;
 }>, {
 action: "pause" | "resume";
 player: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
 export declare const MNumberBadge: DefineComponent<__VLS_Props_33, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_33> & Readonly<{}>, {
 appearance: "danger" | "accent" | "inverse" | "standard";
@@ -4314,7 +4426,7 @@ outlined?: boolean;
 iconPosition?: "left" | "right" | "only";
 type?: "button" | "reset" | "submit";
 isLoading?: boolean;
-}> & Readonly<{}>, "appearance" | "type" | "size"> & ShallowUnwrapRef<    {}> & {} & ComponentCustomProperties & {} & {
+}> & Readonly<{}>, "appearance" | "type" | "size"> & {} & ComponentCustomProperties & {} & {
 $slots: Readonly<{
 default: string;
 icon?: VNode;
@@ -4357,8 +4469,8 @@ export declare const MQuantitySelector: DefineComponent<__VLS_Props_41, {}, {},
 }>, {
 modelValue: number;
 size: "s" | "m";
-step: number;
 name: string;
+step: number;
 min: number;
 max: number;
 incrementlabel: string;
@@ -4384,7 +4496,7 @@ export declare const MSegmentedControl: DefineComponent<__VLS_Props_44, {}, {},
 }>, {
 modelValue: string | number;
 size: "s" | "m";
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare const MSelect: DefineComponent<__VLS_Props_45, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string | number) => any;
@@ -4435,6 +4547,7 @@ status: "info" | "success" | "warning" | "error" | "neutral";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
 
 export declare const MStatusMessage: DefineComponent<__VLS_Props_56, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_56> & Readonly<{}>, {
+appearance: "standard" | "accent";
 status: "info" | "success" | "warning" | "error" | "neutral" | "inprogress";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
@@ -4481,9 +4594,27 @@ additionalInfo?: string;
 currentStep: string | number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
-export declare const MTabs: DefineComponent<__VLS_Props_61, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MStepperStacked: DefineComponent<__VLS_Props_61, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_61> & Readonly<{}>, {
+steps: Array<{
+/**
+* Unique identifier for the step.
+*/
+id?: string;
+/**
+* Label of the step.
+*/
+label: string;
+/**
+* Optional additional information under the label.
+*/
+additionalInfo?: string;
+}>;
+currentStep: string | number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
+
+export declare const MTabs: DefineComponent<__VLS_Props_62, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value?: string | number | undefined) => any;
-}, string, PublicProps, Readonly<__VLS_Props_61> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_62> & Readonly<{
 "onUpdate:modelValue"?: ((value?: string | number | undefined) => any) | undefined;
 }>, {
 modelValue: string | number;
@@ -4492,53 +4623,43 @@ divider: boolean;
 tab: HTMLButtonElement;
 }, HTMLElement>;
 
-export declare const MTag: DefineComponent<__VLS_Props_62, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"update:modelValue": (value: boolean) => any;
-"remove-tag": (id: string) => any;
-}, string, PublicProps, Readonly<__VLS_Props_62> & Readonly<{
-"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-"onRemove-tag"?: ((id: string) => any) | undefined;
-}>, {
-type: "informative" | "interactive" | "contextualised" | "removable" | "selectable";
-contextualisedNumber: number;
-removableLabel: string;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+export declare const MTag: __VLS_WithTemplateSlots_28<typeof __VLS_component_28, __VLS_TemplateResult_28["slots"]>;
 
-export declare const MTextArea: DefineComponent<__VLS_Props_63, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MTextArea: DefineComponent<__VLS_Props_64, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string | number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_63> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_64> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
 rows: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MTextInput: __VLS_WithTemplateSlots_28<typeof __VLS_component_28, __VLS_TemplateResult_28["slots"]>;
+export declare const MTextInput: __VLS_WithTemplateSlots_29<typeof __VLS_component_29, __VLS_TemplateResult_29["slots"]>;
 
-export declare const MTile: __VLS_WithTemplateSlots_29<typeof __VLS_component_29, __VLS_TemplateResult_29["slots"]>;
+export declare const MTile: __VLS_WithTemplateSlots_30<typeof __VLS_component_30, __VLS_TemplateResult_30["slots"]>;
 
-export declare const MTileClickable: __VLS_WithTemplateSlots_30<typeof __VLS_component_30, __VLS_TemplateResult_30["slots"]>;
+export declare const MTileClickable: __VLS_WithTemplateSlots_31<typeof __VLS_component_31, __VLS_TemplateResult_31["slots"]>;
 
-export declare const MTileExpandable: __VLS_WithTemplateSlots_31<typeof __VLS_component_31, __VLS_TemplateResult_31["slots"]>;
+export declare const MTileExpandable: __VLS_WithTemplateSlots_32<typeof __VLS_component_32, __VLS_TemplateResult_32["slots"]>;
 
-export declare const MTileSelectable: __VLS_WithTemplateSlots_32<typeof __VLS_component_32, __VLS_TemplateResult_32["slots"]>;
+export declare const MTileSelectable: __VLS_WithTemplateSlots_33<typeof __VLS_component_33, __VLS_TemplateResult_33["slots"]>;
 
-export declare const MToaster: __VLS_WithTemplateSlots_33<typeof __VLS_component_33, __VLS_TemplateResult_33["slots"]>;
+export declare const MToaster: __VLS_WithTemplateSlots_34<typeof __VLS_component_34, __VLS_TemplateResult_34["slots"]>;
 
-export declare const MToggle: DefineComponent<__VLS_Props_70, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MToggle: DefineComponent<__VLS_Props_71, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_70> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_71> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
 size: "s" | "m";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MToggleGroup: DefineComponent<__VLS_Props_71, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MToggleGroup: DefineComponent<__VLS_Props_72, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string[]) => any;
-}, string, PublicProps, Readonly<__VLS_Props_71> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_72> & Readonly<{
 "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MTooltip: __VLS_WithTemplateSlots_34<typeof __VLS_component_34, __VLS_TemplateResult_34["slots"]>;
+export declare const MTooltip: __VLS_WithTemplateSlots_35<typeof __VLS_component_35, __VLS_TemplateResult_35["slots"]>;
 
 declare type NormalizedFile = {
     name: string;