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

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;AAiBH,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,IA4BX,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,34 @@
-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

package/dist/components/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft24/ChevronLeft24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight24/ChevronRight24.svelte","../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} 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\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} 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\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n  }}\n/>\n\n<script lang=\"ts\">\n  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';\n  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n\n  interface Props {\n    id: string;\n    value?: number;\n    total?: number;\n    compact?: boolean;\n    selectLabel?: string;\n    pagelabel?: string;\n    prefixlabel?: string;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact = false,\n    selectLabel = 'Page selector',\n    pagelabel = 'of',\n    prefixlabel = 'Page',\n    ...events\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconOnly\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page}\n          <option\n            value={Number(page)}\n            selected={Number(page) == Number(selected)}\n          >\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button\n      iconOnly\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","style","className","fill","size","onSelectChange","event","value","selected","$.prop","$$props","total","compact","selectLabel","pagelabel","prefixlabel","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","$$render","alternate","consequent","$.each","select","page","$.bind_select_value","$$value","alternate_1","consequent_1","alternate_2","consequent_2"],"mappings":"6wBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,+YCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,gHC8CWE,GAAeC,EAAYC,EAAE,CAC9B,MAAAC,EAAW,OAAQF,EAAM,OAA6B,KAAK,EACjEC,EAAQC,CAAQ,CAClB;;;;;;2DAxDF,sBAwBIR,EAAES,EAAAC,EAAA,KAAA,CAAA,EACFH,iBAAkB,CAAC,EACnBI,gBAAQ,EAAE,EACVC,kBAAU,EAAK,EACfC,sBAAc,eAAe,EAC7BC,oBAAY,IAAI,EAChBC,sBAAc,MAAM,EAIlBP,EAAQQ,EAAAC,GAAU,OAAOV,EAAK,CAAA,CAAA,CAAA,QAE5BW,EAAWF,EAAA,IAAAG,EAAgBX,CAAQ,GAAI,CAAC,EACxCY,EAAUJ,EAAA,IAAAG,EAAgBX,CAAQ,GAAIG,GAAK,EAE3CU,EAAKL,EAAA,IAAgB,MAAM,MAAO,OAAQL,EAAK,CAAA,EAAA,CAAKW,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAjB,EAAW,OAAMW,EAACX,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAkB,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAjB,EAAW,OAAMW,EAACX,CAAQ,GAAI,CAAC,CAEnC,qFA1BoB,EAAC,+CACX,GAAE,mDACA,GAAK,2DACD,gBAAe,uDACjB,KAAI,2DACF,OAAM,oDAkCRU,CAAW,EAAA,CAAA,oFACZM,2EAQCN,CAAW,EAAA,CAAA,oFACZM,yDAdPZ,EAAO,EAAAe,EAAAC,GAAA,EAAA,EAAAD,EAAAE,CAAA,2DA4BGxB,GAAcE,CAAA,EAEjBuB,GAAAC,EAAA,GAAA,IAAAZ,EAAAE,CAAK,UAAMW,IAAI,8DAKjBjB,EAAW,GAAA,EAAA;AAAA,gBACXiB,CAAI,GAAA,EAAA;AAAA,cACJlB,EAAS,GAAA,EAAA;AAAA,cACTH,EAAK,GAAA,EAAA,EAAA,2CALI,IAAA,OAAMQ,EAACa,CAAI,CAAA,GAAK,SAAOxB,CAAQ,CAAA,EADlC,IAAA,SAAOwB,CAAI,CAAA,6DAPVnB,GAAW,EACbkB,EAAA,SAAApB,EAAK,GAAI,IACPsB,GAAAF,EAAA,IAAAZ,EAAAX,CAAQ,OAARA,EAAQ0B,CAAA,CAAA,qDAkBrBnB,EAAW,GAAA,EAAA;AAAA,QACXR,EAAK,GAAA,EAAA;AAAA,QACLO,EAAS,GAAA,EAAA;AAAA,QACTH,EAAK,GAAA,EAAA,EAAA,CAAA,kBA5BJC,EAAO,EAAAe,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,6CAoCChB,CAAU,EAAA,CAAA,gFACXM,2EAQCN,CAAU,EAAA,CAAA,gFACXM,0DAdPd,EAAO,EAAAe,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,2BAvDf","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Pagination.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft24/ChevronLeft24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight24/ChevronRight24.svelte","../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} 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\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} 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\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n  }}\n/>\n\n<script lang=\"ts\">\n  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';\n  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  /**\n   * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the pagination.\n     */\n    id: string;\n    /**\n     * The current value of the selected page.\n     */\n    value: number;\n    /**\n     * If `true`, display a compact version without the select.\n     */\n    compact?: boolean;\n    /**\n     * Total number of pages.\n     */\n    total?: number;\n    /**\n     * Accessible label for the select of the pagination.\n     */\n    selectLabel?: string;\n    /**\n     * Word displayed before the current page number.\n     */\n    prefixlabel?: string;\n    /**\n     * Word displayed between the current page number and total page number.\n     */\n    pagelabel?: string;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact,\n    selectLabel = 'Page selector',\n    prefixlabel = 'Page',\n    pagelabel = 'of',\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconposition=\"only\"\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Previous page\" disabled={isFirstPage()} onclick={previous}>\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page, index (index)}\n          <option value={Number(page)} selected={Number(page) == Number(selected)}>\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button iconposition=\"only\" aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      <ChevronRight24 slot=\"icon\" />\n    </Button>\n  {:else}\n    <IconButton outlined aria-label=\"Next page\" disabled={isLastPage()} onclick={next}>\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","style","className","fill","size","onSelectChange","event","value","selected","$.prop","$$props","total","compact","selectLabel","prefixlabel","pagelabel","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","$$render","alternate","consequent","$.each","select","page","$.bind_select_value","$$value","alternate_1","consequent_1","alternate_2","consequent_2"],"mappings":"uxBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,+YCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,gHCmEWE,GAAeC,EAAYC,EAAE,CAC9B,MAAAC,EAAW,OAAQF,EAAM,OAA6B,KAAK,EACjEC,EAAQC,CAAQ,CAClB;;;;;;2DA7EF,sBA8CIR,EAAES,EAAAC,EAAA,KAAA,CAAA,EACFH,iBAAkB,CAAC,EACnBI,gBAAQ,EAAE,EACVC,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,sBAAc,eAAe,EAC7BC,sBAAc,MAAM,EACpBC,oBAAY,IAAI,EAGdP,EAAQQ,EAAAC,GAAU,OAAOV,EAAK,CAAA,CAAA,CAAA,QAE5BW,EAAWF,EAAA,IAAAG,EAAgBX,CAAQ,GAAI,CAAC,EACxCY,EAAUJ,EAAA,IAAAG,EAAgBX,CAAQ,GAAIG,GAAK,EAE3CU,EAAKL,EAAA,IAAgB,MAAM,MAAO,OAAQL,EAAK,CAAA,EAAA,CAAKW,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAjB,EAAW,OAAMW,EAACX,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAkB,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAjB,EAAW,OAAMW,EAACX,CAAQ,GAAI,CAAC,CAEnC,qFAzBoB,EAAC,+CACX,GAAE,8GAEI,gBAAe,2DACf,OAAM,uDACR,KAAI,oDAiCJU,CAAW,EAAA,CAAA,4FACZM,uEAK+CN,CAAW,EAAA,CAAA,oFAAaM,yDAV9EZ,EAAO,EAAAe,EAAAC,GAAA,EAAA,EAAAD,EAAAE,CAAA,2DAuBGxB,GAAcE,CAAA,EAEjBuB,GAAAC,EAAA,GAAA,IAAAZ,EAAAE,CAAK,UAAMW,IAAI,8DAEjBlB,EAAW,GAAA,EAAA;AAAA,gBACXkB,CAAI,GAAA,EAAA;AAAA,cACJjB,EAAS,GAAA,EAAA;AAAA,cACTJ,EAAK,GAAA,EAAA,EAAA,2CAJ+B,IAAA,OAAMQ,EAACa,CAAI,CAAA,GAAK,SAAOxB,CAAQ,CAAA,EAAvD,IAAA,SAAOwB,CAAI,CAAA,6DANhBnB,GAAW,EACbkB,EAAA,SAAApB,EAAK,GAAI,IACPsB,GAAAF,EAAA,IAAAZ,EAAAX,CAAQ,OAARA,EAAQ0B,CAAA,CAAA,qDAerBpB,EAAW,GAAA,EAAA;AAAA,QACXP,EAAK,GAAA,EAAA;AAAA,QACLQ,EAAS,GAAA,EAAA;AAAA,QACTJ,EAAK,GAAA,EAAA,EAAA,CAAA,kBAzBJC,EAAO,EAAAe,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,6CA8BkDhB,CAAU,EAAA,CAAA,wFAAaM,uEAI9BN,CAAU,EAAA,CAAA,gFAAaM,0DALzEd,EAAO,EAAAe,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,2BA/Cf","x_google_ignoreList":[0,1]}

package/dist/components/pagination/Pagination.spec.js

@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Pagination from './Pagination.svelte';
+import { tick } from 'svelte';
+describe('m-pagination component', () => {
+    const baseProps = {
+        id: 'test-pagination',
+        value: 1,
+        total: 5,
+        selectLabel: 'Page selector',
+        prefixlabel: 'Page ',
+        pagelabel: ' of ',
+    };
+    it('renders with correct initial state', () => {
+        const { container, getByLabelText } = render(Pagination, {
+            props: baseProps,
+        });
+        const select = getByLabelText(baseProps.selectLabel);
+        expect(select.value).toBe('1');
+        const prevBtn = container.querySelector('button[aria-label="Previous page"]');
+        const nextBtn = container.querySelector('button[aria-label="Next page"]');
+        expect(prevBtn).toBeDisabled();
+        expect(nextBtn).not.toBeDisabled();
+    });
+    it('updates value when select changes', async () => {
+        const { getByLabelText } = render(Pagination, {
+            props: baseProps,
+        });
+        const select = getByLabelText(baseProps.selectLabel);
+        await fireEvent.change(select, { target: { value: '3' } });
+        await tick();
+        expect(select.value).toBe('3');
+    });
+    it('previous and next buttons navigate pages correctly', async () => {
+        const { container, getByLabelText } = render(Pagination, {
+            props: baseProps,
+        });
+        const prevBtn = container.querySelector('button[aria-label="Previous page"]');
+        const nextBtn = container.querySelector('button[aria-label="Next page"]');
+        const select = getByLabelText(baseProps.selectLabel);
+        expect(prevBtn.disabled).toBe(true);
+        await fireEvent.click(nextBtn);
+        await tick();
+        expect(select.value).toBe('2');
+        expect(prevBtn.disabled).toBe(false);
+        await fireEvent.click(prevBtn);
+        await tick();
+        expect(select.value).toBe('1');
+        expect(prevBtn.disabled).toBe(true);
+    });
+    it('disables next button on last page', async () => {
+        const props = { ...baseProps, value: 5, total: 5 };
+        const { container } = render(Pagination, { props });
+        const nextBtn = container.querySelector('button[aria-label="Next page"]');
+        expect(nextBtn.disabled).toBe(true);
+        const prevBtn = container.querySelector('button[aria-label="Previous page"]');
+        expect(prevBtn.disabled).toBe(false);
+    });
+    it('renders compact version correctly', () => {
+        const props = { ...baseProps, compact: true };
+        const { container, getByText } = render(Pagination, { props });
+        expect(container.querySelector('select')).toBeNull();
+        expect(getByText(/Page 1 of 5/)).toBeTruthy();
+    });
+});

package/dist/components/pagination/Pagination.stories.d.ts

@@ -1,12 +1,9 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages.
- * It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently.
- * Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Compact: any;
-export declare const LongList: 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;
+export declare const First: Story;
+export declare const Last: Story;
+export declare const Compact: Story;
 //# sourceMappingURL=Pagination.stories.d.ts.map

package/dist/components/pagination/Pagination.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;GAIG;wBA0CE,IAAI;AAxCT,wBAwCU;AAmBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAiBzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAOzC,eAAO,MAAM,QAAQ,KAAoB,CAAC"}
+{"version":3,"file":"Pagination.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/Pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAoBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/pagination/Pagination.stories.js

@@ -1,97 +1,43 @@
-import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages.
- * It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently.
- * Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.
- */
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
     title: 'Navigation/Pagination',
-    tags: ['autodocs', 'beta'],
-    argTypes: {
-        id: {
-            description: 'Unique ID of the pagination component',
-            control: 'text',
-        },
-        value: {
-            description: 'Current page number (1-based)',
-            control: { type: 'number', min: 1 },
-        },
-        total: {
-            description: 'Total number of pages',
-            control: { type: 'number', min: 1 },
-        },
-        compact: {
-            description: 'Display pagination in compact mode (icons and label only)',
-            control: { type: 'boolean' },
-        },
-        selectLabel: {
-            description: 'Aria label for the select element',
-            control: 'text',
-        },
-        prefixlabel: {
-            description: 'Label prefix before the page number',
-            control: 'text',
-        },
-        pagelabel: {
-            description: 'Label suffix after the page number',
-            control: 'text',
-        },
-        changePage: {
-            description: 'Triggered when a new page is selected',
-            action: 'changePage',
-            table: {
-                category: 'Events',
-            },
-        },
+    component: 'm-pagination',
+    args: {
+        id: 'paginationId',
+        value: 10,
+        total: 99,
+        selectLabel: 'Select page',
     },
+    render: (args) => html `
+    <m-pagination
+      id=${ifDefined(args.id)}
+      value=${ifDefined(args.value)}
+      compact=${ifDefined(args.compact)}
+      total=${ifDefined(args.total)}
+      selectLabel=${ifDefined(args.selectLabel)}
+      prefixlabel=${ifDefined(args.prefixlabel)}
+      pagelabel=${ifDefined(args.pagelabel)}
+    ></m-pagination>
+  `,
 };
-const Template = (args) => {
-    const el = document.createElement('m-pagination');
-    el.setAttribute('id', args.id || 'paginationID');
-    el.setAttribute('value', args.value?.toString() || '1');
-    el.setAttribute('total', args.total?.toString() || '10');
-    if (args.compact)
-        el.setAttribute('compact', 'true');
-    if (args.selectLabel)
-        el.setAttribute('selectLabel', args.selectLabel);
-    if (args.prefixlabel)
-        el.setAttribute('prefixlabel', args.prefixlabel);
-    if (args.pagelabel)
-        el.setAttribute('pagelabel', args.pagelabel);
-    el.changePage = action('changePage');
-    return el;
-};
-export const Default = Template.bind({});
-Default.args = {
-    id: 'paginationID',
-    value: 1,
-    total: 5,
-    prefixlabel: 'Page',
-    pagelabel: 'of',
-};
-Default.play = async ({ canvasElement }) => {
-    const pagination = canvasElement.querySelector('m-pagination');
-    const select = pagination?.shadowRoot?.querySelector('select');
-    expect(pagination).not.toBeNull();
-    await userEvent.selectOptions(select, '3');
-    expect(select).toHaveValue('3');
-};
-export const Compact = Template.bind({});
-Compact.args = {
-    value: 1,
-    total: 3,
-    compact: true,
+export default meta;
+export const Default = {};
+export const First = {
+    args: {
+        id: 'firstId',
+        value: 1,
+    },
 };
-export const LongList = Template.bind({});
-LongList.args = {
-    value: 50,
-    total: 500,
+export const Last = {
+    args: {
+        id: 'lastId',
+        value: 99,
+    },
 };
-LongList.play = async ({ canvasElement }) => {
-    const pagination = canvasElement.querySelector('m-pagination');
-    const select = pagination?.shadowRoot?.querySelector('select');
-    expect(select).toBeInTheDocument();
-    await userEvent.selectOptions(select, '51');
-    expect(select).toHaveValue('51');
+export const Compact = {
+    args: {
+        id: 'compactId',
+        compact: true,
+    },
 };