@mozaic-ds/vue 2.6.0 → 2.7.0

package/dist/mozaic-vue.d.ts

@@ -25,52 +25,50 @@ declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, Comp
 size: "s" | "m" | "l";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
 
-declare const __VLS_component_10: DefineComponent<__VLS_Props_16, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_16> & Readonly<{}>, {
+declare const __VLS_component_10: DefineComponent<__VLS_Props_18, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_18> & Readonly<{}>, {
 size: "s" | "m";
 iconPosition: "left" | "right";
 appearance: "secondary" | "accent" | "inverse" | "standard";
-href: string;
-target: "_self" | "_blank" | "_parent" | "_top";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_11: DefineComponent<__VLS_Props_19, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_11: DefineComponent<__VLS_Props_21, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:open": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_19> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_21> & Readonly<{
 "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
 closable: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_12: DefineComponent<__VLS_Props_21, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_21> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component_12: DefineComponent<__VLS_Props_23, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_23> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_13: DefineComponent<__VLS_Props_32, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_13: DefineComponent<__VLS_Props_34, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 close: () => any;
-}, string, PublicProps, Readonly<__VLS_Props_32> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_34> & Readonly<{
 onClose?: (() => any) | undefined;
 }>, {
 status: "info" | "success" | "warning" | "error";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
-declare const __VLS_component_14: DefineComponent<__VLS_Props_36, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_14: DefineComponent<__VLS_Props_38, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string | number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_36> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_38> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
 size: "s" | "m";
 clearLabel: string;
 inputType: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_15: DefineComponent<__VLS_Props_37, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_15: DefineComponent<__VLS_Props_39, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:open": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_37> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_39> & Readonly<{
 "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
 status: "info" | "success" | "warning" | "error";
 closable: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
-declare const __VLS_component_16: DefineComponent<__VLS_Props_39, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_39> & Readonly<{}>, {
+declare const __VLS_component_16: DefineComponent<__VLS_Props_42, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_42> & Readonly<{}>, {
 position: "top" | "bottom" | "left" | "right";
 pointer: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
@@ -81,7 +79,7 @@ type: "button" | "reset" | "submit";
 appearance: "standard" | "accent" | "danger" | "inverse";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
 
-declare const __VLS_component_3: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{}>, {
+declare const __VLS_component_3: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{}>, {
 appearance: "standard" | "accent" | "tips" | "inverse";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
@@ -89,7 +87,7 @@ declare const __VLS_component_4: DefineComponent<__VLS_Props_8, {}, {}, {}, {},
 
 declare const __VLS_component_5: DefineComponent<__VLS_Props_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_10> & Readonly<{}>, {
 size: "s" | "m" | "l";
-style: "primary" | "secondary" | "tertiary" | "inverse";
+appearance: "primary" | "secondary" | "tertiary" | "inverse";
 orientation: "vertical" | "horizontal";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
@@ -99,7 +97,9 @@ back: () => any;
 }, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{
 onBack?: (() => any) | undefined;
 "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+titleRef: HTMLHeadingElement;
+}, any>;
 
 declare const __VLS_component_7: DefineComponent<__VLS_Props_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_12> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
@@ -116,25 +116,25 @@ appearance: "standard" | "accent" | "danger" | "inverse";
  */
 declare type __VLS_Props = {
     /**
-     * Allows to define the avatar size
+     * Allows to define the avatar size.
      */
     size?: 's' | 'm' | 'l';
 };
 
 /**
- * A Divider serves as a visual divider to separate content, providing a clear distinction between sections.
+ * A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.
  */
 declare type __VLS_Props_10 = {
     /**
-     * Determines the orientation of the divider
+     * Determines the orientation of the divider.
      */
     orientation?: 'vertical' | 'horizontal';
     /**
-     * Determines the style of the divider
+     * Determines the appearance of the divider.
      */
-    style?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
+    appearance?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
     /**
-     * Determines the size of the divider
+     * Determines the size of the divider.
      */
     size?: 's' | 'm' | 'l';
 };
@@ -148,7 +148,7 @@ declare type __VLS_Props_11 = {
      */
     open?: boolean;
     /**
-     * Position of the drawer
+     * Position of the drawer.
      */
     position?: 'left' | 'right';
     /**
@@ -160,17 +160,17 @@ declare type __VLS_Props_11 = {
      */
     back?: boolean;
     /**
-     * Title of the drawer
+     * Title of the drawer.
      */
     title: string;
     /**
-     * Title of the content of the drawer
+     * Title of the content of the drawer.
      */
     contentTitle?: string;
 };
 
 /**
- * This component creates a structured form field with a label, optional help text, error and validation message handling.
+ * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.
  */
 declare type __VLS_Props_12 = {
     /**
@@ -250,17 +250,17 @@ declare type __VLS_Props_13 = {
  */
 declare type __VLS_Props_14 = {
     /**
-     * Label of the Flag
+     * Label of the Flag.
      */
     label: string;
     /**
-     * Allows to define the Flag style
+     * Allows to define the Flag appearance.
      */
     appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
 };
 
 /**
- * Icon Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.
+ * Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.
  */
 declare type __VLS_Props_15 = {
     /**
@@ -290,19 +290,43 @@ declare type __VLS_Props_15 = {
 };
 
 /**
- * A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.
+ * A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.
  */
 declare type __VLS_Props_16 = {
+    /**
+     * Allows to define the progress bar size.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * The current value of the progress bar.
+     */
+    value?: number;
+};
+
+/**
+ * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.
+ */
+declare type __VLS_Props_17 = {
+    /**
+     * The current value of the progress bar.
+     */
+    value?: number;
+};
+
+/**
+ * A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.
+ */
+declare type __VLS_Props_18 = {
     /**
      * Position of the icon relative to the text.
      */
     iconPosition?: 'left' | 'right';
     /**
-     * Allows to define the link style
+     * Allows to define the link appearance.
      */
     appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';
     /**
-     * Allows to define the link size
+     * Allows to define the link size.
      */
     size?: 's' | 'm';
     /**
@@ -310,11 +334,11 @@ declare type __VLS_Props_16 = {
      */
     href?: string;
     /**
-     * Where to open the link
+     * Where to open the link.
      */
     target?: '_self' | '_blank' | '_parent' | '_top';
     /**
-     * Specify wether the link is inline
+     * Specify wether the link is inline.
      */
     inline?: boolean;
     /**
@@ -324,9 +348,9 @@ declare type __VLS_Props_16 = {
 };
 
 /**
- * A loader indicates that content or data is being loaded or processed, providing visual feedback to users during wait times.
+ * A loader is a visual indicator used to inform users that a process is in progress, typically during data fetching, page loading, or background operations. It provides feedback that the system is working, helping to manage user expectations and reduce perceived wait time.
  */
-declare type __VLS_Props_17 = {
+declare type __VLS_Props_19 = {
     /**
      * Specifies the visual appearance of the loader.
      */
@@ -341,10 +365,37 @@ declare type __VLS_Props_17 = {
     text?: string;
 };
 
+/**
+ * A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.
+ */
+declare type __VLS_Props_2 = {
+    /**
+     * Allows to define the breadcrumb appearance.
+     */
+    appearance?: 'standard' | 'inverse';
+    /**
+     * Links of the breadcrumb.
+     */
+    links: Array<{
+        /**
+         * The label displayed for the link.
+         */
+        label: string;
+        /**
+         * URL for the link (for external links or the `to` prop for `router-link`).
+         */
+        href: string;
+        /**
+         * If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router).
+         */
+        router?: boolean;
+    }>;
+};
+
 /**
  * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.
  */
-declare type __VLS_Props_18 = {
+declare type __VLS_Props_20 = {
     /**
      * Controls the visibility of the loading overlay.
      */
@@ -358,17 +409,17 @@ declare type __VLS_Props_18 = {
 /**
  * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.
  */
-declare type __VLS_Props_19 = {
+declare type __VLS_Props_21 = {
     /**
      * if `true`, display the modal.
      */
     open?: boolean;
     /**
-     * Title of the modal
+     * Title of the modal.
      */
     title: string;
     /**
-     * Description of the modal
+     * Description of the modal.
      */
     description?: string;
     /**
@@ -378,54 +429,27 @@ declare type __VLS_Props_19 = {
 };
 
 /**
- * A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.
+ * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.
  */
-declare type __VLS_Props_2 = {
-    /**
-     * Allows to define the breadcrumb style
-     */
-    appearance?: 'standard' | 'inverse';
-    /**
-     * Links of the breadcrumb
-     */
-    links: Array<{
-        /**
-         * The label displayed for the link.
-         */
-        label: string;
-        /**
-         * URL for the link (for external links or the `to` prop for `router-link`).
-         */
-        href: string;
-        /**
-         * If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router).
-         */
-        router?: boolean;
-    }>;
-};
-
-/**
- * A badge indicates the status of an entity and can evolve at any time.
- */
-declare type __VLS_Props_20 = {
+declare type __VLS_Props_22 = {
     /**
-     * Content of the badge
+     * Content of the badge.
      */
     label: number;
     /**
-     * Allows to define the Badge style
+     * Allows to define the badge appearance.
      */
     appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
     /**
-     * Allows to define the Badge size
+     * Allows to define the badge size.
      */
     size?: 's' | 'm';
 };
 
 /**
- * An overlay component is a UI element that appears above the main content to display additional information or interactions, often blocking or dimming the background.
+ * An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.
  */
-declare type __VLS_Props_21 = {
+declare type __VLS_Props_23 = {
     /**
      * Controls the visibility of the overlay.
      */
@@ -439,7 +463,7 @@ declare type __VLS_Props_21 = {
 /**
  * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.
  */
-declare type __VLS_Props_22 = {
+declare type __VLS_Props_24 = {
     /**
      * A unique identifier for the pagination.
      */
@@ -469,7 +493,7 @@ declare type __VLS_Props_22 = {
 /**
  * A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.
  */
-declare type __VLS_Props_23 = {
+declare type __VLS_Props_25 = {
     /**
      * A unique identifier for the password input element, used to associate the label with the form element.
      */
@@ -503,11 +527,11 @@ declare type __VLS_Props_23 = {
      */
     isClearable?: boolean;
     /**
-     * The label text for the clear button
+     * The label text for the clear button.
      */
     clearLabel?: string;
     /**
-     * Labels of the button displayed when showing or hiding the password
+     * Labels of the button displayed when showing or hiding the password.
      */
     buttonLabel?: {
         show: string;
@@ -516,9 +540,9 @@ declare type __VLS_Props_23 = {
 };
 
 /**
- * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.
+ * A pincode input is a specialized input field used to enter short numeric codes, such as verification codes, security PINs, or authentication tokens. It typically separates each digit into individual fields to improve readability and ease of entry. This component is commonly used in two-factor authentication (2FA), password recovery, and secure access flows, ensuring a structured and user-friendly experience.<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_24 = {
+declare type __VLS_Props_26 = {
     /**
      * A unique identifier for the pincode element, used to associate the label with the form element.
      */
@@ -550,31 +574,7 @@ declare type __VLS_Props_24 = {
 };
 
 /**
- * A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.
- */
-declare type __VLS_Props_25 = {
-    /**
-     * Allows to define the progress bar size
-     */
-    size?: 's' | 'm' | 'l';
-    /**
-     * The current value of the progress bar.
-     */
-    value?: number;
-};
-
-/**
- * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.
- */
-declare type __VLS_Props_26 = {
-    /**
-     * The current value of the progress bar.
-     */
-    value?: number;
-};
-
-/**
- * The quantity selector is a form element used to enter or select a number. This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart for example.
+ * A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.
  */
 declare type __VLS_Props_27 = {
     /**
@@ -598,7 +598,7 @@ declare type __VLS_Props_27 = {
      */
     disabled?: boolean;
     /**
-     * Determines the size of the quantity selector
+     * Determines the size of the quantity selector.
      */
     size?: 's' | 'm';
     /**
@@ -628,7 +628,7 @@ declare type __VLS_Props_27 = {
 };
 
 /**
- * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
+ * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.
  */
 declare type __VLS_Props_28 = {
     /**
@@ -658,7 +658,7 @@ declare type __VLS_Props_28 = {
 };
 
 /**
- * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
+ * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.<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#radio-group).
  */
 declare type __VLS_Props_29 = {
     /**
@@ -690,7 +690,7 @@ declare type __VLS_Props_29 = {
 };
 
 /**
- * Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.
+ * Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.
  */
 declare type __VLS_Props_3 = {
     /**
@@ -728,9 +728,36 @@ declare type __VLS_Props_3 = {
 };
 
 /**
- * A select is a form element for multi-line text input, ideal for longer content like comments or descriptions.
+ * A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.
  */
 declare type __VLS_Props_30 = {
+    /**
+     * The selected segment index, bound via v-model.
+     */
+    modelValue?: number;
+    /**
+     * if `true`, the segmented control take the full width.
+     */
+    full?: boolean;
+    /**
+     * Determines the size of the segmented control.
+     */
+    size?: 's' | 'm';
+    /**
+     * An array of objects that allows you to provide all the data needed to generate the content for each segment.
+     */
+    segments: Array<{
+        /**
+         * The label displayed for the segment.
+         */
+        label: string;
+    }>;
+};
+
+/**
+ * A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.<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#select).
+ */
+declare type __VLS_Props_31 = {
     /**
      * A unique identifier for the select, used to associate the label with the form element.
      */
@@ -766,7 +793,7 @@ declare type __VLS_Props_30 = {
      */
     disabled?: boolean;
     /**
-     * Determines the size of the select
+     * Determines the size of the select.
      */
     size?: 's' | 'm';
     /**
@@ -776,33 +803,47 @@ declare type __VLS_Props_30 = {
 };
 
 /**
- * A status badge indicates the status of an entity and can evolve at any time.
+ * A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.
  */
-declare type __VLS_Props_31 = {
+declare type __VLS_Props_32 = {
     /**
-     * Content of the Status Badge
+     * Content of the status badge
      */
     label: string;
     /**
-     * Allows to define the Status Badge style
+     * Allows to define the status badge type
      */
     status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
 };
 
+/**
+ * A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.
+ */
+declare type __VLS_Props_33 = {
+    /**
+     * Allows to define the status dot type.
+     */
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
+    /**
+     * Determines the size of the status dot.
+     */
+    size?: 's' | 'm' | 'l';
+};
+
 /**
  * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
  */
-declare type __VLS_Props_32 = {
+declare type __VLS_Props_34 = {
     /**
-     * Title of the Status Notification
+     * Title of the status notification.
      */
     title: string;
     /**
-     * Description of the Status Notification
+     * Description of the status notification.
      */
     description: string;
     /**
-     * Allows to define the Status Notification style
+     * Allows to define the status notification type.
      */
     status?: 'info' | 'success' | 'warning' | 'error';
     /**
@@ -814,7 +855,7 @@ declare type __VLS_Props_32 = {
 /**
  * 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_33 = {
+declare type __VLS_Props_35 = {
     /**
      * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
      */
@@ -839,6 +880,10 @@ declare type __VLS_Props_33 = {
          * The icon displayed for the tab from Mozaic-icon-vue.
          */
         icon?: Component;
+        /**
+         * The number badge displayed for the tab.
+         */
+        badge?: number;
         /**
          * The label displayed for the tab.
          */
@@ -853,7 +898,7 @@ declare type __VLS_Props_33 = {
 /**
  * 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_34 = {
+declare type __VLS_Props_36 = {
     /**
      * Defines the behavior and layout of the tag.
      */
@@ -893,9 +938,9 @@ declare type __VLS_Props_34 = {
 };
 
 /**
- * A textarea is a form element for multi-line text input, ideal for longer content like comments or descriptions.
+ * 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_35 = {
+declare type __VLS_Props_37 = {
     /**
      * A unique identifier for the textarea, used to associate the label with the form element.
      */
@@ -939,9 +984,9 @@ declare type __VLS_Props_35 = {
 };
 
 /**
- * Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context.
+ * 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_36 = {
+declare type __VLS_Props_38 = {
     /**
      * A unique identifier for the input element, used to associate the label with the form element.
      */
@@ -959,7 +1004,7 @@ declare type __VLS_Props_36 = {
      */
     placeholder?: string;
     /**
-     * Defines the type of input
+     * Defines the type of input.
      */
     inputType?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';
     /**
@@ -971,7 +1016,7 @@ declare type __VLS_Props_36 = {
      */
     disabled?: boolean;
     /**
-     * Determines the size of the input
+     * Determines the size of the input.
      */
     size?: 's' | 'm';
     /**
@@ -983,7 +1028,7 @@ declare type __VLS_Props_36 = {
      */
     isClearable?: boolean;
     /**
-     * The label text for the clear button
+     * The label text for the clear button.
      */
     clearLabel?: string;
 };
@@ -991,13 +1036,13 @@ declare type __VLS_Props_36 = {
 /**
  * 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_37 = {
+declare type __VLS_Props_39 = {
     /**
-     * if `true`, display the Toaster.
+     * If `true`, display the Toaster.
      */
     open?: boolean;
     /**
-     * Position of the toaster
+     * Position of the toaster.
      */
     position?: 'top' | 'bottom' | 'top-center' | 'bottom-center';
     /**
@@ -1009,11 +1054,11 @@ declare type __VLS_Props_37 = {
      */
     status?: 'info' | 'success' | 'warning' | 'error';
     /**
-     * if `true`, display the close button.
+     * If `true`, display the close button.
      */
     closable?: boolean;
     /**
-     * if `true`, display the progress bar of the duration.
+     * If `true`, display the progress bar of the duration.
      */
     progress?: boolean;
     /**
@@ -1023,9 +1068,27 @@ declare type __VLS_Props_37 = {
 };
 
 /**
- * A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch.
+ * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
  */
-declare type __VLS_Props_38 = {
+declare type __VLS_Props_4 = {
+    /**
+     * Title of the callout.
+     */
+    title: string;
+    /**
+     * Description of the callout.
+     */
+    description: string;
+    /**
+     * Allows to define the callout appearance.
+     */
+    appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
+};
+
+/**
+ * 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_40 = {
     /**
      * A unique identifier for the toggle, used to associate the label with the form element.
      */
@@ -1043,7 +1106,7 @@ declare type __VLS_Props_38 = {
      */
     modelValue?: boolean;
     /**
-     * Determines the size of the toggle
+     * Determines the size of the toggle.
      */
     size?: 's' | 'm';
     /**
@@ -1052,32 +1115,62 @@ declare type __VLS_Props_38 = {
     disabled?: 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.<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_41 = {
+    /**
+     * The name attribute for the toggle element, typically used for form submission.
+     */
+    name: string;
+    /**
+     * Property used to manage the values checked by v-model
+     * (Do not use directly)
+     */
+    modelValue?: Array<string>;
+    /**
+     * List of properties of each toggle of the toggle group.
+     */
+    options: Array<{
+        id: string;
+        label: string;
+        value: string;
+        disabled?: boolean;
+        isInvalid?: boolean;
+        size?: 's' | 'm';
+    }>;
+    /**
+     * If `true`, make the form element of the group inline.
+     */
+    inline?: boolean;
+};
+
 /**
  * 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_39 = {
+declare type __VLS_Props_42 = {
     /**
      * A unique identifier for the tooltip, used to describe the tooltip.
      */
     id: string;
     /**
-     * Content of the tooltip
+     * Content of the tooltip.
      */
     text: string;
     /**
-     * Determines the position of the tooltip
+     * Determines the position of the tooltip.
      */
     position?: 'top' | 'bottom' | 'left' | 'right';
     /**
-     * if `true`, the tooltip display a pointer.
+     * If `true`, the tooltip display a pointer.
      */
     pointer?: boolean;
 };
 
 /**
- * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.
+ * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options.
  */
-declare type __VLS_Props_4 = {
+declare type __VLS_Props_5 = {
     /**
      * A unique identifier for the checkbox, used to associate the label with the form element.
      */
@@ -1113,39 +1206,9 @@ declare type __VLS_Props_4 = {
 };
 
 /**
- * A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and "on/off" switch.
+ * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <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_40 = {
-    /**
-     * The name attribute for the toggle element, typically used for form submission.
-     */
-    name: string;
-    /**
-     * Property used to manage the values checked by v-model
-     * (Do not use directly)
-     */
-    modelValue?: Array<string>;
-    /**
-     * list of properties of each toggle of the toggle group
-     */
-    options: Array<{
-        id: string;
-        label: string;
-        value: string;
-        disabled?: boolean;
-        isInvalid?: boolean;
-        size?: 's' | 'm';
-    }>;
-    /**
-     * If `true`, make the form element of the group inline.
-     */
-    inline?: boolean;
-};
-
-/**
- * Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions.
- */
-declare type __VLS_Props_5 = {
+declare type __VLS_Props_6 = {
     /**
      * The name attribute for the checkbox element, typically used for form submission.
      */
@@ -1175,9 +1238,9 @@ declare type __VLS_Props_5 = {
 /**
  * A circular progress bar visually represents progress toward a goal or completion of a process using a circular shape. It is commonly used to indicate task completion or performance metrics. The progress is displayed as a partially filled ring, often accompanied by a percentage or status indicator. Circular Progress Bars are useful for providing users with real-time feedback on ongoing actions without taking up significant screen space.
  */
-declare type __VLS_Props_6 = {
+declare type __VLS_Props_7 = {
     /**
-     * Allows to define the progress bar size
+     * Sets the size of the progress bar.
      */
     size?: 's' | 'm' | 'l';
     /**
@@ -1185,7 +1248,7 @@ declare type __VLS_Props_6 = {
      */
     value?: number;
     /**
-     * Display type: `'percentage'` or `'content'`.
+     * Shows either a percentage or custom content.
      */
     type?: 'percentage' | 'content';
     /**
@@ -1199,35 +1262,17 @@ declare type __VLS_Props_6 = {
 };
 
 /**
- * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.
- */
-declare type __VLS_Props_7 = {
-    /**
-     * Title of the callout
-     */
-    title: string;
-    /**
-     * Description of the callout
-     */
-    description: string;
-    /**
-     * Allows to define the callout style
-     */
-    appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
-};
-
-/**
- * A Divider serves as a visual divider to separate content, providing a clear distinction between sections.
+ * The Container component is designed to wrap your page or section content, typically grids or other layout elements. By default, it centers the content with a maximum width to ensure consistent alignment and spacing.
  */
 declare type __VLS_Props_8 = {
     /**
-     * Determines the orientation of the divider
+     * If `true`, the container will take the full width.
      */
     fluid?: boolean;
 };
 
 /**
- * A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.
+ * A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date 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_9 = {
     /**
@@ -1251,7 +1296,7 @@ declare type __VLS_Props_9 = {
      */
     disabled?: boolean;
     /**
-     * Determines the size of the datepicker
+     * Determines the size of the datepicker.
      */
     size?: 's' | 'm';
     /**
@@ -1263,7 +1308,7 @@ declare type __VLS_Props_9 = {
      */
     isClearable?: boolean;
     /**
-     * The label text for the clear button
+     * The label text for the clear button.
      */
     clearLabel?: string;
 };
@@ -1272,12 +1317,12 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
-         * Use this slot to insert the image, icon or intials of the avatar
+         * Use this slot to insert the image, icon or intials of the avatar.
          */
         default: VNode;
     }> & {
         /**
-         * Use this slot to insert the image, icon or intials of the avatar
+         * Use this slot to insert the image, icon or intials of the avatar.
          */
         default: VNode;
     };
@@ -1289,20 +1334,20 @@ declare function __VLS_template_10(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
-         * Use this slot to insert the textual content of the Link
+         * Use this slot to insert the textual content of the Link.
          */
         default: string;
         /**
-         * Use this slot to insert an icon for the Link
+         * Use this slot to insert an icon for the Link.
          */
         icon?: VNode;
     }> & {
         /**
-         * Use this slot to insert the textual content of the Link
+         * Use this slot to insert the textual content of the Link.
          */
         default: string;
         /**
-         * Use this slot to insert an icon for the Link
+         * Use this slot to insert an icon for the Link.
          */
         icon?: VNode;
     };
@@ -1314,53 +1359,53 @@ declare function __VLS_template_11(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
-         * Use this slot to insert an icon next to the title of the modal
+         * Use this slot to insert an icon next to the title of the modal.
          */
         icon?: VNode;
         /**
-         * Use this slot to insert the content of the modal
+         * Use this slot to insert the content of the modal.
          */
         default?: VNode;
         /**
-         * Use this slot to insert a link in the footer
+         * Use this slot to insert a link in the footer.
          */
         link?: VNode;
         /**
-         * Use this slot to insert buttons in the footer
+         * Use this slot to insert buttons in the footer.
          */
         footer?: VNode;
     }> & {
         /**
-         * Use this slot to insert an icon next to the title of the modal
+         * Use this slot to insert an icon next to the title of the modal.
          */
         icon?: VNode;
         /**
-         * Use this slot to insert the content of the modal
+         * Use this slot to insert the content of the modal.
          */
         default?: VNode;
         /**
-         * Use this slot to insert a link in the footer
+         * Use this slot to insert a link in the footer.
          */
         link?: VNode;
         /**
-         * Use this slot to insert buttons in the footer
+         * Use this slot to insert buttons in the footer.
          */
         footer?: VNode;
     };
     refs: {};
-    rootEl: HTMLDivElement;
+    rootEl: any;
 };
 
 declare function __VLS_template_12(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
-         * Use this slot to insert a centered content inside the overlay
+         * Use this slot to insert a centered content inside the overlay.
          */
         default?: VNode;
     }> & {
         /**
-         * Use this slot to insert a centered content inside the overlay
+         * Use this slot to insert a centered content inside the overlay.
          */
         default?: VNode;
     };
@@ -1389,17 +1434,17 @@ declare function __VLS_template_14(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
-         * Use this slot to insert an icon in the input
+         * Use this slot to insert an icon in the input.
          */
         icon?: VNode;
     }> & {
         /**
-         * Use this slot to insert an icon in the input
+         * Use this slot to insert an icon in the input.
          */
         icon?: VNode;
     };
     refs: {};
-    rootEl: HTMLDivElement;
+    rootEl: any;
 };
 
 declare function __VLS_template_15(): {
@@ -1444,7 +1489,7 @@ declare function __VLS_template_2(): {
          */
         default: string;
         /**
-         * Use this slot to insert an icon for the Button
+         * Use this slot to insert an icon for the Button.
          */
         icon?: VNode;
     }> & {
@@ -1453,7 +1498,7 @@ declare function __VLS_template_2(): {
          */
         default: string;
         /**
-         * Use this slot to insert an icon for the Button
+         * Use this slot to insert an icon for the Button.
          */
         icon?: VNode;
     };
@@ -1465,20 +1510,20 @@ declare function __VLS_template_3(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
-         * Use this slot to insert an icon
+         * Use this slot to insert an icon.
          */
         icon?: VNode;
         /**
-         * Use this slot to insert a button or a link in the footer of the callout
+         * Use this slot to insert a button or a link in the footer of the callout.
          */
         footer?: VNode;
     }> & {
         /**
-         * Use this slot to insert an icon
+         * Use this slot to insert an icon.
          */
         icon?: VNode;
         /**
-         * Use this slot to insert a button or a link in the footer of the callout
+         * Use this slot to insert a button or a link in the footer of the callout.
          */
         footer?: VNode;
     };
@@ -1490,12 +1535,12 @@ declare function __VLS_template_4(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
-         * Use this slot to insert the content of the container
+         * Use this slot to insert the content of the container.
          */
         default?: VNode;
     }> & {
         /**
-         * Use this slot to insert the content of the container
+         * Use this slot to insert the content of the container.
          */
         default?: VNode;
     };
@@ -1541,8 +1586,10 @@ declare function __VLS_template_6(): {
          */
         footer?: VNode;
     };
-    refs: {};
-    rootEl: HTMLDivElement;
+    refs: {
+        titleRef: HTMLHeadingElement;
+    };
+    rootEl: any;
 };
 
 declare function __VLS_template_7(): {
@@ -1583,12 +1630,12 @@ declare function __VLS_template_9(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
-         * Use this slot to insert the form element of your choice
+         * Use this slot to insert an icon for the Button.
          */
         icon: VNode;
     }> & {
         /**
-         * Use this slot to insert the form element of your choice
+         * Use this slot to insert an icon for the Button.
          */
         icon: VNode;
     };
@@ -1732,19 +1779,19 @@ export declare const MButton: __VLS_WithTemplateSlots_2<typeof __VLS_component_2
 
 export declare const MCallout: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
 
-export declare const MCheckbox: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MCheckbox: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MCheckboxGroup: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MCheckboxGroup: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string[]) => any;
-}, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{
 "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MCircularProgressbar: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{}>, {
+export declare const MCircularProgressbar: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{}>, {
 type: "percentage" | "content";
 value: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
@@ -1758,7 +1805,7 @@ export declare const MDatepicker: DefineComponent<__VLS_Props_9, {}, {}, {}, {},
 }>, {
 size: "s" | "m";
 clearLabel: string;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare const MDivider: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
 
@@ -1772,41 +1819,41 @@ export declare const MFlag: DefineComponent<__VLS_Props_14, {}, {}, {}, {}, Comp
 
 export declare const MIconButton: __VLS_WithTemplateSlots_9<typeof __VLS_component_9, __VLS_TemplateResult_9["slots"]>;
 
-export declare const MLinearProgressbarBuffer: DefineComponent<__VLS_Props_25, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_25> & Readonly<{}>, {
+export declare const MLinearProgressbarBuffer: DefineComponent<__VLS_Props_16, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_16> & Readonly<{}>, {
 value: number;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MLinearProgressbarPercentage: DefineComponent<__VLS_Props_26, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_26> & Readonly<{}>, {
+export declare const MLinearProgressbarPercentage: DefineComponent<__VLS_Props_17, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_17> & Readonly<{}>, {
 value: number;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare const MLink: __VLS_WithTemplateSlots_10<typeof __VLS_component_10, __VLS_TemplateResult_10["slots"]>;
 
-export declare const MLoader: DefineComponent<__VLS_Props_17, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_17> & Readonly<{}>, {
+export declare const MLoader: DefineComponent<__VLS_Props_19, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_19> & Readonly<{}>, {
 size: "s" | "m" | "l";
 appearance: "standard" | "accent" | "inverse";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MLoadingOverlay: DefineComponent<__VLS_Props_18, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_18> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+export declare const MLoadingOverlay: DefineComponent<__VLS_Props_20, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_20> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare const MModal: __VLS_WithTemplateSlots_11<typeof __VLS_component_11, __VLS_TemplateResult_11["slots"]>;
 
-export declare const MNumberBadge: DefineComponent<__VLS_Props_20, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_20> & Readonly<{}>, {
+export declare const MNumberBadge: DefineComponent<__VLS_Props_22, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_22> & Readonly<{}>, {
 size: "s" | "m";
 appearance: "danger" | "accent" | "inverse" | "standard";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
 
 export declare const MOverlay: __VLS_WithTemplateSlots_12<typeof __VLS_component_12, __VLS_TemplateResult_12["slots"]>;
 
-export declare const MPagination: DefineComponent<__VLS_Props_22, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MPagination: DefineComponent<__VLS_Props_24, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_22> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_24> & Readonly<{
 "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
-export declare const MPasswordInput: DefineComponent<__VLS_Props_23, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MPasswordInput: DefineComponent<__VLS_Props_25, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string | number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_23> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_25> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
 clearLabel: string;
@@ -1897,15 +1944,15 @@ default: string;
 icon?: VNode;
 };
 }) | null;
-}, HTMLDivElement>;
+}, any>;
 
-export declare const MPincode: DefineComponent<__VLS_Props_24, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MPincode: DefineComponent<__VLS_Props_26, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string) => any;
-}, string, PublicProps, Readonly<__VLS_Props_24> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_26> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
 length: 4 | 5 | 6;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare const MQuantitySelector: DefineComponent<__VLS_Props_27, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: number) => any;
@@ -1920,13 +1967,13 @@ min: number;
 max: number;
 incrementlabel: string;
 decrementLabel: string;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare const MRadio: DefineComponent<__VLS_Props_28, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
 }, string, PublicProps, Readonly<__VLS_Props_28> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare const MRadioGroup: DefineComponent<__VLS_Props_29, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string) => any;
@@ -1934,23 +1981,36 @@ export declare const MRadioGroup: DefineComponent<__VLS_Props_29, {}, {}, {}, {}
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MSelect: DefineComponent<__VLS_Props_30, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"update:modelValue": (value: string | number) => any;
+export declare const MSegmentedControl: DefineComponent<__VLS_Props_30, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: number) => any;
 }, string, PublicProps, Readonly<__VLS_Props_30> & Readonly<{
+"onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+size: "s" | "m";
+modelValue: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+export declare const MSelect: DefineComponent<__VLS_Props_31, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: string | number) => any;
+}, string, PublicProps, Readonly<__VLS_Props_31> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
 size: "s" | "m";
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSelectElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MStatusBadge: DefineComponent<__VLS_Props_31, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_31> & Readonly<{}>, {
+export declare const MStatusBadge: DefineComponent<__VLS_Props_32, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_32> & Readonly<{}>, {
 status: "info" | "success" | "warning" | "error" | "neutral";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
+export declare const MStatusDot: DefineComponent<__VLS_Props_33, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_33> & Readonly<{}>, {
+status: "info" | "success" | "warning" | "error" | "neutral";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+
 export declare const MStatusNotification: __VLS_WithTemplateSlots_13<typeof __VLS_component_13, __VLS_TemplateResult_13["slots"]>;
 
-export declare const MTabs: DefineComponent<__VLS_Props_33, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MTabs: DefineComponent<__VLS_Props_35, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_33> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_35> & Readonly<{
 "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
 modelValue: number;
@@ -1959,10 +2019,10 @@ divider: boolean;
 tab: HTMLButtonElement;
 }, HTMLElement>;
 
-export declare const MTag: DefineComponent<__VLS_Props_34, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MTag: DefineComponent<__VLS_Props_36, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
 "remove-tag": (id: string) => any;
-}, string, PublicProps, Readonly<__VLS_Props_34> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_36> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 "onRemove-tag"?: ((id: string) => any) | undefined;
 }>, {
@@ -1970,29 +2030,29 @@ type: "informative" | "interactive" | "contextualised" | "removable" | "selectab
 contextualisedNumber: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MTextArea: DefineComponent<__VLS_Props_35, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MTextArea: DefineComponent<__VLS_Props_37, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string | number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_35> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_37> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
 rows: number;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLTextAreaElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare const MTextInput: __VLS_WithTemplateSlots_14<typeof __VLS_component_14, __VLS_TemplateResult_14["slots"]>;
 
 export declare const MToaster: __VLS_WithTemplateSlots_15<typeof __VLS_component_15, __VLS_TemplateResult_15["slots"]>;
 
-export declare const MToggle: DefineComponent<__VLS_Props_38, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MToggle: DefineComponent<__VLS_Props_40, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_38> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_40> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
 size: "s" | "m";
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MToggleGroup: DefineComponent<__VLS_Props_40, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MToggleGroup: DefineComponent<__VLS_Props_41, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string[]) => any;
-}, string, PublicProps, Readonly<__VLS_Props_40> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_41> & Readonly<{
 "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;