@mozaic-ds/vue 2.12.0 → 2.13.0

package/src/components/statusmessage/MStatusMessage.vue

@@ -13,10 +13,12 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import InfoCircleFilled24 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled24/InfoCircleFilled24.vue';
-import WarningCircleFilled24 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled24/WarningCircleFilled24.vue';
-import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
-import CheckCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled24/CheckCircleFilled24.vue';
+import {
+  InfoCircleFilled24,
+  WarningCircleFilled24,
+  CrossCircleFilled24,
+  CheckCircleFilled24,
+} from '@mozaic-ds/icons-vue';
 import MLoader from '../loader/MLoader.vue';
 /**
  * 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.

package/src/components/statusmessage/README.md

@@ -9,3 +9,17 @@ A Status Message is a compact component that combines an icon and concise text t
 | --- | --- | --- | --- | 
 | `status` | Allows to define the status message style. | `"info"` `"warning"` `"error"` `"success"` `"neutral"` `"inprogress"` | `"info"` |
 | `label*` | Label of the status message. | `string` | - |
+
+## Dependencies
+
+### Depends on
+
+- [MLoader](../loader)
+
+### Graph
+
+```mermaid
+graph TD;
+  MStatusMessage --> MLoader
+style MStatusMessage fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/statusnotification/MStatusNotification.spec.ts

@@ -1,10 +1,12 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import MStatusNotification from './MStatusNotification.vue';
-import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled32/InfoCircleFilled32.vue';
-import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
-import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
-import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
+import {
+  InfoCircleFilled32,
+  WarningCircleFilled32,
+  CrossCircleFilled32,
+  CheckCircleFilled32,
+} from '@mozaic-ds/icons-vue';
 
 describe('MStatusNotification.vue', () => {
   it('should render correctly with the default props', () => {

package/src/components/statusnotification/MStatusNotification.stories.ts

@@ -3,7 +3,7 @@ import MStatusNotification from './MStatusNotification.vue';
 import { action } from 'storybook/actions';
 import MButton from '../button/MButton.vue';
 import MLink from '../link/MLink.vue';
-import ArrowNext20 from '@mozaic-ds/icons-vue/src/components/ArrowNext20/ArrowNext20.vue';
+import { ArrowNext20 } from '@mozaic-ds/icons-vue';
 
 const meta: Meta<typeof MStatusNotification> = {
   title: 'Status/Status Notification',

package/src/components/statusnotification/MStatusNotification.vue

@@ -34,11 +34,13 @@
 
 <script setup lang="ts">
 import { computed, type VNode } from 'vue';
-import Cross20 from '@mozaic-ds/icons-vue/src/components/Cross20/Cross20.vue';
-import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled32/InfoCircleFilled32.vue';
-import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
-import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
-import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
+import {
+  Cross20,
+  InfoCircleFilled32,
+  WarningCircleFilled32,
+  CrossCircleFilled32,
+  CheckCircleFilled32,
+} from '@mozaic-ds/icons-vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 /**
  * 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.

package/src/components/statusnotification/README.md

@@ -23,3 +23,17 @@ A Status Notification is used to draw the user’s attention to important inform
 | Name | Description | Type |
 | --- | --- | --- |
 | `close` | Emits when closing the notification. | [] |
+
+## Dependencies
+
+### Depends on
+
+- [MIconButton](../iconbutton)
+
+### Graph
+
+```mermaid
+graph TD;
+  MStatusNotification --> MIconButton
+style MStatusNotification fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/stepperbottombar/MStepperBottomBar.spec.ts

@@ -0,0 +1,134 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MStepperBottomBar from './MStepperBottomBar.vue';
+
+const globalStubs = {
+  MButton: {
+    emits: ['click'],
+    template: `<button @click="$emit('click', $event)"><slot /></button>`,
+  },
+  MDivider: {
+    template: `<hr />`,
+  },
+};
+
+describe('MStepperBottomBar component', () => {
+  it('renders cancel button by default', () => {
+    const wrapper = mount(MStepperBottomBar, {
+      global: { stubs: globalStubs },
+    });
+
+    expect(wrapper.text()).toContain('Cancel');
+  });
+
+  it('does not render cancel button when cancel is false', () => {
+    const wrapper = mount(MStepperBottomBar, {
+      props: { cancel: false },
+      global: { stubs: globalStubs },
+    });
+
+    expect(wrapper.text()).not.toContain('Cancel');
+  });
+
+  it('does not render previous button when step is 0', () => {
+    const wrapper = mount(MStepperBottomBar, {
+      props: { modelValue: 0 },
+      global: { stubs: globalStubs },
+    });
+
+    expect(wrapper.text()).not.toContain('Previous');
+  });
+
+  it('renders previous button when step > 0', () => {
+    const wrapper = mount(MStepperBottomBar, {
+      props: { modelValue: 1 },
+      global: { stubs: globalStubs },
+    });
+
+    expect(wrapper.text()).toContain('Previous');
+  });
+
+  it('emits update:modelValue with decremented value on previous click', async () => {
+    const wrapper = mount(MStepperBottomBar, {
+      props: { modelValue: 2 },
+      global: { stubs: globalStubs },
+    });
+
+    const buttons = wrapper.findAll('button');
+    const previousButton = buttons.find((b) => b.text() === 'Previous')!;
+
+    await previousButton.trigger('click');
+
+    const emitted = wrapper.emitted('update:modelValue')!;
+    expect(emitted.at(-1)).toEqual([1]);
+  });
+
+  it('emits update:modelValue with incremented value on next click', async () => {
+    const wrapper = mount(MStepperBottomBar, {
+      props: {
+        modelValue: 1,
+        steps: 3,
+      },
+      global: { stubs: globalStubs },
+    });
+
+    const nextButton = wrapper
+      .findAll('button')
+      .find((b) => b.text() === 'Next')!;
+
+    await nextButton.trigger('click');
+
+    const emitted = wrapper.emitted('update:modelValue')!;
+    expect(emitted.at(-1)).toEqual([2]);
+  });
+
+  it('emits validate when clicking next on last step', async () => {
+    const wrapper = mount(MStepperBottomBar, {
+      props: {
+        modelValue: 3,
+        steps: 3,
+      },
+      global: { stubs: globalStubs },
+    });
+
+    const validateButton = wrapper
+      .findAll('button')
+      .find((b) => b.text() === 'Validate')!;
+
+    await validateButton.trigger('click');
+
+    expect(wrapper.emitted('validate')).toBeTruthy();
+  });
+
+  it('emits cancel when cancel button is clicked', async () => {
+    const wrapper = mount(MStepperBottomBar, {
+      global: { stubs: globalStubs },
+    });
+
+    const cancelButton = wrapper
+      .findAll('button')
+      .find((b) => b.text() === 'Cancel')!;
+
+    await cancelButton.trigger('click');
+
+    expect(wrapper.emitted('cancel')).toBeTruthy();
+  });
+
+  it('renders custom labels', () => {
+    const wrapper = mount(MStepperBottomBar, {
+      props: {
+        cancelLabel: 'Abort',
+        previousLabel: 'Back',
+        nextLabel: 'Continue',
+        validateLabel: 'Submit',
+        modelValue: 1,
+        steps: 1,
+      },
+      global: { stubs: globalStubs },
+    });
+
+    expect(wrapper.text()).toContain('Abort');
+    expect(wrapper.text()).toContain('Back');
+    expect(wrapper.text()).toContain('Submit');
+  });
+});

package/src/components/stepperbottombar/MStepperBottomBar.stories.ts

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
+
+import MStepperBottomBar from './MStepperBottomBar.vue';
+
+const meta: Meta<typeof MStepperBottomBar> = {
+  title: 'Structure/Stepper Bottom Bar',
+  component: MStepperBottomBar,
+  tags: ['v2'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: { height: '200px' },
+      description: {
+        component:
+          'A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.',
+      },
+    },
+  },
+  argTypes: {
+    // @ts-expect-error: custom css property
+    '--stepper-bottom-bar-z-index': {
+      description: 'Customise the z-index of the stepper bottom bar',
+      control: false,
+      table: {
+        category: 'Custom Properties',
+        type: { summary: 'number' },
+        defaultValue: { summary: '3' },
+      },
+    },
+  },
+  args: {
+    steps: 3,
+    modelValue: 0,
+  },
+  render: (args) => ({
+    components: { MStepperBottomBar },
+    setup() {
+      const onUpdate = action('update:modelValue');
+      const onCancel = action('cancel');
+      const onValidate = action('validate');
+
+      return { args, onUpdate, onCancel, onValidate };
+    },
+    template: `
+        <MStepperBottomBar
+          v-bind="args"
+          @update:modelValue="onUpdate"
+          @cancel="onCancel"
+          @validate="onValidate"
+        />
+    `,
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MStepperBottomBar>;
+
+export const First: Story = {};
+
+export const Middle: Story = {
+  args: {
+    modelValue: 2,
+  },
+};
+
+export const Last: Story = {
+  args: {
+    modelValue: 3,
+  },
+};

package/src/components/stepperbottombar/MStepperBottomBar.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="mc-stepper-bottom-bar">
+    <MDivider class="mc-stepper-bottom-bar__divider" />
+    <div class="mc-stepper-bottom-bar__left">
+      <MButton
+        v-if="cancel"
+        type="button"
+        ghost
+        size="s"
+        @click="emit('cancel')"
+      >
+        {{ cancelLabel }}
+      </MButton>
+    </div>
+
+    <div class="mc-stepper-bottom-bar__right">
+      <MButton
+        v-if="currentStep > 0"
+        type="button"
+        outlined
+        size="s"
+        @click="onPrevious"
+      >
+        {{ previousLabel }}
+      </MButton>
+
+      <MButton type="button" appearance="accent" size="s" @click="onNext">
+        {{ currentStep < steps ? nextLabel : validateLabel }}
+      </MButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import MButton from '../button/MButton.vue';
+import MDivider from '../divider/MDivider.vue';
+/**
+ * A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Current step of the stepper compact.
+     */
+    modelValue?: number;
+    /**
+     * Total number of steps of the stepper compact.
+     */
+    steps?: number;
+    /**
+     * If `true`, display the cancel button.
+     */
+    cancel?: boolean;
+    /**
+     * Label for the cancel button.
+     */
+    cancelLabel?: string;
+    /**
+     * Label for the previous button.
+     */
+    previousLabel?: string;
+    /**
+     * Label for the next button.
+     */
+    nextLabel?: string;
+    /**
+     * Label for the validate button.
+     */
+    validateLabel?: string;
+  }>(),
+  {
+    steps: 0,
+    modelValue: 0,
+    cancel: true,
+    cancelLabel: 'Cancel',
+    previousLabel: 'Previous',
+    nextLabel: 'Next',
+    validateLabel: 'Validate',
+  },
+);
+
+const emit = defineEmits<{
+  /**
+   * Emits when the cancel button is clicked.
+   */
+  (on: 'cancel'): void;
+  /**
+   * Emits when the step change.
+   */
+  (on: 'update:modelValue', value: number): void;
+  /**
+   * Emits when the validate button is clicked.
+   */
+  (on: 'validate'): void;
+}>();
+
+const currentStep = ref(0);
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (value !== undefined) {
+      currentStep.value = value;
+    }
+  },
+  { immediate: true },
+);
+
+watch(currentStep, (value) => {
+  emit('update:modelValue', value);
+});
+
+const onPrevious = () => {
+  if (currentStep.value > 0) {
+    currentStep.value--;
+  }
+};
+
+const onNext = () => {
+  if (currentStep.value < props.steps) {
+    currentStep.value++;
+  } else {
+    emit('validate');
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/stepper-bottom-bar';
+</style>

package/src/components/stepperbottombar/README.md

@@ -0,0 +1,40 @@
+# MStepperBottomBar
+
+A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `modelValue` | Current step of the stepper compact. | `number` | `0` |
+| `steps` | Total number of steps of the stepper compact. | `number` | `0` |
+| `cancel` | If `true`, display the cancel button. | `boolean` | `true` |
+| `cancelLabel` | Label for the cancel button. | `string` | `"Cancel"` |
+| `previousLabel` | Label for the previous button. | `string` | `"Previous"` |
+| `nextLabel` | Label for the next button. | `string` | `"Next"` |
+| `validateLabel` | Label for the validate button. | `string` | `"Validate"` |
+
+## Events
+
+| Name | Description | Type |
+| --- | --- | --- |
+| `update:modelValue` | Emits when the step change. | [value: number] |
+| `cancel` | Emits when the cancel button is clicked. | [] |
+| `validate` | Emits when the validate button is clicked. | [] |
+
+## Dependencies
+
+### Depends on
+
+- [MButton](../button)
+- [MDivider](../divider)
+
+### Graph
+
+```mermaid
+graph TD;
+  MStepperBottomBar --> MButton
+  MStepperBottomBar --> MDivider
+style MStepperBottomBar fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/steppercompact/README.md

@@ -11,3 +11,17 @@ A stepper is a navigation component that guides users through a sequence of step
 | `maxSteps` | Maximum number of steps for the stepper compact. | `number` | `4` |
 | `label*` | Label of the stepper compact. | `string` | - |
 | `description` | Description displayed below the label of the stepper compact. | `string` | - |
+
+## Dependencies
+
+### Depends on
+
+- [MCircularProgressbar](../circularprogressbar)
+
+### Graph
+
+```mermaid
+graph TD;
+  MStepperCompact --> MCircularProgressbar
+style MStepperCompact fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/stepperinline/MStepperInline.vue

@@ -45,8 +45,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import Check24 from '@mozaic-ds/icons-vue/src/components/Check24/Check24.vue';
-import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import { Check24, ChevronRight24 } from '@mozaic-ds/icons-vue';
 /**
  * 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.
  */

package/src/components/tabs/MTabs.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { action } from 'storybook/actions';
 
 import Mtabs from './MTabs.vue';
-import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';
+import { ChevronRight24 } from '@mozaic-ds/icons-vue';
 
 const meta: Meta<typeof Mtabs> = {
   title: 'Navigation/Tabs',

package/src/components/tabs/README.md

@@ -18,3 +18,19 @@ Tabs are a navigation component that allows users to switch between different se
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:modelValue` | Emits when the selected tab changes, updating the modelValue prop. | [value: number] |
+
+## Dependencies
+
+### Depends on
+
+- [MDivider](../divider)
+- [MNumberBadge](../numberbadge)
+
+### Graph
+
+```mermaid
+graph TD;
+  MTabs --> MDivider
+  MTabs --> MNumberBadge
+style MTabs fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/tag/MTag.vue

@@ -72,7 +72,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
+import { CrossCircleFilled24 } from '@mozaic-ds/icons-vue';
 import MNumberBadge from '../numberbadge/MNumberBadge.vue';
 /**
  * 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).

package/src/components/tag/README.md

@@ -23,3 +23,17 @@ A Tag is a UI element used to filter data, categorize, select or deselect an opt
 | --- | --- | --- |
 | `update:modelValue` | Emits when the tag value changes, updating the modelValue prop. | [value: boolean] |
 | `remove-tag` | Emits when the remove button of a tag is clicked, passing the tag's ID. | [id: string] |
+
+## Dependencies
+
+### Depends on
+
+- [MNumberBadge](../numberbadge)
+
+### Graph
+
+```mermaid
+graph TD;
+  MTag --> MNumberBadge
+style MTag fill:#008240,stroke:#333,stroke-width:4px
+```

package/src/components/textinput/MTextInput.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import MTextInput from './MTextInput.vue';
-import Search24 from '@mozaic-ds/icons-vue/src/components/Search24/Search24.vue';
+import { Search24 } from '@mozaic-ds/icons-vue';
 
 describe('MTextInput component', () => {
   it('should render correctly with the given props', () => {

package/src/components/textinput/MTextInput.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { action } from 'storybook/actions';
 
 import MTextInput from './MTextInput.vue';
-import Search24 from '@mozaic-ds/icons-vue/src/components/Search24/Search24.vue';
+import { Search24 } from '@mozaic-ds/icons-vue';
 import { ref } from 'vue';
 
 const meta: Meta<typeof MTextInput> = {

package/src/components/textinput/MTextInput.vue

@@ -38,7 +38,7 @@
 
 <script setup lang="ts">
 import { computed, type VNode } from 'vue';
-import CrossCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled24/CrossCircleFilled24.vue';
+import { CrossCircleFilled24 } from '@mozaic-ds/icons-vue';
 
 /**
  * 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).

package/src/components/toaster/MToaster.spec.ts

@@ -1,10 +1,12 @@
 import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import MToaster from './MToaster.vue';
-import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
-import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
-import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
-import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled32/InfoCircleFilled32.vue';
+import {
+  InfoCircleFilled32,
+  WarningCircleFilled32,
+  CrossCircleFilled32,
+  CheckCircleFilled32,
+} from '@mozaic-ds/icons-vue';
 
 describe('MToaster.vue', () => {
   it('renders description text', () => {

package/src/components/toaster/MToaster.vue

@@ -45,11 +45,13 @@ import {
   watch,
   type VNode,
 } from 'vue';
-import Cross20 from '@mozaic-ds/icons-vue/src/components/Cross20/Cross20.vue';
-import InfoCircleFilled32 from '@mozaic-ds/icons-vue/src/components/InfoCircleFilled32/InfoCircleFilled32.vue';
-import WarningCircleFilled32 from '@mozaic-ds/icons-vue/src/components/WarningCircleFilled32/WarningCircleFilled32.vue';
-import CrossCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CrossCircleFilled32/CrossCircleFilled32.vue';
-import CheckCircleFilled32 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled32/CheckCircleFilled32.vue';
+import {
+  Cross20,
+  InfoCircleFilled32,
+  WarningCircleFilled32,
+  CrossCircleFilled32,
+  CheckCircleFilled32,
+} from '@mozaic-ds/icons-vue';
 import MIconButton from '../iconbutton/MIconButton.vue';
 import MLinearProgressbarBuffer from '../linearprogressbarbuffer/MLinearProgressbarBuffer.vue';
 /**

package/src/components/toaster/README.md

@@ -26,3 +26,19 @@ A toaster is a temporary notification that appears briefly on the screen to prov
 | Name | Description | Type |
 | --- | --- | --- |
 | `update:open` | Emits when the checkbox value changes, updating the modelValue prop. | [value: boolean] |
+
+## Dependencies
+
+### Depends on
+
+- [MIconButton](../iconbutton)
+- [MLinearProgressbarBuffer](../linearprogressbarbuffer)
+
+### Graph
+
+```mermaid
+graph TD;
+  MToaster --> MIconButton
+  MToaster --> MLinearProgressbarBuffer
+style MToaster fill:#008240,stroke:#333,stroke-width:4px
+```