@mozaic-ds/web-components 1.5.0 → 1.6.0

package/dist/components/pageheader/PageHeader.js

@@ -0,0 +1,24 @@
+import{c as Z,e as $,a as ee,p as s,k as i,t as F,b as E,d as te,f as P,j as a,i as o,r as n,s as ae,h as ne,m as G}from"../../custom-element.js";import{i as g}from"../../if.js";import{s as j}from"../../slot.js";import{b as re}from"../../this.js";import{I as J}from"../iconbutton/IconButton.js";import{S as se}from"../statusbadge/StatusBadge.js";import{t as oe,A as le}from"../../Condition20.js";import"../../branches.js";import"../../attributes.js";import"../loader/Loader.js";import"../statusdot/StatusDot.js";var ie=P('<span class="mc-page-header__extra-info svelte-nslnrx"> </span>'),de=P('<div class="mc-page-header__info-wrapper svelte-nslnrx"><!> <!></div>'),ce=P('<div><div class="mc-page-header__top-wrapper svelte-nslnrx"><div class="mc-page-header__top-content svelte-nslnrx"><!> <div class="mc-page-header__content-wrapper svelte-nslnrx"><span class="mc-page-header__title svelte-nslnrx"> </span> <!> <!></div></div> <div class="mc-page-header__actions-wrapper svelte-nslnrx"><span class="mc-page-header__burger-menu svelte-nslnrx"><!></span> <div class="mc-page-header__actions-content svelte-nslnrx"><!></div></div></div> <div class="mc-page-header__tabs svelte-nslnrx"><!></div></div>');const me={hash:"svelte-nslnrx",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-page-header.svelte-nslnrx,
+.mc-page-header.svelte-nslnrx :host {--tabs-list-padding: 0.5rem 1rem;}
+@media screen and (min-width: 680px) {.mc-page-header.svelte-nslnrx,
+  .mc-page-header.svelte-nslnrx :host {--tabs-list-padding: 0.5rem 2.5rem;}
+}.mc-page-header--with-shadow.svelte-nslnrx {box-shadow:var(--shadow-bottom-xs-x, 0px) var(--shadow-bottom-xs-y, 3px) var(--shadow-bottom-xs-blur, 5px) var(--shadow-bottom-xs-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-xs-opacity, 15%));}.mc-page-header__top-wrapper.svelte-nslnrx {padding:0 0 0.75rem;display:flex;flex-direction:column-reverse;justify-content:space-between;background-color:var(--page-header-color-background, #ffffff);}
+@media screen and (min-width: 680px) {.mc-page-header__top-wrapper.svelte-nslnrx {padding:0.75rem 2.5rem;flex-direction:row;gap:2rem;}
+}.mc-page-header__top-content.svelte-nslnrx {padding:0.5rem 0 0 0;display:flex;gap:0.25rem;align-items:center;}
+@media screen and (min-width: 680px) {.mc-page-header__top-content.svelte-nslnrx {padding:0.5rem 0;gap:0.75rem;}
+}.mc-page-header__content-wrapper.svelte-nslnrx {display:flex;flex-direction:column;gap:0.5rem;}.mc-page-header__title.svelte-nslnrx {font-size:var(--font-size-200, 1.125rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--page-header-color-text-title, #000000);}
+@media screen and (min-width: 680px) {.mc-page-header__title.svelte-nslnrx {font-size:var(--font-size-300, 1.5rem);}
+}.mc-page-header__info-wrapper.svelte-nslnrx {display:flex;align-items:center;gap:0.5rem;}.mc-page-header__extra-info.svelte-nslnrx {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--page-header-color-text-extra-info, #404040);}.mc-page-header__actions-wrapper.svelte-nslnrx {display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid var(--divider-color-primary, #cccccc);padding-right:1rem;}
+@media screen and (min-width: 680px) {.mc-page-header__actions-wrapper.svelte-nslnrx {border-bottom:none;padding-right:0;}
+}.mc-page-header__actions-wrapper.svelte-nslnrx .mc-page-header__burger-menu:where(.svelte-nslnrx) {display:inline-flex;}
+@media screen and (min-width: 680px) {.mc-page-header__actions-wrapper.svelte-nslnrx .mc-page-header__burger-menu:where(.svelte-nslnrx) {display:none;}
+}.mc-page-header__actions-content.svelte-nslnrx {display:flex;align-items:center;}
+@media screen and (min-width: 680px) {.mc-page-header__actions-content.svelte-nslnrx {gap:1rem;}
+}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}.mc-page-header__tabs.svelte-nslnrx {border-top:1px solid var(--divider-color-primary, #cccccc);}`};function pe(S,t){$(t,!0),ee(S,me);let h=s(t,"title",7),_=s(t,"shadow",7),x=s(t,"backbutton",7),d=s(t,"extrainfo",7),c=s(t,"status",7),v=s(t,"statuslabel",7),u=s(t,"onBack",7),f=s(t,"onTogglemenu",7),b;function A(e,r,p){r?.();const z=new CustomEvent(e,{detail:p,bubbles:!0,composed:!0});b.dispatchEvent(z)}var K={get title(){return h()},set title(e){h(e),o()},get shadow(){return _()},set shadow(e){_(e),o()},get backbutton(){return x()},set backbutton(e){x(e),o()},get extrainfo(){return d()},set extrainfo(e){d(e),o()},get status(){return c()},set status(e){c(e),o()},get statuslabel(){return v()},set statuslabel(e){v(e),o()},get onBack(){return u()},set onBack(e){u(e),o()},get onTogglemenu(){return f()},set onTogglemenu(e){f(e),o()}},m=ce(),w=a(m),k=a(w),I=a(k);{var L=e=>{J(e,{ghost:!0,"aria-label":"Back button",onclick:()=>A("back",u()),$$slots:{icon:(r,p)=>{le(r,{slot:"icon"})}}})};g(I,e=>{x()&&e(L)})}var C=i(I,2),y=a(C),N=a(y,!0);n(y);var D=i(y,2);{var O=e=>{var r=de(),p=a(r);{var z=l=>{se(l,{get label(){return v()},get status(){return c()}})};g(p,l=>{v()&&c()&&l(z)})}var W=i(p,2);{var X=l=>{var T=ie(),Y=a(T,!0);n(T),F(()=>G(Y,d())),E(l,T)};g(W,l=>{d()&&l(X)})}n(r),E(e,r)};g(D,e=>{(c()||d())&&e(O)})}var Q=i(D,2);j(Q,t,"content",{},null),n(C),n(k);var H=i(k,2),B=a(H),R=a(B);J(R,{ghost:!0,"aria-label":"Burger menu",onclick:()=>A("toggle-menu",f()),$$slots:{icon:(e,r)=>{oe(e,{slot:"icon"})}}}),n(B);var M=i(B,2),U=a(M);j(U,t,"actions",{},null),n(M),n(H),n(w);var q=i(w,2),V=a(q);return j(V,t,"tabs",{},null),n(q),n(m),re(m,e=>b=e,()=>b),F(()=>{ae(m,1,ne({"mc-page-header":!0,"mc-page-header--with-shadow":_()}),"svelte-nslnrx"),G(N,h())}),E(S,m),te(K)}customElements.define("m-page-header",Z(pe,{backbutton:{attribute:"backbutton",reflect:!0,type:"Boolean"},title:{},shadow:{},extrainfo:{},status:{},statuslabel:{},onBack:{},onTogglemenu:{}},["content","actions","tabs"],[],{mode:"open"}));
+//# sourceMappingURL=PageHeader.js.map

package/dist/components/pageheader/PageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","sources":["../../../src/components/pageheader/PageHeader.svelte"],"sourcesContent":["<svelte:options customElement={{ \n  tag: 'm-page-header',\n  props: {\n      backbutton: { reflect: true, type: 'Boolean', attribute: 'backbutton' },\n    },\n}} />\n\n<script lang=\"ts\">\n  import IconButton from '../iconbutton/IconButton.svelte';\n  import StatusBadge from '../statusbadge/StatusBadge.svelte';\n  import {\n    ArrowBack24,\n    Menu24,\n  } from '@mozaic-ds/icons-svelte';\n  /**\n   * The Page Header is a fundamental component that structures the top part of an interface, serving as a cognitive anchor point for users. It establishes page context, facilitates navigation, and provides the main actions available within the current scope.\n   *\n   * @slot content - Use this slot to insert any content below the Page Header top content.\n   * @slot actions - Use this slot to insert action items in the top content.\n   * @slot tabs - Use this slot to insert a tab in the header.\n   * @event back {CustomEvent<void>} - Emits when the back button is clicked.\n   * @event toggle-menu {CustomEvent<void>} - Emits when the burger menu button is clicked.\n   */\n\n  interface Props {\n    /**\n     * Main title displayed in the page header.\n     */\n    title: string;\n    /**\n     * Enables a drop shadow under the page header.\n     */\n    shadow?: boolean;\n    /**\n     * Displays a back icon button in the header.\n     */\n    backbutton?: boolean;\n    /**\n     * Component status.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n    /**\n     * Label text displayed inside the status badge.\n     */\n    statuslabel?: string;\n    /**\n     * Additional information text shown below the title.\n     */\n    extrainfo?: string;\n    /**\n     * The callback triggered on click on back button.\n     */\n    onBack?: () => void;\n    /**\n     * The callback triggered on click on menu button.\n     */\n    onTogglemenu?: () => void;\n  }\n\n  let {\n    title,\n    shadow,\n    backbutton,\n    extrainfo,\n    status,\n    statuslabel,\n    onBack,\n    onTogglemenu,\n  }: Props = $props();\n\n  let element: HTMLElement;\n\n  function handleEvent(\n    name: string,\n    callback?: (value?: string | number | boolean) => void,\n    value?: string | number | boolean,\n  ) {\n    callback?.();\n\n    const event = new CustomEvent(name, {\n      detail: value,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  }\n</script>\n\n<div\n  bind:this={element}\n  class={{\n    'mc-page-header': true,\n    'mc-page-header--with-shadow': shadow,\n  }}\n>\n  <div class=\"mc-page-header__top-wrapper\">\n    <div class=\"mc-page-header__top-content\">\n      {#if backbutton}\n        <IconButton ghost aria-label=\"Back button\" onclick={() => handleEvent('back', onBack)}>\n          <ArrowBack24 slot=\"icon\" />\n        </IconButton>\n      {/if}\n\n      <div class=\"mc-page-header__content-wrapper\">\n        <span class=\"mc-page-header__title\">\n          {title}\n        </span>\n\n        {#if status || extrainfo}\n          <div class=\"mc-page-header__info-wrapper\">\n            {#if statuslabel && status}\n              <StatusBadge label={statuslabel} {status} />\n            {/if}\n\n            {#if extrainfo}\n              <span class=\"mc-page-header__extra-info\">\n                {extrainfo}\n              </span>\n            {/if}\n          </div>\n        {/if}\n\n        <slot name=\"content\" />\n      </div>\n    </div>\n\n    <div class=\"mc-page-header__actions-wrapper\">\n      <span class=\"mc-page-header__burger-menu\">\n        <IconButton\n          ghost\n          aria-label=\"Burger menu\"\n          onclick={() => handleEvent('toggle-menu', onTogglemenu)}\n        >\n          <Menu24 slot=\"icon\" />\n        </IconButton>\n      </span>\n\n      <div class=\"mc-page-header__actions-content\">\n        <slot name=\"actions\"/>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"mc-page-header__tabs\">\n    <slot name=\"tabs\"/>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/page-header';\n</style>\n"],"names":["title","$.prop","$$props","shadow","backbutton","extrainfo","status","statuslabel","onBack","onTogglemenu","element","handleEvent","name","callback","value","event","div","root","div_1","$.child","div_2","IconButton","$$anchor","ArrowBack24","$$render","consequent","div_3","$.sibling","node","span","div_4","root_3","StatusBadge","consequent_1","span_1","root_5","consequent_2","consequent_3","div_5","span_2","node_5","Menu24","div_6","div_7","$.reset","$$value","$.append"],"mappings":";;;;;;;;;;;;;;;;;;;;;;qHAOA,sBAqDIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,EAAUH,EAAAC,EAAA,aAAA,CAAA,EACVG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAML,EAAAC,EAAA,SAAA,CAAA,EACNK,EAAWN,EAAAC,EAAA,cAAA,CAAA,EACXM,EAAMP,EAAAC,EAAA,SAAA,CAAA,EACNO,EAAYR,EAAAC,EAAA,eAAA,CAAA,EAGVQ,EAEK,SAAAC,EACPC,EACAC,EACAC,EACA,CACAD,IAAQ,EAEF,MAAAE,EAAK,IAAO,YAAYH,GAC5B,OAAQE,EACR,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBJ,EAAQ,cAAcK,CAAK,CAC7B,mbAGDC,EAAAC,GAAA,EAOEC,EAAGC,EAPLH,CAAA,EAQII,IADFF,CAAG,MACDE,CAAG,aAECC,EAAUC,EAAA,iDAA+CX,EAAY,OAAQH,EAAM,CAAA,wBACjFe,GAAWD,EAAA,CAAA,KAAA,MAAA,CAAA,eAFXlB,EAAU,GAAAoB,EAAAC,CAAA,QAMdC,EAAGC,EAAAC,EAAA,CAAA,EACDC,IADFH,CAAG,MACDG,EAAI,EAAA,IAAJA,CAAI,UAAJA,EAAI,CAAA,iBAKFC,EAAGC,GAAA,MAAHD,CAAG,aAECE,GAAWV,EAAA,oBAAQf,EAAW,uBAAGD,EAAM,cADrCC,EAAW,GAAID,KAAMkB,EAAAS,CAAA,gCAKvBC,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YACF7B,EAAS,CAAA,CAAA,MADX6B,CAAI,WADF7B,EAAS,GAAAmB,EAAAY,CAAA,MALfN,CAAG,MAAHA,CAAG,YADDxB,EAAM,GAAID,MAASmB,EAAAa,CAAA,4CALzBX,CAAG,IAPLN,CAAG,EA8BH,IAAAkB,IA9BAlB,EAAG,CAAA,EA+BDmB,IADFD,CAAG,MACDC,CAAI,EACFlB,EAAAmB,EAAA,iDAGgB7B,EAAY,cAAeF,EAAY,CAAA,wBAErDgC,GAAMnB,EAAA,CAAA,KAAA,MAAA,CAAA,QANViB,CAAI,EAUJ,IAAAG,IAVAH,EAAI,CAAA,MAUJG,CAAG,6BAAHA,CAAG,IAXLJ,CAAG,IA/BLpB,CAAG,EAgDH,IAAAyB,IAhDAzB,EAAG,CAAA,MAgDHyB,CAAG,iCAAHA,CAAG,EAvDLC,EAAA5B,CAAA,KAAAA,EAAA6B,GACYnC,QAAAA,CAAO,YADnBM,QAGG,iBAAkB,GAClB,8BAA+Bb,EAAM,yBAa9BH,GAAK,IAjBf8C,EAAAxB,EAAAN,CAAA,OAFO"}

package/dist/components/pageheader/PageHeader.spec.js

@@ -0,0 +1,75 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect, vi } from 'vitest';
+import PageHeader from './PageHeader.svelte';
+describe('PageHeader', () => {
+    describe('Basic rendering', () => {
+        it('renders the title', () => {
+            const { getByText } = render(PageHeader, { title: 'My Page' });
+            expect(getByText('My Page')).toBeTruthy();
+        });
+        it('applies shadow class when shadow is true', () => {
+            const { container } = render(PageHeader, {
+                title: 'My Page',
+                shadow: true,
+            });
+            expect(container.querySelector('.mc-page-header--with-shadow')).toBeTruthy();
+        });
+        it('renders back button when backbutton is true', () => {
+            const { getByLabelText } = render(PageHeader, {
+                title: 'My Page',
+                backbutton: true,
+            });
+            expect(getByLabelText('Back button')).toBeTruthy();
+        });
+        it('renders extra info when provided', () => {
+            const { getByText } = render(PageHeader, {
+                title: 'My Page',
+                extrainfo: 'Extra info',
+            });
+            expect(getByText('Extra info')).toBeTruthy();
+        });
+        it('renders status badge if status and statuslabel are provided', () => {
+            const { getByText } = render(PageHeader, {
+                title: 'My Page',
+                status: 'success',
+                statuslabel: 'OK',
+            });
+            expect(getByText('OK')).toBeTruthy();
+        });
+        it('always renders tabs slot container', () => {
+            const { container } = render(PageHeader, {
+                title: 'Page title',
+            });
+            expect(container.querySelector('.mc-page-header__tabs')).toBeTruthy();
+        });
+    });
+    describe('Events and callbacks', () => {
+        it('calls onBack and dispatches "back" event when back button is clicked', async () => {
+            const onBack = vi.fn();
+            const { getByLabelText, container } = render(PageHeader, {
+                title: 'Page',
+                backbutton: true,
+                onBack,
+            });
+            const root = container.querySelector('.mc-page-header');
+            const dispatched = vi.fn();
+            root.addEventListener('back', dispatched);
+            await fireEvent.click(getByLabelText('Back button'));
+            expect(onBack).toHaveBeenCalled();
+            expect(dispatched).toHaveBeenCalled();
+        });
+        it('calls onTogglemenu and dispatches "toggle-menu" event when burger menu is clicked', async () => {
+            const onTogglemenu = vi.fn();
+            const { getByLabelText, container } = render(PageHeader, {
+                title: 'Page',
+                onTogglemenu,
+            });
+            const root = container.querySelector('.mc-page-header');
+            const dispatched = vi.fn();
+            root.addEventListener('toggle-menu', dispatched);
+            await fireEvent.click(getByLabelText('Burger menu'));
+            expect(onTogglemenu).toHaveBeenCalled();
+            expect(dispatched).toHaveBeenCalled();
+        });
+    });
+});

package/dist/components/pageheader/PageHeader.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './PageHeader.svelte';
+import '../iconbutton/IconButton.svelte';
+import '../select/Select.svelte';
+import '../tabs/Tabs.svelte';
+import '../tab/Tab.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Basic: Story;
+//# sourceMappingURL=PageHeader.stories.d.ts.map

package/dist/components/pageheader/PageHeader.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/pageheader/PageHeader.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iCAAiC,CAAC;AACzC,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,mBAAmB,CAAC;AAG3B,QAAA,MAAM,IAAI,EAAE,IA4DX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC"}

package/dist/components/pageheader/PageHeader.stories.js

@@ -0,0 +1,82 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './PageHeader.svelte';
+import '../iconbutton/IconButton.svelte';
+import '../select/Select.svelte';
+import '../tabs/Tabs.svelte';
+import '../tab/Tab.svelte';
+import { action } from 'storybook/actions';
+const meta = {
+    title: 'Structure/Page Header',
+    component: 'm-page-header',
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            story: { height: '250px' },
+        },
+    },
+    args: {
+        title: 'Page header title',
+        backbutton: true,
+        status: 'info',
+        statuslabel: 'Information',
+        extrainfo: 'Additional information',
+        actions: `
+      <m-icon-button ghost aria-label="Search button" slot="actions">
+        <search-24 slot="icon"></search-24>
+      </m-icon-button>
+      <m-icon-button ghost aria-label="Help button" slot="actions">
+        <help-circle-24 slot="icon"></help-circle-24>
+      </m-icon-button>
+      <m-icon-button ghost aria-label="Notification button" slot="actions">
+        <notification-24 slot="icon"></notification-24>
+      </m-icon-button>
+      <m-select
+        slot="actions"
+        id="scope-select"
+        aria-label="Scope select" 
+        size="s"
+        placeholder="Choose a scope"
+      ></m-select>
+    `,
+        tabs: `
+      <m-tabs slot="tabs">
+        <m-tab slot="tab" selected="true">label</m-tab>
+        <m-tab slot="tab">label</m-tab>
+        <m-tab slot="tab">label</m-tab>
+        <m-tab slot="tab">label</m-tab>
+      </m-tabs>
+    `,
+    },
+    argTypes: {},
+    render: (args) => {
+        return html `
+      <m-page-header
+        title="${ifDefined(args.title)}"
+        ?backbutton="${args.backbutton}"
+        status="${ifDefined(args.status)}"
+        statuslabel="${ifDefined(args.statuslabel)}"
+        extrainfo="${ifDefined(args.extrainfo)}"
+        @back="${action('back')}"
+        @toggle-menu="${action('toggle-menu')}"
+      >
+        ${unsafeHTML(ifDefined(args.content))}
+        ${unsafeHTML(ifDefined(args.actions))}
+        ${unsafeHTML(ifDefined(args.tabs))}
+      </m-page-header>
+    `;
+    },
+};
+export default meta;
+export const Default = {};
+export const Basic = {
+    args: {
+        backbutton: undefined,
+        status: undefined,
+        statuslabel: undefined,
+        extrainfo: undefined,
+        actions: undefined,
+        tabs: undefined,
+    },
+};

package/dist/components/pageheader/PageHeader.svelte

@@ -0,0 +1,268 @@
+<svelte:options customElement={{ 
+  tag: 'm-page-header',
+  props: {
+      backbutton: { reflect: true, type: 'Boolean', attribute: 'backbutton' },
+    },
+}} />
+
+<script lang="ts">
+  import IconButton from '../iconbutton/IconButton.svelte';
+  import StatusBadge from '../statusbadge/StatusBadge.svelte';
+  import {
+    ArrowBack24,
+    Menu24,
+  } from '@mozaic-ds/icons-svelte';
+  /**
+   * The Page Header is a fundamental component that structures the top part of an interface, serving as a cognitive anchor point for users. It establishes page context, facilitates navigation, and provides the main actions available within the current scope.
+   *
+   * @slot content - Use this slot to insert any content below the Page Header top content.
+   * @slot actions - Use this slot to insert action items in the top content.
+   * @slot tabs - Use this slot to insert a tab in the header.
+   * @event back {CustomEvent<void>} - Emits when the back button is clicked.
+   * @event toggle-menu {CustomEvent<void>} - Emits when the burger menu button is clicked.
+   */
+
+  interface Props {
+    /**
+     * Main title displayed in the page header.
+     */
+    title: string;
+    /**
+     * Enables a drop shadow under the page header.
+     */
+    shadow?: boolean;
+    /**
+     * Displays a back icon button in the header.
+     */
+    backbutton?: boolean;
+    /**
+     * Component status.
+     */
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
+    /**
+     * Label text displayed inside the status badge.
+     */
+    statuslabel?: string;
+    /**
+     * Additional information text shown below the title.
+     */
+    extrainfo?: string;
+    /**
+     * The callback triggered on click on back button.
+     */
+    onBack?: () => void;
+    /**
+     * The callback triggered on click on menu button.
+     */
+    onTogglemenu?: () => void;
+  }
+
+  let {
+    title,
+    shadow,
+    backbutton,
+    extrainfo,
+    status,
+    statuslabel,
+    onBack,
+    onTogglemenu,
+  }: Props = $props();
+
+  let element: HTMLElement;
+
+  function handleEvent(
+    name: string,
+    callback?: (value?: string | number | boolean) => void,
+    value?: string | number | boolean,
+  ) {
+    callback?.();
+
+    const event = new CustomEvent(name, {
+      detail: value,
+      bubbles: true,
+      composed: true,
+    });
+    element.dispatchEvent(event);
+  }
+</script>
+
+<div
+  bind:this={element}
+  class={{
+    'mc-page-header': true,
+    'mc-page-header--with-shadow': shadow,
+  }}
+>
+  <div class="mc-page-header__top-wrapper">
+    <div class="mc-page-header__top-content">
+      {#if backbutton}
+        <IconButton ghost aria-label="Back button" onclick={() => handleEvent('back', onBack)}>
+          <ArrowBack24 slot="icon" />
+        </IconButton>
+      {/if}
+
+      <div class="mc-page-header__content-wrapper">
+        <span class="mc-page-header__title">
+          {title}
+        </span>
+
+        {#if status || extrainfo}
+          <div class="mc-page-header__info-wrapper">
+            {#if statuslabel && status}
+              <StatusBadge label={statuslabel} {status} />
+            {/if}
+
+            {#if extrainfo}
+              <span class="mc-page-header__extra-info">
+                {extrainfo}
+              </span>
+            {/if}
+          </div>
+        {/if}
+
+        <slot name="content" />
+      </div>
+    </div>
+
+    <div class="mc-page-header__actions-wrapper">
+      <span class="mc-page-header__burger-menu">
+        <IconButton
+          ghost
+          aria-label="Burger menu"
+          onclick={() => handleEvent('toggle-menu', onTogglemenu)}
+        >
+          <Menu24 slot="icon" />
+        </IconButton>
+      </span>
+
+      <div class="mc-page-header__actions-content">
+        <slot name="actions"/>
+      </div>
+    </div>
+  </div>
+
+  <div class="mc-page-header__tabs">
+    <slot name="tabs"/>
+  </div>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-page-header,
+.mc-page-header :host {
+  --tabs-list-padding: 0.5rem 1rem;
+}
+@media screen and (min-width: 680px) {
+  .mc-page-header,
+  .mc-page-header :host {
+    --tabs-list-padding: 0.5rem 2.5rem;
+  }
+}
+.mc-page-header--with-shadow {
+  box-shadow: var(--shadow-bottom-xs-x, 0px) var(--shadow-bottom-xs-y, 3px) var(--shadow-bottom-xs-blur, 5px) var(--shadow-bottom-xs-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-xs-opacity, 15%));
+}
+.mc-page-header__top-wrapper {
+  padding: 0 0 0.75rem;
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: space-between;
+  background-color: var(--page-header-color-background, #ffffff);
+}
+@media screen and (min-width: 680px) {
+  .mc-page-header__top-wrapper {
+    padding: 0.75rem 2.5rem;
+    flex-direction: row;
+    gap: 2rem;
+  }
+}
+.mc-page-header__top-content {
+  padding: 0.5rem 0 0 0;
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+@media screen and (min-width: 680px) {
+  .mc-page-header__top-content {
+    padding: 0.5rem 0;
+    gap: 0.75rem;
+  }
+}
+.mc-page-header__content-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.mc-page-header__title {
+  font-size: var(--font-size-200, 1.125rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  color: var(--page-header-color-text-title, #000000);
+}
+@media screen and (min-width: 680px) {
+  .mc-page-header__title {
+    font-size: var(--font-size-300, 1.5rem);
+  }
+}
+.mc-page-header__info-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.mc-page-header__extra-info {
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--page-header-color-text-extra-info, #404040);
+}
+.mc-page-header__actions-wrapper {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
+  padding-right: 1rem;
+}
+@media screen and (min-width: 680px) {
+  .mc-page-header__actions-wrapper {
+    border-bottom: none;
+    padding-right: 0;
+  }
+}
+.mc-page-header__actions-wrapper .mc-page-header__burger-menu {
+  display: inline-flex;
+}
+@media screen and (min-width: 680px) {
+  .mc-page-header__actions-wrapper .mc-page-header__burger-menu {
+    display: none;
+  }
+}
+.mc-page-header__actions-content {
+  display: flex;
+  align-items: center;
+}
+@media screen and (min-width: 680px) {
+  .mc-page-header__actions-content {
+    gap: 1rem;
+  }
+}
+.mc-page-header__scope--tag {
+  display: block;
+}
+@media screen and (min-width: 680px) {
+  .mc-page-header__scope--tag {
+    display: none;
+  }
+}
+.mc-page-header__scope--select {
+  display: none;
+}
+@media screen and (min-width: 680px) {
+  .mc-page-header__scope--select {
+    display: block;
+  }
+}
+.mc-page-header__icons {
+  display: flex;
+  align-items: center;
+}
+.mc-page-header__tabs {
+  border-top: 1px solid var(--divider-color-primary, #cccccc);
+}</style>

package/dist/components/pageheader/PageHeader.svelte.d.ts

@@ -0,0 +1,66 @@
+/**
+ * The Page Header is a fundamental component that structures the top part of an interface, serving as a cognitive anchor point for users. It establishes page context, facilitates navigation, and provides the main actions available within the current scope.
+ *
+ * @slot content - Use this slot to insert any content below the Page Header top content.
+ * @slot actions - Use this slot to insert action items in the top content.
+ * @slot tabs - Use this slot to insert a tab in the header.
+ * @event back {CustomEvent<void>} - Emits when the back button is clicked.
+ * @event toggle-menu {CustomEvent<void>} - Emits when the burger menu button is clicked.
+ */
+interface Props {
+    /**
+     * Main title displayed in the page header.
+     */
+    title: string;
+    /**
+     * Enables a drop shadow under the page header.
+     */
+    shadow?: boolean;
+    /**
+     * Displays a back icon button in the header.
+     */
+    backbutton?: boolean;
+    /**
+     * Component status.
+     */
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
+    /**
+     * Label text displayed inside the status badge.
+     */
+    statuslabel?: string;
+    /**
+     * Additional information text shown below the title.
+     */
+    extrainfo?: string;
+    /**
+     * The callback triggered on click on back button.
+     */
+    onBack?: () => void;
+    /**
+     * The callback triggered on click on menu button.
+     */
+    onTogglemenu?: () => void;
+}
+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> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PageHeader: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    content: {};
+    actions: {};
+    tabs: {};
+}, {}, "">;
+type PageHeader = InstanceType<typeof PageHeader>;
+export default PageHeader;
+//# sourceMappingURL=PageHeader.svelte.d.ts.map

package/dist/components/pageheader/PageHeader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/pageheader/PageHeader.svelte.ts"],"names":[],"mappings":"AAUE;;;;;;;;GAQG;AAEH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAoGH,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;AAUD,QAAA,MAAM,UAAU;;;;;;UAAqF,CAAC;AACpF,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}

package/dist/components/pageheader/README.md

@@ -0,0 +1,32 @@
+# `m-page-header`
+
+The Page Header is a fundamental component that structures the top part of an interface, serving as a cognitive anchor point for users. It establishes page context, facilitates navigation, and provides the main actions available within the current scope.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `title*` | Main title displayed in the page header. | `string` |   |
+| `shadow` | Enables a drop shadow under the page header. | `boolean` |   |
+| `backbutton` | Displays a back icon button in the header. | `boolean` |   |
+| `status` | Component status. | `'info'` `'success'` `'warning'` `'error'` `'neutral'` |   |
+| `statuslabel` | Label text displayed inside the status badge. | `string` |   |
+| `extrainfo` | Additional information text shown below the title. | `string` |   |
+| `onBack` | The callback triggered on click on back button. | `() => void` |   |
+| `onTogglemenu` | The callback triggered on click on menu button. | `() => void` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `content` | Use this slot to insert any content below the Page Header top content. |
+| `actions` | Use this slot to insert action items in the top content. |
+| `tabs` | Use this slot to insert a tab in the header. |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `back` | Emits when the back button is clicked. | `CustomEvent<void>` |
+| `toggle-menu` | Emits when the burger menu button is clicked. | `CustomEvent<void>` |
+

package/dist/components/pagination/Pagination.js

@@ -1,14 +1,14 @@
-import{o as ae,c as oe,p as re,a as le,b as n,u as p,k as se,s as A,f as b,g as ie,h as _,d as h,j as c,n as t,r as u,t as N,q as $,e as D,v as x}from"../../custom-element.js";import{i as E}from"../../if.js";import{e as ne,i as ce}from"../../each.js";import{s as F,c as de,e as me}from"../../attributes.js";import{m as R,f as G}from"../../Condition20.js";import{B as H}from"../button/Button.js";import{I as J}from"../iconbutton/IconButton.js";import"../../branches.js";import"../../slot.js";import"../loader/Loader.js";var ve=_("<option> </option>"),ue=_('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-19eta05"></select></div>'),ge=_('<span class="mc-pagination__label svelte-19eta05" aria-current="page"> </span>'),fe=_('<nav class="mc-pagination svelte-19eta05" aria-label="pagination"><!> <!> <!></nav>');const pe={hash:"svelte-19eta05",code:`/**
+import{o as oe,c as re,e as le,a as se,p as n,v as b,g as ie,k as D,b as h,d as ne,f as x,j as u,i as c,l as t,r as m,t as $,u as ce,q as E,m as F,w as _}from"../../custom-element.js";import{i as B}from"../../if.js";import{e as de,i as me}from"../../each.js";import{s as R,d as ve,f as pe}from"../../attributes.js";import{s as Y,g as G}from"../../Condition20.js";import{B as H}from"../button/Button.js";import{I as J}from"../iconbutton/IconButton.js";import"../../branches.js";import"../../slot.js";import"../../this.js";import"../loader/Loader.js";var ue=x("<option> </option>"),ge=x('<div class="mc-pagination__field"><div class="mc-select mc-pagination__select svelte-19eta05"><select class="mc-select__control svelte-19eta05"></select></div></div>'),fe=x('<span class="mc-pagination__label svelte-19eta05" aria-current="page"> </span>'),be=x('<nav class="mc-pagination svelte-19eta05" aria-label="pagination"><!> <!> <!></nav>');const he={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-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);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;border-radius:var(--border-radius-s, 0.25rem);}.mc-select.svelte-19eta05:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) 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-disable string-no-newline */.mc-select.svelte-19eta05 {position:relative;display:block;width:100%;}.mc-select.svelte-19eta05::after {content:"";pointer-events:none;position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:1rem;height:1rem;background-color:var(--forms-color-icon-interactive, #000000);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;}.mc-select__control.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;border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;border-radius:var(--border-radius-s, 0.25rem);}.mc-select__control.svelte-19eta05:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-select__control.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__control.svelte-19eta05:disabled {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 be(B,l){re(l,!0),le(B,pe);let w=n(l,"id",7),m=n(l,"value",15,1),s=n(l,"total",7,10),v=n(l,"compact",7),k=n(l,"selectLabel",7,"Page selector"),g=n(l,"prefixlabel",7,"Page"),f=n(l,"pagelabel",7,"of"),r=p(se(Number(m())));const y=p(()=>t(r)<=1),P=p(()=>t(r)>=s()),K=p(()=>Array.from({length:s()},(e,a)=>a+1));function z(){t(y)()||$(r,Number(t(r))-1)}function j(){t(P)()||$(r,Number(t(r))+1)}function O(e){const a=Number(e.target.value);m(a)}var Q={get id(){return w()},set id(e){w(e),c()},get value(){return m()},set value(e=1){m(e),c()},get total(){return s()},set total(e=10){s(e),c()},get compact(){return v()},set compact(e){v(e),c()},get selectLabel(){return k()},set selectLabel(e="Page selector"){k(e),c()},get prefixlabel(){return g()},set prefixlabel(e="Page"){g(e),c()},get pagelabel(){return f()},set pagelabel(e="of"){f(e),c()}},C=fe(),I=h(C);{var T=e=>{{let a=x(()=>t(y)());H(e,{iconposition:"only","aria-label":"Previous page",get disabled(){return t(a)},onclick:z,$$slots:{icon:(o,i)=>{R(o,{slot:"icon"})}}})}},U=e=>{{let a=x(()=>t(y)());J(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return t(a)},onclick:z,$$slots:{icon:(o,i)=>{R(o,{slot:"icon"})}}})}};E(I,e=>{v()?e(U,!1):e(T)})}var M=A(I,2);{var V=e=>{var a=ue(),o=h(a);o.__change=O,ne(o,21,()=>t(K)(),ce,(i,L)=>{var d=ve(),ee=h(d);u(d);var S={};N((te,q)=>{me(d,te),D(ee,`${g()??""}
-            ${t(L)??""}
-            ${f()??""}
-            ${s()??""}`),S!==(S=q)&&(d.value=(d.__value=q)??"")},[()=>Number(t(L))==Number(t(r)),()=>Number(t(L))]),b(i,d)}),u(o),u(a),N(()=>{F(o,"id",w()),F(o,"aria-label",k()),o.disabled=s()<=1}),de(o,()=>t(r),i=>$(r,i)),b(e,a)},W=e=>{var a=ge(),o=h(a);u(a),N(()=>D(o,`${g()??""}
-      ${m()??""}
+/* stylelint-enable string-no-newline */`};function _e(z,s){le(s,!0),se(z,he);let w=n(s,"id",7),v=n(s,"value",15,1),i=n(s,"total",7,10),p=n(s,"compact",7),k=n(s,"selectLabel",7,"Page selector"),g=n(s,"prefixlabel",7,"Page"),f=n(s,"pagelabel",7,"of"),l=b(ie(Number(v())));const y=b(()=>t(l)<=1),P=b(()=>t(l)>=i()),K=b(()=>Array.from({length:i()},(e,a)=>a+1));function j(){t(y)()||E(l,Number(t(l))-1)}function I(){t(P)()||E(l,Number(t(l))+1)}function O(e){const a=Number(e.target.value);v(a)}var Q={get id(){return w()},set id(e){w(e),c()},get value(){return v()},set value(e=1){v(e),c()},get total(){return i()},set total(e=10){i(e),c()},get compact(){return p()},set compact(e){p(e),c()},get selectLabel(){return k()},set selectLabel(e="Page selector"){k(e),c()},get prefixlabel(){return g()},set prefixlabel(e="Page"){g(e),c()},get pagelabel(){return f()},set pagelabel(e="of"){f(e),c()}},C=be(),M=u(C);{var T=e=>{{let a=_(()=>t(y)());H(e,{iconposition:"only","aria-label":"Previous page",get disabled(){return t(a)},onclick:j,$$slots:{icon:(o,r)=>{Y(o,{slot:"icon"})}}})}},U=e=>{{let a=_(()=>t(y)());J(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return t(a)},onclick:j,$$slots:{icon:(o,r)=>{Y(o,{slot:"icon"})}}})}};B(M,e=>{p()?e(U,!1):e(T)})}var S=D(M,2);{var V=e=>{var a=ge(),o=u(a),r=u(o);de(r,21,()=>t(K)(),me,(L,N)=>{var d=ue(),te=u(d);m(d);var q={};$((ae,A)=>{pe(d,ae),F(te,`${g()??""}
+              ${t(N)??""}
+              ${f()??""}
+              ${i()??""}`),q!==(q=A)&&(d.value=(d.__value=A)??"")},[()=>Number(t(N))==Number(t(l)),()=>Number(t(N))]),h(L,d)}),m(r),m(o),m(a),$(()=>{R(r,"id",w()),R(r,"aria-label",k()),r.disabled=i()<=1}),ce("change",r,O),ve(r,()=>t(l),L=>E(l,L)),h(e,a)},W=e=>{var a=fe(),o=u(a);m(a),$(()=>F(o,`${g()??""}
+      ${v()??""}
       ${f()??""}
-      ${s()??""}`)),b(e,a)};E(M,e=>{v()?e(W,!1):e(V)})}var X=A(M,2);{var Y=e=>{{let a=x(()=>t(P)());H(e,{iconposition:"only","aria-label":"Next page",get disabled(){return t(a)},onclick:j,$$slots:{icon:(o,i)=>{G(o,{slot:"icon"})}}})}},Z=e=>{{let a=x(()=>t(P)());J(e,{outlined:!0,"aria-label":"Next page",get disabled(){return t(a)},onclick:j,$$slots:{icon:(o,i)=>{G(o,{slot:"icon"})}}})}};E(X,e=>{v()?e(Z,!1):e(Y)})}return u(C),b(B,C),ie(Q)}ae(["change"]);customElements.define("m-pagination",oe(be,{compact:{attribute:"compact",reflect:!0,type:"Boolean"},id:{},value:{},total:{},selectLabel:{},prefixlabel:{},pagelabel:{}},[],[],!0));
+      ${i()??""}`)),h(e,a)};B(S,e=>{p()?e(W,!1):e(V)})}var X=D(S,2);{var Z=e=>{{let a=_(()=>t(P)());H(e,{iconposition:"only","aria-label":"Next page",get disabled(){return t(a)},onclick:I,$$slots:{icon:(o,r)=>{G(o,{slot:"icon"})}}})}},ee=e=>{{let a=_(()=>t(P)());J(e,{outlined:!0,"aria-label":"Next page",get disabled(){return t(a)},onclick:I,$$slots:{icon:(o,r)=>{G(o,{slot:"icon"})}}})}};B(X,e=>{p()?e(ee,!1):e(Z)})}return m(C),h(z,C),ne(Q)}oe(["change"]);customElements.define("m-pagination",re(_e,{compact:{attribute:"compact",reflect:!0,type:"Boolean"},id:{},value:{},total:{},selectLabel:{},prefixlabel:{},pagelabel:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=Pagination.js.map