@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/documentation/WebComponents/Introduction.mdx

@@ -1,52 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Getting Started/Web Components/Introduction" />
-
-# 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](https://www.adeo.com/).
-
-Learn more about the vision and guidelines by visiting the [main documentation website](https://mozaic.adeo.cloud/).
-
-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.
-
-## ✨ Installation
-
-> **PREREQUISITES:**<br/>
-> Installing Mozaic packages require node v18+.<br/>
-
-```bash
-npm install @mozaic-ds/web-components --save
-```
-
-Or with **Yarn**:
-
-```bash
-yarn add @mozaic-ds/web-components -E
-```
-
-## 📦 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:
-
-```html
-<m-button appearance="accent">This is an accent button</m-button>
-```
-
-```javascript
-import '@mozaic-ds/web-components/dist/lib';
-```
-
-## 🔧 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)
-
-## 📚 More Information
-
-For advanced usage, customization options, and available components, check each component’s dedicated documentation in this Storybook.

package/dist/documentation/WebComponents/usingIcons.mdx

@@ -1,81 +0,0 @@
-import { Meta, Source } from '@storybook/addon-docs/blocks';
-
-<Meta title="Getting Started/Web Components/ Icons Usage (Web Components)" />
-
-# 🖼️ Using Mozaic Icons as Web Components
-
-The **Mozaic Design System** also provides a set of scalable, accessible **Web Component icons**, available via the `@mozaic-ds/web-components` package.
-
-👀 [ADS-2 icon's showcase](https://psychic-telegram-3j2oqjk.pages.github.io/) <br/>
-🛠️ [Icon's name mapping](https://github.com/adeo/mozaic-icons/blob/main/MIGRATION.md)
-
-These icons are:
-
-- **Framework agnostic**: Usable in any front-end stack (React, Vue, Angular, vanilla...).
-- **Optimized**: Delivered as lightweight, flexible custom elements.
-- **Consistent**: Aligned with ADEO's brand guidelines.
-
----
-
-## 🚀 Installation
-
-To install the icons library:
-
-```bash
-npm install @mozaic-ds/icons-svelte
-```
-
-## 📦 Basic Usage
-
-Once installed, you need to import the Mozaic icon components globally, typically at your application entry point:
-
-```js
-import '@mozaic-ds/icons-svelte/custom-elements/custom-elements.js';
-```
-
-or individually
-
-```js
-import '@mozaic-ds/icons-svelte/custom-elements/More64/More64.js';
-
-if (!customElements.get('more-64')) {
-  customElements.define('more-64', More64.element);
-}
-```
-
-Then, use any icon in your HTML:
-
-<more-64></more-64>
-
-🧩 Icon Naming Convention
-The naming convention for Mozaic icon web components follows a clear pattern:
-
-```html
-<[icon-name]-[size]>
-```
-
-- [icon-name]: Lowercase, kebab-case descriptive name (e.g., search, close, more, trolley...)
-- [size]: Default size suffix → 20, 24, 32, 64
-
-## 🎨 Customization Options
-
-Each icon component accepts standard SVG attributes:
-
-```svelte
-<more-64 width="16" height="16" fill="currentColor" aria-label="Close"></more-64>
-```
-
-- width / height: Control size
-- fill: Icon color (recommend using "currentColor")
-- aria-label: For accessibility
-
-## ⚙️ Best Practices
-
-✅ Use the appropriate size icon directly — no need to scale manually.
-✅ Inherit text color using fill="currentColor".
-✅ Always provide aria-label unless decorative
-
-## 📚 Useful Links
-
-📦 [@mozaic-ds/icons-svelte on NPM](https://www.npmjs.com/package/@mozaic-ds/icons-svelte)
-🛠️ [Mozaic Icons GitHub Repo](https://github.com/adeo/mozaic-icons-svelte)

package/dist/legacy.js

@@ -1,2 +0,0 @@
-import{aE as a}from"./custom-element.js";a();
-//# sourceMappingURL=legacy.js.map

package/dist/legacy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"legacy.js","sources":["../node_modules/svelte/src/internal/flags/legacy.js"],"sourcesContent":["import { enable_legacy_mode_flag } from './index.js';\n\nenable_legacy_mode_flag();\n"],"names":["enable_legacy_mode_flag"],"mappings":"yCAEAA,EAAuB","x_google_ignoreList":[0]}