@mozaic-ds/web-components 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/documentation/Migration.mdx

@@ -0,0 +1,419 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Getting Started/Migration guide"
+  parameters={{
+    layout: 'fullscreen',
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+# Migration Guide — @mozaic-ds/web-components@v1
+
+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.
+
+---
+
+## Table of contents
+
+- [Overview](#overview)
+- [What changed (at a glance)](#what-changed-at-a-glance)
+- [Prerequisites](#prerequisites)
+- [Install & build updates](#install--build-updates)
+- [Styles & tokens migration](#styles--tokens-migration)
+- [Component API changes](#component-api-changes)
+  - [Button example (props → slots)](#button-example-props--slots)
+  - [Common slot patterns](#common-slot-patterns)
+- [Using Svelte components](#using-svelte-components)
+- [Using Web Components](#using-web-components)
+  - [Framework integration quick notes](#framework-integration-quick-notes)
+- [New components in V2](#new-components-in-v2)
+- [Deprecated components (from V1)](#deprecated-components-from-v1)
+- [Component mapping (V1 → V2)](#component-mapping-v1--v2)
+- [Accessibility changes](#accessibility-changes)
+- [Quality checks before shipping](#quality-checks-before-shipping)
+- [FAQ](#faq)
+- [References](#references)
+
+---
+
+## Overview
+
+V2 is a modernized, dual-delivery library:
+
+- **Svelte 5 components** for first-class Svelte apps.
+- **Web Components** (native Custom Elements) for any framework (React, Vue, Angular, plain HTML, etc.).
+- **Slot-first APIs** for icons, labels, and composition.
+- **Core V2 alignment** (ITCSS, Sass Module System, functional tokens only).
+
+---
+
+## What changed (at a glance)
+
+| Area           | v1                                 | v2                                                          | Migration action                          |
+| -------------- | ---------------------------------- | ----------------------------------------------------------- | ----------------------------------------- |
+| Svelte         | Svelte 3                           | **Svelte 5**                                                | Update tooling & code where needed        |
+| Delivery       | Mostly WC or Svelte (not unified)  | **Both:** `/svelte` exports + `/lib` web-component build    | Choose one per app (Svelte or WC)         |
+| API shape      | Prop-heavy (e.g., `icon`, `label`) | **Slots** (e.g., `<slot name="icon" />`, default for label) | Move content from props to slots          |
+| Styles         | `@import` patterns                 | **Sass Modules** (`@use`, `@forward`)                       | Replace imports, use namespaces           |
+| Tokens         | Primitive tokens exposed           | **Functional tokens only**                                  | Map/rename tokens; remove primitive usage |
+| Browser legacy | IE & Edge legacy workarounds       | **Dropped**                                                 | Remove polyfills/hacks if present         |
+
+---
+
+## Prerequisites
+
+- **Node 20+**
+- **Svelte 5** (when consuming Svelte components)
+- **Dart Sass 1.80+** (if you build SCSS using Core styles)
+- Modern bundler (Vite, Rollup, Webpack 5+)
+
+---
+
+## Install & build updates
+
+```bash
+# npm
+npm install @mozaic-ds/web-components --save
+
+# or Yarn
+yarn add @mozaic-ds/web-components -E
+```
+
+If you use the **Web Components** build, ensure the library is **registered** (side-effect import):
+
+```js
+// Typically in your app entry
+import '@mozaic-ds/web-components/lib';
+```
+
+> Tip: For Svelte apps using the **Svelte components** flavor, you don’t need the WC registration import.
+
+---
+
+## Styles & tokens migration
+
+### Replace `@import` with `@use`
+
+**Old (v1):**
+
+```scss
+@import '@mozaic-ds/styles/all-settings';
+```
+
+**New (v2):**
+
+```scss
+@use '@mozaic-ds/tokens' as *;
+// Example usage:
+.myClass {
+  padding: $spacing-400;
+}
+```
+
+### Functional tokens only
+
+If you referenced **functional tokens** (raw colors, etc.), switch to **functional tokens**.
+
+**Old (primitive-esque):**
+
+```scss
+color: $color-blue-500;
+```
+
+**New (functional):**
+
+```scss
+@use '@mozaic-ds/token' as *;
+
+background-color: $color-background-accent;
+```
+
+---
+
+## Component API changes
+
+V2 favors **slots** over props for injectables like icons and labels. Expect to:
+
+- Replace `icon` and `label` props with **slots**.
+- Keep semantic attributes (`appearance`, `size`, `disabled`, etc.) as **attributes/props**.
+
+### Button example (props → slots)
+
+**Old (v1, indicative):**
+
+```svelte
+<!-- Svelte or WC with props -->
+<Button label="Checkout" icon="cart" appearance="accent" />
+```
+
+**New (v2):**
+
+#### Web Component
+
+```html
+<m-button appearance="accent">
+  Checkout
+  <span slot="icon">🛒</span>
+</m-button>
+```
+
+#### Svelte Component
+
+```svelte
+<script>
+  import { Button } from '@mozaic-ds/web-components/svelte';
+</script>
+
+<Button appearance="accent">
+  Checkout
+  <span slot="icon">🛒</span>
+</Button>
+```
+
+> Label is now the **default slot** content.  
+> Icons go into a **named `icon` slot**.
+
+### Common slot patterns
+
+| Pattern       | Slot name     | Typical content                                                          |
+| ------------- | ------------- | ------------------------------------------------------------------------ |
+| Icon (single) | `icon`        | `<span slot="icon">…</span>` or `<m-icon slot="icon" name="…"></m-icon>` |
+| Header        | `header`      | Titles, headings                                                         |
+| Footer        | `footer`      | Actions, secondary buttons                                               |
+| Label         | _default_     | Button or link text                                                      |
+| Description   | `description` | Supporting text under headings                                           |
+
+> Always check each component’s Storybook page for its exact slot names.
+
+---
+
+## Using Svelte components
+
+**Install** and import from the **`/svelte`** entry:
+
+```svelte
+<script>
+  import { Button } from '@mozaic-ds/web-components/svelte';
+</script>
+
+<Button appearance="accent">My first Svelte Button</Button>
+```
+
+**Why Svelte components?**
+
+- Native Svelte 5 reactivity and composition
+- No custom element registration step
+- Best DX when your app is Svelte
+
+---
+
+## Using Web Components
+
+**Register once** (side-effect import) and use tags directly:
+
+```js
+import '@mozaic-ds/web-components/lib';
+```
+
+```html
+<m-button appearance="accent">This is an accent button</m-button>
+```
+
+### Framework integration quick notes
+
+- **React**: Use tags directly in JSX. Remember `className` (React) vs `class`.
+- **Vue**: Works out of the box; see Vue’s official Web Components notes.
+- **Angular**: Add `CUSTOM_ELEMENTS_SCHEMA` to the module that uses the components.
+
+---
+
+## New components in V2
+
+V2 introduces several components that did not exist in V1:
+
+| **Category**      | **Component**                                                                                           |
+| ----------------- | ------------------------------------------------------------------------------------------------------- |
+| **Actions**       | `Icon Button`                                                                                           |
+| **Content**       | `Accordeon List` • `Avatar` • `Avatar group` • `Callout` • `Carousel` • `Tile`                          |
+| **Form elements** | `Advanced Date Picker` • `Pincode Input`                                                                |
+| **Indicators**    | `Circular Progress Bar` • `Linear Progress Bar` • `Navigation Indicator` • `Number Badge` • `Scrollbar` |
+| **Navigation**    | `Check-list Menu` • `Link group` • `Sidebar`                                                            |
+| **Overlay**       | `Action List` • `Drawer` • `Popover` • `Toaster`                                                        |
+| **Status**        | `KPI Item` • `Status Badge` • `Status Dot` • `Status Notification`                                      |
+| **Structure**     | `Action Bottom Bar` • `Page Header` • `Stepper Bottom Bar`                                              |
+
+> Refer to each component’s Storybook page for detailed props, slots, and examples.
+
+---
+
+## Deprecated components (from V1)
+
+The following V1 components are removed or renamed in V2:
+
+| **V1**          | **V2**     | **Notes**               |
+| --------------- | ---------- | ----------------------- |
+| `Accordion`     | ❌ Removed |                         |
+| `Action Bar`    | Renamed ♻️ | See mapping table below |
+| `Badge`         | Renamed ♻️ | See mapping table below |
+| `Bottom Bar`    | Renamed ♻️ | See mapping table below |
+| `Card`          | ❌ Removed |                         |
+| `File Uploader` | Renamed ♻️ | See mapping table below |
+| `Header`        | Renamed ♻️ | See mapping table below |
+| `Heading`       | ❌ Removed |                         |
+| `Hero`          | ❌ Removed |                         |
+| `KPI`           | Renamed ♻️ | See mapping table below |
+| `Layer`         | Renamed ♻️ | See mapping table below |
+| `Menu`          | Renamed ♻️ | See mapping table below |
+| `Modal`         | Renamed ♻️ | See mapping table below |
+| `Notification`  | Renamed ♻️ | See mapping table below |
+| `Option Button` | ❌ Removed |                         |
+| `Option Card`   | ❌ Removed |                         |
+| `Progress Bar`  | Renamed ♻️ | See mapping table below |
+| `Stars Input`   | ❌ Removed |                         |
+| `Stars Result`  | ❌ Removed |                         |
+| `Stepper Bar`   | Renamed ♻️ | See mapping table below |
+| `Tag List`      | ❌ Removed |                         |
+
+---
+
+## Component mapping (V1 → V2)
+
+Use this table to find the V2 replacement or equivalent for each V1 component:
+
+|                   | **V1**               | **V2**                  | **Notes**         |
+| ----------------- | -------------------- | ----------------------- | ----------------- |
+| **Actions**       |                      |                         |                   |
+|                   | `Button`             | `Button`                | Code updated.     |
+|                   | —                    | `Icon Button`           | 🆕 New            |
+| **Content**       |                      |                         |                   |
+|                   | `Accordion`          | —                       | ❌ Removed in V2  |
+|                   | —                    | `Accordeon list`        | 🆕 New            |
+|                   | —                    | `Avatar`                | 🆕 New            |
+|                   | —                    | `Avatar group`          | 🆕 New            |
+|                   | —                    | `Callout`               | 🆕 New            |
+|                   | —                    | `Carousel`              | 🆕 New            |
+|                   | `Heading`            | —                       | ❌ Removed in V2  |
+|                   | `Hero`               | —                       | ❌ Removed in V2  |
+|                   | —                    | `Tile`                  | 🆕 New            |
+| **Data**          |                      |                         |                   |
+|                   | `Datatable`          | —                       |                   |
+| **Form elements** |                      |                         |                   |
+|                   | —                    | `Advanced Datepicker`   | 🆕 New            |
+|                   | `Autocomplete`       | `Autocomplete`          |                   |
+|                   | `Checkbox`           | `Checkbox`              | ↔️ No code change |
+|                   | `Dropdown`           | `Dropdown`              |                   |
+|                   | `Datepicker`         | `Datepicker`            | Code updated.     |
+|                   | `Fields`             | `Field`                 | Code updated.     |
+|                   | `File uploader`      | `File uploader`         |                   |
+|                   | `Option Button`      |                         | ❌ Removed in V2  |
+|                   | `Option Card`        |                         | ❌ Removed in V2  |
+|                   | `Password Input`     | `Password Input`        | Code updated.     |
+|                   | `Phone number Input` | `Phone number Input`    | Code updated.     |
+|                   | —                    | `Pincode Input`         | 🆕 New            |
+|                   | `Quantity selector`  | `Quantity selector`     | Code updated.     |
+|                   | `Radio button`       | `Radio button`          | ↔️ No code change |
+|                   | `Search Input`       | `Search Input`          | Code updated.     |
+|                   | `Select`             | `Select`                | ↔️ No code change |
+|                   | `Textarea`           | `Textarea`              | ↔️ No code change |
+|                   | `Text Input`         | `Text Input`            | Code updated.     |
+|                   | `Toggle`             | `Toggle`                | Code updated.     |
+| **Indicators**    |                      |                         |                   |
+|                   | —                    | `Circular progress bar` | 🆕 New            |
+|                   | `Flag`               | `Flag`                  |                   |
+|                   | `Progressbar`        | `Linear progress bar`   |                   |
+|                   | `Loader`             | `Loader`                | Code updated.     |
+|                   | —                    | `Navigation indicator`  | 🆕 New            |
+|                   | —                    | `Number Badge`          | 🆕 New            |
+|                   | `Rating Stars`       | `Rating Stars`          |                   |
+|                   | —                    | `Scrollbar`             | 🆕 New            |
+|                   | `Stepper`            | `Stepper`               |                   |
+|                   | `Tag`                | `Tag`                   | Code updated.     |
+| **Navigation**    |                      |                         |                   |
+|                   | `Breadcrumb`         | `Breadcrumb`            | Code updated.     |
+|                   | `Menu`               | `Built-in menu`         |                   |
+|                   | —                    | `Check-list menu`       | 🆕 New            |
+|                   | `Link`               | `Link (standalone)`     | Code updated.     |
+|                   | —                    | `Link group`            | 🆕 New            |
+|                   | `Pagination`         | `Pagination`            |                   |
+|                   | `Segmented control`  | `Segmented control`     |                   |
+|                   | —                    | `Sidebar`               | 🆕 New            |
+|                   | `Tabs`               | `Tabs`                  |                   |
+| **Overlay**       |                      |                         |                   |
+|                   | —                    | `Action list`           | 🆕 New            |
+|                   | `Layer`              | `Drawer`                | Renamed ♻️        |
+|                   | `Listbox`            | `Listbox`               |                   |
+|                   | `Overlay Loader`     | `Loading overlay`       |                   |
+|                   | `Modal`              | `Modal`                 | Renamed ♻️        |
+|                   | —                    | `Popover`               | 🆕 New            |
+|                   | `Overlay`            | `Overlay`               |                   |
+|                   | —                    | `Toaster`               | 🆕 New            |
+|                   | `Tooltip`            | `Tooltip`               |                   |
+| **Status**        |                      |                         |                   |
+|                   | `KPI`                | `KPI Item`              | Renamed ♻️        |
+|                   | `Badge`              | `Status Badge`          | Renamed ♻️        |
+|                   | —                    | `Status Dot`            | 🆕 New            |
+|                   | `Notification`       | `Status Notification`   | Renamed ♻️        |
+| **Structure**     |                      |                         |                   |
+|                   | `Action Bar`         | `Action Bottom Bar`     | Renamed ♻️        |
+|                   | `Divider`            | `Divider`               |                   |
+|                   | —                    | `Page Header`           | 🆕 New            |
+|                   | `Stepper Bar`        | `Stepper Bottom Bar`    | Renamed ♻️        |
+
+> Where the table says “Code updated”, check the component’s Storybook page for new props/slots and behavior.
+
+---
+
+## Accessibility changes
+
+- Prefer WCAG-compliant defaults (via functional tokens).
+- Use provided **slot structure** for semantic content.
+- For visually hidden text, use Core V2 utilities (`visually-hidden()` or `.mu-visually-hidden`).
+
+---
+
+## Quality checks before shipping
+
+- ✅ Slots replace legacy props.
+- ✅ Sass uses `@use`/`@forward` only.
+- ✅ Functional tokens only.
+- ✅ Toolchain supports Svelte 5 & Dart Sass 1.80+.
+- ✅ Interaction + A11y tests pass.
+
+---
+
+## FAQ
+
+**Q: Which library to use (web-components or Svelte)?**  
+A:
+
+- Web Components → Ideal for multi-framework projects (React, Vue, Angular, Vanilla JS) or when framework independence is important. Great for CMS-driven, legacy, or microfrontend architectures.
+
+- Svelte Components → Best for Svelte 5 applications. They integrate seamlessly with Svelte’s reactivity, require no element registration, and deliver the smoothest developer experience.
+
+**Q: Do I need both?**  
+A: Generally, no. Choose one per application to avoid duplicate code and unnecessary bundle weight.
+Only mix if you have a real architectural need (e.g., a Svelte app embedding a WC-only feature in a shared microfrontend).
+
+**Q: How to handle icons?**  
+A:
+
+- Svelte → Use @mozaic-ds/icons-svelte (`<Search24 />, <More64 />`…), sizes 20/24/32/64, fill="currentColor", aria-label.
+
+- Web Components → Same package, import globally (custom-elements.js) or individually (`<search-24>`).
+
+- In a V2 component → Pass the icon via the icon slot.
+
+---
+
+## References
+
+- Introduction - [“Getting Started - Introduction”](/docs/getting-started-introduction--docs)
+- Svelte documentation - [“Getting Started - Svelte](/docs/getting-started-svelte-introduction--docs)
+- Web-component documentation - [“Getting Started - Web-component](/docs/getting-started-web-components-introduction--docs)
+- Core V2 [Getting Started](https://main--651ae46c2a6f4410809759ce.chromatic.com/?path=/docs/getting-started--docs)

package/dist/documentation/Svelte/Introduction.mdx

@@ -57,9 +57,7 @@ You can import and use the Svelte components directly:
 
 Simply call the component as follows:
 
-<CH.Code>
-
-```svelte Svelte
+```html
 <script>
   import { Button } from '@mozaic-ds/web-components/svelte';
 </script>
@@ -67,8 +65,6 @@ Simply call the component as follows:
 <Button appearance="accent">My first svelte Button</Button>
 ```
 
-</CH.Code>
-
 ## 🔥 Why Use Native Svelte Components?
 
 > Full compatibility with Svelte’s reactivity system.

package/dist/documentation/Svelte/usingIcons.mdx

@@ -6,6 +6,9 @@ import { Meta, Source } from '@storybook/addon-docs/blocks';
 
 The **Mozaic Design System** provides a comprehensive set of brand-compliant icons, available as ready-to-use **Svelte components** via the `@mozaic-ds/icons-svelte` 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:
 
 - **Optimized**: Lightweight and scalable SVGs.

package/dist/documentation/Svelte/usingPresets.mdx

@@ -67,9 +67,8 @@ Each brand not only has specific styles but also uses a dedicated font.
 
 To apply the correct font in your project:
 
-<CH.Code>
-
-```scss LeroyMerlin
+```scss 
+//LeroyMerlin
 @use '@mozaic-ds/styles/tools/t.font' as *;
 @include import-font-lm();
 
@@ -78,7 +77,8 @@ body {
 }
 ```
 
-```scss ADEO
+```scss 
+//ADEO
 @use '@mozaic-ds/styles/tools/t.font' as *;
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap')
 body {
@@ -86,7 +86,8 @@ body {
 }
 ```
 
-```scss M-Brand
+```scss 
+//M-Brand
 @use '@mozaic-ds/styles/tools/t.font' as *;
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@@ -95,8 +96,6 @@ body {
 }
 ```
 
-</CH.Code>
-
 ---
 
 #### 📝 Specific case: **Leroy Merlin font**
@@ -122,9 +121,7 @@ Once the preset and font are configured, you can directly start using ADEO Desig
 
 Example:
 
-<CH.Code>
-
-```svelte
+```html
 <script>
   import { Button } from '@mozaic-ds/web-components/svelte';
 </script>
@@ -132,8 +129,6 @@ Example:
 <Button appearance="accent">Button label</Button>
 ```
 
-</CH.Code>
-
 ---
 
 ## 📚 Going Further

package/dist/documentation/WebComponents/Introduction.mdx

@@ -31,18 +31,15 @@ Once installed, you can directly use the web components in your HTML or any fron
 
 Simply call the component as follows:
 
-<CH.Code>
 
-```html HTML
+```html
 <m-button appearance="accent">This is an accent button</m-button>
 ```
 
-```js JS
+```javascript
 import '@mozaic-ds/web-components/dist/lib';
 ```
 
-</CH.Code>
-
 ## 🔧 Framework Integration
 
 These web components are framework-agnostic. Here are a few resources to help you integrate them:

package/dist/documentation/WebComponents/usingIcons.mdx

@@ -6,6 +6,9 @@ import { Meta, Source} from '@storybook/addon-docs/blocks';
 
 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...).
@@ -35,23 +38,22 @@ or individually
 ```js
 import '@mozaic-ds/icons-svelte/custom-elements/More64/More64.js';
 
-if (!customElements.get('ui-more-64')) {
-  customElements.define('ui-more-64', More64.element);
+if (!customElements.get('more-64')) {
+  customElements.define('more-64', More64.element);
 }
 ```
 
 Then, use any icon in your HTML:
 
-<ui-more-64></ui-more-64>
+<more-64></more-64>
 
 🧩 Icon Naming Convention
 The naming convention for Mozaic icon web components follows a clear pattern:
 
 ```html
-<[icon-category]-[icon-name]-[size]>
+<[icon-name]-[size]>
 ```
 
-- [icon-category]: Lowercase, kebab-case descriptive category name [media, ui, business, product]
 - [icon-name]: Lowercase, kebab-case descriptive name (e.g., search, close, more, trolley...)
 - [size]: Default size suffix → 20, 24, 32, 64
 
@@ -60,8 +62,8 @@ The naming convention for Mozaic icon web components follows a clear pattern:
 Each icon component accepts standard SVG attributes:
 
 ```svelte
-<ui-more-64 width="16" height="16" fill="currentColor" aria-label="Close"
-></ui-more-64>
+<more-64 width="16" height="16" fill="currentColor" aria-label="Close"
+></more-64>
 ```
 
 - width / height: Control size

package/dist/documentation/WebComponents/usingPresets.mdx

@@ -67,9 +67,8 @@ Each brand not only has specific styles but also uses a dedicated font.
 
 To apply the correct font in your project:
 
-<CH.Code>
-
-```scss LeroyMerlin
+```scss 
+// LeroyMerlin
 @use '@mozaic-ds/styles/tools/t.font' as *;
 @include import-font-lm();
 
@@ -78,7 +77,8 @@ body {
 }
 ```
 
-```scss ADEO
+```scss 
+//ADEO
 @use '@mozaic-ds/styles/tools/t.font' as *;
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
 
@@ -87,7 +87,8 @@ body {
 }
 ```
 
-```scss M-Brand
+```scss 
+//M-Brand
 @use '@mozaic-ds/styles/tools/t.font' as *;
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
 
@@ -96,7 +97,6 @@ body {
 }
 ```
 
-</CH.Code>
 
 ---
 
@@ -123,9 +123,7 @@ Once the preset and font are configured, you can directly start using ADEO Desig
 
 Example:
 
-<CH.Code>
-
-```svelte
+```html
 <script>
   import { Button } from '@mozaic-ds/web-components/lib';
 </script>
@@ -133,8 +131,6 @@ Example:
 <m-button appearance="accent">Button label</m-button>
 ```
 
-</CH.Code>
-
 ---
 
 ## 📚 Going Further

package/dist/each.js

@@ -1,2 +1,2 @@
-import{E as se,h as Z,ad as ue,J as te,I as ve,ae as j,q as de,af as $,G as ee,H as G,ag as _e,ah as k,L as D,W as ae,K as oe,ai as q,aj as Y,X as re,ak as V,al as ce,am as he,an as Ee,ao as pe,ap as me,V as Te,a8 as Ae,aq as ne,ar as Ie,U as g,S as Ne,M as we,aa as xe,ab as Ce,ac as y,T as B,N as O,as as Me,at as Se}from"./custom-element.js";function Oe(i,r){return r}function De(i,r,e){for(var u=i.items,v=[],d=r.length,s=0;s<d;s++)Ee(r[s].e,v,!0);var h=d>0&&v.length===0&&e!==null;if(h){var T=e.parentNode;pe(T),T.append(e),u.clear(),w(i,r[0].prev,r[d-1].next)}me(v,()=>{for(var m=0;m<d;m++){var o=r[m];h||(u.delete(o.k),w(i,o.prev,o.next)),re(o.e,!h)}})}function be(i,r,e,u,v,d=null){var s=i,h={flags:r,items:new Map,first:null},T=(r&ne)!==0;if(T){var m=i;s=D?g(Ne(m)):m.appendChild(ee())}D&&we();var o=null,C=!1,A=new Map,M=ue(()=>{var _=e();return de(_)?_:_==null?[]:j(_)}),n,t;function l(){He(t,n,h,A,s,v,r,u,e),d!==null&&(n.length===0?o?ae(o):o=G(()=>d(s)):o!==null&&oe(o,()=>{o=null}))}se(()=>{t??(t=Te),n=Z(M);var _=n.length;if(C&&_===0)return;C=_===0;let p=!1;if(D){var I=xe(s)===Ce;I!==(_===0)&&(s=y(),g(s),B(!1),p=!0)}if(D){for(var x=null,c,a=0;a<_;a++){if(O.nodeType===Me&&O.data===Se){s=O,p=!0,B(!1);break}var f=n[a],E=u(f,a);c=J(O,h,x,null,f,E,a,v,r,e),h.items.set(E,c),x=c}_>0&&g(y())}if(D)_===0&&d&&(o=G(()=>d(s)));else if(te()){var H=new Set,b=ve;for(a=0;a<_;a+=1){f=n[a],E=u(f,a);var S=h.items.get(E)??A.get(E);S?(r&(V|q))!==0&&fe(S,f,a,r):(c=J(null,h,null,null,f,E,a,v,r,e,!0),A.set(E,c)),H.add(E)}for(const[N,L]of h.items)H.has(N)||b.skipped_effects.add(L.e);b.add_callback(l)}else l();p&&B(!0),Z(M)}),D&&(s=O)}function He(i,r,e,u,v,d,s,h,T){var K,W,z,P;var m=(s&Ie)!==0,o=(s&(V|q))!==0,C=r.length,A=e.items,M=e.first,n=M,t,l=null,_,p=[],I=[],x,c,a,f;if(m)for(f=0;f<C;f+=1)x=r[f],c=h(x,f),a=A.get(c),a!==void 0&&((K=a.a)==null||K.measure(),(_??(_=new Set)).add(a));for(f=0;f<C;f+=1){if(x=r[f],c=h(x,f),a=A.get(c),a===void 0){var E=u.get(c);if(E!==void 0){u.delete(c),A.set(c,E);var H=l?l.next:n;w(e,l,E),w(e,E,H),F(E,H,v),l=E}else{var b=n?n.e.nodes_start:v;l=J(b,e,l,l===null?e.first:l.next,x,c,f,d,s,T)}A.set(c,l),p=[],I=[],n=l.next;continue}if(o&&fe(a,x,f,s),(a.e.f&Y)!==0&&(ae(a.e),m&&((W=a.a)==null||W.unfix(),(_??(_=new Set)).delete(a))),a!==n){if(t!==void 0&&t.has(a)){if(p.length<I.length){var S=I[0],N;l=S.prev;var L=p[0],U=p[p.length-1];for(N=0;N<p.length;N+=1)F(p[N],S,v);for(N=0;N<I.length;N+=1)t.delete(I[N]);w(e,L.prev,U.next),w(e,l,L),w(e,U,S),n=S,l=U,f-=1,p=[],I=[]}else t.delete(a),F(a,n,v),w(e,a.prev,a.next),w(e,a,l===null?e.first:l.next),w(e,l,a),l=a;continue}for(p=[],I=[];n!==null&&n.k!==c;)(n.e.f&Y)===0&&(t??(t=new Set)).add(n),I.push(n),n=n.next;if(n===null)continue;a=n}p.push(a),l=a,n=a.next}if(n!==null||t!==void 0){for(var R=t===void 0?[]:j(t);n!==null;)(n.e.f&Y)===0&&R.push(n),n=n.next;var X=R.length;if(X>0){var le=(s&ne)!==0&&C===0?v:null;if(m){for(f=0;f<X;f+=1)(z=R[f].a)==null||z.measure();for(f=0;f<X;f+=1)(P=R[f].a)==null||P.fix()}De(e,R,le)}}m&&Ae(()=>{var Q;if(_!==void 0)for(a of _)(Q=a.a)==null||Q.apply()}),i.first=e.first&&e.first.e,i.last=l&&l.e;for(var ie of u.values())re(ie.e);u.clear()}function fe(i,r,e,u){(u&V)!==0&&$(i.v,r),(u&q)!==0?$(i.i,e):i.i=e}function J(i,r,e,u,v,d,s,h,T,m,o){var C=(T&V)!==0,A=(T&ce)===0,M=C?A?_e(v,!1,!1):k(v):v,n=(T&q)===0?s:k(s),t={i:n,v:M,k:d,a:null,e:null,prev:e,next:u};try{if(i===null){var l=document.createDocumentFragment();l.append(i=ee())}return t.e=G(()=>h(i,M,n,m),D),t.e.prev=e&&e.e,t.e.next=u&&u.e,e===null?o||(r.first=t):(e.next=t,e.e.next=t.e),u!==null&&(u.prev=t,u.e.prev=t.e),t}finally{}}function F(i,r,e){for(var u=i.next?i.next.e.nodes_start:e,v=r?r.e.nodes_start:e,d=i.e.nodes_start;d!==null&&d!==u;){var s=he(d);v.before(d),d=s}}function w(i,r,e){r===null?i.first=e:(r.next=e,r.e.next=e&&e.e),e!==null&&(e.prev=r,e.e.prev=r&&r.e)}export{be as e,Oe as i};
+import{G as j,E as se,m as Z,as as ue,J as te,at as q,au as V,I as ve,av as $,H as z,aw as de,ax as y,L as H,ay as ee,az as ae,a1 as _e,W as re,K as oe,aA as ce,aB as G,a3 as he,X as ne,aC as Ee,aD as pe,aE as me,aF as Te,aG as Ae,U,S as Ie,M as we,V as xe,ap as Ce,aq as Ne,ar as k,T as X,N as O,aH as Me,aI as De}from"./custom-element.js";function Oe(i,r){return r}function He(i,r,e){for(var u=i.items,v=[],d=r.length,s=0;s<d;s++)me(r[s].e,v,!0);var h=d>0&&v.length===0&&e!==null;if(h){var T=e.parentNode;Te(T),T.append(e),u.clear(),x(i,r[0].prev,r[d-1].next)}Ae(v,()=>{for(var m=0;m<d;m++){var o=r[m];h||(u.delete(o.k),x(i,o.prev,o.next)),ne(o.e,!h)}})}function Le(i,r,e,u,v,d=null){var s=i,h={flags:r,items:new Map,first:null},T=(r&ee)!==0;if(T){var m=i;s=H?U(Ie(m)):m.appendChild(j())}H&&we();var o=null,N=!1,A=new Map,M=ue(()=>{var _=e();return _e(_)?_:_==null?[]:ae(_)}),n,t;function l(){Se(t,n,h,A,s,v,r,u,e),d!==null&&(n.length===0?o?re(o):o=z(()=>d(s)):o!==null&&oe(o,()=>{o=null}))}se(()=>{t??(t=xe),n=Z(M);var _=n.length;if(N&&_===0)return;N=_===0;let p=!1;if(H){var I=Ce(s)===Ne;I!==(_===0)&&(s=k(),U(s),X(!1),p=!0)}if(H){for(var C=null,c,a=0;a<_;a++){if(O.nodeType===Me&&O.data===De){s=O,p=!0,X(!1);break}var f=n[a],E=u(f,a);c=J(O,h,C,null,f,E,a,v,r,e),h.items.set(E,c),C=c}_>0&&U(k())}if(H)_===0&&d&&(o=z(()=>d(s)));else if(te()){var S=new Set,L=ve;for(a=0;a<_;a+=1){f=n[a],E=u(f,a);var D=h.items.get(E)??A.get(E);D?(r&(q|V))!==0&&fe(D,f,a,r):(c=J(null,h,null,null,f,E,a,v,r,e,!0),A.set(E,c)),S.add(E)}for(const[w,b]of h.items)S.has(w)||L.skipped_effects.add(b.e);L.add_callback(l)}else l();p&&X(!0),Z(M)}),H&&(s=O)}function Se(i,r,e,u,v,d,s,h,T){var K,W,g,P;var m=(s&Ee)!==0,o=(s&(q|V))!==0,N=r.length,A=e.items,M=e.first,n=M,t,l=null,_,p=[],I=[],C,c,a,f;if(m)for(f=0;f<N;f+=1)C=r[f],c=h(C,f),a=A.get(c),a!==void 0&&((K=a.a)==null||K.measure(),(_??(_=new Set)).add(a));for(f=0;f<N;f+=1){if(C=r[f],c=h(C,f),a=A.get(c),a===void 0){var E=u.get(c);if(E!==void 0){u.delete(c),A.set(c,E);var S=l?l.next:n;x(e,l,E),x(e,E,S),Y(E,S,v),l=E}else{var L=n?n.e.nodes_start:v;l=J(L,e,l,l===null?e.first:l.next,C,c,f,d,s,T)}A.set(c,l),p=[],I=[],n=l.next;continue}if(o&&fe(a,C,f,s),(a.e.f&G)!==0&&(re(a.e),m&&((W=a.a)==null||W.unfix(),(_??(_=new Set)).delete(a))),a!==n){if(t!==void 0&&t.has(a)){if(p.length<I.length){var D=I[0],w;l=D.prev;var b=p[0],B=p[p.length-1];for(w=0;w<p.length;w+=1)Y(p[w],D,v);for(w=0;w<I.length;w+=1)t.delete(I[w]);x(e,b.prev,B.next),x(e,l,b),x(e,B,D),n=D,l=B,f-=1,p=[],I=[]}else t.delete(a),Y(a,n,v),x(e,a.prev,a.next),x(e,a,l===null?e.first:l.next),x(e,l,a),l=a;continue}for(p=[],I=[];n!==null&&n.k!==c;)(n.e.f&G)===0&&(t??(t=new Set)).add(n),I.push(n),n=n.next;if(n===null)continue;a=n}p.push(a),l=a,n=a.next}if(n!==null||t!==void 0){for(var R=t===void 0?[]:ae(t);n!==null;)(n.e.f&G)===0&&R.push(n),n=n.next;var F=R.length;if(F>0){var le=(s&ee)!==0&&N===0?v:null;if(m){for(f=0;f<F;f+=1)(g=R[f].a)==null||g.measure();for(f=0;f<F;f+=1)(P=R[f].a)==null||P.fix()}He(e,R,le)}}m&&he(()=>{var Q;if(_!==void 0)for(a of _)(Q=a.a)==null||Q.apply()}),i.first=e.first&&e.first.e,i.last=l&&l.e;for(var ie of u.values())ne(ie.e);u.clear()}function fe(i,r,e,u){(u&q)!==0&&$(i.v,r),(u&V)!==0?$(i.i,e):i.i=e}function J(i,r,e,u,v,d,s,h,T,m,o){var N=(T&q)!==0,A=(T&ce)===0,M=N?A?de(v,!1,!1):y(v):v,n=(T&V)===0?s:y(s),t={i:n,v:M,k:d,a:null,e:null,prev:e,next:u};try{if(i===null){var l=document.createDocumentFragment();l.append(i=j())}return t.e=z(()=>h(i,M,n,m),H),t.e.prev=e&&e.e,t.e.next=u&&u.e,e===null?o||(r.first=t):(e.next=t,e.e.next=t.e),u!==null&&(u.prev=t,u.e.prev=t.e),t}finally{}}function Y(i,r,e){for(var u=i.next?i.next.e.nodes_start:e,v=r?r.e.nodes_start:e,d=i.e.nodes_start;d!==null&&d!==u;){var s=pe(d);v.before(d),d=s}}function x(i,r,e){r===null?i.first=e:(r.next=e,r.e.next=e&&e.e),e!==null&&(e.prev=r,e.e.prev=r&&r.e)}export{Le as e,Oe as i};
 //# sourceMappingURL=each.js.map