@mozaic-ds/vue 2.19.0 → 2.19.2

package/src/components/passwordinput/MPasswordInput.figma.ts

@@ -16,15 +16,15 @@ figma.connect(
     },
     example: ({ isInvalid, isClearable }) =>
       html`<script setup>
-        import { MPasswordInput } from '@mozaic-ds/vue';
-      </script>
+          import { MPasswordInput } from '@mozaic-ds/vue';
+        </script>
 
-      <MPasswordInput
-        id="password-input-id"
-        :is-invalid=${isInvalid}
-        :is-clearable=${isClearable}
-        placeholder="Enter your password"
-        model-value=""
-      ></MPasswordInput>`,
+        <MPasswordInput
+          id="password-input-id"
+          :is-invalid=${isInvalid}
+          :is-clearable=${isClearable}
+          placeholder="Enter your password"
+          model-value=""
+        ></MPasswordInput>`,
   },
 );

package/src/components/phonenumber/MPhoneNumber.figma.ts

@@ -33,15 +33,15 @@ figma.connect(
     },
     example: ({ size, disabled, readonly, isInvalid }) =>
       html`<script setup>
-        import { MPhoneNumber } from '@mozaic-ds/vue';
-      </script>
+          import { MPhoneNumber } from '@mozaic-ds/vue';
+        </script>
 
-      <MPhoneNumber
-        id="phone-number-id"
-        size=${size}
-        disabled=${disabled}
-        readonly=${readonly}
-        :is-invalid=${isInvalid}
-      ></MPhoneNumber>`,
+        <MPhoneNumber
+          id="phone-number-id"
+          size=${size}
+          disabled=${disabled}
+          readonly=${readonly}
+          :is-invalid=${isInvalid}
+        ></MPhoneNumber>`,
   },
 );

package/src/components/phonenumber/MPhoneNumber.vue

@@ -4,8 +4,8 @@
       class="mc-phone-number-input__select-wrapper"
       :class="selectWrapperClass"
     >
-      <div 
-      class="mc-select mc-phone-number-input__select"
+      <div
+        class="mc-select mc-phone-number-input__select"
         :class="sizeSelectClass"
       >
         <select
@@ -23,7 +23,9 @@
             :value="country"
             :data-flag="country.toLowerCase()"
           >
-            {{ getCountryName(country) }} (+{{ getCountryCallingCode(country) }})
+            {{ getCountryName(country) }} (+{{
+              getCountryCallingCode(country)
+            }})
           </option>
         </select>
       </div>

package/src/components/pincode/MPincode.figma.ts

@@ -27,15 +27,15 @@ figma.connect(
     },
     example: ({ disabled, readonly, isInvalid }) =>
       html`<script setup>
-        import { MPincode } from '@mozaic-ds/vue';
-      </script>
+          import { MPincode } from '@mozaic-ds/vue';
+        </script>
 
-      <MPincode
-        id="pincode-id"
-        disabled=${disabled}
-        readonly=${readonly}
-        :is-invalid=${isInvalid}
-        aria-label="Enter your code"
-      ></MPincode>`,
+        <MPincode
+          id="pincode-id"
+          disabled=${disabled}
+          readonly=${readonly}
+          :is-invalid=${isInvalid}
+          aria-label="Enter your code"
+        ></MPincode>`,
   },
 );

package/src/components/popover/MPopover.figma.ts

@@ -22,21 +22,21 @@ figma.connect(
     },
     example: ({ appearance, size, pointer, closable }) =>
       html`<script setup>
-        import { MPopover, MButton } from '@mozaic-ds/vue';
-      </script>
+          import { MPopover, MButton } from '@mozaic-ds/vue';
+        </script>
 
-      <MPopover
-        id="popover-id"
-        title="Popover title"
-        description="Popover description"
-        :pointer=${pointer}
-        :closable=${closable}
-        appearance=${appearance}
-        size=${size}
-      >
-        <template #activator="{ id }">
-          <MButton :popovertarget="id">Open</MButton>
-        </template>
-      </MPopover>`,
+        <MPopover
+          id="popover-id"
+          title="Popover title"
+          description="Popover description"
+          :pointer=${pointer}
+          :closable=${closable}
+          appearance=${appearance}
+          size=${size}
+        >
+          <template #activator="{ id }">
+            <MButton :popovertarget="id">Open</MButton>
+          </template>
+        </MPopover>`,
   },
 );

package/src/components/quantityselector/MQuantitySelector.figma.ts

@@ -33,18 +33,18 @@ figma.connect(
     },
     example: ({ size, disabled, readonly, isInvalid }) =>
       html`<script setup>
-        import { MQuantitySelector } from '@mozaic-ds/vue';
-      </script>
+          import { MQuantitySelector } from '@mozaic-ds/vue';
+        </script>
 
-      <MQuantitySelector
-        id="quantity-selector-id"
-        size=${size}
-        disabled=${disabled}
-        readonly=${readonly}
-        :is-invalid=${isInvalid}
-        :model-value="1"
-        :min="0"
-        :max="10"
-      ></MQuantitySelector>`,
+        <MQuantitySelector
+          id="quantity-selector-id"
+          size=${size}
+          disabled=${disabled}
+          readonly=${readonly}
+          :is-invalid=${isInvalid}
+          :model-value="1"
+          :min="0"
+          :max="10"
+        ></MQuantitySelector>`,
   },
 );

package/src/components/radio/MRadio.figma.ts

@@ -26,15 +26,15 @@ figma.connect(
     },
     example: ({ modelValue, disabled, isInvalid }) =>
       html`<script setup>
-        import { MRadio } from '@mozaic-ds/vue';
-      </script>
+          import { MRadio } from '@mozaic-ds/vue';
+        </script>
 
-      <MRadio
-        id="radio-id"
-        label="Radio button Label"
-        :model-value=${modelValue}
-        disabled=${disabled}
-        :is-invalid=${isInvalid}
-      ></MRadio>`,
+        <MRadio
+          id="radio-id"
+          label="Radio button Label"
+          :model-value=${modelValue}
+          disabled=${disabled}
+          :is-invalid=${isInvalid}
+        ></MRadio>`,
   },
 );

package/src/components/radiogroup/MRadioGroup.figma.ts

@@ -15,16 +15,16 @@ figma.connect(
     },
     example: ({ inline }) =>
       html`<script setup>
-        import { MRadioGroup } from '@mozaic-ds/vue';
-      </script>
+          import { MRadioGroup } from '@mozaic-ds/vue';
+        </script>
 
-      <MRadioGroup
-        name="group"
-        :options="[
+        <MRadioGroup
+          name="group"
+          :options="[
           { id: '1', label: 'Option 1', value: '1' },
           { id: '2', label: 'Option 2', value: '2' },
         ]"
-        inline=${inline}
-      />`,
+          inline=${inline}
+        />`,
   },
 );

package/src/components/segmentedcontrol/MSegmentedControl.figma.ts

@@ -20,14 +20,14 @@ figma.connect(
     },
     example: ({ size, full }) =>
       html`<script setup>
-        import { MSegmentedControl } from '@mozaic-ds/vue';
-      </script>
+          import { MSegmentedControl } from '@mozaic-ds/vue';
+        </script>
 
-      <MSegmentedControl
-        size=${size}
-        full=${full}
-        :segments="[{ id: 'label1', label: 'Label' }, { id: 'label2', label: 'Label' }]"
-        model-value="label1"
-      ></MSegmentedControl>`,
+        <MSegmentedControl
+          size=${size}
+          full=${full}
+          :segments="[{ id: 'label1', label: 'Label' }, { id: 'label2', label: 'Label' }]"
+          model-value="label1"
+        ></MSegmentedControl>`,
   },
 );

package/src/components/select/MSelect.figma.ts

@@ -33,17 +33,17 @@ figma.connect(
     },
     example: ({ size, disabled, readonly, isInvalid }) =>
       html`<script setup>
-        import { MSelect } from '@mozaic-ds/vue';
-      </script>
+          import { MSelect } from '@mozaic-ds/vue';
+        </script>
 
-      <MSelect
-        id="select-id"
-        size=${size}
-        disabled=${disabled}
-        readonly=${readonly}
-        :is-invalid=${isInvalid}
-        placeholder="Choose an option"
-        :options="[{ text: 'Option 1', value: 'option1' }, { text: 'Option 2', value: 'option2' }]"
-      ></MSelect>`,
+        <MSelect
+          id="select-id"
+          size=${size}
+          disabled=${disabled}
+          readonly=${readonly}
+          :is-invalid=${isInvalid}
+          placeholder="Choose an option"
+          :options="[{ text: 'Option 1', value: 'option1' }, { text: 'Option 2', value: 'option2' }]"
+        ></MSelect>`,
   },
 );

package/src/components/sidebar/MSidebar.figma.ts

@@ -15,14 +15,14 @@ figma.connect(
     },
     example: ({ modelValue }) =>
       html`<script setup>
-        import { MSidebar } from '@mozaic-ds/vue';
-      </script>
+          import { MSidebar } from '@mozaic-ds/vue';
+        </script>
 
-      <MSidebar :model-value=${modelValue}>
-        <template #header>Header</template>
-        <template #shortcuts>Shortcuts</template>
-        <template #nav>Nav items</template>
-        <template #footer>Footer</template>
-      </MSidebar>`,
+        <MSidebar :model-value=${modelValue}>
+          <template #header>Header</template>
+          <template #shortcuts>Shortcuts</template>
+          <template #nav>Nav items</template>
+          <template #footer>Footer</template>
+        </MSidebar>`,
   },
 );

package/src/components/sidebar/MSidebar.vue

@@ -28,6 +28,7 @@
     <MIconButton
       class="mc-sidebar__close-button"
       ghost
+      appearance="inverse"
       aria-label="Sidebar close button"
       @click="emit('close')"
     >

package/src/components/sidebarexpandableitem/MSidebarExpandableItem.figma.ts

@@ -9,11 +9,14 @@ figma.connect(
   {
     example: () =>
       html`<script setup>
-        import { MSidebarExpandableItem, MSidebarNavItem } from '@mozaic-ds/vue';
-      </script>
+          import {
+            MSidebarExpandableItem,
+            MSidebarNavItem,
+          } from '@mozaic-ds/vue';
+        </script>
 
-      <MSidebarExpandableItem label="Section" menu-label="Section">
-        <MSidebarNavItem label="Sub item" />
-      </MSidebarExpandableItem>`,
+        <MSidebarExpandableItem label="Section" menu-label="Section">
+          <MSidebarNavItem label="Sub item" />
+        </MSidebarExpandableItem>`,
   },
 );

package/src/components/sidebarfooter/MSidebarFooter.figma.ts

@@ -13,9 +13,13 @@ figma.connect(
     },
     example: ({ expendable }) =>
       html`<script setup>
-        import { MSidebarFooter } from '@mozaic-ds/vue';
-      </script>
+          import { MSidebarFooter } from '@mozaic-ds/vue';
+        </script>
 
-      <MSidebarFooter title="User name" subtitle="user@example.com" :expendable=${expendable} />`,
+        <MSidebarFooter
+          title="User name"
+          subtitle="user@example.com"
+          :expendable=${expendable}
+        />`,
   },
 );

package/src/components/sidebarheader/MSidebarHeader.figma.ts

@@ -10,9 +10,9 @@ figma.connect(
     props: {},
     example: () =>
       html`<script setup>
-        import { MSidebarHeader } from '@mozaic-ds/vue';
-      </script>
+          import { MSidebarHeader } from '@mozaic-ds/vue';
+        </script>
 
-      <MSidebarHeader title="App name" logo="/logo.png" />`,
+        <MSidebarHeader title="App name" logo="/logo.png" />`,
   },
 );

package/src/components/sidebarnavitem/MSidebarNavItem.figma.ts

@@ -15,9 +15,9 @@ figma.connect(
     },
     example: ({ active }) =>
       html`<script setup>
-        import { MSidebarNavItem } from '@mozaic-ds/vue';
-      </script>
+          import { MSidebarNavItem } from '@mozaic-ds/vue';
+        </script>
 
-      <MSidebarNavItem label="Menu item" active=${active} />`,
+        <MSidebarNavItem label="Menu item" active=${active} />`,
   },
 );

package/src/components/sidebarshortcutitem/MSidebarShortcutItem.figma.ts

@@ -12,9 +12,9 @@ figma.connect(
     },
     example: ({ label }) =>
       html`<script setup>
-        import { MSidebarShortcutItem } from '@mozaic-ds/vue';
-      </script>
+          import { MSidebarShortcutItem } from '@mozaic-ds/vue';
+        </script>
 
-      <MSidebarShortcutItem label=${label} href="#" />`,
+        <MSidebarShortcutItem label=${label} href="#" />`,
   },
 );

package/src/components/starrating/MStarRating.figma.ts

@@ -23,13 +23,13 @@ figma.connect(
     },
     example: ({ text, size }) =>
       html`<script setup>
-        import { MStarRating } from '@mozaic-ds/vue';
-      </script>
+          import { MStarRating } from '@mozaic-ds/vue';
+        </script>
 
-      <MStarRating
-        :model-value="3.5"
-        size=${size}
-        text=${text}
-      ></MStarRating>`,
+        <MStarRating
+          :model-value="3.5"
+          size=${size}
+          text=${text}
+        ></MStarRating>`,
   },
 );

package/src/components/statusbadge/MStatusBadge.figma.ts

@@ -19,9 +19,9 @@ figma.connect(
     },
     example: ({ label, status }) =>
       html`<script setup>
-        import { MStatusBadge } from '@mozaic-ds/vue';
-      </script>
+          import { MStatusBadge } from '@mozaic-ds/vue';
+        </script>
 
-      <MStatusBadge label=${label} status=${status}></MStatusBadge>`,
+        <MStatusBadge label=${label} status=${status}></MStatusBadge>`,
   },
 );

package/src/components/statusdot/MStatusDot.figma.ts

@@ -23,9 +23,9 @@ figma.connect(
     },
     example: ({ status, size }) =>
       html`<script setup>
-        import { MStatusDot } from '@mozaic-ds/vue';
-      </script>
+          import { MStatusDot } from '@mozaic-ds/vue';
+        </script>
 
-      <MStatusDot status=${status} size=${size}></MStatusDot>`,
+        <MStatusDot status=${status} size=${size}></MStatusDot>`,
   },
 );

package/src/components/statusmessage/MStatusMessage.figma.ts

@@ -20,9 +20,9 @@ figma.connect(
     },
     example: ({ label, status }) =>
       html`<script setup>
-        import { MStatusMessage } from '@mozaic-ds/vue';
-      </script>
+          import { MStatusMessage } from '@mozaic-ds/vue';
+        </script>
 
-      <MStatusMessage label=${label} status=${status}></MStatusMessage>`,
+        <MStatusMessage label=${label} status=${status}></MStatusMessage>`,
   },
 );

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

@@ -17,13 +17,13 @@ figma.connect(
     },
     example: ({ status }) =>
       html`<script setup>
-        import { MStatusNotification } from '@mozaic-ds/vue';
-      </script>
+          import { MStatusNotification } from '@mozaic-ds/vue';
+        </script>
 
-      <MStatusNotification
-        title="Notification title"
-        description="Notification description"
-        status=${status}
-      ></MStatusNotification>`,
+        <MStatusNotification
+          title="Notification title"
+          description="Notification description"
+          status=${status}
+        ></MStatusNotification>`,
   },
 );

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

@@ -12,9 +12,9 @@ figma.connect(
     },
     example: ({ cancel }) =>
       html`<script setup>
-        import { MStepperBottomBar } from '@mozaic-ds/vue';
-      </script>
+          import { MStepperBottomBar } from '@mozaic-ds/vue';
+        </script>
 
-      <MStepperBottomBar cancel=${cancel} :steps="3" />`,
+        <MStepperBottomBar cancel=${cancel} :steps="3" />`,
   },
 );

package/src/components/steppercompact/MStepperCompact.figma.ts

@@ -13,9 +13,14 @@ figma.connect(
     },
     example: ({ label, description }) =>
       html`<script setup>
-        import { MStepperCompact } from '@mozaic-ds/vue';
-      </script>
+          import { MStepperCompact } from '@mozaic-ds/vue';
+        </script>
 
-      <MStepperCompact label=${label} :description=${description} :value="1" :max-steps="4"></MStepperCompact>`,
+        <MStepperCompact
+          label=${label}
+          :description=${description}
+          :value="1"
+          :max-steps="4"
+        ></MStepperCompact>`,
   },
 );

package/src/components/stepperinline/MStepperInline.figma.ts

@@ -15,9 +15,12 @@ figma.connect(
     },
     example: () =>
       html`<script setup>
-        import { MStepperInline } from '@mozaic-ds/vue';
-      </script>
+          import { MStepperInline } from '@mozaic-ds/vue';
+        </script>
 
-      <MStepperInline :current-step="1" :steps="[{ label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }]"></MStepperInline>`,
+        <MStepperInline
+          :current-step="1"
+          :steps="[{ label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }]"
+        ></MStepperInline>`,
   },
 );

package/src/components/stepperinline/MStepperInline.stories.ts

@@ -46,7 +46,11 @@ export const AditionnalInfo: Story = {
         label: 'Delivery address',
         additionalInfo: 'Additional information',
       },
-      { id: 'step3', label: 'Payment', additionalInfo: 'Additional information' },
+      {
+        id: 'step3',
+        label: 'Payment',
+        additionalInfo: 'Additional information',
+      },
       {
         id: 'step4',
         label: 'Order confirmation',

package/src/components/stepperstacked/MStepperStacked.figma.ts

@@ -15,9 +15,12 @@ figma.connect(
     },
     example: () =>
       html`<script setup>
-        import { MStepperStacked } from '@mozaic-ds/vue';
-      </script>
+          import { MStepperStacked } from '@mozaic-ds/vue';
+        </script>
 
-      <MStepperStacked :current-step="1" :steps="[{ label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }]"></MStepperStacked>`,
+        <MStepperStacked
+          :current-step="1"
+          :steps="[{ label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }, { label: 'Step label', additionalInfo: 'Additional information' }]"
+        ></MStepperStacked>`,
   },
 );

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

@@ -16,18 +16,18 @@ figma.connect(
     },
     example: ({ divider, centered }) =>
       html`<script setup>
-        import { MTabs } from '@mozaic-ds/vue';
-      </script>
+          import { MTabs } from '@mozaic-ds/vue';
+        </script>
 
-      <MTabs
-        :divider=${divider}
-        centered=${centered}
-        model-value="label1"
-        :tabs="[
+        <MTabs
+          :divider=${divider}
+          centered=${centered}
+          model-value="label1"
+          :tabs="[
           { id: 'label1', label: 'Label' },
           { id: 'label2', label: 'Label' },
           { id: 'label3', label: 'Label' },
         ]"
-      ></MTabs>`,
+        ></MTabs>`,
   },
 );

package/src/components/tag/MTag.figma.ts

@@ -18,9 +18,9 @@ figma.connect(
     },
     example: ({ type }) =>
       html`<script setup>
-        import { MTag } from '@mozaic-ds/vue';
-      </script>
+          import { MTag } from '@mozaic-ds/vue';
+        </script>
 
-      <MTag type=${type} label="Tag label"></MTag>`,
+        <MTag type=${type} label="Tag label"></MTag>`,
   },
 );

package/src/components/textarea/MTextArea.figma.ts

@@ -15,14 +15,14 @@ figma.connect(
     },
     example: ({ isInvalid }) =>
       html`<script setup>
-        import { MTextArea } from '@mozaic-ds/vue';
-      </script>
+          import { MTextArea } from '@mozaic-ds/vue';
+        </script>
 
-      <MTextArea
-        id="textarea-id"
-        :is-invalid=${isInvalid}
-        placeholder="Placeholder"
-        model-value=""
-      ></MTextArea>`,
+        <MTextArea
+          id="textarea-id"
+          :is-invalid=${isInvalid}
+          placeholder="Placeholder"
+          model-value=""
+        ></MTextArea>`,
   },
 );