@mozaic-ds/web-components 1.3.0 → 1.4.0

package/dist/documentation/{WebComponents/usingPresets.mdx → BrandPresets.mdx}

@@ -1,8 +1,8 @@
 import { Meta, Source } from '@storybook/addon-docs/blocks';
 
-<Meta title="Getting Started/Web Components/Using Presets" />
+<Meta title="Brand Presets" />
 
-# 🎨 ADEO Design System's Presets
+# Brand Presets
 
 **ADEO Design System** is a **multi-brand design system** designed for maximum flexibility.<br/>
 It provides a set of **Svelte** using **tokens** that can be fully customized to adapt to each brand’s visual identity and guidelines.
@@ -112,25 +112,3 @@ cp node_modules/@mozaic-ds/web-fonts/*.{woff,woff2} static/assets/fonts
 ```
 
 Then, import and reference the fonts in your stylesheets as needed.
-
----
-
-### 3️⃣ Using Components
-
-Once the preset and font are configured, you can directly start using ADEO Design System’s Web Components customized with your selected preset.
-
-Example:
-
-```html
-<script>
-  import { Button } from '@mozaic-ds/web-components/lib';
-</script>
-
-<m-button appearance="accent">Button label</m-button>
-```
-
----
-
-## 📚 Going Further
-
-- Learn how to set up **Svelte** in detail in the [Svelte documentation](?path=/docs/getting-started-svelte-introduction--docs).

package/dist/documentation/Changelog.mdx

@@ -0,0 +1,19 @@
+import { Meta, Markdown } from '@storybook/addon-docs/blocks';
+import Changelog from '../../CHANGELOG.md?raw';
+
+<style>
+  {`
+  .sbdocs-toc--custom {
+    display: none;
+  }
+  `}
+</style>
+
+<Meta
+  title="Changelog"
+  parameters={{
+    docs: { toc: { disable: true } },
+  }}
+/>
+
+<Markdown>{Changelog}</Markdown>

package/dist/documentation/Color.mdx

@@ -0,0 +1,224 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
+
+<style>
+  {`
+  .css-1gwggp0 span {
+    display: none;
+  }
+  `}
+</style>
+
+<Meta title="Foundations/Color" />
+
+# Color
+
+Colors are foundational elements of the interface used to convey meaning, establish hierarchy, and reinforce brand identity. They help guide user attention, communicate status, and ensure readability across different contexts and themes.
+
+Each color should be used according to its designated role to preserve visual consistency, contrast, and usability across the interface.
+
+<br />
+
+### Text
+
+Text colors define the appearance of all written content. Use primary and secondary text colors for readability and hierarchy, tertiary for subtle information, accent for emphasis, and inverse variants for dark backgrounds.
+
+<ColorPalette>
+  {/* Text */}
+  <ColorItem
+    title="Text / Primary"
+    colors={{
+      '--color-text-primary': 'var(--color-text-primary)',
+    }}
+  />
+
+<ColorItem
+  title="Text / Secondary"
+  colors={{
+    '--color-text-secondary': 'var(--color-text-secondary)',
+  }}
+/>
+
+<ColorItem
+  title="Text / Tertiary"
+  colors={{
+    '--color-text-tertiary': 'var(--color-text-tertiary)',
+  }}
+/>
+
+<ColorItem
+  title="Text / Accent"
+  colors={{
+    '--color-text-accent': 'var(--color-text-accent)',
+  }}
+/>
+
+<ColorItem
+  title="Text / Disabled"
+  colors={{
+    '--color-text-disabled': 'var(--color-text-disabled)',
+  }}
+/>
+
+<ColorItem
+  title="Text / Primary Inverse"
+  colors={{
+    '--color-text-primary-inverse': 'var(--color-text-primary-inverse)',
+  }}
+/>
+
+  <ColorItem
+    title="Text / Secondary Inverse"
+    colors={{
+      '--color-text-secondary-inverse':
+        'var(--color-text-secondary-inverse)',
+    }}
+  />
+</ColorPalette>
+
+### Background
+
+Background colors are used to create contrast and define sections of the interface. Primary is the default canvas, secondary provides subtle separation, accent highlights areas, ghost is for overlays, and inverse variants for dark parts.
+
+<ColorPalette>
+  {/* Background */}
+  <ColorItem
+    title="Background / Primary"
+    colors={{
+      '--color-background-primary': 'var(--color-background-primary)',
+    }}
+  />
+
+<ColorItem
+  title="Background / Secondary"
+  colors={{
+    '--color-background-secondary': 'var(--color-background-secondary)',
+  }}
+/>
+
+<ColorItem
+  title="Background / Secondary Inverse"
+  colors={{
+    '--color-background-secondary-inverse': 'var(--color-background-secondary-inverse)',
+  }}
+/>
+
+<ColorItem
+  title="Background / Accent"
+  colors={{
+    '--color-background-accent': 'var(--color-background-accent)',
+  }}
+/>
+
+<ColorItem
+  title="Background / Accent Inverse"
+  colors={{
+    '--color-background-accent-inverse': 'var(--color-background-accent-inverse)',
+  }}
+/>
+
+<ColorItem
+  title="Background / Ghost"
+  colors={{
+    '--color-background-ghost': 'var(--color-background-ghost)',
+  }}
+/>
+
+  <ColorItem
+    title="Background / Disabled"
+    colors={{
+      '--color-background-disabled': 'var(--color-background-disabled)',
+    }}
+  />
+</ColorPalette>
+
+### Border
+
+Border colors provide visual separation between interface elements. Use primary for main borders, secondary and tertiary for subtle dividers, and inverse for dark backgrounds.
+
+<ColorPalette>
+  {/* Border */}
+  <ColorItem
+    title="Border / Primary"
+    colors={{
+      '--color-border-primary': 'var(--color-border-primary)',
+    }}
+  />
+
+<ColorItem
+  title="Border / Secondary"
+  colors={{
+    '--color-border-secondary': 'var(--color-border-secondary)',
+  }}
+/>
+
+<ColorItem
+  title="Border / Tertiary"
+  colors={{
+    '--color-border-tertiary': 'var(--color-border-tertiary)',
+  }}
+/>
+
+  <ColorItem
+    title="Border / Inverse"
+    colors={{
+      '--color-border-inverse': 'var(--color-border-inverse)',
+    }}
+  />
+</ColorPalette>
+
+### Icon
+
+Icon colors communicate meaning and status. Primary icons are default, secondary and tertiary support hierarchy, accent icons draw attention, disabled icons indicate inactivity, and inverse variants are for dark backgrounds.
+
+<ColorPalette>
+  {/* Icon */}
+  <ColorItem
+    title="Icon / Primary"
+    colors={{
+      '--color-icon-primary': 'var(--color-icon-primary)',
+    }}
+  />
+
+<ColorItem
+  title="Icon / Secondary"
+  colors={{
+    '--color-icon-secondary': 'var(--color-icon-secondary)',
+  }}
+/>
+
+<ColorItem
+  title="Icon / Tertiary"
+  colors={{
+    '--color-icon-tertiary': 'var(--color-icon-tertiary)',
+  }}
+/>
+
+<ColorItem
+  title="Icon / Accent"
+  colors={{
+    '--color-icon-accent': 'var(--color-icon-accent)',
+  }}
+/>
+
+<ColorItem
+  title="Icon / Disabled"
+  colors={{
+    '--color-icon-disabled': 'var(--color-icon-disabled)',
+  }}
+/>
+
+<ColorItem
+  title="Icon / Primary Inverse"
+  colors={{
+    '--color-icon-primary-inverse': 'var(--color-icon-primary-inverse)',
+  }}
+/>
+
+  <ColorItem
+    title="Icon / Secondary Inverse"
+    colors={{
+      '--color-icon-secondary-inverse':
+        'var(--color-icon-secondary-inverse)',
+    }}
+  />
+</ColorPalette>

package/dist/documentation/Contributing.mdx

@@ -1,11 +1,11 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta, Source } from '@storybook/addon-docs/blocks';
 import { Mermaid } from 'mdx-mermaid/Mermaid';
 
-<Meta title="Getting Started/Contributing" />
+<Meta title="Contributing" />
 
 # 🤝 Be Part of Something Bigger!
 
-**Mozaic-WebComponents** exists thanks to the continuous support and involvement of an incredible community of developers and designers.<br/>
+**Mozaic-Web-Components** exists thanks to the continuous support and involvement of an incredible community of developers and designers.<br/>
 Each issue reported, bug fixed, or new feature proposed helps us improve and deliver better tools for everyone.
 
 If you spot something that could be improved, encounter a bug, or have an idea for new functionality — you're more than welcome to contribute!
@@ -95,16 +95,22 @@ For simple bug fixes, feel free to directly open a Pull Request, but linking an
 
 Follow these steps to get started contributing:
 
-```bash
+<Source
+  language='bash'
+  dark
+  code={`
 # Clone Mozaic-WebComponents repository
 git clone git@github.com:adeo/mozaic-web-components.git
 
 # Navigate to project directory
+
 cd mozaic-web-components
 
 # Checkout the branch you're working on (feature/fix/...)
+
 git checkout <branch-name>
 
 # Install dependencies
+
 npm install
-```
+`} />

package/dist/documentation/GettingStarted.mdx

@@ -0,0 +1,76 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Getting Started" />
+
+# Getting Started
+
+**ADEO Design system** is a global and collaborative design system that facilitates the designer and developer experience, enabling them to create universal interfaces perfectly aligned with the business strategy of **ADEO**.
+
+### Installation
+
+<Source language="bash" dark code="npm i @mozaic-ds/web-components" />
+
+Or with **Yarn**:
+
+<Source language="bash" dark code="yarn add @mozaic-ds/web-components" />
+
+### Web Components
+
+The Mozaic Web Component library provides a suite of **Web Components** built with **Svelte's custom element API**. These components allow you to integrate the **ADEO Design System** seamlessly, regardless of the front-end framework or stack you are using.
+
+#### 📝 Usage
+
+Once installed, you can directly use the web components in your HTML or any front-end framework (React, Vue, Angular, etc.):
+
+Simply call the component as follows:
+
+- Import the component
+
+<Source
+  language="javascript"
+  dark
+  code="import '@mozaic-ds/web-components/components/button/Button.js';"
+/>
+
+- Use the component
+
+<Source
+  language="html"
+  dark
+  code='<m-button appearance="accent">This is an accent button</m-button>'
+/>
+
+#### 🛠️ Framework Integration
+
+These web components are framework-agnostic. Here are a few resources to help you integrate them:
+
+- React Integration: Use the components directly in JSX (ensure to use className instead of class if needed).
+- Vue Integration: Register them globally or locally in your Vue app.[Official documentation](https://vuejs.org/guide/extras/web-components)
+- Angular Integration: Add CUSTOM_ELEMENTS_SCHEMA to your NgModule. [Official documentation](https://angular.dev/guide/components/advanced-configuration#custom-element-schemas)
+
+### Svelte
+
+In addition to Web Components, **@mozaic-ds/web-components** package also exposes native **Svelte Components**, offering an even smoother developer experience when working within **Svelte-based applications**.
+
+Why Use Native Svelte Components?
+
+- Full compatibility with Svelte’s reactivity system.
+- Simpler syntax, no need to deal with custom element registration.
+- Easier to compose with other Svelte components.
+
+#### 📝 Usage
+
+You can import and use the Svelte components directly:
+
+Simply call the component as follows:
+
+<Source
+  language='tsx'
+  dark
+  code={`
+<script lang="ts">
+  import { Button } from '@mozaic-ds/web-components/svelte';
+</script>
+
+<Button appearance="accent">My first svelte Button</Button>
+`} />

package/dist/documentation/Icon.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '@mozaic-ds/icons-svelte/components/index.js';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Size: Story;
+export declare const Color: Story;
+export declare const IconList: Story;
+//# sourceMappingURL=Icon.stories.d.ts.map

package/dist/documentation/Icon.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../src/documentation/Icon.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,6CAA6C,CAAC;AAErD,QAAA,MAAM,IAAI,EAAE,IA+DX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAyDtB,CAAC"}

package/dist/documentation/Icon.stories.js

@@ -0,0 +1,138 @@
+import { html, unsafeStatic } from 'lit/static-html.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import * as Icons from '@mozaic-ds/icons-svelte/components/index.js';
+import '@mozaic-ds/icons-svelte/components/index.js';
+const meta = {
+    title: 'Foundations/Icon',
+    parameters: {
+        docs: {
+            description: {
+                component: 'Icons are compact visual elements used to represent actions, objects, or concepts in a clear and recognizable way. They can be used as standalone components or paired with other UI elements to enhance meaning and usability. Their style, size, and emphasis depend on the function they communicate and the context in which they appear.',
+            },
+        },
+    },
+    tags: ['v2'],
+    argTypes: {
+        id: {
+            description: 'A unique identifier for the icon element.',
+            control: 'text',
+            table: {
+                category: 'Properties',
+                type: { summary: 'string' },
+            },
+        },
+        style: {
+            description: 'Inline CSS styles added on the svg element.',
+            control: 'text',
+            table: {
+                category: 'Properties',
+                type: { summary: 'string' },
+            },
+        },
+        className: {
+            description: 'CSS class names to pass to the svg element.',
+            control: 'text',
+            table: {
+                category: 'Properties',
+                type: { summary: 'string' },
+            },
+        },
+        fill: {
+            description: 'customize the color of the SVG.',
+            control: 'select',
+            options: [
+                undefined,
+                'var(--color-icon-primary)',
+                'var(--color-icon-secondary)',
+                'var(--color-icon-tertiary)',
+                'var(--color-icon-primary-inverse)',
+                'var(--color-icon-secondary-inverse)',
+                'var(--color-icon-accent)',
+                'var(--color-icon-disabled)',
+            ],
+            table: {
+                category: 'Properties',
+                type: { summary: 'string' },
+            },
+        },
+    },
+    render: (args) => html `
+    <release-32
+      id=${ifDefined(args.id)}
+      style=${ifDefined(args.style)}
+      className=${ifDefined(args.className)}
+      fill=${ifDefined(args.fill)}
+    ></release-32>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Size = {
+    render: () => html `
+    <check-circle-filled-20></check-circle-filled-20>
+    <check-circle-filled-24></check-circle-filled-24>
+    <check-circle-filled-32></check-circle-filled-32>
+    <check-circle-filled-48></check-circle-filled-48>
+    <check-circle-filled-64></check-circle-filled-64>
+  `,
+};
+export const Color = {
+    args: {
+        fill: 'var(--color-icon-accent)',
+    },
+};
+export const IconList = {
+    parameters: {
+        docs: {
+            canvas: { sourceState: 'hidden' },
+        },
+    },
+    render: () => {
+        const iconEntries = Object.entries(Icons).filter(([name]) => name.endsWith('32'));
+        return html `
+      <style>
+        .icon-grid {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 1rem;
+          align-items: center;
+          text-align: center;
+        }
+
+        .icon-item {
+          display: flex;
+          min-width: 10rem;
+          flex-direction: column;
+          align-items: center;
+          font-size: 14px;
+          color: #555;
+          margin-bottom: 2rem;
+        }
+
+        .icon-label {
+          margin-top: 0.5rem;
+        }
+      </style>
+
+      <div class="icon-grid">
+        ${iconEntries.map(([name]) => {
+            // convert component name → custom element tag
+            // example: Cross24 → cross-24
+            const tagName = name
+                // ArrowLeft → Arrow-Left
+                .replace(/([a-z])([A-Z])/g, '$1-$2')
+                // a11y32 → a11y-32 (ONLY last number group)
+                .replace(/(\D)(\d+)$/, '$1-$2')
+                .toLowerCase();
+            const Tag = unsafeStatic(tagName);
+            return html `
+            <div class="icon-item">
+              <${Tag}></${Tag}>
+              <div class="icon-label">${tagName}</div>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    },
+};

package/dist/documentation/Migration.mdx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta
-  title="Getting Started/Migration guide"
+  title="Migration guide"
   parameters={{
     layout: 'fullscreen',
     viewMode: 'docs',
@@ -11,11 +11,11 @@ import { Meta } from '@storybook/addon-docs/blocks';
   }}
 />
 
-# Migration Guide — @mozaic-ds/web-components@v1
+# Migration Guide
 
-This guide helps you migrate from **v0.30.0** to **v1.X.X** of `@mozaic-ds/web-components`.  
-This new version introduces **Svelte 5**, ships **Svelte components** and **Web Components**, and aligns with **Mozaic Core V2** (styles + tokens).  
-It also embraces **slot-based composition** (e.g., icons and labels) and drops legacy/deprecated pieces.
+This guide helps you migrate from **v0.30.0** to **v1.X.X** of `@mozaic-ds/web-components`.
+
+This new version introduces **Svelte 5**, ships **Svelte components** and **Web Components**, and aligns with **Mozaic Core V2** (styles + tokens).
 
 ---
 

package/dist/documentation/Welcome.mdx

@@ -0,0 +1,52 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+import ads from '../../.storybook/assets/logo.svg';
+import svelte from '../../.storybook/assets/svelte.svg';
+import '@mozaic-ds/styles';
+
+<style>
+  {`
+  .sbdocs-toc--custom {
+    display: none;
+  }
+  `}
+</style>
+
+<Meta title="Welcome" />
+
+<div class="hero">
+  <p
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '1rem',
+    }}
+  >
+    <img src={ads} alt="ADEO Design system logo" style={{ height: '80px' }} />
+    <span style={{ fontSize: '32px' }}>x</span>
+    <img src={svelte} alt="Svelte.js logo" style={{ height: '80px' }} />
+  </p>
+  <h1 class="mt-heading--l">ADEO Design system - Web Components (Svelte)</h1>
+
+<p class="mt-body-l">
+  A library of **Svelte** and **Web Components** implementing **ADEO Design system** guidelines.
+</p>
+
+  <div class="hero-links">
+    <a href="https://github.com/adeo/mozaic-web-components" target="_blank" class="mc-button mc-button--outlined">
+      <svg class="mc-button__icon" width="24" height="24" aria-hidden="true" viewBox="0 0 1024 1024" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#000"/></svg>
+      <span class="mc-button__label">Github</span>
+    </a>
+    <a href="https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-" target="_blank" class="mc-button mc-button--outlined">
+      <svg lass="mc-button__icon" width="24" height="24" aria-hidden="true" viewBox="0 0 54 80" fill="none"><g clip-path="url(#figma__clip0_912_3)"><path d="M13.3333 80.0002C20.6933 80.0002 26.6667 74.0268 26.6667 66.6668V53.3335H13.3333C5.97333 53.3335 0 59.3068 0 66.6668C0 74.0268 5.97333 80.0002 13.3333 80.0002Z" fill="#0ACF83"/><path d="M0 39.9998C0 32.6398 5.97333 26.6665 13.3333 26.6665H26.6667V53.3332H13.3333C5.97333 53.3332 0 47.3598 0 39.9998Z" fill="#A259FF"/><path d="M0 13.3333C0 5.97333 5.97333 0 13.3333 0H26.6667V26.6667H13.3333C5.97333 26.6667 0 20.6933 0 13.3333Z" fill="#F24E1E"/><path d="M26.6667 0H40.0001C47.3601 0 53.3334 5.97333 53.3334 13.3333C53.3334 20.6933 47.3601 26.6667 40.0001 26.6667H26.6667V0Z" fill="#FF7262"/><path d="M53.3334 39.9998C53.3334 47.3598 47.3601 53.3332 40.0001 53.3332C32.6401 53.3332 26.6667 47.3598 26.6667 39.9998C26.6667 32.6398 32.6401 26.6665 40.0001 26.6665C47.3601 26.6665 53.3334 32.6398 53.3334 39.9998Z" fill="#1ABCFE"/></g><defs><clipPath id="figma__clip0_912_3"><rect width="53.3333" height="80" fill="white"/></clipPath></defs></svg>
+      <span class="mc-button__label">Figma</span>
+    </a>
+    <a href="/?path=/docs/getting-started--docs" class="mc-button mc-button--accent">
+      <span class="mc-button__label">Get Started</span>
+      <svg class="mc-button__icon" width="24" height="24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <path fill-rule="evenodd" d="M15.2929 6.29289c.3905-.39052 1.0237-.39052 1.4142 0l5 5.00001c.3905.3905.3905 1.0237 0 1.4142l-5 5c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L18.5858 13H3c-.55228 0-1-.4477-1-1s.44772-1 1-1h15.5858l-3.2929-3.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"></path>
+      </svg>
+    </a>
+  </div>
+</div>