npm - @mozaic-ds/vue - Versions diffs - 2.19.1 → 2.20.0 - Mend

@mozaic-ds/vue 2.19.1 → 2.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/dist/mozaic-vue.css +1 -1
package/dist/mozaic-vue.d.ts +512 -296
package/dist/mozaic-vue.js +1952 -1678
package/dist/mozaic-vue.js.map +1 -1
package/dist/mozaic-vue.umd.cjs +6 -6
package/dist/mozaic-vue.umd.cjs.map +1 -1
package/package.json +6 -3
package/src/components/Catalog.scss +84 -0
package/src/components/Catalog.stories.ts +146 -0
package/src/components/GettingStarted.mdx +258 -2
package/src/components/Migration.mdx +4135 -532
package/src/components/Welcome.mdx +1 -1
package/src/components/carousel/MCarousel.spec.ts +174 -55
package/src/components/carousel/MCarousel.vue +106 -33
package/src/components/checkboxgroup/MCheckboxGroup.vue +2 -9
package/src/components/combobox/MCombobox.spec.ts +144 -0
package/src/components/combobox/MCombobox.stories.ts +2 -1
package/src/components/combobox/MCombobox.vue +68 -38
package/src/components/combobox/README.md +6 -0
package/src/components/datatable/DataTable.stories.ts +2 -2
package/src/components/datatable/DataTableCells.stories.ts +1 -0
package/src/components/datatable/DataTableEmpty.stories.ts +1 -0
package/src/components/datatable/DataTableExpandable.stories.ts +1 -0
package/src/components/datatable/DataTableNested.stories.ts +1 -0
package/src/components/datatable/DataTablePageable.stories.ts +194 -0
package/src/components/datatable/DataTableSelectable.stories.ts +1 -0
package/src/components/datatable/DataTableSortable.stories.ts +1 -0
package/src/components/datepicker/MDatepicker.stories.ts +2 -0
package/src/components/datepicker/MDatepicker.vue +17 -11
package/src/components/divider/README.md +2 -0
package/src/components/drawer/MDrawer.vue +7 -5
package/src/components/link/MLink.stories.ts +18 -0
package/src/components/link/MLink.vue +20 -4
package/src/components/link/README.md +2 -1
package/src/components/optionListbox/MOptionListbox.spec.ts +78 -1
package/src/components/optionListbox/MOptionListbox.types.ts +7 -0
package/src/components/optionListbox/MOptionListbox.vue +31 -217
package/src/components/optionListbox/README.md +2 -0
package/src/components/optionListbox/use-listbox-navigation.composable.ts +147 -0
package/src/components/optionListbox/use-listbox-selection.composable.ts +149 -0
package/src/components/pageheader/MPageHeader.spec.ts +17 -3
package/src/components/pageheader/MPageHeader.stories.ts +37 -41
package/src/components/pageheader/MPageHeader.vue +26 -16
package/src/components/pageheader/README.md +2 -1
package/src/components/pageheadercontext/MPageHeaderContext.spec.ts +155 -0
package/src/components/pageheadercontext/MPageHeaderContext.vue +126 -0
package/src/components/pageheadercontext/README.md +33 -0
package/src/components/pageheaderfeature/MPageHeaderFeature.spec.ts +39 -0
package/src/components/pageheaderfeature/MPageHeaderFeature.vue +40 -0
package/src/components/pageheaderfeature/README.md +17 -0
package/src/components/radiogroup/MRadioGroup.stories.ts +6 -0
package/src/components/radiogroup/MRadioGroup.vue +2 -9
package/src/components/sidebar/MSidebar.const.ts +2 -0
package/src/components/sidebar/MSidebar.stories.ts +33 -0
package/src/components/sidebar/MSidebar.vue +10 -1
package/src/components/sidebar/README.md +1 -0
package/src/components/sidebar/stories/DefaultCase.stories.vue +12 -11
package/src/components/sidebar/use-floating-item.composable.ts +1 -1
package/src/components/sidebarexpandableitem/MSidebarExpandableItem.vue +13 -7
package/src/components/sidebarexpandableitem/README.md +2 -1
package/src/components/sidebarfooter/MSidebarFooter.vue +16 -9
package/src/components/sidebarfooter/_MSidebarFooterMenu.vue +10 -2
package/src/components/sidebarnavitem/MSidebarNavItem.vue +36 -5
package/src/components/sidebarnavitem/README.md +1 -0
package/src/components/sidebarshortcutitem/MSidebarShortcutItem.vue +24 -3
package/src/components/sidebarshortcutitem/README.md +3 -1
package/src/components/sidebarshortcuts/MSidebarShortcuts.vue +6 -1
package/src/components/sidebarshortcuts/README.md +12 -0
package/src/components/statusbadge/MStatusBadge.stories.ts +5 -1
package/src/components/statusbadge/MStatusBadge.vue +7 -1
package/src/components/statusbadge/MstatusBadge.spec.ts +31 -0
package/src/components/statusbadge/README.md +1 -0
package/src/components/statusmessage/MStatusMessage.spec.ts +4 -4
package/src/components/statusmessage/MStatusMessage.vue +5 -10
package/src/components/statusnotification/MStatusNotification.spec.ts +9 -9
package/src/components/statusnotification/MStatusNotification.vue +9 -8
package/src/components/tabs/MTabs.stories.ts +30 -1
package/src/components/tabs/MTabs.vue +12 -3
package/src/components/tabs/Mtabs.spec.ts +19 -0
package/src/components/tabs/README.md +1 -0
package/src/components/tileselectable/MTileSelectable.spec.ts +69 -0
package/src/components/tileselectable/MTileSelectable.stories.ts +8 -2
package/src/components/tileselectable/MTileSelectable.vue +18 -1
package/src/components/tileselectable/README.md +1 -0
package/src/main.ts +3 -0
package/src/utils/debounce.ts +15 -0
package/src/components/BrandPresets.mdx +0 -146
package/src/components/DarkMode.mdx +0 -115

package/src/components/BrandPresets.mdx DELETED Viewed

@@ -1,146 +0,0 @@
-import { Meta, Source } from '@storybook/addon-docs/blocks';
-<Meta title="Brand Presets" />
-# Brand Presets
-**Mozaic** is a **multi-brand** design system.<br/>
-This means that it is fully customisable so that its constituent elements _(foundations, components, etc.)_ can be adapted to the graphic charter of the brand that uses it.
-To simplify this aspect of customising **Mozaic** for you, we have created themes _(which we also call **"presets"**)_ ready to use according to your context of use.
-Currently **Mozaic** can be customized with the following presets:
-- Preset **Leroy Merlin**: this is the default preset/theme configured when **Mozaic** was first installed
-- Preset **Adeo**: dedicated to the **Adeo Group's** internal interfaces and products
-- Preset **Bricoman**: dedicated to the interfaces and products of the **Bricoman** brand
-The rest of this documentation shows you how to use/install the Adeo preset in your project.
-> Note that the procedure remains the same for all other presets.<br/> You just need to replace all references to "Adeo" with the brand name of your choice.
-## Using the Adeo's preset
-Before anything else, make sure you have followed the **Mozaic-Vue** installation procedure as described in the [Getting Started](?path=/docs/getting-started--docs) page.
-Once **Mozaic-Vue** is installed as shown, we can make the following changes:
-### 1. Loading preset
-All it has to do is insert the following code into its main Sass file (entrypoint stylesheet):
-<Source
-  language="css"
-  dark
-  code={`
-// Entrypoint stylesheet
-@use "@mozaic-ds/tokens/<presetName>/theme" as *;
-`}
-/>
-> [!NOTE]
-> The `<presetName>` string should be replaced by the name of the preset you want, one of the following values: `adeo | mbrand`.
-> As the `leroymerlin` preset is the default preset, you don't need to use this syntax to use it.
-For example, for ADEO
-<Source
-  language="css"
-  dark
-  code={`
-// Entrypoint stylesheet
-@use "@mozaic-ds/tokens/adeo/theme" as *;
-`}
-/>
-### 2. Font by brand
-Each brand is distinguished not only by different styles but also by a different font.
-The table below summarises which font to use depending on the brand.
-<table>
-  <tr>
-    <td>Brand</td>
-    <td>Font</td>
-  </tr>
-  <tr>
-    <td>Leroy Merlin</td>
-    <td>
-      [LeroyMerlinSans](https://mozaic.adeo.cloud/foundations/typography/font-families/)
-    </td>
-  </tr>
-  <tr>
-    <td>Adeo</td>
-    <td>[Roboto](https://fonts.google.com/specimen/Roboto)</td>
-  </tr>
-  <tr>
-    <td>Bricoman</td>
-    <td>[Inter](https://fonts.google.com/specimen/Inter)</td>
-  </tr>
-</table>
-For example, here is how to include the Roboto font in your HTML for the Adeo brand:
-<Source
-  language="html"
-  dark
-  code={`
-<head>
-    <meta charset="UTF-8" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-`}
-/>
-From there, we can update the main style sheet of your project, in order to import the right font.
-<Source
-  language='css'
-  dark
-  code={`
-@use '@mozaic-ds/tokens/adeo/theme' as *;
-body {
-font-family: var(--font-family, 'Roboto', sans-serif);
-}
-`} />
-Specific for LM fonts
-> This section describes the use of fonts for the **Leroy Merlin** preset, but if you are using another preset, please see [the associated documentation](?path=/docs/using-presets--docs).
-The theme defined by default when **Mozaic-Vue** is first installed/used is the theme corresponding to the **Leroy Merlin** charter.
-For any use of the **Leroy Merlin** theme, it is recommended to use the font [LeroyMerlinSans](/typography/font-families/) which has been specially designed for **Leroy Merlin** products.
-To use the `LeroyMerlinSans` font in your project, you must copy it into your project so that it is present in your `assets`.
-You can do this as follows:
-1. Create a folder in your project where you can save the fonts, for example: `static/assets/fonts`
-2. Copy fonts from Mozaic dependencies:
-<Source
-  language="bash"
-  dark
-  code="cp node_modules/@mozaic-ds/web-fonts/*.{woff,woff2} static/assets/fonts"
-/>
-### 3. Usage
-At this stage, the integration of the **Mozaic-Vue** components should normally be customised with the preset values.
-All that remains is to use the components as usual:
-<Source
-  language="html"
-  dark
-  code='<MButton label="This is a Mozaic Button" />'
-/>

package/src/components/DarkMode.mdx DELETED Viewed

@@ -1,115 +0,0 @@
-import { Meta, Source } from '@storybook/addon-docs/blocks';
-<Meta title="Dark Mode" />
-# Dark Mode
-A concise guide explaining **how dark mode works** with your CSS variables and **how to use it** in Storybook.
----
-## What dark mode is (high‑level)
-Dark mode is implemented with **two sets of CSS variables** (tokens):
-- **Light** values live under `:root`.
-- **Dark** values override under `:root[data-theme="dark"]`.
-Components only reference tokens with `var(--token-name)` — switching theme is just toggling the `data-theme` attribute (no component code changes).
----
-## Token structure (SCSS → CSS)
-Your presets export SCSS like this:
-<Source
-  language="scss"
-  dark
-  code={`
-  $root-selector: ':root' !default;
-$dark-selector: '[data-theme="dark"]' !default;
-#{$root-selector} {
-/_ Light tokens _/
---color-background-primary: #ffffff;
---color-text-primary: #000000;
-/_ … all your light variables … _/
-}
-#{$root-selector}#{$dark-selector} {
-/_ Dark tokens _/
---color-background-primary: #191919;
---color-text-primary: #d9d9d9;
-/_ … all your dark variables … _/
-}
-`}
-/>
-After compilation, this becomes standard CSS:
-<Source
-  language="css"
-  dark
-  code={`
-    :root {
-      /* light tokens */
-    }
-    :root[data-theme='dark'] {
-      /* dark tokens */
-    }
-  `}
-/>
-> If you can’t (or don’t want to) target `:root`, you can pass a different `$root-selector` when building your theme and apply `data-theme="dark"` on that container instead.
----
-## Using tokens inside components
-To enable the dark mode you have to ensure to:
-- Add the `data-theme` attribute in your root element with the value `dark`,
-- Use variables — never hard‑code colors or sizes
-```html
-<div class="root" data-theme="dark">…</div>
-```
-<Source
-  language="sass"
-  dark
-  code={`
-    @use "@mozaic-ds/tokens" as *;
-    .mc-component: {
-      background-color: $--color-background-primary;
-    }
-`}
-/>
-When the theme changes, these values update automatically via CSS.
----
-## Accessibility & good practices
-- Aim for **WCAG AA** contrast at minimum; verify text vs. background pairs.
-- Prefer **semantic tokens** (`--button-color-…`, `--color-text-…`) over raw color hexes.
-- Keep all component styles expressed in tokens so the **theme switch has zero component logic**.
----
-## Troubleshooting
-- **Dark toggle does nothing** → Ensure the tokens were imported **before** component styles and that `data-theme="dark"` is set on the same selector the tokens target (usually `:root`).
-- **Weird colors** → Search for hard‑coded values and replace them with tokens.
-- **Variables undefined** → Check your build order and that the SCSS was compiled to CSS and loaded by Storybook.
----
-## Summary
-- Light tokens on `:root`, dark overrides on `:root[data-theme="dark"]`.
-- Components read tokens with `var(--$token-name)` — no runtime branching required.