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

package/dist/components/datepicker/Datepicker.stories.js

@@ -1,97 +1,80 @@
-import { userEvent, expect } from 'storybook/test';
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-export default {
+const meta = {
     title: 'Form Elements/Datepicker',
-    tags: ['autodocs', 'beta'],
-    args: {
-        id: 'datepicker-id',
-        name: 'my-datepicker',
-        value: '2025-08-19',
-        isinvalid: false,
-        readonly: false,
-        isclearable: true,
-        clearlabel: 'Clear date',
-        size: 'm',
-    },
+    component: 'm-datepicker',
     argTypes: {
-        onblur: {
-            action: 'onblur',
-            table: { category: 'Events' },
+        size: {
+            control: 'radio',
+            options: ['s', 'm'],
         },
     },
-};
-const Template = (args) => {
-    const datepicker = document.createElement('m-datepicker');
-    datepicker.setAttribute('id', args.id);
-    datepicker.setAttribute('name', args.name);
-    datepicker.setAttribute('value', args.value);
-    if (args.isinvalid)
-        datepicker.setAttribute('isinvalid', 'true');
-    if (args.readonly)
-        datepicker.setAttribute('readonly', 'true');
-    if (args.disabled)
-        datepicker.setAttribute('disabled', 'true');
-    if (args.size === 's')
-        datepicker.setAttribute('size', 's');
-    if (args.isclearable)
-        datepicker.setAttribute('isclearable', 'true');
-    if (args.clearlabel)
-        datepicker.setAttribute('clearlabel', args.clearlabel);
-    datepicker.onblur = action('onblur');
-    return datepicker;
-};
-export const Default = {
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const datepicker = canvasElement.querySelector('m-datepicker');
-        const datepickerInput = datepicker?.shadowRoot?.querySelector('input');
-        expect(datepicker).not.toBeNull();
+    args: {
+        id: 'datepickerId',
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-datepicker
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        value=${ifDefined(args.value)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        size=${ifDefined(args.size)}
+        readonly=${ifDefined(args.readonly)}
+        isclearable=${ifDefined(args.isclearable)}
+        clearlabel=${ifDefined(args.clearlabel)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-datepicker>
+    `;
     },
 };
-export const Clearable = {
+export default meta;
+export const WithValue = {
     args: {
-        value: '2025-08-19',
+        id: 'withValueId',
+        value: '2025-07-22',
         isclearable: true,
     },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-datepicker');
-        const button = el?.shadowRoot?.querySelector('button');
-        expect(button).toBeVisible();
-        await userEvent.click(button);
-        const input = el?.shadowRoot?.querySelector('input');
-        expect(input).toHaveValue('');
-    },
 };
-export const Invalid = {
+export const Default = {};
+export const Small = {
     args: {
-        isinvalid: true,
+        id: 'smallId',
+        size: 's',
     },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-datepicker');
-        expect(el).toHaveAttribute('isinvalid', 'true');
+};
+export const Disabled = {
+    args: {
+        id: 'disableId',
+        disabled: true,
     },
 };
-export const Readonly = {
+export const ReadOnly = {
     args: {
+        id: 'readonlyId',
         readonly: true,
     },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const input = canvasElement
-            .querySelector('m-datepicker')
-            ?.shadowRoot?.querySelector('input');
-        expect(input).toHaveAttribute('readonly');
-    },
 };
-export const Small = {
+export const Invalid = {
     args: {
-        size: 's',
-    },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-datepicker');
-        expect(el).toHaveAttribute('size', 's');
+        id: 'invalidId',
+        isinvalid: true,
     },
 };

package/dist/components/datepicker/Datepicker.svelte

@@ -1,49 +1,74 @@
-<svelte:options customElement={{ tag: 'm-datepicker' }} />
+<svelte:options
+  customElement={{ tag: 'm-datepicker', extend: customElementForwardEvents }}
+/>
 
 <script lang="ts">
+  import { customElementForwardEvents } from '../../utils';
   import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';
-
+  /**
+   * A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.
+   */
   interface Props {
+    /**
+     * A unique identifier for the datepicker element, used to associate the label with the form element.
+     */
     id: string;
+    /**
+     * The name attribute for the datepicker element, typically used for form submission.
+     */
     name?: string;
+    /**
+     * The current value of the datepicker field.
+     */
     value?: string | number;
+    /**
+     * If `true`, applies an invalid state to the datepicker.
+     */
     isinvalid?: boolean;
+    /**
+     * If `true`, disables the datepicker, making it non-interactive.
+     */
     disabled?: boolean;
+    /**
+     * Determines the size of the datepicker.
+     */
     size?: 's' | 'm';
+    /**
+     * If `true`, the datepicker is read-only (cannot be edited).
+     */
     readonly?: boolean;
+    /**
+     * If `true`, a clear button will appear when the datepicker has a value.
+     */
     isclearable?: boolean;
+    /**
+     * The label text for the clear button.
+     */
     clearlabel?: string;
-    [events: string]: string;
   }
 
   let {
     id,
-    name = '',
-    value = '',
-    isinvalid = false,
-    disabled = false,
+    name,
+    value,
+    isinvalid,
+    disabled,
     size = 'm',
-    readonly = false,
-    isclearable = false,
+    readonly,
+    isclearable,
     clearlabel = 'clear content',
-    ...events
   }: Props = $props();
 
-  function onInput(event: Event) {
-    const target = event.target as HTMLInputElement;
-    value = target.value;
-  }
-
-  function clearValue() {
-    value = '';
-  }
+  const resetValue = () => (value = '');
 </script>
 
 <div
-  class="mc-datepicker mc-text-input"
-  class:is-invalid={isinvalid}
-  class:mc-text-input--s={size === 's'}
-  class:mc-datepicker--s={size === 's'}
+  class={[
+    'mc-datepicker mc-text-input',
+    `mc-text-input--${size}`,
+    `mc-datepicker--${size}`,
+    isinvalid && 'is-invalid',
+  ]}
 >
   <input
     class="mc-datepicker__control mc-text-input__control"
@@ -54,8 +79,6 @@
     {disabled}
     {readonly}
     aria-invalid={isinvalid}
-    oninput={onInput}
-    {...events}
   />
 
   {#if isclearable && value}
@@ -63,7 +86,7 @@
       <button
         type="button"
         class="mc-controls-options__button"
-        onclick={clearValue}
+        onclick={resetValue}
       >
         <CrossCircleFilled24
           class="mc-controls-options__icon"

package/dist/components/datepicker/Datepicker.svelte.d.ts

@@ -1,14 +1,43 @@
+/**
+ * A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.
+ */
 interface Props {
+    /**
+     * A unique identifier for the datepicker element, used to associate the label with the form element.
+     */
     id: string;
+    /**
+     * The name attribute for the datepicker element, typically used for form submission.
+     */
     name?: string;
+    /**
+     * The current value of the datepicker field.
+     */
     value?: string | number;
+    /**
+     * If `true`, applies an invalid state to the datepicker.
+     */
     isinvalid?: boolean;
+    /**
+     * If `true`, disables the datepicker, making it non-interactive.
+     */
     disabled?: boolean;
+    /**
+     * Determines the size of the datepicker.
+     */
     size?: 's' | 'm';
+    /**
+     * If `true`, the datepicker is read-only (cannot be edited).
+     */
     readonly?: boolean;
+    /**
+     * If `true`, a clear button will appear when the datepicker has a value.
+     */
     isclearable?: boolean;
+    /**
+     * The label text for the clear button.
+     */
     clearlabel?: string;
-    [events: string]: string;
 }
 declare const Datepicker: import("svelte").Component<Props, {}, "">;
 type Datepicker = ReturnType<typeof Datepicker>;

package/dist/components/datepicker/Datepicker.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/Datepicker.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AA+CH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Datepicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/Datepicker.svelte.ts"],"names":[],"mappings":"AAME;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA6CH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/datepicker/README.md

@@ -0,0 +1,18 @@
+# `m-datepicker`
+
+A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the datepicker element, used to associate the label with the form element. | `string` |   |
+| `name` | The name attribute for the datepicker element, typically used for form submission. | `string` |   |
+| `value` | The current value of the datepicker field. | `string` `number` |   |
+| `isinvalid` | If `true`, applies an invalid state to the datepicker. | `boolean` |   |
+| `disabled` | If `true`, disables the datepicker, making it non-interactive. | `boolean` |   |
+| `size` | Determines the size of the datepicker. | `'s'` `'m'` | `m` |
+| `readonly` | If `true`, the datepicker is read-only (cannot be edited). | `boolean` |   |
+| `isclearable` | If `true`, a clear button will appear when the datepicker has a value. | `boolean` |   |
+| `clearlabel` | The label text for the clear button. | `string` | `clear content` |
+

package/dist/components/drawer/Drawer.js

@@ -1,4 +1,4 @@
-import{c as S,p as F,b as r,q as $,t as E,h as k,i as G,j as a,e as I,u as oo,a as to,f as _,s as f,d as l,g as L,o as B,r as s}from"../../custom-element.js";import{i as C}from"../../if.js";import{a as eo,s as M}from"../../slot.js";import{s as w,a as ro}from"../../attributes.js";import"../../legacy.js";import{C as ao}from"../../Cross24.js";import{O as no}from"../overlay/Overlay.js";var co=$('<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="M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 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(j,t){F(t,!1);let g=r(t,"id",12,void 0),n=r(t,"style",12,void 0),i=r(t,"className",12,void 0),b=r(t,"fill",12,void 0),v=r(t,"size",12,"1.5rem");var m={get id(){return g()},set id(e){g(e),a()},get style(){return n()},set style(e){n(e),a()},get className(){return i()},set className(e){i(e),a()},get fill(){return b()},set fill(e){b(e),a()},get size(){return v()},set size(e){v(e),a()}},c=co();return E(()=>{w(c,"id",g()),ro(c,n()),I(c,0,oo(i())),w(c,"fill",b())}),k(j,c),G(m)}customElements.define("arrow-back-24",S(J,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var lo=_('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Back"><!></button>'),so=_('<h2 class="mc-drawer__content__title svelte-1d2fooj"> </h2>'),io=_('<div class="mc-drawer__footer svelte-1d2fooj"><!></div>'),bo=_('<section aria-labelledby="drawerTitle" tabindex="-1"><div class="mc-drawer__dialog svelte-1d2fooj" role="document"><div class="mc-drawer__header svelte-1d2fooj"><!> <h2 class="mc-drawer__title svelte-1d2fooj" id="drawerTitle"> </h2> <button class="mc-drawer__close mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Close"><!></button></div> <div class="mc-drawer__body svelte-1d2fooj"><div class="mc-drawer__content svelte-1d2fooj" tabindex="0"><!> <!></div></div> <!></div> <!></section>');const uo={hash:"svelte-1d2fooj",code:`/**
+import{c as L,p as M,b as d,A as X,t as T,i as k,j as S,k as a,e as q,g as F,v as Y,a as Z,f as E,d as c,s as h,r as l,h as D}from"../../custom-element.js";import{i as H}from"../../if.js";import{s as O}from"../../slot.js";import{s as j,a as $}from"../../attributes.js";import{b as oo}from"../../this.js";import"../../legacy.js";import{C as to}from"../../Cross24.js";import{O as eo}from"../overlay/Overlay.js";var ro=X('<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="M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 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 G(f,t){M(t,!1);let e=d(t,"id",12,void 0),i=d(t,"style",12,void 0),u=d(t,"className",12,void 0),v=d(t,"fill",12,void 0),m=d(t,"size",12,"1.5rem");var g={get id(){return e()},set id(r){e(r),a()},get style(){return i()},set style(r){i(r),a()},get className(){return u()},set className(r){u(r),a()},get fill(){return v()},set fill(r){v(r),a()},get size(){return m()},set size(r){m(r),a()}},n=ro();return T(()=>{j(n,"id",e()),$(n,i()),q(n,0,F(u())),j(n,"fill",v())}),k(f,n),S(g)}customElements.define("arrow-back-24",L(G,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var ao=(f,t)=>f.key==="Escape"&&t(),no=E('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Back"><!></button>'),co=E('<h2 class="mc-drawer__content__title svelte-1d2fooj"> </h2>'),lo=E('<div role="dialog" aria-labelledby="drawerTitle" tabindex="-1"><div class="mc-drawer__dialog svelte-1d2fooj" role="document"><div class="mc-drawer__header svelte-1d2fooj"><!> <h2 class="mc-drawer__title svelte-1d2fooj" id="drawerTitle"> </h2> <button class="mc-drawer__close mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Close"><!></button></div> <div class="mc-drawer__body svelte-1d2fooj"><div class="mc-drawer__content svelte-1d2fooj"><!> <!></div></div> <div class="mc-drawer__footer svelte-1d2fooj"><!></div></div> <!></div>');const so={hash:"svelte-1d2fooj",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-drawer.svelte-1d2fooj {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:0.5rem;justify-content:flex-end;}
 @media (width >= 680px) {.mc-drawer.svelte-1d2fooj {padding:1rem;}
@@ -10,5 +10,5 @@ import{c as S,p as F,b as r,q as $,t as E,h as k,i as G,j as a,e as I,u as oo,a
 @media (width >= 680px) {.mc-drawer__content.svelte-1d2fooj {padding:1.5rem;}
 }.mc-drawer__content__title.svelte-1d2fooj {font-size:var(--font-title-m, 1.5rem);margin:0 0 0.5rem;}.mc-drawer__footer.svelte-1d2fooj {display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-s, 1px) solid var(--divider-color-primary, #cccccc);}
 @media (width >= 680px) {.mc-drawer__footer.svelte-1d2fooj {justify-content:center;flex-direction:row;}
-}.mc-drawer-open.svelte-1d2fooj {overflow:hidden;}.mc-drawer.is-open.svelte-1d2fooj .mc-drawer__dialog:where(.svelte-1d2fooj) {pointer-events:all;transform:translate3d(0, 0, 0);transition:visibility 0s linear 0s, transform 0.4s;visibility:visible;}.mc-button.svelte-1d2fooj {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1d2fooj:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1d2fooj:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1d2fooj {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1d2fooj {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-1d2fooj {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1d2fooj {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1d2fooj:focus-visible {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-button--s.svelte-1d2fooj {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-1d2fooj {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1d2fooj {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-1d2fooj {padding:0.25rem;}.mc-button--outlined.svelte-1d2fooj {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-1d2fooj {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-1d2fooj {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-1d2fooj {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-1d2fooj {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-1d2fooj:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-1d2fooj {border-radius:var(--radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-1d2fooj {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-1d2fooj {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-1d2fooj {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-1d2fooj {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-1d2fooj {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-1d2fooj {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-overlay.svelte-1d2fooj {filter:none;}`};function vo(j,t){const g=eo(t);F(t,!0),to(j,uo);let n=r(t,"open",7,!1),i=r(t,"position",7,"right"),b=r(t,"extended",7,!1),v=r(t,"back",7,!1),m=r(t,"title",7,""),c=r(t,"contentTitle",7,""),e=r(t,"updateopen",7,()=>{}),p=r(t,"backfn",7,()=>{});function D(){n(!1),e()(!1)}function K(){p()()}var P={get open(){return n()},set open(o=!1){n(o),a()},get position(){return i()},set position(o="right"){i(o),a()},get extended(){return b()},set extended(o=!1){b(o),a()},get back(){return v()},set back(o=!1){v(o),a()},get title(){return m()},set title(o=""){m(o),a()},get contentTitle(){return c()},set contentTitle(o=""){c(o),a()},get updateopen(){return e()},set updateopen(o=()=>{}){e(o),a()},get backfn(){return p()},set backfn(o=()=>{}){p(o),a()}},u=bo();let H;var x=l(u),y=l(x),O=l(y);{var Q=o=>{var d=lo(),h=l(d);J(h,{"aria-hidden":"true"}),s(d),B("click",d,K),k(o,d)};C(O,o=>{v()&&o(Q)})}var z=f(O,2),R=l(z,!0);s(z);var T=f(z,2),U=l(T);ao(U,{"aria-hidden":"true"}),s(T),s(y);var N=f(y,2),q=l(N),A=l(q);{var V=o=>{var d=so(),h=l(d,!0);s(d),E(()=>L(h,c())),k(o,d)};C(A,o=>{c()&&o(V)})}var W=f(A,2);M(W,t,"default",{}),s(q),s(N);var X=f(N,2);{var Y=o=>{var d=io(),h=l(d);M(h,t,"footer",{}),s(d),k(o,d)};C(X,o=>{g.footer&&o(Y)})}s(x);var Z=f(x,2);return no(Z,{get isvisible(){return n()},dialoglabel:"drawerTitle"}),s(u),E(o=>{H=I(u,1,`mc-drawer mc-drawer--${i()}`,"svelte-1d2fooj",H,o),w(u,"aria-modal",n()?"true":"false"),w(u,"aria-hidden",!n()),L(R,m())},[()=>({"is-open":n(),"mc-drawer--extend":b()})]),B("click",T,D),B("keydown",u,o=>o.key==="Escape"&&D()),k(j,u),G(P)}customElements.define("m-drawer",S(vo,{open:{},position:{},extended:{},back:{},title:{},contentTitle:{},updateopen:{},backfn:{}},["default","footer"],[],!0));
+}.mc-drawer-open.svelte-1d2fooj {overflow:hidden;}.mc-drawer.is-open.svelte-1d2fooj .mc-drawer__dialog:where(.svelte-1d2fooj) {pointer-events:all;transform:translate3d(0, 0, 0);transition:visibility 0s linear 0s, transform 0.4s;visibility:visible;}.mc-button.svelte-1d2fooj {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1d2fooj:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1d2fooj:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1d2fooj {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1d2fooj {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-1d2fooj {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1d2fooj {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1d2fooj:focus-visible {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-button--s.svelte-1d2fooj {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-1d2fooj {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1d2fooj {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-1d2fooj {padding:0.25rem;}.mc-button--outlined.svelte-1d2fooj {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-1d2fooj {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-1d2fooj {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-1d2fooj {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-1d2fooj {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-1d2fooj:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-1d2fooj {border-radius:var(--radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-1d2fooj {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-1d2fooj {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-1d2fooj {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-1d2fooj {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-1d2fooj {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-1d2fooj {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function bo(f,t){M(t,!0),Z(f,so);let e=d(t,"open",7),i=d(t,"position",7),u=d(t,"extended",7),v=d(t,"back",7),m=d(t,"title",7),g=d(t,"contentTitle",7),n;const r=()=>{e(!1);const o=new CustomEvent("update:open",{detail:e(),bubbles:!0,composed:!0});n.dispatchEvent(o)},I=()=>{const o=new CustomEvent("back",{bubbles:!0,composed:!0});n.dispatchEvent(o)};var J={get open(){return e()},set open(o){e(o),a()},get position(){return i()},set position(o){i(o),a()},get extended(){return u()},set extended(o){u(o),a()},get back(){return v()},set back(o){v(o),a()},get title(){return m()},set title(o){m(o),a()},get contentTitle(){return g()},set contentTitle(o){g(o),a()}},s=lo();s.__keydown=[ao,r];var w=c(s),_=c(w),C=c(_);{var K=o=>{var b=no();b.__click=I;var z=c(b);G(z,{"aria-hidden":"true"}),l(b),k(o,b)};H(C,o=>{v()&&o(K)})}var p=h(C,2),P=c(p,!0);l(p);var x=h(p,2);x.__click=r;var Q=c(x);to(Q,{"aria-hidden":"true"}),l(x),l(_);var y=h(_,2),N=c(y),B=c(N);{var R=o=>{var b=co(),z=c(b,!0);l(b),T(()=>D(z,g())),k(o,b)};H(B,o=>{g()&&o(R)})}var U=h(B,2);O(U,t,"default",{}),l(N),l(y);var A=h(y,2),V=c(A);O(V,t,"footer",{}),l(A),l(w);var W=h(w,2);return eo(W,{get isvisible(){return e()},dialoglabel:"drawerTitle"}),l(s),oo(s,o=>n=o,()=>n),T(()=>{q(s,1,F(["mc-drawer",`mc-drawer--${i()}`,e()&&"is-open",u()&&"mc-drawer--extend"]),"svelte-1d2fooj"),j(s,"aria-modal",e()?"true":"false"),j(s,"aria-hidden",!e()),D(P,m())}),k(f,s),S(J)}Y(["keydown","click"]);customElements.define("m-drawer",L(bo,{open:{},position:{},extended:{},back:{},title:{},contentTitle:{}},["default","footer"],[],!0));
 //# sourceMappingURL=Drawer.js.map

package/dist/components/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowBack24/ArrowBack24.svelte","../../../src/components/drawer/Drawer.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'arrow-back-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=\"M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 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: 'm-drawer' }} />\n\n<script lang=\"ts\">\n  import ArrowBack24 from '@mozaic-ds/icons-svelte/svelte/ArrowBack24/ArrowBack24.svelte';\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n\n  interface Props {\n    open?: boolean;\n    position?: 'left' | 'right';\n    extended?: boolean;\n    back?: boolean;\n    title: string;\n    contentTitle?: string;\n    updateopen?: (value: boolean) => void;\n    backfn?: () => void;\n    [key: string]: any;\n  }\n\n  let {\n    open = false,\n    position = 'right',\n    extended = false,\n    back = false,\n    title = '',\n    contentTitle = '',\n    updateopen = () => {},\n    backfn = () => {},\n  }: Props = $props();\n\n  function onClose() {\n    open = false;\n    updateopen(false);\n  }\n\n  function onBack() {\n    backfn();\n  }\n</script>\n\n<section\n  class={`mc-drawer mc-drawer--${position}`}\n  class:is-open={open}\n  class:mc-drawer--extend={extended}\n  aria-labelledby=\"drawerTitle\"\n  aria-modal={open ? 'true' : 'false'}\n  tabindex=\"-1\"\n  aria-hidden={!open}\n  on:keydown={(e) => e.key === 'Escape' && onClose()}\n>\n  <div class=\"mc-drawer__dialog\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      {#if back}\n        <button\n          class=\"mc-drawer__back mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Back\"\n          on:click={onBack}\n        >\n          <ArrowBack24 aria-hidden=\"true\" />\n        </button>\n      {/if}\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{title}</h2>\n      <button\n        class=\"mc-drawer__close mc-button mc-button--icon-button mc-button--ghost\"\n        aria-label=\"Close\"\n        on:click={onClose}\n      >\n        <Cross24 aria-hidden=\"true\" />\n      </button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\" tabindex=\"0\">\n        {#if contentTitle}\n          <h2 class=\"mc-drawer__content__title\">{contentTitle}</h2>\n        {/if}\n        <slot />\n      </div>\n    </div>\n\n    {#if $$slots.footer}\n      <div class=\"mc-drawer__footer\">\n        <slot name=\"footer\" />\n      </div>\n    {/if}\n  </div>\n  <MOverlay isvisible={open} dialoglabel=\"drawerTitle\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/drawer';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-overlay {\n    filter: none;\n  }\n</style>\n"],"names":["id","style","className","fill","size","open","position","extended","back","title","contentTitle","updateopen","$.prop","$$props","backfn","onClose","onBack","$$value","$$render","consequent","consequent_1","$$slots","consequent_2","classes","$0","$.event","section","e"],"mappings":"gsBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,OAAUC,GAAK,WAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;;;;;;;;;;;u9WCPA,gCAoBI,IAAAE,eAAO,EAAK,EACZC,mBAAW,OAAO,EAClBC,mBAAW,EAAK,EAChBC,eAAO,EAAK,EACZC,gBAAQ,EAAE,EACVC,uBAAe,EAAE,EACjBC,EAAUC,EAAAC,EAAA,aAAA,EAAA,IAAS,CAAC,CAAC,EACrBC,EAAMF,EAAAC,EAAA,SAAA,EAAA,IAAS,CAAC,CAAC,EAGV,SAAAE,GAAU,CACjBV,EAAO,EAAK,EACZM,EAAU,EAAC,EAAK,CAClB,CAES,SAAAK,GAAS,CAChBF,IAAM,CACR,0CAjBS,GAAK,qDACD,QAAO,qDACP,GAAK,6CACT,GAAK,+CACJ,GAAE,6DACK,GAAE,wCACE,IAAA,WAAAG,EAAA,IAAA,CAAC,EAAC,oCACN,IAAA,OAAAA,EAAA,IAAA,CAAC,EAAC,4HA6BDD,CAAM,kBAJfR,EAAI,GAAAU,EAAAC,CAAA,qKAsBkCT,EAAY,CAAA,CAAA,kBADhDA,EAAY,GAAAQ,EAAAE,CAAA,iIAOhBC,EAAQ,QAAMH,EAAAI,CAAA,0DAMAjB,EAAI,0EA7CMC,EAAQ,CAAA,GAAA,iBAAAiB,EAAAC,CAAA,mBAI3BnB,EAAI,EAAG,OAAS,OAAO,qBAErBA,EAAI,CAAA,MAciCI,GAAK,IAnBzC,KAAA,CAAA,UAAAJ,EAAI,sBACME,EAAQ,CAAA,iBAsBjBQ,CAAO,EAjBVU,EAAA,UAAAC,EAAAC,GAAMA,EAAE,MAAQ,UAAYZ,GAAO,aAVlD","x_google_ignoreList":[0]}
+{"version":3,"file":"Drawer.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ArrowBack24/ArrowBack24.svelte","../../../src/components/drawer/Drawer.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'arrow-back-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=\"M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 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: 'm-drawer' }} />\n\n<script lang=\"ts\">\n  import ArrowBack24 from '@mozaic-ds/icons-svelte/svelte/ArrowBack24/ArrowBack24.svelte';\n  import Cross24 from '@mozaic-ds/icons-svelte/svelte/Cross24/Cross24.svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.\n   *\n   * @slot default - Use this slot to insert the content of the drawer\n   * @slot footer - Use this slot to insert buttons in the footer\n   * @event update:open {CustomEvent<boolean>} - Emits when the drawer open state changes.\n   * @event back {CustomEvent<void>} - Emits when click back button of the drawer.\n   */\n  interface Props {\n    /**\n     * If `true`, display the drawer.\n     */\n    open?: boolean;\n    /**\n     * Position of the drawer.\n     */\n    position?: 'left' | 'right';\n    /**\n     * If `true`, the drawer have a bigger width.\n     */\n    extended?: boolean;\n    /**\n     * If `true`, display the back button.\n     */\n    back?: boolean;\n    /**\n     * Title of the drawer.\n     */\n    title: string;\n    /**\n     * Title of the content of the drawer.\n     */\n    contentTitle?: string;\n  }\n\n  let { open, position, extended, back, title, contentTitle }: Props = $props();\n  let element: HTMLElement;\n\n  const onClose = () => {\n    open = false;\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  const onBack = () => {\n    const event = new CustomEvent('back', {\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n<div\n  class={[\n    'mc-drawer',\n    `mc-drawer--${position}`,\n    open && 'is-open',\n    extended && 'mc-drawer--extend',\n  ]}\n  role=\"dialog\"\n  aria-labelledby=\"drawerTitle\"\n  aria-modal={open ? 'true' : 'false'}\n  tabindex=\"-1\"\n  aria-hidden={!open}\n  onkeydown={(e) => e.key === 'Escape' && onClose()}\n  bind:this={element}\n>\n  <div class=\"mc-drawer__dialog\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      {#if back}\n        <button\n          class=\"mc-drawer__back mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Back\"\n          onclick={onBack}\n        >\n          <ArrowBack24 aria-hidden=\"true\" />\n        </button>\n      {/if}\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{title}</h2>\n      <button\n        class=\"mc-drawer__close mc-button mc-button--icon-button mc-button--ghost\"\n        aria-label=\"Close\"\n        onclick={onClose}\n      >\n        <Cross24 aria-hidden=\"true\" />\n      </button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\">\n        {#if contentTitle}\n          <h2 class=\"mc-drawer__content__title\">{contentTitle}</h2>\n        {/if}\n        <slot />\n      </div>\n    </div>\n\n    <div class=\"mc-drawer__footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n  <MOverlay isvisible={open} dialoglabel=\"drawerTitle\" />\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/drawer';\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["id","style","className","fill","size","on_keydown","e","onClose","open","$.prop","$$props","position","extended","back","title","contentTitle","element","event","onBack","$$render","consequent","consequent_1","$.bind_this","div","$$value"],"mappings":"wtBAAA,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,oGCqEc,IAAAE,GAAA,CAAAC,MAAMA,EAAE,MAAQ,UAAYC,EAAO;;;;;;;;;;;;86WA5EjD,qBAyCQC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAAEE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EAAEG,EAAIJ,EAAAC,EAAA,OAAA,CAAA,EAAEI,EAAKL,EAAAC,EAAA,QAAA,CAAA,EAAEK,EAAYN,EAAAC,EAAA,eAAA,CAAA,EACrDM,EAEE,MAAAT,EAAO,IAAS,CACpBC,EAAO,EAAK,EAEN,MAAAS,EAAK,IAAO,YAAY,eAC5B,OAAQT,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBQ,EAAQ,cAAcC,CAAK,CAC7B,EAEMC,EAAM,IAAS,OACbD,EAAK,IAAO,YAAY,OAAM,CAClC,QAAS,GACT,SAAU,GAAI,EAEhBD,EAAQ,cAAcC,CAAK,CAC7B,6YAwBiBC,8DAJRL,EAAI,GAAAM,EAAAC,CAAA,uDAaEb,8HASgCQ,EAAY,CAAA,CAAA,kBADhDA,EAAY,GAAAI,EAAAE,CAAA,iJAWFb,EAAI,oCApCdc,GAAAC,EAAAC,GAAAR,QAAAA,CAAO,kBAXhB,0BACcL,EAAQ,CAAA,GACtBH,EAAI,GAAI,UACRI,KAAY,yDAIFJ,EAAI,EAAG,OAAS,OAAO,qBAErBA,EAAI,CAAA,MAeiCM,GAAK,eA5B1D","x_google_ignoreList":[0]}

package/dist/components/drawer/Drawer.spec.js

@@ -0,0 +1,101 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Drawer from './Drawer.svelte';
+describe('m-drawer component', () => {
+    const title = 'My Drawer';
+    const contentTitle = 'Drawer Content Title';
+    it('renders with title and contentTitle', () => {
+        const { getByText } = render(Drawer, {
+            props: {
+                open: true,
+                title,
+                contentTitle,
+                position: 'right',
+            },
+        });
+        expect(getByText(title)).toBeInTheDocument();
+        expect(getByText(contentTitle)).toBeInTheDocument();
+    });
+    it('applies correct classes when open, extended, and position is set', () => {
+        const { container } = render(Drawer, {
+            props: {
+                open: true,
+                position: 'left',
+                extended: true,
+                title,
+            },
+        });
+        const drawer = container.querySelector('.mc-drawer');
+        expect(drawer.classList.contains('is-open')).toBe(true);
+        expect(drawer.classList.contains('mc-drawer--left')).toBe(true);
+        expect(drawer.classList.contains('mc-drawer--extend')).toBe(true);
+    });
+    it('sets proper accessibility attributes when open', () => {
+        const { container } = render(Drawer, {
+            props: {
+                open: true,
+                title,
+            },
+        });
+        const drawer = container.querySelector('.mc-drawer');
+        expect(drawer.getAttribute('role')).toBe('dialog');
+        expect(drawer.getAttribute('aria-modal')).toBe('true');
+        expect(drawer.getAttribute('aria-hidden')).toBe('false');
+        expect(drawer.getAttribute('aria-labelledby')).toBe('drawerTitle');
+    });
+    it('sets aria-hidden when not open', () => {
+        const { container } = render(Drawer, {
+            props: {
+                open: false,
+                title,
+            },
+        });
+        const drawer = container.querySelector('.mc-drawer');
+        expect(drawer.getAttribute('aria-hidden')).toBe('true');
+        expect(drawer.getAttribute('aria-modal')).toBe('false');
+    });
+    it('emits update:open event with false when close button clicked', async () => {
+        const { container } = render(Drawer, {
+            props: {
+                open: true,
+                title,
+            },
+        });
+        const drawer = container.querySelector('.mc-drawer');
+        const closeButton = container.querySelector('.mc-drawer__close');
+        const updateOpenHandler = vi.fn();
+        drawer.addEventListener('update:open', updateOpenHandler);
+        await fireEvent.click(closeButton);
+        expect(updateOpenHandler).toHaveBeenCalledOnce();
+        expect(updateOpenHandler.mock.calls[0][0].detail).toBe(false);
+    });
+    it('emits back event when back button clicked', async () => {
+        const { container } = render(Drawer, {
+            props: {
+                open: true,
+                title,
+                back: true,
+            },
+        });
+        const drawer = container.querySelector('.mc-drawer');
+        const backButton = container.querySelector('.mc-drawer__back');
+        const backHandler = vi.fn();
+        drawer.addEventListener('back', backHandler);
+        await fireEvent.click(backButton);
+        expect(backHandler).toHaveBeenCalledOnce();
+    });
+    it('closes drawer on Escape key press', async () => {
+        const { container } = render(Drawer, {
+            props: {
+                open: true,
+                title,
+            },
+        });
+        const drawer = container.querySelector('.mc-drawer');
+        const updateOpenHandler = vi.fn();
+        drawer.addEventListener('update:open', updateOpenHandler);
+        await fireEvent.keyDown(drawer, { key: 'Escape' });
+        expect(updateOpenHandler).toHaveBeenCalledOnce();
+        expect(updateOpenHandler.mock.calls[0][0].detail).toBe(false);
+    });
+});

package/dist/components/drawer/Drawer.stories.d.ts

@@ -1,11 +1,32 @@
-import type { Meta, StoryObj } from '@storybook/html-vite';
-declare const _default: Meta;
-export default _default;
+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 Back: Story;
-export declare const Left: Story;
-export declare const Cancel: Story;
-export declare const ValidationOnly: Story;
-export declare const TwoOptions: Story;
+export declare const Left: {
+    args: {
+        position: string;
+    };
+};
+export declare const Back: {
+    args: {
+        back: boolean;
+    };
+};
+export declare const ValidationOnly: {
+    args: {
+        footer: string;
+    };
+};
+export declare const TwoOptions: {
+    args: {
+        footer: string;
+    };
+};
+export declare const Cancel: {
+    args: {
+        extended: boolean;
+        footer: string;
+    };
+};
 //# sourceMappingURL=Drawer.stories.d.ts.map

package/dist/components/drawer/Drawer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;wBA6BtD,IAAI;AAzBT,wBAyBU;AAEV,KAAK,KAAK,GAAG,QAAQ,CAAC;AAsDtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAWF,eAAO,MAAM,IAAI,EAAE,KASlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC"}
+{"version":3,"file":"Drawer.stories.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAMrE,QAAA,MAAM,IAAI,EAAE,IA2EX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;CAIhB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAM1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CASlB,CAAC"}