@mozaic-ds/vue 2.10.0 → 2.11.0

package/dist/mozaic-vue.d.ts

@@ -49,17 +49,17 @@ closable: boolean;
 
 declare const __VLS_component_13: DefineComponent<__VLS_Props_24, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_24> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_14: DefineComponent<__VLS_Props_36, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_14: DefineComponent<__VLS_Props_38, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 close: () => any;
-}, string, PublicProps, Readonly<__VLS_Props_36> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_38> & Readonly<{
 onClose?: (() => any) | undefined;
 }>, {
 status: "info" | "success" | "warning" | "error";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
-declare const __VLS_component_15: DefineComponent<__VLS_Props_40, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_15: DefineComponent<__VLS_Props_43, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string | number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_40> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_43> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
 size: "s" | "m";
@@ -67,16 +67,16 @@ clearLabel: string;
 inputType: "date" | "email" | "number" | "password" | "search" | "tel" | "text";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_16: DefineComponent<__VLS_Props_41, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+declare const __VLS_component_16: DefineComponent<__VLS_Props_44, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:open": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_41> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_44> & Readonly<{
 "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
 status: "info" | "success" | "warning" | "error";
 closable: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
-declare const __VLS_component_17: DefineComponent<__VLS_Props_44, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_44> & Readonly<{}>, {
+declare const __VLS_component_17: DefineComponent<__VLS_Props_47, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_47> & Readonly<{}>, {
 position: "top" | "bottom" | "left" | "right";
 pointer: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
@@ -930,9 +930,56 @@ declare type __VLS_Props_33 = {
 };
 
 /**
- * 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.
+ * A Star rating visually represents a score or evaluation and can be used to display a rating or allow users to rate an item, such as a product or service. It serves two main purposes: collecting user feedback by enabling individuals to express their experience and providing social proof by displaying ratings from other users to assist decision-making. Rating Stars are commonly found in e-commerce, review systems, and feedback interfaces, offering a quick and intuitive way to assess quality or satisfaction.
  */
 declare type __VLS_Props_34 = {
+    /**
+     * Determines whether the rating is interactive or read-only.
+     * When true, all user interactions (click, hover, keyboard) are disabled.
+     * Automatically set to true when `compact`, `href`, or `information` are provided.
+     *
+     */
+    readonly?: boolean;
+    /**
+     * Defines the visual size of the star icons and the accompanying text.
+     *
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * Enables a compact display mode that shows only one star instead of five.
+     * Typically used for summaries or quick visual cues.
+     * When enabled, the component automatically becomes read-only.
+     *
+     */
+    compact?: boolean;
+    /**
+     * Specifies the color scheme of the stars.
+     *
+     */
+    appearance?: 'standard' | 'accent';
+    /**
+     * Optional text displayed next to the star rating.
+     * If provided, the component automatically becomes read-only.
+     */
+    text?: string;
+    /**
+     * URL for the link (for external links or the `to` prop for `router-link`).
+     */
+    href?: string;
+    /**
+     * Where to open the link.
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /**
+     * If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router).
+     */
+    router?: boolean;
+};
+
+/**
+ * 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_35 = {
     /**
      * Content of the status badge
      */
@@ -946,7 +993,7 @@ declare type __VLS_Props_34 = {
 /**
  * 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_35 = {
+declare type __VLS_Props_36 = {
     /**
      * Allows to define the status dot type.
      */
@@ -957,10 +1004,24 @@ declare type __VLS_Props_35 = {
     size?: 's' | 'm' | 'l';
 };
 
+/**
+ * A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.
+ */
+declare type __VLS_Props_37 = {
+    /**
+     * Allows to define the status message style.
+     */
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral' | 'inprogress';
+    /**
+     * Label of the status message.
+     */
+    label: string;
+};
+
 /**
  * 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_36 = {
+declare type __VLS_Props_38 = {
     /**
      * Title of the status notification.
      */
@@ -979,10 +1040,50 @@ declare type __VLS_Props_36 = {
     closable?: boolean;
 };
 
+/**
+ * A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.
+ */
+declare type __VLS_Props_39 = {
+    /**
+     * Current step of the stepper compact.
+     */
+    value?: number;
+    /**
+     * Maximum number of steps for the stepper compact.
+     */
+    maxSteps?: number;
+    /**
+     * Label of the stepper compact.
+     */
+    label: string;
+    /**
+     * Description displayed below the label of the stepper compact.
+     */
+    description?: 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';
+};
+
 /**
  * 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_37 = {
+declare type __VLS_Props_40 = {
     /**
      * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
      */
@@ -1025,7 +1126,7 @@ declare type __VLS_Props_37 = {
 /**
  * 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_38 = {
+declare type __VLS_Props_41 = {
     /**
      * Defines the behavior and layout of the tag.
      */
@@ -1067,7 +1168,7 @@ declare type __VLS_Props_38 = {
 /**
  * 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_39 = {
+declare type __VLS_Props_42 = {
     /**
      * A unique identifier for the textarea, used to associate the label with the form element.
      */
@@ -1110,28 +1211,10 @@ declare type __VLS_Props_39 = {
     readonly?: boolean;
 };
 
-/**
- * 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 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_40 = {
+declare type __VLS_Props_43 = {
     /**
      * A unique identifier for the input element, used to associate the label with the form element.
      */
@@ -1181,7 +1264,7 @@ declare type __VLS_Props_40 = {
 /**
  * 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_41 = {
+declare type __VLS_Props_44 = {
     /**
      * If `true`, display the Toaster.
      */
@@ -1215,7 +1298,7 @@ declare type __VLS_Props_41 = {
 /**
  * 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_42 = {
+declare type __VLS_Props_45 = {
     /**
      * A unique identifier for the toggle, used to associate the label with the form element.
      */
@@ -1245,7 +1328,7 @@ declare type __VLS_Props_42 = {
 /**
  * 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_43 = {
+declare type __VLS_Props_46 = {
     /**
      * The name attribute for the toggle element, typically used for form submission.
      */
@@ -1274,7 +1357,7 @@ declare type __VLS_Props_43 = {
 /**
  * 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_44 = {
+declare type __VLS_Props_47 = {
     /**
      * A unique identifier for the tooltip, used to describe the tooltip.
      */
@@ -1411,6 +1494,10 @@ declare type __VLS_Props_9 = {
     fluid?: boolean;
 };
 
+declare type __VLS_PublicProps = {
+    modelValue: number;
+} & __VLS_Props_34;
+
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
@@ -2148,19 +2235,39 @@ export declare const MSelect: DefineComponent<__VLS_Props_33, {}, {}, {}, {}, Co
 size: "s" | "m";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MStatusBadge: DefineComponent<__VLS_Props_34, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_34> & Readonly<{}>, {
+export declare const MStarRating: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: number) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+"onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+size: "s" | "m" | "l";
+appearance: "standard" | "accent";
+readonly: boolean;
+compact: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+export declare const MStatusBadge: DefineComponent<__VLS_Props_35, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_35> & Readonly<{}>, {
 status: "info" | "success" | "warning" | "error" | "neutral";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-export declare const MStatusDot: DefineComponent<__VLS_Props_35, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_35> & Readonly<{}>, {
+export declare const MStatusDot: DefineComponent<__VLS_Props_36, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_36> & Readonly<{}>, {
 status: "info" | "success" | "warning" | "error" | "neutral";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
 
+export declare const MStatusMessage: DefineComponent<__VLS_Props_37, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_37> & Readonly<{}>, {
+status: "info" | "success" | "warning" | "error" | "neutral" | "inprogress";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
 export declare const MStatusNotification: __VLS_WithTemplateSlots_14<typeof __VLS_component_14, __VLS_TemplateResult_14["slots"]>;
 
-export declare const MTabs: DefineComponent<__VLS_Props_37, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MStepperCompact: DefineComponent<__VLS_Props_39, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_39> & Readonly<{}>, {
+value: number;
+maxSteps: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+export declare const MTabs: DefineComponent<__VLS_Props_40, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_37> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_40> & Readonly<{
 "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
 modelValue: number;
@@ -2169,20 +2276,21 @@ divider: boolean;
 tab: HTMLButtonElement;
 }, HTMLElement>;
 
-export declare const MTag: DefineComponent<__VLS_Props_38, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MTag: DefineComponent<__VLS_Props_41, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
 "remove-tag": (id: string) => any;
-}, string, PublicProps, Readonly<__VLS_Props_38> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_41> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 "onRemove-tag"?: ((id: string) => any) | undefined;
 }>, {
 type: "informative" | "interactive" | "contextualised" | "removable" | "selectable";
 contextualisedNumber: number;
+removableLabel: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MTextArea: DefineComponent<__VLS_Props_39, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MTextArea: DefineComponent<__VLS_Props_42, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string | number) => any;
-}, string, PublicProps, Readonly<__VLS_Props_39> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_42> & Readonly<{
 "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
 rows: number;
@@ -2192,17 +2300,17 @@ export declare const MTextInput: __VLS_WithTemplateSlots_15<typeof __VLS_compone
 
 export declare const MToaster: __VLS_WithTemplateSlots_16<typeof __VLS_component_16, __VLS_TemplateResult_16["slots"]>;
 
-export declare const MToggle: DefineComponent<__VLS_Props_42, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MToggle: DefineComponent<__VLS_Props_45, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_Props_42> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_45> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
 size: "s" | "m";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-export declare const MToggleGroup: DefineComponent<__VLS_Props_43, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+export declare const MToggleGroup: DefineComponent<__VLS_Props_46, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: string[]) => any;
-}, string, PublicProps, Readonly<__VLS_Props_43> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_46> & Readonly<{
 "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;