@mozaic-ds/vue 2.6.1 → 2.8.0

package/dist/mozaic-vue.d.ts

@@ -7,6 +7,7 @@ import { ComponentOptionsBase } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { ComponentPublicInstance } from 'vue';
+import { CountryCode } from 'libphonenumber-js';
 import { DebuggerEvent } from 'vue';
 import { DefineComponent } from 'vue';
 import { GlobalComponents } from 'vue';
@@ -29,8 +30,6 @@ declare const __VLS_component_10: DefineComponent<__VLS_Props_18, {}, {}, {}, {}
 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_21, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
@@ -43,17 +42,17 @@ closable: boolean;
 
 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_33, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_13: DefineComponent<__VLS_Props_35, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 close: () => any;
-}, string, PublicProps, Readonly<__VLS_Props_33> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_35> & Readonly<{
 onClose?: (() => any) | undefined;
 }>, {
 status: "info" | "success" | "warning" | "error";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
-declare const __VLS_component_14: DefineComponent<__VLS_Props_37, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_14: DefineComponent<__VLS_Props_39, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string | number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_37> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_39> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
 size: "s" | "m";
@@ -61,16 +60,16 @@ clearLabel: string;
 inputType: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_15: DefineComponent<__VLS_Props_38, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_15: DefineComponent<__VLS_Props_40, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:open": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_38> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_40> & 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_41, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_41> & Readonly<{}>, {
+declare const __VLS_component_16: DefineComponent<__VLS_Props_43, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_43> & Readonly<{}>, {
 position: "top" | "bottom" | "left" | "right";
 pointer: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
@@ -99,7 +98,9 @@ back: () => any;
 }, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{
 onBack?: (() => any) | undefined;
 "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, 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>;
 
@@ -167,10 +168,14 @@ declare type __VLS_Props_11 = {
      * Title of the content of the drawer.
      */
     contentTitle?: string;
+    /**
+     * if `true`, close the drawer when clicking the overlay.
+     */
+    closeOnOverlay?: boolean;
 };
 
 /**
- * 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 = {
     /**
@@ -348,7 +353,7 @@ declare type __VLS_Props_18 = {
 };
 
 /**
- * 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_19 = {
     /**
@@ -426,6 +431,10 @@ declare type __VLS_Props_21 = {
      * if `true`, display the close button.
      */
     closable?: boolean;
+    /**
+     * if `true`, close the modal when clicking the overlay.
+     */
+    closeOnOverlay?: boolean;
 };
 
 /**
@@ -540,9 +549,55 @@ declare type __VLS_Props_25 = {
 };
 
 /**
- * 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).
+ * A phone number input is a specialized input field designed to capture and validate phone numbers, ensuring correct formatting based on country-specific dialing codes. It often includes a country selector that automatically adjusts the international dialing code. This component improves user experience by standardizing phone number entries, reducing errors, and facilitating global compatibility. It is commonly used in registration forms, authentication flows, and contact information fields.
  */
 declare type __VLS_Props_26 = {
+    /**
+     * A unique identifier for the phone number input element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The current value of the phone number input field.
+     */
+    modelValue?: string;
+    /**
+     * Default country code for phone number formatting (e.g., 'FR', 'US', 'PT').
+     */
+    defaultCountry?: CountryCode;
+    /**
+     * A placeholder text to show in the phone number input when it is empty.
+     */
+    placeholder?: string;
+    /**
+     * Determines the size of the phone number input.
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, applies an invalid state to the password input.
+     */
+    isInvalid?: boolean;
+    /**
+     * If `true`, disables the input, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the input is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, display the country calling code prefix (+33, +1, etc.).
+     */
+    prefix?: boolean;
+    /**
+     * If `true`, display the country flag selector
+     */
+    flag?: boolean;
+};
+
+/**
+ * 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_27 = {
     /**
      * A unique identifier for the pincode element, used to associate the label with the form element.
      */
@@ -576,7 +631,7 @@ declare type __VLS_Props_26 = {
 /**
  * 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 = {
+declare type __VLS_Props_28 = {
     /**
      * A unique identifier for the quantity selector element, used to associate the label with the form element.
      */
@@ -630,7 +685,7 @@ declare type __VLS_Props_27 = {
 /**
  * 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 = {
+declare type __VLS_Props_29 = {
     /**
      * A unique identifier for the radio, used to associate the label with the form element.
      */
@@ -657,10 +712,48 @@ declare type __VLS_Props_28 = {
     disabled?: boolean;
 };
 
+/**
+ * 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 = {
+    /**
+     * Defines the visual style of the button.
+     */
+    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';
+    /**
+     * Determines the size of the button.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * If `true`, disables the button, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, applies a "ghost" style to the button, typically a transparent background with a border.
+     */
+    ghost?: boolean;
+    /**
+     * If `true`, the button gets an outlined style, usually with just the border and no solid background.
+     */
+    outlined?: boolean;
+    /**
+     * Controls the positioning of an icon in the button.
+     */
+    iconPosition?: 'left' | 'right' | 'only';
+    /**
+     * Specifies the button's HTML `type` attribute.
+     */
+    type?: 'button' | 'reset' | 'submit';
+    /**
+     * If `true`, a loading state is displayed.
+     */
+    isLoading?: boolean;
+};
+
 /**
  * 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 = {
+declare type __VLS_Props_30 = {
     /**
      * The name attribute for the radio element, typically used for form submission.
      */
@@ -690,47 +783,36 @@ declare type __VLS_Props_29 = {
 };
 
 /**
- * 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.
+ * 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_3 = {
-    /**
-     * Defines the visual style of the button.
-     */
-    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';
-    /**
-     * Determines the size of the button.
-     */
-    size?: 's' | 'm' | 'l';
-    /**
-     * If `true`, disables the button, making it non-interactive.
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, applies a "ghost" style to the button, typically a transparent background with a border.
-     */
-    ghost?: boolean;
+declare type __VLS_Props_31 = {
     /**
-     * If `true`, the button gets an outlined style, usually with just the border and no solid background.
+     * The selected segment index, bound via v-model.
      */
-    outlined?: boolean;
+    modelValue?: number;
     /**
-     * Controls the positioning of an icon in the button.
+     * if `true`, the segmented control take the full width.
      */
-    iconPosition?: 'left' | 'right' | 'only';
+    full?: boolean;
     /**
-     * Specifies the button's HTML `type` attribute.
+     * Determines the size of the segmented control.
      */
-    type?: 'button' | 'reset' | 'submit';
+    size?: 's' | 'm';
     /**
-     * If `true`, a loading state is displayed.
+     * An array of objects that allows you to provide all the data needed to generate the content for each segment.
      */
-    isLoading?: boolean;
+    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_30 = {
+declare type __VLS_Props_32 = {
     /**
      * A unique identifier for the select, used to associate the label with the form element.
      */
@@ -778,7 +860,7 @@ declare type __VLS_Props_30 = {
 /**
  * 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_33 = {
     /**
      * Content of the status badge
      */
@@ -792,7 +874,7 @@ declare type __VLS_Props_31 = {
 /**
  * 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_32 = {
+declare type __VLS_Props_34 = {
     /**
      * Allows to define the status dot type.
      */
@@ -806,7 +888,7 @@ declare type __VLS_Props_32 = {
 /**
  * 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_33 = {
+declare type __VLS_Props_35 = {
     /**
      * Title of the status notification.
      */
@@ -828,7 +910,7 @@ declare type __VLS_Props_33 = {
 /**
  * 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_34 = {
+declare type __VLS_Props_36 = {
     /**
      * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
      */
@@ -853,6 +935,10 @@ declare type __VLS_Props_34 = {
          * 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.
          */
@@ -867,7 +953,7 @@ declare type __VLS_Props_34 = {
 /**
  * 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_35 = {
+declare type __VLS_Props_37 = {
     /**
      * Defines the behavior and layout of the tag.
      */
@@ -909,7 +995,7 @@ declare type __VLS_Props_35 = {
 /**
  * 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_36 = {
+declare type __VLS_Props_38 = {
     /**
      * A unique identifier for the textarea, used to associate the label with the form element.
      */
@@ -955,7 +1041,7 @@ declare type __VLS_Props_36 = {
 /**
  * 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_37 = {
+declare type __VLS_Props_39 = {
     /**
      * A unique identifier for the input element, used to associate the label with the form element.
      */
@@ -1002,10 +1088,28 @@ declare type __VLS_Props_37 = {
     clearLabel?: string;
 };
 
+/**
+ * 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_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 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_38 = {
+declare type __VLS_Props_40 = {
     /**
      * If `true`, display the Toaster.
      */
@@ -1039,7 +1143,7 @@ declare type __VLS_Props_38 = {
 /**
  * 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_39 = {
+declare type __VLS_Props_41 = {
     /**
      * A unique identifier for the toggle, used to associate the label with the form element.
      */
@@ -1067,27 +1171,9 @@ declare type __VLS_Props_39 = {
 };
 
 /**
- * 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.
+ * 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_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.<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).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_40 = {
+declare type __VLS_Props_42 = {
     /**
      * The name attribute for the toggle element, typically used for form submission.
      */
@@ -1105,7 +1191,6 @@ declare type __VLS_Props_40 = {
         label: string;
         value: string;
         disabled?: boolean;
-        isInvalid?: boolean;
         size?: 's' | 'm';
     }>;
     /**
@@ -1117,7 +1202,7 @@ declare type __VLS_Props_40 = {
 /**
  * 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_41 = {
+declare type __VLS_Props_43 = {
     /**
      * A unique identifier for the tooltip, used to describe the tooltip.
      */
@@ -1231,7 +1316,7 @@ declare type __VLS_Props_7 = {
 };
 
 /**
- * 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 = {
     /**
@@ -1458,7 +1543,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;
     }> & {
@@ -1467,7 +1552,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;
     };
@@ -1555,7 +1640,9 @@ declare function __VLS_template_6(): {
          */
         footer?: VNode;
     };
-    refs: {};
+    refs: {
+        titleRef: HTMLHeadingElement;
+    };
     rootEl: any;
 };
 
@@ -1597,12 +1684,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;
     };
@@ -1913,17 +2000,31 @@ icon?: VNode;
 }) | null;
 }, any>;
 
-export declare const MPincode: DefineComponent<__VLS_Props_26, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MPhoneNumber: DefineComponent<__VLS_Props_26, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: string) => any;
+valid: (isValid: boolean) => any;
 }, string, PublicProps, Readonly<__VLS_Props_26> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+onValid?: ((isValid: boolean) => any) | undefined;
+}>, {
+size: "s" | "m";
+modelValue: string;
+defaultCountry: CountryCode;
+prefix: boolean;
+flag: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+export declare const MPincode: DefineComponent<__VLS_Props_27, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: string) => any;
+}, string, PublicProps, Readonly<__VLS_Props_27> & Readonly<{
+"onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
 length: 4 | 5 | 6;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MQuantitySelector: DefineComponent<__VLS_Props_27, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MQuantitySelector: DefineComponent<__VLS_Props_28, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_27> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_28> & Readonly<{
 "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
 size: "s" | "m";
@@ -1936,39 +2037,48 @@ incrementlabel: string;
 decrementLabel: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MRadio: DefineComponent<__VLS_Props_28, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MRadio: DefineComponent<__VLS_Props_29, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_28> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_29> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MRadioGroup: DefineComponent<__VLS_Props_29, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MRadioGroup: DefineComponent<__VLS_Props_30, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string) => any;
-}, string, PublicProps, Readonly<__VLS_Props_29> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_30> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MSelect: DefineComponent<__VLS_Props_30, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MSegmentedControl: DefineComponent<__VLS_Props_31, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: number) => any;
+}, string, PublicProps, Readonly<__VLS_Props_31> & Readonly<{
+"onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+size: "s" | "m";
+modelValue: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+export declare const MSelect: DefineComponent<__VLS_Props_32, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string | number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_30> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_32> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
 size: "s" | "m";
 }, {}, {}, {}, 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_33, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_33> & Readonly<{}>, {
 status: "info" | "success" | "warning" | "error" | "neutral";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MStatusDot: DefineComponent<__VLS_Props_32, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_32> & Readonly<{}>, {
+export declare const MStatusDot: DefineComponent<__VLS_Props_34, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_34> & 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_34, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MTabs: DefineComponent<__VLS_Props_36, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_34> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_36> & Readonly<{
 "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
 modelValue: number;
@@ -1977,10 +2087,10 @@ divider: boolean;
 tab: HTMLButtonElement;
 }, HTMLElement>;
 
-export declare const MTag: DefineComponent<__VLS_Props_35, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MTag: DefineComponent<__VLS_Props_37, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
 "remove-tag": (id: string) => any;
-}, string, PublicProps, Readonly<__VLS_Props_35> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_37> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 "onRemove-tag"?: ((id: string) => any) | undefined;
 }>, {
@@ -1988,9 +2098,9 @@ type: "informative" | "interactive" | "contextualised" | "removable" | "selectab
 contextualisedNumber: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MTextArea: DefineComponent<__VLS_Props_36, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MTextArea: 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;
 }>, {
 rows: number;
@@ -2000,17 +2110,17 @@ export declare const MTextInput: __VLS_WithTemplateSlots_14<typeof __VLS_compone
 
 export declare const MToaster: __VLS_WithTemplateSlots_15<typeof __VLS_component_15, __VLS_TemplateResult_15["slots"]>;
 
-export declare const MToggle: DefineComponent<__VLS_Props_39, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MToggle: DefineComponent<__VLS_Props_41, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_39> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_41> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
 size: "s" | "m";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MToggleGroup: DefineComponent<__VLS_Props_40, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MToggleGroup: DefineComponent<__VLS_Props_42, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string[]) => any;
-}, string, PublicProps, Readonly<__VLS_Props_40> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_42> & Readonly<{
 "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;