@mozaic-ds/web-components 1.0.0-beta.7 → 1.0.0

package/dist/components/modal/README.md

@@ -0,0 +1,28 @@
+# `m-modal`
+
+A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `open` | if `true`, display the modal. | `boolean` |   |
+| `title*` | Title of the modal. | `string` |   |
+| `description` | Description of the modal. | `string` |   |
+| `closable` | if `true`, display the close button. | `boolean` | `true` |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to insert an icon next to the title of the modal. |
+| `default` | Use this slot to insert the content of the modal. |
+| `link` | Use this slot to insert a link in the footer. |
+| `footer` | Use this slot to insert buttons in the footer. |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `update:open` | Fired when the open state changes. | `CustomEvent<boolean>` |
+

package/dist/components/numberbadge/NumberBadge.js

@@ -1,4 +1,4 @@
-import{c as u,p as f,a as g,b as c,f as v,t as p,u as h,e as x,g as z,h as k,i as _,d as y,j as b,r as w}from"../../custom-element.js";var j=v("<div> </div>");const N={hash:"svelte-sb883",code:`/**
+import{c as i,p as m,a as g,b as o,f,t as u,i as v,j as p,k as b,d as h,r as x,e as z,g as k,h as _}from"../../custom-element.js";var w=f("<div> </div>");const y={hash:"svelte-sb883",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-number-badge.svelte-sb883 {color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:0.125rem;font-size:var(--font-size-25, 0.625rem);border-radius:var(--radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1;}.mc-number-badge--m.svelte-sb883 {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:var(--font-size-50, 0.75rem);}.mc-number-badge--accent.svelte-sb883 {color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03);}.mc-number-badge--danger.svelte-sb883 {color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112);}.mc-number-badge--inverse.svelte-sb883 {color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff);}`};function B(d,a){f(a,!0),g(d,N);let s=c(a,"label",7,""),r=c(a,"appearance",7,"standard"),t=c(a,"size",7,"s");function l(e){const o=["mc-number-badge"];return r()&&o.push(`mc-number-badge--${r()}`),t()&&o.push(`mc-number-badge--${t()}`),o.join(" ")}var i={get label(){return s()},set label(e=""){s(e),b()},get appearance(){return r()},set appearance(e="standard"){r(e),b()},get size(){return t()},set size(e="s"){t(e),b()}},n=j(),m=y(n,!0);return w(n),p(e=>{x(n,1,e,"svelte-sb883"),z(m,s())},[()=>h(l(r()))]),k(d,n),_(i)}customElements.define("m-number-badge",u(B,{label:{},appearance:{},size:{}},[],[],!0));export{B as N};
+ */.mc-number-badge.svelte-sb883 {color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:0.125rem;font-size:var(--font-size-25, 0.625rem);border-radius:var(--radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1;}.mc-number-badge--m.svelte-sb883 {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:var(--font-size-50, 0.75rem);}.mc-number-badge--accent.svelte-sb883 {color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03);}.mc-number-badge--danger.svelte-sb883 {color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112);}.mc-number-badge--inverse.svelte-sb883 {color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff);}`};function j(d,r){m(r,!0),g(d,y);let t=o(r,"label",7),n=o(r,"appearance",7,"standard"),s=o(r,"size",7,"s");var c={get label(){return t()},set label(e){t(e),b()},get appearance(){return n()},set appearance(e="standard"){n(e),b()},get size(){return s()},set size(e="s"){s(e),b()}},a=w(),l=h(a,!0);return x(a),u(()=>{z(a,1,k(["mc-number-badge",`mc-number-badge--${n()}`,`mc-number-badge--${s()}`]),"svelte-sb883"),_(l,t())}),v(d,a),p(c)}customElements.define("m-number-badge",i(j,{label:{},appearance:{},size:{}},[],[],!0));export{j as N};
 //# sourceMappingURL=NumberBadge.js.map

package/dist/components/numberbadge/NumberBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/numberbadge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle, BadgeSize } from './NumberBadge.types';\n  interface Props {\n    label: string;\n    appearance: BadgeStyle;\n    size: BadgeSize;\n  }\n\n  let { label = '', appearance = 'standard', size = 's' }: Props = $props();\n\n  function setClasses(style: BadgeStyle) {\n    const classes = ['mc-number-badge'];\n\n    if (appearance) {\n      classes.push(`mc-number-badge--${appearance}`);\n    }\n\n    if (size) {\n      classes.push(`mc-number-badge--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class={setClasses(appearance)}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","appearance","size","setClasses","style","classes","$.clsx"],"mappings":";;+iCAAA,gBAUQ,IAAAA,gBAAQ,EAAE,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,WAE5CC,EAAWC,EAAmB,CAC/B,MAAAC,GAAW,iBAAiB,EAE9B,OAAAJ,EAAU,GACZI,EAAQ,KAAI,oBAAqBJ,EAAU,CAAA,EAAA,EAGzCC,EAAI,GACNG,EAAQ,KAAI,oBAAqBH,EAAI,CAAA,EAAA,EAGhCG,EAAQ,KAAK,GAAG,CACzB,4CAdc,GAAE,yDAAe,WAAU,6CAAS,IAAG,0EAkBpDL,GAAK,GADI,CAAA,IAAAM,EAAAH,EAAWF,EAAU,CAAA,CAAA,CAAA,cAFjC"}
+{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/numberbadge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.\n   */\n  interface Props {\n    /**\n     * Content of the badge.\n     */\n    label: number;\n    /**\n     * Allows to define the badge appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n\n    /**\n     * Allows to define the badge size.\n     */\n    size?: 's' | 'm';\n  }\n\n  let { label, appearance = 'standard', size = 's' }: Props = $props();\n</script>\n\n<div\n  class={[\n    'mc-number-badge',\n    `mc-number-badge--${appearance}`,\n    `mc-number-badge--${size}`,\n  ]}\n>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","$.prop","$$props","appearance","size"],"mappings":";;+iCAAA,oBAsBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,sGAAtB,WAAU,6CAAS,IAAG,wDAK9C,sCACoBD,EAAU,CAAA,uBACVC,GAAI,yBAGzBJ,GAAK,eATR"}

package/dist/components/numberbadge/NumberBadge.spec.js

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import NumberBadge from './NumberBadge.svelte';
+describe('m-number-badge component', () => {
+    it('renders the label correctly', () => {
+        const { container } = render(NumberBadge, { props: { label: 42 } });
+        expect(container.textContent).toContain('42');
+    });
+    it('applies the default appearance and size classes', () => {
+        const { container } = render(NumberBadge, { props: { label: 1 } });
+        const badge = container.querySelector('.mc-number-badge');
+        expect(badge).toHaveClass('mc-number-badge--standard');
+        expect(badge).toHaveClass('mc-number-badge--s');
+    });
+    it('applies custom appearance and size classes', () => {
+        const { container } = render(NumberBadge, {
+            props: { label: 99, appearance: 'danger', size: 'm' },
+        });
+        const badge = container.querySelector('.mc-number-badge');
+        expect(badge).toHaveClass('mc-number-badge--danger');
+        expect(badge).toHaveClass('mc-number-badge--m');
+    });
+    it('renders numeric label as text content', () => {
+        const { container } = render(NumberBadge, { props: { label: 0 } });
+        const badge = container.querySelector('.mc-number-badge');
+        expect(badge?.textContent).toBe('0');
+    });
+});

package/dist/components/numberbadge/NumberBadge.stories.d.ts

@@ -1,14 +1,10 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * A Number badge indicates the status of an entity and can evolve at any time.
- *
- * The `NumberBadge` component is the **Svelte / WebComponent** implementation of the **Number Badge** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/badge/).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const CustomLabel: any;
-export declare const AccentStyle: any;
-export declare const SmallSize: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Standard: Story;
+export declare const Accent: Story;
+export declare const Danger: Story;
+export declare const Inverse: Story;
+export declare const Size: Story;
 //# sourceMappingURL=NumberBadge.stories.d.ts.map

package/dist/components/numberbadge/NumberBadge.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberBadge.stories.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA6BE,IAAI;AA3BT,wBA2BU;AAWV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAOzC,eAAO,MAAM,WAAW,KAAoB,CAAC;AAO7C,eAAO,MAAM,WAAW,KAAoB,CAAC;AAO7C,eAAO,MAAM,SAAS,KAAoB,CAAC"}
+{"version":3,"file":"NumberBadge.stories.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAqBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}

package/dist/components/numberbadge/NumberBadge.stories.js

@@ -1,69 +1,41 @@
-import { action } from 'storybook/actions';
-import { userEvent, within, expect } from 'storybook/test';
-/**
- * A Number badge indicates the status of an entity and can evolve at any time.
- *
- * The `NumberBadge` component is the **Svelte / WebComponent** implementation of the **Number Badge** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/badge/).
- */
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
     title: 'Indicators/Number Badge',
-    tags: ['autodocs', 'new', 'rc', 'version:1.0.0-beta4'],
+    component: 'm-number-badge',
     argTypes: {
-        label: {
-            description: 'Specify the badge label',
-            control: 'text',
-        },
         appearance: {
-            description: 'Specify the badge type',
-            control: { type: 'radio' },
-            options: ['standard', 'accent', 'danger', 'inverse'],
+            control: 'radio',
+            options: ['danger', 'accent', 'inverse', 'standard'],
         },
         size: {
-            description: 'Specify the size of the badge, available sizes are `s`, `m`',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['s', 'm'],
         },
-        change: {
-            name: 'click',
-            action: 'click',
-            table: {
-                category: 'Events',
-            },
-        },
     },
+    args: { label: 99 },
+    render: (args) => html `
+    <m-number-badge
+      label=${ifDefined(args.label)}
+      appearance=${ifDefined(args.appearance)}
+      size=${ifDefined(args.size)}
+    ></m-number-badge>
+  `,
 };
-const Template = (args) => {
-    const primary = document.createElement('m-number-badge');
-    primary.setAttribute('label', args.label || '99');
-    if (args.appearance)
-        primary.setAttribute('appearance', args.appearance);
-    if (args.size)
-        primary.setAttribute('size', args.size || 'm');
-    primary.addEventListener('click', action('click'));
-    return primary;
+export default meta;
+export const Standard = {};
+export const Accent = {
+    args: { appearance: 'accent' },
 };
-export const Default = Template.bind({});
-Default.args = {};
-Default.play = async ({ canvasElement }) => {
-    const badge = canvasElement.querySelector('m-number-badge');
-    expect(badge).toHaveAttribute('label', '99');
+export const Danger = {
+    args: { appearance: 'danger' },
 };
-export const CustomLabel = Template.bind({});
-CustomLabel.args = { label: 'X' };
-CustomLabel.play = async ({ canvasElement }) => {
-    const badge = canvasElement.querySelector('m-number-badge');
-    expect(badge).toHaveAttribute('label', 'X');
-};
-export const AccentStyle = Template.bind({});
-AccentStyle.args = { appearance: 'accent' };
-AccentStyle.play = async ({ canvasElement }) => {
-    const badge = canvasElement.querySelector('m-number-badge');
-    expect(badge).toHaveAttribute('appearance', 'accent');
+export const Inverse = {
+    globals: {
+        backgrounds: { value: 'inverse' },
+    },
+    args: { appearance: 'inverse' },
 };
-export const SmallSize = Template.bind({});
-SmallSize.args = { size: 's' };
-SmallSize.play = async ({ canvasElement }) => {
-    const badge = canvasElement.querySelector('m-number-badge');
-    expect(badge).toHaveAttribute('size', 's');
+export const Size = {
+    args: { size: 'm' },
 };

package/dist/components/numberbadge/NumberBadge.svelte

@@ -1,31 +1,35 @@
 <svelte:options customElement={{ tag: 'm-number-badge' }} />
 
 <script lang="ts">
-  import type { BadgeStyle, BadgeSize } from './NumberBadge.types';
+  /**
+   * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.
+   */
   interface Props {
-    label: string;
-    appearance: BadgeStyle;
-    size: BadgeSize;
-  }
-
-  let { label = '', appearance = 'standard', size = 's' }: Props = $props();
-
-  function setClasses(style: BadgeStyle) {
-    const classes = ['mc-number-badge'];
+    /**
+     * Content of the badge.
+     */
+    label: number;
+    /**
+     * Allows to define the badge appearance.
+     */
+    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
 
-    if (appearance) {
-      classes.push(`mc-number-badge--${appearance}`);
-    }
-
-    if (size) {
-      classes.push(`mc-number-badge--${size}`);
-    }
-
-    return classes.join(' ');
+    /**
+     * Allows to define the badge size.
+     */
+    size?: 's' | 'm';
   }
+
+  let { label, appearance = 'standard', size = 's' }: Props = $props();
 </script>
 
-<div class={setClasses(appearance)}>
+<div
+  class={[
+    'mc-number-badge',
+    `mc-number-badge--${appearance}`,
+    `mc-number-badge--${size}`,
+  ]}
+>
   {label}
 </div>
 

package/dist/components/numberbadge/NumberBadge.svelte.d.ts

@@ -1,8 +1,19 @@
-import type { BadgeStyle, BadgeSize } from './NumberBadge.types';
+/**
+ * A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.
+ */
 interface Props {
-    label: string;
-    appearance: BadgeStyle;
-    size: BadgeSize;
+    /**
+     * Content of the badge.
+     */
+    label: number;
+    /**
+     * Allows to define the badge appearance.
+     */
+    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
+    /**
+     * Allows to define the badge size.
+     */
+    size?: 's' | 'm';
 }
 declare const NumberBadge: import("svelte").Component<Props, {}, "">;
 type NumberBadge = ReturnType<typeof NumberBadge>;

package/dist/components/numberbadge/NumberBadge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE/D,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,UAAU,CAAC;IACvB,IAAI,EAAE,SAAS,CAAC;CACjB;AAgCH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"NumberBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/numberbadge/NumberBadge.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAE1D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAqBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/numberbadge/README.md

@@ -0,0 +1,12 @@
+# `m-number-badge`
+
+A Number Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `label*` | Content of the badge. | `number` |   |
+| `appearance` | Allows to define the badge appearance. | `'danger'` `'accent'` `'inverse'` `'standard'` | `standard` |
+| `size` | Allows to define the badge size. | `'s'` `'m'` | `s` |
+

package/dist/components/overlay/Overlay.js

@@ -1,4 +1,4 @@
-import{c as p,p as y,a as u,b as v,f,d as n,t as g,e as _,h,i as x,j as d,r as b}from"../../custom-element.js";import{s as k}from"../../slot.js";import{s as z}from"../../attributes.js";var O=f('<div><div role="dialog" tabindex="-1"><!></div></div>');const j={hash:"svelte-smp867",code:`/**
+import{c as m,p,a as y,b as r,f as u,d as v,t as f,i as g,j as _,k as n,r as d,e as x,g as h}from"../../custom-element.js";import{s as k}from"../../slot.js";import{s as z}from"../../attributes.js";var O=u('<div><div role="dialog" tabindex="-1"><!></div></div>');const j={hash:"svelte-smp867",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-overlay.svelte-smp867 {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);}.mc-overlay.is-visible.svelte-smp867 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function w(o,s){y(s,!0),u(o,j);let a=v(s,"isvisible",7,!1),t=v(s,"dialoglabel",7);var c={get isvisible(){return a()},set isvisible(e=!1){a(e),d()},get dialoglabel(){return t()},set dialoglabel(e){t(e),d()}},i=O();let r;var l=n(i),m=n(l);return k(m,s,"default",{}),b(l),b(i),g(e=>{r=_(i,1,"mc-overlay svelte-smp867",null,r,e),z(l,"aria-labelledby",t())},[()=>({"is-visible":a()})]),h(o,i),x(c)}customElements.define("m-overlay",p(w,{isvisible:{},dialoglabel:{}},["default"],[],!0));export{w as O};
+ */.mc-overlay.svelte-smp867 {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);}.mc-overlay.is-visible.svelte-smp867 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function w(o,e){p(e,!0),y(o,j);let s=r(e,"isvisible",7),a=r(e,"dialoglabel",7);var b={get isvisible(){return s()},set isvisible(l){s(l),n()},get dialoglabel(){return a()},set dialoglabel(l){a(l),n()}},i=O(),t=v(i),c=v(t);return k(c,e,"default",{}),d(t),d(i),f(()=>{x(i,1,h(["mc-overlay",s()&&"is-visible"]),"svelte-smp867"),z(t,"aria-labelledby",a())}),g(o,i),_(b)}customElements.define("m-overlay",m(w,{isvisible:{},dialoglabel:{}},["default"],[],!0));export{w as O};
 //# sourceMappingURL=Overlay.js.map

package/dist/components/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options customElement=\"m-overlay\" />\n\n<script lang=\"ts\">\n  interface Props {\n    isvisible?: boolean;\n    dialoglabel: string;\n  }\n\n  let { isvisible = false, dialoglabel }: Props = $props();\n</script>\n\n<div class=\"mc-overlay\" class:is-visible={isvisible}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    <!-- @slot Use this slot to insert a centered content inside the overlay -->\n    <slot />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["isvisible","dialoglabel","$.prop","$$props"],"mappings":";;mYAAA,gBAQQ,IAAAA,oBAAY,EAAK,EAAEC,EAAWC,EAAAC,EAAA,cAAA,CAAA,qDAAlB,GAAK,mNAI2BF,GAAW,uBADrBD,EAAS,GAAA,cAFnD"}
+{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-overlay' }} />\n\n<script lang=\"ts\">\n  /**\n   * An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.\n   *\n   * @slot default - Use this slot to insert a centered content inside the overlay.\n   */\n  interface Props {\n    /**\n     * Controls the visibility of the overlay.\n     */\n    isvisible?: boolean;\n    /**\n     * Accessible label for the overlay dialog.\n     */\n    dialoglabel: string;\n  }\n\n  let { isvisible, dialoglabel }: Props = $props();\n</script>\n\n<div class={['mc-overlay', isvisible && 'is-visible']}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    <slot />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["isvisible","$.prop","$$props","dialoglabel"],"mappings":";;mYAAA,oBAmBQA,EAASC,EAAAC,EAAA,YAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,qMAGjB,aAAcF,KAAa,YAAY,CAAA,EAAA,eAAA,wBACAG,GAAW,eAH/D"}

package/dist/components/overlay/Overlay.spec.js

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Overlay from './Overlay.svelte';
+describe('m-overlay component', () => {
+    it('applies is-visible class when isvisible is true', () => {
+        const { container } = render(Overlay, {
+            props: {
+                isvisible: true,
+                dialoglabel: 'test-dialog-label',
+            },
+        });
+        const overlay = container.querySelector('.mc-overlay');
+        expect(overlay).toBeTruthy();
+        expect(overlay).toHaveClass('is-visible');
+        const dialog = container.querySelector('[role="dialog"]');
+        expect(dialog).toBeTruthy();
+        expect(dialog).toHaveAttribute('aria-labelledby', 'test-dialog-label');
+    });
+    it('does not apply is-visible class when isvisible is false or undefined', () => {
+        const { container } = render(Overlay, {
+            props: {
+                dialoglabel: 'test-dialog-label',
+            },
+        });
+        const overlay = container.querySelector('.mc-overlay');
+        expect(overlay).toBeTruthy();
+        expect(overlay).not.toHaveClass('is-visible');
+    });
+});

package/dist/components/overlay/Overlay.stories.d.ts

@@ -1,8 +1,6 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * The `MOverlay` component is the **Svelte / WebComponent** implementation of the **Overlay** component of Mozaic Design System.
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
 //# sourceMappingURL=Overlay.stories.d.ts.map

package/dist/components/overlay/Overlay.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/Overlay.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;GAEG;wBAWE,IAAI;AATT,wBASU;AA2BV,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"Overlay.stories.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/Overlay.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA+BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/components/overlay/Overlay.stories.js

@@ -1,45 +1,37 @@
-import { action } from 'storybook/actions';
-import { userEvent, within, expect } from 'storybook/test';
-/**
- * The `MOverlay` component is the **Svelte / WebComponent** implementation of the **Overlay** component of Mozaic Design System.
- */
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+const meta = {
     title: 'Overlay/Overlay',
-    tags: ['autodocs', 'code-only'],
+    component: 'm-overlay',
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            story: { height: '400px' },
+        },
+    },
+    args: {
+        isvisible: true,
+    },
     argTypes: {
-        isvisible: {
-            description: 'Define if the overlay is visible or not',
-            control: 'boolean',
+        '--overlay-z-index': {
+            description: 'Customise the z-index of the overlay',
+            control: false,
+            table: {
+                category: 'Custom Properties',
+                type: { summary: 'number' },
+                defaultValue: { summary: '2' },
+            },
         },
     },
+    render: (args) => html `
+    <m-overlay
+      isvisible=${ifDefined(args.isvisible)}
+      dialoglabel=${ifDefined(args.dialoglabel)}
+    >
+      ${unsafeHTML(ifDefined(args.default))}
+    </m-overlay>
+  `,
 };
-const Template = (args) => {
-    const wrapper = document.createElement('div');
-    const MOverlay = document.createElement('m-overlay');
-    const trigger = document.createElement('m-button');
-    const label = document.createElement('span');
-    label.innerText = 'Launch Overlay';
-    trigger.appendChild(label);
-    trigger.addEventListener('click', () => {
-        MOverlay.setAttribute('isvisible', 'true');
-        setTimeout(() => {
-            MOverlay.removeAttribute('isvisible');
-        }, 5000);
-    });
-    if (args.isvisible) {
-        MOverlay.setAttribute('isvisible', 'true');
-    }
-    wrapper.appendChild(trigger);
-    wrapper.appendChild(MOverlay);
-    return wrapper;
-};
-export const Default = Template.bind({});
-Default.args = {};
-Default.play = async ({ canvasElement }) => {
-    const MButton = canvasElement.querySelector('m-button');
-    const trigger = MButton?.shadowRoot.querySelector('button');
-    expect(trigger).not.toBeNull();
-    await userEvent.click(MButton);
-    const overlay = canvasElement.querySelector('m-overlay');
-    expect(overlay).toHaveAttribute('isvisible', 'true');
-};
+export default meta;
+export const Default = {};

package/dist/components/overlay/Overlay.svelte

@@ -1,17 +1,27 @@
-<svelte:options customElement="m-overlay" />
+<svelte:options customElement={{ tag: 'm-overlay' }} />
 
 <script lang="ts">
+  /**
+   * An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.
+   *
+   * @slot default - Use this slot to insert a centered content inside the overlay.
+   */
   interface Props {
+    /**
+     * Controls the visibility of the overlay.
+     */
     isvisible?: boolean;
+    /**
+     * Accessible label for the overlay dialog.
+     */
     dialoglabel: string;
   }
 
-  let { isvisible = false, dialoglabel }: Props = $props();
+  let { isvisible, dialoglabel }: Props = $props();
 </script>
 
-<div class="mc-overlay" class:is-visible={isvisible}>
+<div class={['mc-overlay', isvisible && 'is-visible']}>
   <div role="dialog" tabindex="-1" aria-labelledby={dialoglabel}>
-    <!-- @slot Use this slot to insert a centered content inside the overlay -->
     <slot />
   </div>
 </div>

package/dist/components/overlay/Overlay.svelte.d.ts

@@ -1,5 +1,16 @@
+/**
+ * An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.
+ *
+ * @slot default - Use this slot to insert a centered content inside the overlay.
+ */
 interface Props {
+    /**
+     * Controls the visibility of the overlay.
+     */
     isvisible?: boolean;
+    /**
+     * Accessible label for the overlay dialog.
+     */
     dialoglabel: string;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {

package/dist/components/overlay/Overlay.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/Overlay.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAoBH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,OAAO;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Overlay.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/Overlay.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAmBH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,OAAO;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/components/overlay/README.md

@@ -0,0 +1,17 @@
+# `m-overlay`
+
+An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `isvisible` | Controls the visibility of the overlay. | `boolean` |   |
+| `dialoglabel*` | Accessible label for the overlay dialog. | `string` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `default` | Use this slot to insert a centered content inside the overlay. |
+

package/dist/components/pagination/Pagination.js

@@ -1,14 +1,14 @@
-import{c as O,p as S,b as i,q as U,t as _,h,i as q,j as o,e as V,u as W,n as ne,a as de,v as y,l as ce,f as k,s as J,d as N,r as w,m as l,z,g as K,w as B}from"../../custom-element.js";import{i as M}from"../../if.js";import{e as ue,i as fe}from"../../each.js";import{s as x,a as X,f as ve,d as ge}from"../../attributes.js";import"../../legacy.js";import{B as Q}from"../button/Button.js";import{I as T}from"../iconbutton/IconButton.js";import"../../slot.js";import"../loader/Loader.js";var me=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function j(g,a){S(a,!1);let c=i(a,"id",12,void 0),u=i(a,"style",12,void 0),d=i(a,"className",12,void 0),f=i(a,"fill",12,void 0),v=i(a,"size",12,"1.5rem");var m={get id(){return c()},set id(t){c(t),o()},get style(){return u()},set style(t){u(t),o()},get className(){return d()},set className(t){d(t),o()},get fill(){return f()},set fill(t){f(t),o()},get size(){return v()},set size(t){v(t),o()}},n=me();return _(()=>{x(n,"id",c()),X(n,u()),V(n,0,W(d())),x(n,"fill",f())}),h(g,n),q(m)}customElements.define("chevron-left-24",O(j,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var be=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"></path></svg>');function I(g,a){S(a,!1);let c=i(a,"id",12,void 0),u=i(a,"style",12,void 0),d=i(a,"className",12,void 0),f=i(a,"fill",12,void 0),v=i(a,"size",12,"1.5rem");var m={get id(){return c()},set id(t){c(t),o()},get style(){return u()},set style(t){u(t),o()},get className(){return d()},set className(t){d(t),o()},get fill(){return f()},set fill(t){f(t),o()},get size(){return v()},set size(t){v(t),o()}},n=be();return _(()=>{x(n,"id",c()),X(n,u()),V(n,0,W(d())),x(n,"fill",f())}),h(g,n),q(m)}customElements.define("chevron-right-24",O(I,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function pe(g,a){const c=Number(g.target.value);a(c)}var he=k("<option> </option>"),xe=k('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-19eta05"></select></div>'),we=k('<span class="mc-pagination__label svelte-19eta05" aria-current="page"> </span>'),_e=k('<nav class="mc-pagination svelte-19eta05" aria-label="pagination"><!> <!> <!></nav>');const ye={hash:"svelte-19eta05",code:`/**
+import{c as I,p as S,b as o,A as U,t as _,i as h,j as D,k as i,e as V,g as W,v as ne,a as ce,w as y,l as de,f as z,d as N,s as K,m as l,L as k,r as w,x as B,h as O}from"../../custom-element.js";import{i as M}from"../../if.js";import{e as ue,i as fe}from"../../each.js";import{s as x,a as X,d as ve,f as ge}from"../../attributes.js";import"../../legacy.js";import{B as Q}from"../button/Button.js";import{I as T}from"../iconbutton/IconButton.js";import"../../slot.js";import"../loader/Loader.js";var me=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function j(g,a){S(a,!1);let d=o(a,"id",12,void 0),u=o(a,"style",12,void 0),c=o(a,"className",12,void 0),f=o(a,"fill",12,void 0),v=o(a,"size",12,"1.5rem");var m={get id(){return d()},set id(t){d(t),i()},get style(){return u()},set style(t){u(t),i()},get className(){return c()},set className(t){c(t),i()},get fill(){return f()},set fill(t){f(t),i()},get size(){return v()},set size(t){v(t),i()}},n=me();return _(()=>{x(n,"id",d()),X(n,u()),V(n,0,W(c())),x(n,"fill",f())}),h(g,n),D(m)}customElements.define("chevron-left-24",I(j,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var pe=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"></path></svg>');function A(g,a){S(a,!1);let d=o(a,"id",12,void 0),u=o(a,"style",12,void 0),c=o(a,"className",12,void 0),f=o(a,"fill",12,void 0),v=o(a,"size",12,"1.5rem");var m={get id(){return d()},set id(t){d(t),i()},get style(){return u()},set style(t){u(t),i()},get className(){return c()},set className(t){c(t),i()},get fill(){return f()},set fill(t){f(t),i()},get size(){return v()},set size(t){v(t),i()}},n=pe();return _(()=>{x(n,"id",d()),X(n,u()),V(n,0,W(c())),x(n,"fill",f())}),h(g,n),D(m)}customElements.define("chevron-right-24",I(A,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function be(g,a){const d=Number(g.target.value);a(d)}var he=z("<option> </option>"),xe=z('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-19eta05"></select></div>'),we=z('<span class="mc-pagination__label svelte-19eta05" aria-current="page"> </span>'),_e=z('<nav class="mc-pagination svelte-19eta05" aria-label="pagination"><!> <!> <!></nav>');const ye={hash:"svelte-19eta05",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-pagination.svelte-19eta05 {align-items:center;display:flex;justify-content:center;gap:0.5rem;}.mc-pagination__label.svelte-19eta05 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
 
 /* stylelint-disable string-no-newline */.mc-select.svelte-19eta05 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--radius-s, 0.25rem);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;}.mc-select.svelte-19eta05:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-19eta05:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-select.svelte-19eta05:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}
 
-/* stylelint-enable string-no-newline */`};function Ne(g,a){S(a,!0),de(g,ye);let c=i(a,"id",7),u=i(a,"value",15,1),d=i(a,"total",7,10),f=i(a,"compact",7,!1),v=i(a,"selectLabel",7,"Page selector"),m=i(a,"pagelabel",7,"of"),n=i(a,"prefixlabel",7,"Page"),t=y(ce(Number(u())));const P=y(()=>l(t)<=1),L=y(()=>l(t)>=d()),Y=y(()=>Array.from({length:d()},(e,r)=>r+1));function A(){l(P)()||B(t,Number(l(t))-1)}function D(){l(L)()||B(t,Number(l(t))+1)}var Z={get id(){return c()},set id(e){c(e),o()},get value(){return u()},set value(e=1){u(e),o()},get total(){return d()},set total(e=10){d(e),o()},get compact(){return f()},set compact(e=!1){f(e),o()},get selectLabel(){return v()},set selectLabel(e="Page selector"){v(e),o()},get pagelabel(){return m()},set pagelabel(e="of"){m(e),o()},get prefixlabel(){return n()},set prefixlabel(e="Page"){n(e),o()}},C=_e(),F=N(C);{var $=e=>{{let r=z(()=>l(P)());Q(e,{iconOnly:!0,"aria-label":"Previous page",get disabled(){return l(r)},onclick:A,children:(s,b)=>{j(s,{})},$$slots:{default:!0}})}},ee=e=>{{let r=z(()=>l(P)());T(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return l(r)},onclick:A,$$slots:{icon:(s,b)=>{j(s,{slot:"icon"})}}})}};M(F,e=>{f()?e(ee,!1):e($)})}var R=J(F,2);{var te=e=>{var r=xe(),s=N(r);s.__change=[pe,u],ue(s,21,()=>l(Y)(),fe,(b,E)=>{var p=he(),ie=N(p);w(p);var G={};_((oe,H)=>{ve(p,oe),K(ie,`${n()??""}
+/* stylelint-enable string-no-newline */`};function Ne(g,a){S(a,!0),ce(g,ye);let d=o(a,"id",7),u=o(a,"value",15,1),c=o(a,"total",7,10),f=o(a,"compact",7),v=o(a,"selectLabel",7,"Page selector"),m=o(a,"prefixlabel",7,"Page"),n=o(a,"pagelabel",7,"of"),t=y(de(Number(u())));const P=y(()=>l(t)<=1),L=y(()=>l(t)>=c()),Y=y(()=>Array.from({length:c()},(e,s)=>s+1));function F(){l(P)()||B(t,Number(l(t))-1)}function R(){l(L)()||B(t,Number(l(t))+1)}var Z={get id(){return d()},set id(e){d(e),i()},get value(){return u()},set value(e=1){u(e),i()},get total(){return c()},set total(e=10){c(e),i()},get compact(){return f()},set compact(e){f(e),i()},get selectLabel(){return v()},set selectLabel(e="Page selector"){v(e),i()},get prefixlabel(){return m()},set prefixlabel(e="Page"){m(e),i()},get pagelabel(){return n()},set pagelabel(e="of"){n(e),i()}},C=_e(),q=N(C);{var $=e=>{{let s=k(()=>l(P)());Q(e,{iconposition:"only","aria-label":"Previous page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,p)=>{j(r,{slot:"icon"})}}})}},ee=e=>{{let s=k(()=>l(P)());T(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,p)=>{j(r,{slot:"icon"})}}})}};M(q,e=>{f()?e(ee,!1):e($)})}var G=K(q,2);{var te=e=>{var s=xe(),r=N(s);r.__change=[be,u],ue(r,21,()=>l(Y)(),fe,(p,E)=>{var b=he(),oe=N(b);w(b);var H={};_((ie,J)=>{ge(b,ie),O(oe,`${m()??""}
             ${l(E)??""}
-            ${m()??""}
-            ${d()??""}`),G!==(G=H)&&(p.value=(p.__value=H)??"")},[()=>Number(l(E))==Number(l(t)),()=>Number(l(E))]),h(b,p)}),w(s),w(r),_(()=>{x(s,"id",c()),x(s,"aria-label",v()),s.disabled=d()<=1}),ge(s,()=>l(t),b=>B(t,b)),h(e,r)},ae=e=>{var r=we(),s=N(r);w(r),_(()=>K(s,`${n()??""}
+            ${n()??""}
+            ${c()??""}`),H!==(H=J)&&(b.value=(b.__value=J)??"")},[()=>Number(l(E))==Number(l(t)),()=>Number(l(E))]),h(p,b)}),w(r),w(s),_(()=>{x(r,"id",d()),x(r,"aria-label",v()),r.disabled=c()<=1}),ve(r,()=>l(t),p=>B(t,p)),h(e,s)},ae=e=>{var s=we(),r=N(s);w(s),_(()=>O(r,`${m()??""}
       ${u()??""}
-      ${m()??""}
-      ${d()??""}`)),h(e,r)};M(R,e=>{f()?e(ae,!1):e(te)})}var le=J(R,2);{var re=e=>{{let r=z(()=>l(L)());Q(e,{iconOnly:!0,"aria-label":"Next page",get disabled(){return l(r)},onclick:D,children:(s,b)=>{I(s,{})},$$slots:{default:!0}})}},se=e=>{{let r=z(()=>l(L)());T(e,{outlined:!0,"aria-label":"Next page",get disabled(){return l(r)},onclick:D,$$slots:{icon:(s,b)=>{I(s,{slot:"icon"})}}})}};M(le,e=>{f()?e(se,!1):e(re)})}return w(C),h(g,C),q(Z)}ne(["change"]);customElements.define("m-pagination",O(Ne,{id:{},value:{},total:{},compact:{},selectLabel:{},pagelabel:{},prefixlabel:{}},[],[],!0));
+      ${n()??""}
+      ${c()??""}`)),h(e,s)};M(G,e=>{f()?e(ae,!1):e(te)})}var le=K(G,2);{var se=e=>{{let s=k(()=>l(L)());Q(e,{iconposition:"only","aria-label":"Next page",get disabled(){return l(s)},onclick:R,$$slots:{icon:(r,p)=>{A(r,{slot:"icon"})}}})}},re=e=>{{let s=k(()=>l(L)());T(e,{outlined:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:R,$$slots:{icon:(r,p)=>{A(r,{slot:"icon"})}}})}};M(le,e=>{f()?e(re,!1):e(se)})}return w(C),h(g,C),D(Z)}ne(["change"]);customElements.define("m-pagination",I(Ne,{id:{},value:{},total:{},compact:{},selectLabel:{},prefixlabel:{},pagelabel:{}},[],[],!0));
 //# sourceMappingURL=Pagination.js.map