@mozaic-ds/vue 1.0.0-beta.5 → 1.0.0-beta.8

package/dist/mozaic-vue.d.ts

@@ -1,4 +1,5 @@
 import { AllowedComponentProps } from 'vue';
+import { Component } from 'vue';
 import { ComponentCustomProperties } from 'vue';
 import { ComponentCustomProps } from 'vue';
 import { ComponentInternalInstance } from 'vue';
@@ -20,43 +21,49 @@ import { VNodeProps } from 'vue';
 import { WatchOptions } from 'vue';
 import { WatchStopHandle } from 'vue';
 
-declare const __VLS_component: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {
+declare const __VLS_component: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {
 appearance: "standard" | "accent" | "danger" | "inverse";
 size: "s" | "m" | "l";
 type: "button" | "reset" | "submit";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
 
-declare const __VLS_component_2: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component_2: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{}>, {
+size: "s" | "m" | "l";
+style: "primary" | "secondary" | "tertiary" | "inverse";
+orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare const __VLS_component_3: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_3: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLFieldSetElement>;
+declare const __VLS_component_4: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLFieldSetElement>;
 
-declare const __VLS_component_4: DefineComponent<__VLS_Props_8, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_8> & Readonly<{}>, {
+declare const __VLS_component_5: DefineComponent<__VLS_Props_8, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_8> & Readonly<{}>, {
 appearance: "standard" | "accent" | "danger" | "inverse";
 size: "s" | "m" | "l";
 type: "button" | "reset" | "submit";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
 
-declare const __VLS_component_5: DefineComponent<__VLS_Props_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_9> & Readonly<{}>, {
+declare const __VLS_component_6: DefineComponent<__VLS_Props_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_9> & Readonly<{}>, {
+iconPosition: "left" | "right";
 appearance: "secondary" | "accent" | "inverse" | "standard";
 size: "s" | "m";
-iconPosition: "left" | "right";
 href: string;
-target: string;
+target: "_self" | "_blank" | "_parent" | "_top";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_6: DefineComponent<__VLS_Props_11, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component_7: DefineComponent<__VLS_Props_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_12> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_7: DefineComponent<__VLS_Props_18, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_8: DefineComponent<__VLS_Props_20, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 close: () => any;
-}, string, PublicProps, Readonly<__VLS_Props_18> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_20> & Readonly<{
 onClose?: (() => any) | undefined;
 }>, {
 status: "info" | "success" | "warning" | "error";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
-declare const __VLS_component_8: DefineComponent<__VLS_Props_20, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_9: DefineComponent<__VLS_Props_24, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string | number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_20> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_24> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
 size: "s" | "m";
@@ -65,21 +72,30 @@ inputType: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 /**
- * A badge indicates the status of an entity and can evolve at any time.
+ * 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 = {
     /**
-     * Content of the badge
-     */
-    label: number;
-    /**
-     * Allows to define the Badge style
+     * Allows to define the breadcrumb style
      */
-    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
+    appearance?: 'standard' | 'inverse';
     /**
-     * Allows to define the Badge size
+     * Links of the breadcrumb
      */
-    size?: 's' | 'm';
+    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;
+    }>;
 };
 
 /**
@@ -101,9 +117,27 @@ declare type __VLS_Props_10 = {
 };
 
 /**
- * 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.
+ * A badge indicates the status of an entity and can evolve at any time.
  */
 declare type __VLS_Props_11 = {
+    /**
+     * Content of the badge
+     */
+    label: number;
+    /**
+     * Allows to define the Badge style
+     */
+    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
+    /**
+     * 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.
+ */
+declare type __VLS_Props_12 = {
     /**
      * Controls the visibility of the overlay.
      */
@@ -114,10 +148,40 @@ declare type __VLS_Props_11 = {
     dialogLabel?: string;
 };
 
+/**
+ * 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_13 = {
+    /**
+     * A unique identifier for the pagination.
+     */
+    id: string;
+    /**
+     * The current value of the selected page.
+     */
+    modelValue: number;
+    /**
+     * If `true`, display a compact version without the select.
+     */
+    compact?: boolean;
+    /**
+     * Define the available choices for the pagination select element.
+     */
+    options: Array<{
+        id?: string;
+        text: string;
+        value: number;
+    }>;
+    /**
+     * Accessible label for the select of the pagination.
+     */
+    selectLabel?: string;
+};
+
 /**
  * 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_12 = {
+declare type __VLS_Props_14 = {
     /**
      * A unique identifier for the password input element, used to associate the label with the form element.
      */
@@ -166,7 +230,7 @@ declare type __VLS_Props_12 = {
 /**
  * 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.
  */
-declare type __VLS_Props_13 = {
+declare type __VLS_Props_15 = {
     /**
      * A unique identifier for the quantity selector element, used to associate the label with the form element.
      */
@@ -220,7 +284,7 @@ declare type __VLS_Props_13 = {
 /**
  * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
  */
-declare type __VLS_Props_14 = {
+declare type __VLS_Props_16 = {
     /**
      * A unique identifier for the radio, used to associate the label with the form element.
      */
@@ -250,7 +314,7 @@ declare type __VLS_Props_14 = {
 /**
  * A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
  */
-declare type __VLS_Props_15 = {
+declare type __VLS_Props_17 = {
     /**
      * The name attribute for the radio element, typically used for form submission.
      */
@@ -282,7 +346,7 @@ declare type __VLS_Props_15 = {
 /**
  * A select is a form element for multi-line text input, ideal for longer content like comments or descriptions.
  */
-declare type __VLS_Props_16 = {
+declare type __VLS_Props_18 = {
     /**
      * A unique identifier for the select, used to associate the label with the form element.
      */
@@ -330,7 +394,7 @@ declare type __VLS_Props_16 = {
 /**
  * A status badge indicates the status of an entity and can evolve at any time.
  */
-declare type __VLS_Props_17 = {
+declare type __VLS_Props_19 = {
     /**
      * Content of the Status Badge
      */
@@ -341,10 +405,48 @@ declare type __VLS_Props_17 = {
     status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
 };
 
+/**
+ * Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.
+ */
+declare type __VLS_Props_2 = {
+    /**
+     * 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 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_18 = {
+declare type __VLS_Props_20 = {
     /**
      * Title of the Status Notification
      */
@@ -363,10 +465,91 @@ declare type __VLS_Props_18 = {
     closable?: boolean;
 };
 
+/**
+ * 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_21 = {
+    /**
+     * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
+     */
+    description?: string;
+    /**
+     * If `true`, the divider will appear.
+     */
+    divider?: boolean;
+    /**
+     * If `true`, the tabs of the component will be centered.
+     */
+    centered?: boolean;
+    /**
+     * The selected tab index, bound via v-model.
+     */
+    modelValue?: number;
+    /**
+     * An array of objects that allows you to provide all the data needed to generate the content for each tab.
+     */
+    tabs: Array<{
+        /**
+         * The icon displayed for the tab from Mozaic-icon-vue.
+         */
+        icon?: Component;
+        /**
+         * The label displayed for the tab.
+         */
+        label: string;
+        /**
+         * If `true`, the tab will be disabled.
+         */
+        disabled?: boolean;
+    }>;
+};
+
+/**
+ * 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_22 = {
+    /**
+     * Defines the behavior and layout of the tag.
+     */
+    type?: 'informative' | 'interactive' | 'contextualised' | 'removable' | 'selectable';
+    /**
+     * Determines the size of the tag.
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * A unique identifier for the tag, used to associate the label with the form element. **Required** when type is 'selectable' or 'removable'.
+     */
+    id?: string;
+    /**
+     * The name attribute for the tag element, typically used for form submission. (only relevant for type: 'selectable').
+     */
+    name?: string;
+    /**
+     * The text label displayed next to the tag.
+     */
+    label: string;
+    /**
+     * The tag's checked state, bound via v-model. Used only for type: 'selectable'.
+     */
+    modelValue?: boolean;
+    /**
+     * If `true`, disables the tag, making it non-interactive. Applicable to selectable, interactive, and contextualised types.
+     */
+    disabled?: boolean;
+    /**
+     * A number displayed in the badge when the tag is contextualised.
+     */
+    contextualisedNumber?: number;
+    /**
+     * Accessible label text for the remove button in removable tags.
+     */
+    removableLabel?: string;
+};
+
 /**
  * A textarea is a form element for multi-line text input, ideal for longer content like comments or descriptions.
  */
-declare type __VLS_Props_19 = {
+declare type __VLS_Props_23 = {
     /**
      * A unique identifier for the textarea, used to associate the label with the form element.
      */
@@ -409,37 +592,10 @@ declare type __VLS_Props_19 = {
     readonly?: boolean;
 };
 
-/**
- * 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 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;
-    }>;
-};
-
 /**
  * Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context.
  */
-declare type __VLS_Props_20 = {
+declare type __VLS_Props_24 = {
     /**
      * A unique identifier for the input element, used to associate the label with the form element.
      */
@@ -489,7 +645,7 @@ declare type __VLS_Props_20 = {
 /**
  * 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.
  */
-declare type __VLS_Props_21 = {
+declare type __VLS_Props_25 = {
     /**
      * A unique identifier for the toggle, used to associate the label with the form element.
      */
@@ -519,7 +675,7 @@ declare type __VLS_Props_21 = {
 /**
  * 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.
  */
-declare type __VLS_Props_22 = {
+declare type __VLS_Props_26 = {
     /**
      * The name attribute for the toggle element, typically used for form submission.
      */
@@ -546,48 +702,10 @@ declare type __VLS_Props_22 = {
     inline?: boolean;
 };
 
-/**
- * Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context.
- */
-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;
-};
-
 /**
  * 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_4 = {
+declare type __VLS_Props_3 = {
     /**
      * A unique identifier for the checkbox, used to associate the label with the form element.
      */
@@ -621,7 +739,7 @@ declare type __VLS_Props_4 = {
 /**
  * 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_4 = {
     /**
      * The name attribute for the checkbox element, typically used for form submission.
      */
@@ -647,6 +765,24 @@ declare type __VLS_Props_5 = {
     inline?: boolean;
 };
 
+/**
+ * A Divider serves as a visual divider to separate content, providing a clear distinction between sections.
+ */
+declare type __VLS_Props_5 = {
+    /**
+     * Determines the orientation of the divider
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Determines the style of the divider
+     */
+    style?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
+    /**
+     * Determines the size of the divider
+     */
+    size?: 's' | 'm' | 'l';
+};
+
 /**
  * This component creates a structured form field with a label, optional help text, error and validation message handling.
  */
@@ -776,7 +912,7 @@ declare type __VLS_Props_9 = {
     /**
      * Where to open the link
      */
-    target?: string;
+    target?: '_self' | '_blank' | '_parent' | '_top';
     /**
      * Specify wether the link is inline
      */
@@ -813,6 +949,15 @@ declare function __VLS_template(): {
 };
 
 declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_3(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
@@ -829,7 +974,7 @@ declare function __VLS_template_2(): {
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_3(): {
+declare function __VLS_template_4(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
@@ -846,7 +991,7 @@ declare function __VLS_template_3(): {
     rootEl: HTMLFieldSetElement;
 };
 
-declare function __VLS_template_4(): {
+declare function __VLS_template_5(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
@@ -863,7 +1008,7 @@ declare function __VLS_template_4(): {
     rootEl: HTMLButtonElement;
 };
 
-declare function __VLS_template_5(): {
+declare function __VLS_template_6(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
@@ -888,7 +1033,7 @@ declare function __VLS_template_5(): {
     rootEl: any;
 };
 
-declare function __VLS_template_6(): {
+declare function __VLS_template_7(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
@@ -905,7 +1050,7 @@ declare function __VLS_template_6(): {
     rootEl: HTMLDivElement;
 };
 
-declare function __VLS_template_7(): {
+declare function __VLS_template_8(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
@@ -922,7 +1067,7 @@ declare function __VLS_template_7(): {
     rootEl: HTMLElement;
 };
 
-declare function __VLS_template_8(): {
+declare function __VLS_template_9(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         /**
@@ -955,6 +1100,8 @@ declare type __VLS_TemplateResult_7 = ReturnType<typeof __VLS_template_7>;
 
 declare type __VLS_TemplateResult_8 = ReturnType<typeof __VLS_template_8>;
 
+declare type __VLS_TemplateResult_9 = ReturnType<typeof __VLS_template_9>;
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -1003,45 +1150,59 @@ declare type __VLS_WithTemplateSlots_8<T, S> = T & {
     };
 };
 
-export declare const MBadge: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-appearance: "danger" | "accent" | "inverse" | "standard";
-size: "s" | "m";
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+declare type __VLS_WithTemplateSlots_9<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 
-export declare const MBreadcrumb: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
+export declare const MBreadcrumb: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
 export declare const MButton: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 
-export declare const MCheckbox: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MCheckbox: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MCheckboxGroup: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MCheckboxGroup: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string[]) => any;
-}, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{
 "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MField: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+export declare const MDivider: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+
+export declare const MField: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
 
-export declare const MFieldGroup: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
+export declare const MFieldGroup: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
 
-export declare const MIconButton: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
+export declare const MIconButton: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
 
-export declare const MLink: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
+export declare const MLink: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
 
 export declare const MLoader: DefineComponent<__VLS_Props_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_10> & Readonly<{}>, {
 appearance: "standard" | "accent" | "inverse";
 size: "s" | "m" | "l";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MOverlay: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
+export declare const MNumberBadge: DefineComponent<__VLS_Props_11, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{}>, {
+appearance: "danger" | "accent" | "inverse" | "standard";
+size: "s" | "m";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
 
-export declare const MPasswordInput: DefineComponent<__VLS_Props_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MOverlay: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
+
+export declare const MPagination: DefineComponent<__VLS_Props_13, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: number) => any;
+}, string, PublicProps, Readonly<__VLS_Props_13> & Readonly<{
+"onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
+
+export declare const MPasswordInput: DefineComponent<__VLS_Props_14, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string | number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_12> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_14> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
 clearLabel: string;
@@ -1134,68 +1295,90 @@ icon?: VNode;
 }) | null;
 }, HTMLDivElement>;
 
-export declare const MQuantitySelector: DefineComponent<__VLS_Props_13, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MQuantitySelector: DefineComponent<__VLS_Props_15, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_13> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_15> & Readonly<{
 "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
 size: "s" | "m";
 name: string;
 modelValue: number;
+step: number;
 min: number;
 max: number;
-step: number;
 incrementlabel: string;
 decrementLabel: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MRadio: DefineComponent<__VLS_Props_14, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MRadio: DefineComponent<__VLS_Props_16, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_14> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_16> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MRadioGroup: DefineComponent<__VLS_Props_15, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MRadioGroup: DefineComponent<__VLS_Props_17, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string) => any;
-}, string, PublicProps, Readonly<__VLS_Props_15> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_17> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MSelect: DefineComponent<__VLS_Props_16, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MSelect: DefineComponent<__VLS_Props_18, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string | number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_16> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_18> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
 size: "s" | "m";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSelectElement>;
 
-export declare const MStatusBadge: DefineComponent<__VLS_Props_17, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_17> & Readonly<{}>, {
+export declare const MStatusBadge: DefineComponent<__VLS_Props_19, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_19> & Readonly<{}>, {
 status: "info" | "success" | "warning" | "error" | "neutral";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MStatusNotification: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
+export declare const MStatusNotification: __VLS_WithTemplateSlots_8<typeof __VLS_component_8, __VLS_TemplateResult_8["slots"]>;
+
+export declare const MTabs: DefineComponent<__VLS_Props_21, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: number) => any;
+}, string, PublicProps, Readonly<__VLS_Props_21> & Readonly<{
+"onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+modelValue: number;
+divider: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+tab: HTMLButtonElement;
+}, HTMLElement>;
+
+export declare const MTag: DefineComponent<__VLS_Props_22, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: boolean) => any;
+"remove-tag": (id: string) => any;
+}, string, PublicProps, Readonly<__VLS_Props_22> & Readonly<{
+"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+"onRemove-tag"?: ((id: string) => any) | undefined;
+}>, {
+type: "informative" | "interactive" | "contextualised" | "removable" | "selectable";
+contextualisedNumber: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MTextArea: DefineComponent<__VLS_Props_19, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MTextArea: DefineComponent<__VLS_Props_23, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string | number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_19> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_23> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
 rows: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLTextAreaElement>;
 
-export declare const MTextInput: __VLS_WithTemplateSlots_8<typeof __VLS_component_8, __VLS_TemplateResult_8["slots"]>;
+export declare const MTextInput: __VLS_WithTemplateSlots_9<typeof __VLS_component_9, __VLS_TemplateResult_9["slots"]>;
 
-export declare const MToggle: DefineComponent<__VLS_Props_21, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MToggle: DefineComponent<__VLS_Props_25, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_21> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_25> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
 size: "s" | "m";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MToggleGroup: DefineComponent<__VLS_Props_22, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MToggleGroup: DefineComponent<__VLS_Props_26, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string[]) => any;
-}, string, PublicProps, Readonly<__VLS_Props_22> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_26> & Readonly<{
 "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;