@mozaic-ds/vue 2.10.0 → 2.12.0

package/src/components/stepperinline/MStepperInline.vue

@@ -0,0 +1,94 @@
+<template>
+  <nav class="mc-stepper-inline" aria-label="Stepper">
+    <ol class="mc-stepper-inline__container">
+      <li
+        v-for="(step, i) in steps"
+        :key="i"
+        class="mc-stepper-inline__item"
+        :class="{ 'is-completed': stepStates[i].completed }"
+        :tabindex="stepStates[i].completed ? 0 : undefined"
+      >
+        <Check24
+          class="mc-stepper-inline__icon mc-stepper-inline__icon--check"
+          v-if="stepStates[i].completed"
+          aria-hidden="true"
+        />
+        <span
+          v-else
+          class="mc-stepper-inline__circle"
+          :class="{ 'is-current': stepStates[i].current }"
+        >
+          {{ i + 1 }}
+        </span>
+        <div class="mc-stepper-inline__content">
+          <span
+            class="mc-stepper-inline__label"
+            :class="{ 'is-current': stepStates[i].current }"
+          >
+            {{ step.label }}
+          </span>
+          <span
+            v-if="step.additionalInfo"
+            class="mc-stepper-inline__additional"
+          >
+            {{ step.additionalInfo }}
+          </span>
+        </div>
+        <ChevronRight24
+          v-if="i < steps.length - 1"
+          class="mc-stepper-inline__icon mc-stepper-inline__icon--chevron"
+        />
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<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';
+/**
+ * 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.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Current step of the stepper compact.
+     */
+    currentStep?: number;
+    /**
+     * Steps of the stepper inline.
+     */
+    steps?: Array<{
+      /**
+       * Label of the step.
+       */
+      label: string;
+      /**
+       * Optional additional information under the label.
+       */
+      additionalInfo?: string;
+    }>;
+  }>(),
+  {
+    currentStep: 1,
+    steps: () => [],
+  },
+);
+
+const safeStep = computed(() =>
+  Math.min(Math.max(props.currentStep, 1), props.steps.length),
+);
+const steps = props.steps;
+
+const stepStates = computed(() =>
+  steps.map((_, i) => ({
+    completed: i + 1 < safeStep.value,
+    current: i + 1 === safeStep.value,
+  })),
+);
+</script>
+
+<style scoped lang="scss">
+@use '@mozaic-ds/styles/components/stepper-inline';
+</style>

package/src/components/stepperinline/README.md

@@ -0,0 +1,11 @@
+# MStepperInline
+
+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.
+
+
+## Props
+
+| Name | Description | Type | Default |
+| --- | --- | --- | --- | 
+| `currentStep` | Current step of the stepper compact. | `number` | `1` |
+| `steps` | Steps of the stepper inline. | `{ label: string; additionalInfo?: string` `undefined; }[]` | `[]` |

package/src/components/tag/MTag.vue

@@ -60,7 +60,7 @@
       @click="id && emit('remove-tag', id)"
     >
       <CrossCircleFilled24 class="mc-tag-removable__icon" aria-hidden="true" />
-      <span class="mc-tag-removable__text">removableLabel</span>
+      <span class="mc-tag-removable__text">{{ removableLabel }}</span>
     </button>
   </span>
 
@@ -124,6 +124,7 @@ const props = withDefaults(
   {
     type: 'informative',
     contextualisedNumber: 99,
+    removableLabel: 'Remove',
   },
 );
 

package/src/components/tag/README.md

@@ -15,7 +15,7 @@ A Tag is a UI element used to filter data, categorize, select or deselect an opt
 | `modelValue` | The tag's checked state, bound via v-model. Used only for type: 'selectable'. | `boolean` | - |
 | `disabled` | If `true`, disables the tag, making it non-interactive. Applicable to selectable, interactive, and contextualised types. | `boolean` | - |
 | `contextualisedNumber` | A number displayed in the badge when the tag is contextualised. | `number` | `99` |
-| `removableLabel` | Accessible label text for the remove button in removable tags. | `string` | - |
+| `removableLabel` | Accessible label text for the remove button in removable tags. | `string` | `"Remove"` |
 
 ## Events
 

package/src/components/toaster/README.md

@@ -10,7 +10,7 @@ A toaster is a temporary notification that appears briefly on the screen to prov
 | `open` | If `true`, display the Toaster. | `boolean` | - |
 | `position` | Position of the toaster. | `"top"` `"bottom"` `"top-center"` `"bottom-center"` | - |
 | `description*` | Description of the toaster. | `string` | - |
-| `status` | Allows to define the toaster style. | `"info"` `"success"` `"warning"` `"error"` | `"info"` |
+| `status` | Allows to define the toaster style. | `"info"` `"warning"` `"error"` `"success"` | `"info"` |
 | `closable` | If `true`, display the close button. | `boolean` | `true` |
 | `progress` | If `true`, display the progress bar of the duration. | `boolean` | - |
 | `timeout` | Duration of the toaster | `number` | - |

package/src/main.ts

@@ -1,10 +1,12 @@
 export { default as MAvatar } from './components/avatar/MAvatar.vue';
 export { default as MBreadcrumb } from './components/breadcrumb/MBreadcrumb.vue';
+export { default as MBuiltInMenu } from './components/builtinmenu/MBuiltInMenu.vue';
 export { default as MButton } from './components/button/MButton.vue';
 export { default as MCallout } from './components/callout/MCallout.vue';
 export { default as MCarousel } from './components/carousel/MCarousel.vue';
 export { default as MCheckbox } from './components/checkbox/MCheckbox.vue';
 export { default as MCheckboxGroup } from './components/checkboxgroup/MCheckboxGroup.vue';
+export { default as MCheckListMenu } from './components/checklistmenu/MCheckListMenu.vue';
 export { default as MCircularProgressbar } from './components/circularprogressbar/MCircularProgressbar.vue';
 export { default as MContainer } from './components/container/MContainer.vue';
 export { default as MDatepicker } from './components/datepicker/MDatepicker.vue';
@@ -31,9 +33,13 @@ export { default as MRadio } from './components/radio/MRadio.vue';
 export { default as MRadioGroup } from './components/radiogroup/MRadioGroup.vue';
 export { default as MSegmentedControl } from './components/segmentedcontrol/MSegmentedControl.vue';
 export { default as MSelect } from './components/select/MSelect.vue';
+export { default as MStarRating } from './components/starrating/MStarRating.vue';
 export { default as MStatusBadge } from './components/statusbadge/MStatusBadge.vue';
 export { default as MStatusDot } from './components/statusdot/MStatusDot.vue';
+export { default as MStatusMessage } from './components/statusmessage/MStatusMessage.vue';
 export { default as MStatusNotification } from './components/statusnotification/MStatusNotification.vue';
+export { default as MStepperCompact } from './components/steppercompact/MStepperCompact.vue';
+export { default as MStepperInline } from './components/stepperinline/MStepperInline.vue';
 export { default as MTabs } from './components/tabs/MTabs.vue';
 export { default as MTag } from './components/tag/MTag.vue';
 export { default as MTextArea } from './components/textarea/MTextArea.vue';