@mozaic-ds/web-components 1.1.0 → 1.3.0

package/dist/components/divider/Divider.spec.js

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Divider from './Divider.svelte';
+describe('m-divider component', () => {
+    it('renders with default classes', () => {
+        const { container } = render(Divider, {
+            props: {},
+        });
+        const wrapper = container.querySelector('.mc-divider');
+        const divider = wrapper.querySelector('div');
+        expect(wrapper).toBeTruthy();
+        expect(divider).toBeTruthy();
+        expect(divider.classList.contains('mc-divider-horizontal--primary')).toBe(true);
+        expect(divider.classList.contains('mc-divider-horizontal--s')).toBe(true);
+        expect(divider.classList.contains('mc-divider-vertical')).toBe(false);
+    });
+    it('applies correct classes for vertical orientation', () => {
+        const { container } = render(Divider, {
+            props: {
+                orientation: 'vertical',
+            },
+        });
+        const divider = container.querySelector('.mc-divider > div');
+        expect(divider.classList.contains('mc-divider-vertical')).toBe(true);
+    });
+    it('applies correct classes for appearance and size props', () => {
+        const { container } = render(Divider, {
+            props: {
+                appearance: 'secondary',
+                size: 'l',
+            },
+        });
+        const divider = container.querySelector('.mc-divider > div');
+        expect(divider.classList.contains('mc-divider-horizontal--secondary')).toBe(true);
+        expect(divider.classList.contains('mc-divider-horizontal--l')).toBe(true);
+    });
+    it('combines all prop-driven classes correctly', () => {
+        const { container } = render(Divider, {
+            props: {
+                orientation: 'vertical',
+                appearance: 'tertiary',
+                size: 'm',
+            },
+        });
+        const divider = container.querySelector('.mc-divider > div');
+        expect(divider.classList.contains('mc-divider-vertical')).toBe(true);
+        expect(divider.classList.contains('mc-divider-horizontal--tertiary')).toBe(true);
+        expect(divider.classList.contains('mc-divider-horizontal--m')).toBe(true);
+    });
+});

package/dist/components/divider/Divider.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Divider.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Standard: Story;
+export declare const Vertical: Story;
+export declare const Size: Story;
+export declare const Secondary: Story;
+//# sourceMappingURL=Divider.stories.d.ts.map

package/dist/components/divider/Divider.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.stories.d.ts","sourceRoot":"","sources":["../../../src/components/divider/Divider.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,kBAAkB,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC"}

package/dist/components/divider/Divider.stories.js

@@ -0,0 +1,58 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './Divider.svelte';
+const meta = {
+    title: 'Structure/Divider',
+    component: 'm-divider',
+    tags: ['v2'],
+    argTypes: {
+        size: {
+            control: 'inline-radio',
+            options: ['s', 'm', 'l'],
+        },
+        orientation: {
+            control: 'radio',
+            options: ['vertical', 'horizontal'],
+        },
+        appearance: {
+            control: 'radio',
+            options: ['primary', 'secondary', 'tertiary', 'inverse'],
+        },
+    },
+    render: (args) => html `
+    <div>
+      <m-divider
+        orientation=${ifDefined(args.orientation)}
+        appearance=${ifDefined(args.appearance)}
+        size=${ifDefined(args.size)}
+        >${unsafeHTML(ifDefined(args.default))}</m-divider
+      >
+      <p style="padding: 1rem">Horizontal Divider</p>
+    </div>
+  `,
+};
+export default meta;
+export const Standard = {};
+export const Vertical = {
+    args: {
+        orientation: 'vertical',
+        default: `<p style="padding: 1rem">Vertical Divider</p>`,
+    },
+    render: (args) => html `
+    <div>
+      <m-divider
+        orientation=${ifDefined(args.orientation)}
+        appearance=${ifDefined(args.appearance)}
+        size=${ifDefined(args.size)}
+        >${unsafeHTML(ifDefined(args.default))}</m-divider
+      >
+    </div>
+  `,
+};
+export const Size = {
+    args: { size: 'm' },
+};
+export const Secondary = {
+    args: { appearance: 'secondary' },
+};

package/dist/components/divider/Divider.svelte

@@ -0,0 +1,90 @@
+<svelte:options customElement={{ tag: 'm-divider' }} />
+
+<script lang="ts">
+  /**
+   * A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.
+   *
+   * @slot default - Use this slot to insert the content who need a vertical divider
+   */
+  interface Props {
+    /**
+     * Determines the orientation of the divider.
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Determines the appearance of the divider.
+     */
+    appearance?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
+    /**
+     * Determines the size of the divider.
+     */
+    size?: 's' | 'm' | 'l';
+  }
+
+  let { orientation = 'horizontal', appearance = 'primary', size = 's' }: Props = $props();
+</script>
+
+<div class="mc-divider">
+  <div
+    class={[
+      `mc-divider-${orientation}`,
+      `mc-divider-horizontal--${appearance}`,
+      `mc-divider-horizontal--${size}`,
+    ]}
+  ></div>
+  <slot />
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-divider {
+  position: relative;
+}
+.mc-divider-horizontal {
+  background: var(--divider-color-primary, #cccccc);
+  height: 0.0625rem;
+}
+.mc-divider-horizontal--secondary {
+  background: var(--divider-color-secondary, #999999);
+}
+.mc-divider-horizontal--tertiary {
+  background: var(--divider-color-tertiary, #333333);
+}
+.mc-divider-horizontal--inverse {
+  background: var(--divider-color-inverse, #ffffff);
+}
+.mc-divider-horizontal--m {
+  height: 0.25rem;
+}
+.mc-divider-horizontal--l {
+  height: 0.5rem;
+}
+.mc-divider-vertical {
+  background: var(--divider-color-primary, #cccccc);
+  width: 0.0625rem;
+}
+.mc-divider-vertical--secondary {
+  background: var(--divider-color-secondary, #999999);
+}
+.mc-divider-vertical--tertiary {
+  background: var(--divider-color-tertiary, #333333);
+}
+.mc-divider-vertical--inverse {
+  background: var(--divider-color-inverse, #ffffff);
+}
+.mc-divider-vertical--m {
+  height: 0.25rem;
+}
+.mc-divider-vertical--l {
+  height: 0.5rem;
+}
+
+.mc-divider-vertical {
+  content: "";
+  display: block;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}</style>

package/dist/components/divider/Divider.svelte.d.ts

@@ -0,0 +1,47 @@
+/**
+ * A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.
+ *
+ * @slot default - Use this slot to insert the content who need a vertical divider
+ */
+interface Props {
+    /**
+     * Determines the orientation of the divider.
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Determines the appearance of the divider.
+     */
+    appearance?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
+    /**
+     * Determines the size of the divider.
+     */
+    size?: 's' | 'm' | 'l';
+}
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Divider: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type Divider = InstanceType<typeof Divider>;
+export default Divider;
+//# sourceMappingURL=Divider.svelte.d.ts.map

package/dist/components/divider/Divider.svelte.d.ts.map

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

package/dist/components/divider/README.md

@@ -0,0 +1,18 @@
+# `m-divider`
+
+A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `orientation` | Determines the orientation of the divider. | `'vertical'` `'horizontal'` | `horizontal` |
+| `appearance` | Determines the appearance of the divider. | `'primary'` `'secondary'` `'tertiary'` `'inverse'` | `primary` |
+| `size` | Determines the size of the divider. | `'s'` `'m'` `'l'` | `s` |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `default` | Use this slot to insert the content who need a vertical divider |
+

package/dist/components/drawer/Drawer.js

@@ -1,14 +1,14 @@
-import{c as M,p as S,b as a,A as Z,t as T,i as j,j as q,k as n,e as F,g as G,v as $,a as oo,f as C,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 L}from"../../slot.js";import{s as w,a as to}from"../../attributes.js";import{b as eo}from"../../this.js";import"../../legacy.js";import{C as ro}from"../../Cross24.js";import{O as ao}from"../overlay/Overlay.js";var no=Z('<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 I(f,t){S(t,!1);let r=a(t,"id",12,void 0),i=a(t,"style",12,void 0),u=a(t,"className",12,void 0),v=a(t,"fill",12,void 0),g=a(t,"size",12,"1.5rem");var m={get id(){return r()},set id(d){r(d),n()},get style(){return i()},set style(d){i(d),n()},get className(){return u()},set className(d){u(d),n()},get fill(){return v()},set fill(d){v(d),n()},get size(){return g()},set size(d){g(d),n()}},s=no();return T(()=>{w(s,"id",r()),to(s,i()),F(s,0,G(u())),w(s,"fill",v())}),j(f,s),q(m)}customElements.define("arrow-back-24",M(I,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var co=(f,t)=>f.key==="Escape"&&t(),lo=C('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Back"><!></button>'),so=C('<h2 class="mc-drawer__content__title svelte-1d2fooj"> </h2>'),bo=C('<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 io={hash:"svelte-1d2fooj",code:`/**
+import{c as M,p as S,b as d,A as Z,t as B,h as j,i as q,j as a,l as $,m as oo,w as to,a as eo,f as T,r as ro,d as n,s as m,e as c,g as A}from"../../custom-element.js";import{i as D}from"../../if.js";import{s as H}from"../../slot.js";import{s as L,b as ao,a as no}from"../../attributes.js";import{b as co}from"../../this.js";import"../../legacy.js";import{C as lo}from"../../Cross24.js";import{O as so}from"../overlay/Overlay.js";var io=Z('<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 F(h,t){S(t,!1);let e=d(t,"id",12,void 0),i=d(t,"style",12,void 0),b=d(t,"className",12,void 0),u=d(t,"fill",12,void 0),v=d(t,"size",12,"1.5rem");var f={get id(){return e()},set id(r){e(r),a()},get style(){return i()},set style(r){i(r),a()},get className(){return b()},set className(r){b(r),a()},get fill(){return u()},set fill(r){u(r),a()},get size(){return v()},set size(r){v(r),a()}},l=io();return B(()=>{L(l,"id",e()),ao(l,i()),$(l,0,oo(b())),L(l,"fill",u())}),j(h,l),q(f)}customElements.define("arrow-back-24",M(F,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var bo=T('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Back"><!></button>'),uo=T('<h2 class="mc-drawer__content__title svelte-1d2fooj"> </h2>'),vo=T('<div><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 fo={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;}
 }.mc-drawer--left.svelte-1d2fooj {justify-content:flex-start;}.mc-drawer--left.svelte-1d2fooj .mc-drawer__dialog:where(.svelte-1d2fooj) {transform:translate3d(-100%, 0, 0);}
 @media (width >= 680px) {.mc-drawer--extend.svelte-1d2fooj .mc-drawer__dialog:where(.svelte-1d2fooj) {max-width:39rem;}
-}.mc-drawer__dialog.svelte-1d2fooj {background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%, 0, 0);transition:visibility 0s linear 0.4s, transform 0.4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 3);border-radius:var(--radius-l, 1rem);}
+}.mc-drawer__dialog.svelte-1d2fooj {background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%, 0, 0);transition:visibility 0s linear 0.4s, transform 0.4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 3);border-radius:var(--border-radius-l, 1rem);}
 @media (width >= 680px) {.mc-drawer__dialog.svelte-1d2fooj {max-width:25rem;}
 }.mc-drawer__header.svelte-1d2fooj {display:flex;align-items:center;justify-content:center;height:4rem;}.mc-drawer__icon.svelte-1d2fooj {height:1.5rem;margin-right:0.75rem;width:1.5rem;}.mc-drawer__title.svelte-1d2fooj {font-size:var(--font-body-s, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;}.mc-drawer__title.svelte-1d2fooj:first-child {padding-left:4rem;}.mc-drawer__back.svelte-1d2fooj, .mc-drawer__close.svelte-1d2fooj {margin:0.5rem;}.mc-drawer__body.svelte-1d2fooj {flex:1 1;overflow:hidden;}.mc-drawer__body.svelte-1d2fooj:last-child {margin-bottom:1.5rem;padding-bottom:1.5rem;}.mc-drawer__content.svelte-1d2fooj {max-height:100%;overflow:hidden auto;padding:0.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000);}
 @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);}
+}.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-width-s, 0.0625rem) 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;}`};function uo(f,t){S(t,!0),oo(f,io);let r=a(t,"open",7),i=a(t,"position",7),u=a(t,"extended",7),v=a(t,"back",7),g=a(t,"title",7),m=a(t,"contentTitle",7),s=a(t,"onUpdateOpen",7),d=a(t,"onBack",7),k;const E=()=>{var e;r(!1),(e=s())==null||e(r());const o=new CustomEvent("update:open",{detail:r(),bubbles:!0,composed:!0});k.dispatchEvent(o)},J=()=>{var e;(e=d())==null||e();const o=new CustomEvent("back",{bubbles:!0,composed:!0});k.dispatchEvent(o)};var K={get open(){return r()},set open(o){r(o),n()},get position(){return i()},set position(o){i(o),n()},get extended(){return u()},set extended(o){u(o),n()},get back(){return v()},set back(o){v(o),n()},get title(){return g()},set title(o){g(o),n()},get contentTitle(){return m()},set contentTitle(o){m(o),n()},get onUpdateOpen(){return s()},set onUpdateOpen(o){s(o),n()},get onBack(){return d()},set onBack(o){d(o),n()}},b=bo();b.__keydown=[co,E];var _=c(b),p=c(_),O=c(p);{var P=o=>{var e=lo();e.__click=J;var B=c(e);I(B,{"aria-hidden":"true"}),l(e),j(o,e)};H(O,o=>{v()&&o(P)})}var x=h(O,2),Q=c(x,!0);l(x);var y=h(x,2);y.__click=E;var R=c(y);ro(R,{"aria-hidden":"true"}),l(y),l(p);var z=h(p,2),N=c(z),U=c(N);{var V=o=>{var e=so(),B=c(e,!0);l(e),T(()=>D(B,m())),j(o,e)};H(U,o=>{m()&&o(V)})}var W=h(U,2);L(W,t,"default",{}),l(N),l(z);var A=h(z,2),X=c(A);L(X,t,"footer",{}),l(A),l(_);var Y=h(_,2);return ao(Y,{get isvisible(){return r()},dialoglabel:"drawerTitle"}),l(b),eo(b,o=>k=o,()=>k),T(()=>{F(b,1,G(["mc-drawer",`mc-drawer--${i()}`,r()&&"is-open",u()&&"mc-drawer--extend"]),"svelte-1d2fooj"),w(b,"aria-modal",r()?"true":"false"),w(b,"aria-hidden",!r()),D(Q,g())}),j(f,b),q(K)}$(["keydown","click"]);customElements.define("m-drawer",M(uo,{open:{},position:{},extended:{},back:{},title:{},contentTitle:{},onUpdateOpen:{},onBack:{}},["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-border-radius-s, 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(--border-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 mo(h,t){S(t,!0),eo(h,fo);let e=d(t,"open",7),i=d(t,"position",7),b=d(t,"extended",7),u=d(t,"back",7),v=d(t,"title",7),f=d(t,"contentTitle",7),l=d(t,"onUpdateOpen",7),r=d(t,"onBack",7),G=ro(t,["$$slots","$$events","$$legacy","$$host","open","position","extended","back","title","contentTitle","onUpdateOpen","onBack"]),k;const O=()=>{e(!1),l()?.(e());const o=new CustomEvent("update:open",{detail:e(),bubbles:!0,composed:!0});k.dispatchEvent(o)},I=()=>{r()?.();const o=new CustomEvent("back",{bubbles:!0,composed:!0});k.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 b()},set extended(o){b(o),a()},get back(){return u()},set back(o){u(o),a()},get title(){return v()},set title(o){v(o),a()},get contentTitle(){return f()},set contentTitle(o){f(o),a()},get onUpdateOpen(){return l()},set onUpdateOpen(o){l(o),a()},get onBack(){return r()},set onBack(o){r(o),a()}},g=vo(),K=o=>o.key==="Escape"&&O();no(g,()=>({class:["mc-drawer",`mc-drawer--${i()}`,e()&&"is-open",b()&&"mc-drawer--extend"],role:"dialog","aria-labelledby":"drawerTitle","aria-modal":e()?"true":"false",tabindex:"-1","aria-hidden":!e(),onkeydown:K,...G}),void 0,void 0,void 0,"svelte-1d2fooj");var w=n(g),_=n(w),C=n(_);{var P=o=>{var s=bo();s.__click=I;var z=n(s);F(z,{"aria-hidden":"true"}),c(s),j(o,s)};D(C,o=>{u()&&o(P)})}var p=m(C,2),Q=n(p,!0);c(p);var x=m(p,2);x.__click=O;var R=n(x);lo(R,{"aria-hidden":"true"}),c(x),c(_);var y=m(_,2),E=n(y),U=n(E);{var V=o=>{var s=uo(),z=n(s,!0);c(s),B(()=>A(z,f())),j(o,s)};D(U,o=>{f()&&o(V)})}var W=m(U,2);H(W,t,"default",{}),c(E),c(y);var N=m(y,2),X=n(N);H(X,t,"footer",{}),c(N),c(w);var Y=m(w,2);return so(Y,{get isvisible(){return e()},dialoglabel:"drawerTitle"}),c(g),co(g,o=>k=o,()=>k),B(()=>A(Q,v())),j(h,g),q(J)}to(["click"]);customElements.define("m-drawer",M(mo,{open:{},position:{},extended:{},back:{},title:{},contentTitle:{},onUpdateOpen:{},onBack:{}},["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   * 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     * Callback fired when the drawer open state changes.\n     */\n    onUpdateOpen?: (open: boolean) => void;\n    /**\n     * Callback fired when the back button is clicked.\n     */\n    onBack?: () => void;\n  }\n\n  let { open, position, extended, back, title, contentTitle, onUpdateOpen, onBack }: Props =\n    $props();\n  let element: HTMLElement;\n\n  const onClose = () => {\n    open = false;\n\n    onUpdateOpen?.(open);\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 onClickBack = () => {\n    onBack?.();\n\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={onClickBack}\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","onUpdateOpen","onBack","element","_a","event","onClickBack","$$render","consequent","consequent_1","$.bind_this","div","$$value"],"mappings":"0tBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,OAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,oGCkFc,IAAAE,GAAA,CAAAC,MAAMA,EAAE,MAAQ,UAAYC,EAAO;;;;;;;;;;;;86WAzFjD,sBAiDQC,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,EAAEM,EAAYP,EAAAC,EAAA,eAAA,CAAA,EAAEO,EAAMR,EAAAC,EAAA,SAAA,CAAA,EAE3EQ,EAEE,MAAAX,EAAO,IAAS,OACpBC,EAAO,EAAK,GAEZW,EAAAH,EAAY,IAAZ,MAAAG,EAAeX,KAET,MAAAY,EAAK,IAAO,YAAY,eAC5B,OAAQZ,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBU,EAAQ,cAAcE,CAAK,CAC7B,EAEMC,EAAW,IAAS,QACxBF,EAAAF,MAAA,MAAAE,UAEMC,EAAK,IAAO,YAAY,OAAM,CAClC,QAAS,GACT,SAAU,GAAI,EAEhBF,EAAQ,cAAcE,CAAK,CAC7B,2fAwBiBC,8DAJRR,EAAI,GAAAS,EAAAC,CAAA,uDAaEhB,8HASgCQ,EAAY,CAAA,CAAA,kBADhDA,EAAY,GAAAO,EAAAE,CAAA,iJAWFhB,EAAI,oCApCdiB,GAAAC,EAAAC,GAAAT,QAAAA,CAAO,kBAXhB,0BACcP,EAAQ,CAAA,GACtBH,EAAI,GAAI,UACRI,KAAY,yDAIFJ,EAAI,EAAG,OAAS,OAAO,qBAErBA,EAAI,CAAA,MAeiCM,GAAK,eA5B1D","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     * Callback fired when the drawer open state changes.\n     */\n    onUpdateOpen?: (open: boolean) => void;\n    /**\n     * Callback fired when the back button is clicked.\n     */\n    onBack?: () => void;\n  }\n\n  let {\n    open,\n    position,\n    extended,\n    back,\n    title,\n    contentTitle,\n    onUpdateOpen,\n    onBack,\n    ...attrs\n  }: Props = $props();\n  let element: HTMLElement;\n\n  const onClose = () => {\n    open = false;\n\n    onUpdateOpen?.(open);\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 onClickBack = () => {\n    onBack?.();\n\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  {...attrs}\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={onClickBack}\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","open","$.prop","$$props","position","extended","back","title","contentTitle","onUpdateOpen","onBack","attrs","$.rest_props","element","onClose","event","onClickBack","event_handler","e","$$render","consequent","consequent_1","$.bind_this","div","$$value"],"mappings":"4uBAAA,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;;;;;;;;;;;;87WCPA,sBAkDIE,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACRG,EAAIJ,EAAAC,EAAA,OAAA,CAAA,EACJI,EAAKL,EAAAC,EAAA,QAAA,CAAA,EACLK,EAAYN,EAAAC,EAAA,eAAA,CAAA,EACZM,EAAYP,EAAAC,EAAA,eAAA,CAAA,EACZO,EAAMR,EAAAC,EAAA,SAAA,CAAA,EACHQ,EAAAC,GAAAT,EAAA,+HAEDU,EAEE,MAAAC,EAAO,IAAS,CACpBb,EAAO,EAAK,EAEZQ,EAAY,IAAGR,GAAI,EAEb,MAAAc,EAAK,IAAO,YAAY,eAC5B,OAAQd,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBY,EAAQ,cAAcE,CAAK,CAC7B,EAEMC,EAAW,IAAS,CACxBN,MAAM,QAEAK,EAAK,IAAO,YAAY,OAAM,CAClC,QAAS,GACT,SAAU,GAAI,EAEhBF,EAAQ,cAAcE,CAAK,CAC7B,+aAeYE,EAAAC,GAAMA,EAAE,MAAQ,UAAYJ,EAAO,oBAV7C,0BACcV,EAAQ,CAAA,GACtBH,EAAI,GAAI,UACRI,KAAY,gFAIFJ,IAAO,OAAS,qCAEdA,EAAI,iBAGdU,oGAQaK,8DAJRV,EAAI,GAAAa,EAAAC,CAAA,uDAaEN,8HASgCN,EAAY,CAAA,CAAA,kBADhDA,EAAY,GAAAW,EAAAE,CAAA,iJAWFpB,EAAI,oCArCdqB,GAAAC,EAAAC,GAAAX,QAAAA,CAAO,YAciCN,EAAK,CAAA,CAAA,aA7B1D","x_google_ignoreList":[0]}

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

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Drawer.svelte';
+import '../button/Button.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

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,gCAAgC,CAAC;AAMrE,QAAA,MAAM,IAAI,EAAE,IA0EX,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"}
+{"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;AAKrE,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IA0EX,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"}

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

@@ -2,6 +2,8 @@ import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { action } from 'storybook/actions';
+import './Drawer.svelte';
+import '../button/Button.svelte';
 const meta = {
     title: 'Overlay/Drawer',
     component: 'm-drawer',

package/dist/components/drawer/Drawer.svelte

@@ -47,8 +47,17 @@
     onBack?: () => void;
   }
 
-  let { open, position, extended, back, title, contentTitle, onUpdateOpen, onBack }: Props =
-    $props();
+  let {
+    open,
+    position,
+    extended,
+    back,
+    title,
+    contentTitle,
+    onUpdateOpen,
+    onBack,
+    ...attrs
+  }: Props = $props();
   let element: HTMLElement;
 
   const onClose = () => {
@@ -89,6 +98,7 @@
   aria-hidden={!open}
   onkeydown={(e) => e.key === 'Escape' && onClose()}
   bind:this={element}
+  {...attrs}
 >
   <div class="mc-drawer__dialog" role="document">
     <div class="mc-drawer__header">
@@ -168,7 +178,7 @@
   visibility: hidden;
   width: 100%;
   z-index: var(--drawer-z-index, 3);
-  border-radius: var(--radius-l, 1rem);
+  border-radius: var(--border-radius-l, 1rem);
 }
 @media (width >= 680px) {
   .mc-drawer__dialog {
@@ -229,7 +239,7 @@
   flex-direction: column;
   gap: 1rem;
   padding: 1rem 1.5rem;
-  border-top: var(--border-s, 1px) solid var(--divider-color-primary, #cccccc);
+  border-top: var(--border-width-s, 0.0625rem) solid var(--divider-color-primary, #cccccc);
 }
 @media (width >= 680px) {
   .mc-drawer__footer {
@@ -278,7 +288,7 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-radius, 0.25rem);
+  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -442,7 +452,7 @@
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAOE;;;;;;;GAOG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AA4EH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;;;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAOE;;;;;;;GAOG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAqFH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;;;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/components/field/Field.js

@@ -1,7 +1,7 @@
-import{c as J,p as K,a as N,b as t,f as x,s as d,d as r,t as h,i as u,j as O,k as a,r as v,h as w,e as P,g as Q}from"../../custom-element.js";import{i as p}from"../../if.js";import{s as R}from"../../slot.js";import{s as k}from"../../attributes.js";import{L as T}from"../loader/Loader.js";var U=x('<span class="mc-field__requirement svelte-19i2lwv" aria-hidden="true"> </span>'),W=x('<span class="mc-field__help svelte-19i2lwv"> </span>'),X=x("<span><!> </span>"),Y=x('<div class="mc-field"><label class="mc-field__label svelte-19i2lwv"> <!></label> <!> <div class="mc-field__content svelte-19i2lwv"><!></div> <!></div>');const $={hash:"svelte-19i2lwv",code:`/**
+import{c as J,p as K,a as N,b as t,f as x,s as d,d as r,t as h,h as u,i as O,j as a,e as v,g as w,l as P,m as Q}from"../../custom-element.js";import{i as p}from"../../if.js";import{s as R}from"../../slot.js";import{s as M}from"../../attributes.js";import{L as T}from"../loader/Loader.js";var U=x('<span class="mc-field__requirement svelte-19i2lwv" aria-hidden="true"> </span>'),W=x('<span class="mc-field__help svelte-19i2lwv"> </span>'),X=x("<span><!> </span>"),Y=x('<div class="mc-field"><label class="mc-field__label svelte-19i2lwv"> <!></label> <!> <div class="mc-field__content svelte-19i2lwv"><!></div> <!></div>');const $={hash:"svelte-19i2lwv",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-field__label.svelte-19i2lwv {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__requirement.svelte-19i2lwv, .mc-field__help.svelte-19i2lwv {font-size:var(--font-size-50, 0.75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666);}.mc-field__help.svelte-19i2lwv {display:block;margin-top:0.125rem;}.mc-field__content.svelte-19i2lwv {margin-top:0.5rem;}.mc-field__validation-message.svelte-19i2lwv {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.is-valid.svelte-19i2lwv::before, .mc-field__validation-message.is-invalid.svelte-19i2lwv::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-19i2lwv {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-19i2lwv::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-invalid.svelte-19i2lwv {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-19i2lwv::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");}
 
-/* stylelint-enable string-no-newline */`};function ee(M,l){K(l,!0),N(M,$);let b=t(l,"id",7),q=t(l,"label",7),n=t(l,"requirementtext",7),o=t(l,"helpid",7),m=t(l,"helptext",7),y=t(l,"messageid",7),z=t(l,"message",7),g=t(l,"isinvalid",7),c=t(l,"isvalid",7),f=t(l,"isloading",7);var j={get id(){return b()},set id(e){b(e),a()},get label(){return q()},set label(e){q(e),a()},get requirementtext(){return n()},set requirementtext(e){n(e),a()},get helpid(){return o()},set helpid(e){o(e),a()},get helptext(){return m()},set helptext(e){m(e),a()},get messageid(){return y()},set messageid(e){y(e),a()},get message(){return z()},set message(e){z(e),a()},get isinvalid(){return g()},set isinvalid(e){g(e),a()},get isvalid(){return c()},set isvalid(e){c(e),a()},get isloading(){return f()},set isloading(e){f(e),a()}},E=Y(),_=r(E),L=r(_),D=d(L);{var F=e=>{var i=U(),s=r(i,!0);v(i),h(()=>w(s,n())),u(e,i)};p(D,e=>{n()&&e(F)})}v(_);var B=d(_,2);{var S=e=>{var i=W(),s=r(i,!0);v(i),h(()=>{k(i,"id",o()),w(s,m())}),u(e,i)};p(B,e=>{o()&&m()&&e(S)})}var Z=d(B,2),V=r(Z);R(V,l,"default",{}),v(Z);var A=d(Z,2);{var G=e=>{var i=X(),s=r(i);{var H=C=>{T(C,{size:"xs"})};p(s,C=>{f()&&C(H)})}var I=d(s);v(i),h(()=>{k(i,"id",y()),P(i,1,Q(["mc-field__validation-message",c()&&"is-valid",g()&&"is-invalid"]),"svelte-19i2lwv"),w(I,` ${z()??""}`)}),u(e,i)};p(A,e=>{(g()||c()||f())&&e(G)})}return v(E),h(()=>{k(_,"for",b()),w(L,`${q()??""} `)}),u(M,E),O(j)}customElements.define("m-field",J(ee,{id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{},isinvalid:{},isvalid:{},isloading:{}},["default"],[],!0));
+/* stylelint-enable string-no-newline */`};function ee(k,l){K(l,!0),N(k,$);let b=t(l,"id",7),q=t(l,"label",7),n=t(l,"requirementtext",7),o=t(l,"helpid",7),m=t(l,"helptext",7),y=t(l,"messageid",7),z=t(l,"message",7),g=t(l,"isinvalid",7),c=t(l,"isvalid",7),f=t(l,"isloading",7);var j={get id(){return b()},set id(e){b(e),a()},get label(){return q()},set label(e){q(e),a()},get requirementtext(){return n()},set requirementtext(e){n(e),a()},get helpid(){return o()},set helpid(e){o(e),a()},get helptext(){return m()},set helptext(e){m(e),a()},get messageid(){return y()},set messageid(e){y(e),a()},get message(){return z()},set message(e){z(e),a()},get isinvalid(){return g()},set isinvalid(e){g(e),a()},get isvalid(){return c()},set isvalid(e){c(e),a()},get isloading(){return f()},set isloading(e){f(e),a()}},E=Y(),_=r(E),L=r(_),D=d(L);{var F=e=>{var i=U(),s=r(i,!0);v(i),h(()=>w(s,n())),u(e,i)};p(D,e=>{n()&&e(F)})}v(_);var B=d(_,2);{var S=e=>{var i=W(),s=r(i,!0);v(i),h(()=>{M(i,"id",o()),w(s,m())}),u(e,i)};p(B,e=>{o()&&m()&&e(S)})}var Z=d(B,2),V=r(Z);R(V,l,"default",{}),v(Z);var A=d(Z,2);{var G=e=>{var i=X(),s=r(i);{var H=C=>{T(C,{size:"xs"})};p(s,C=>{f()&&C(H)})}var I=d(s);v(i),h(()=>{M(i,"id",y()),P(i,1,Q(["mc-field__validation-message",c()&&"is-valid",g()&&"is-invalid"]),"svelte-19i2lwv"),w(I,` ${z()??""}`)}),u(e,i)};p(A,e=>{(g()||c()||f())&&e(G)})}return v(E),h(()=>{M(_,"for",b()),w(L,`${q()??""} `)}),u(k,E),O(j)}customElements.define("m-field",J(ee,{id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{},isinvalid:{},isvalid:{},isloading:{}},["default"],[],!0));
 //# sourceMappingURL=Field.js.map

package/dist/components/field/Field.stories.d.ts

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Field.svelte';
+import '../textinput/Textinput.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/field/Field.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC"}
+{"version":3,"file":"Field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,gBAAgB,CAAC;AACxB,OAAO,+BAA+B,CAAC;AAEvC,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC"}

package/dist/components/field/Field.stories.js

@@ -1,6 +1,8 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './Field.svelte';
+import '../textinput/Textinput.svelte';
 const meta = {
     title: 'Form Elements/Field',
     component: 'm-field',

package/dist/components/flag/Flag.js

@@ -1,4 +1,4 @@
-import{c as v,p,a as u,b as c,f as m,t as b,i as h,j as x,k as o,d as f,r as g,e as k,g as _,h as w}from"../../custom-element.js";var y=m('<div><span class="mc-flag__label"> </span></div>');const z={hash:"svelte-1e4tn4t",code:`/**
+import{c as p,p as m,a as u,b as n,f as b,r as h,t as _,h as x,i as k,j as c,d as f,e as d,g as w}from"../../custom-element.js";import{a as y}from"../../attributes.js";var $=b('<div><span class="mc-flag__label"> </span></div>');const z={hash:"svelte-1e4tn4t",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-flag.svelte-1e4tn4t {padding:0 0.5rem;border-radius:var(--radius-xs, 0.125rem);white-space:nowrap;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);height:1.5rem;display:inline-flex;align-items:center;color:var(--flag-color-text-standard, #ffffff);background-color:var(--flag-color-background-standard, #191919);}.mc-flag--accent.svelte-1e4tn4t {color:var(--flag-color-text-accent, #ffffff);background-color:var(--flag-color-background-accent, #117f03);}.mc-flag--danger.svelte-1e4tn4t {color:var(--flag-color-text-danger, #ffffff);background-color:var(--flag-color-background-danger, #c61112);}.mc-flag--inverse.svelte-1e4tn4t {color:var(--flag-color-text-inverse, #000000);background-color:var(--flag-color-background-inverse, #ffffff);}`};function j(n,a){p(a,!0),u(n,z);let r=c(a,"appearance",7,"standard"),t=c(a,"label",7);var d={get appearance(){return r()},set appearance(l="standard"){r(l),o()},get label(){return t()},set label(l){t(l),o()}},e=y(),s=f(e),i=f(s,!0);return g(s),g(e),b(()=>{k(e,1,_(["mc-flag",`mc-flag--${r()}`]),"svelte-1e4tn4t"),w(i,t())}),h(n,e),x(d)}customElements.define("m-flag",v(j,{appearance:{},label:{}},[],[],!0));
+ */.mc-flag.svelte-1e4tn4t {padding:0 0.5rem;border-radius:var(--border-radius-xs, 0.125rem);white-space:nowrap;font-size:var(--font-size-100, 0.875rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);height:1.5rem;display:inline-flex;align-items:center;color:var(--flag-color-text-standard, #ffffff);background-color:var(--flag-color-background-standard, #191919);}.mc-flag--accent.svelte-1e4tn4t {color:var(--flag-color-text-accent, #ffffff);background-color:var(--flag-color-background-accent, #117f03);}.mc-flag--danger.svelte-1e4tn4t {color:var(--flag-color-text-danger, #ffffff);background-color:var(--flag-color-background-danger, #c61112);}.mc-flag--inverse.svelte-1e4tn4t {color:var(--flag-color-text-inverse, #000000);background-color:var(--flag-color-background-inverse, #ffffff);}`};function j(o,e){m(e,!0),u(o,z);let t=n(e,"appearance",7,"standard"),r=n(e,"label",7),g=h(e,["$$slots","$$events","$$legacy","$$host","appearance","label"]);var i={get appearance(){return t()},set appearance(l="standard"){t(l),c()},get label(){return r()},set label(l){r(l),c()}},a=$();y(a,()=>({class:["mc-flag",`mc-flag--${t()}`],...g}),void 0,void 0,void 0,"svelte-1e4tn4t");var s=f(a),v=f(s,!0);return d(s),d(a),_(()=>w(v,r())),x(o,a),k(i)}customElements.define("m-flag",p(j,{appearance:{},label:{}},[],[],!0));
 //# sourceMappingURL=Flag.js.map

package/dist/components/flag/Flag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flag.js","sources":["../../../src/components/flag/Flag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-flag' }} />\n\n<script lang=\"ts\">\n  /**\n   * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.\n   */\n  interface Props {\n    /**\n     * Label of the Flag.\n     */\n    label: string;\n    /**\n     * Allows to define the Flag appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n  }\n\n  let { appearance = 'standard', label }: Props = $props();\n</script>\n\n<div class={['mc-flag', `mc-flag--${appearance}`]}>\n  <span class=\"mc-flag__label\">\n    {label}\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/flag';\n</style>\n"],"names":["appearance","label","$.prop","$$props","$.set_class","div","$.clsx"],"mappings":";;q0BAAA,gBAiBQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,uDAAjB,WAAU,0GAGlBC,EAAAC,EAAA,EAAAC,EAAA,CAAA,sBAAuBN,EAAU,CAAA,EAAA,CAAA,EAAA,gBAAA,MAEzCC,GAAK,eAJV"}
+{"version":3,"file":"Flag.js","sources":["../../../src/components/flag/Flag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-flag' }} />\n\n<script lang=\"ts\">\n  /**\n   * A flag is used to display meta-information about a product or service, acting as a visual indicator of the main category of content. It is typically placed at the top of an element to ensure immediate visibility.\n   */\n  interface Props {\n    /**\n     * Label of the Flag.\n     */\n    label: string;\n    /**\n     * Allows to define the Flag appearance.\n     */\n    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';\n  }\n\n  let { appearance = 'standard', label, ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-flag', `mc-flag--${appearance}`]} {...attrs}>\n  <span class=\"mc-flag__label\">\n    {label}\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/flag';\n</style>\n"],"names":["appearance","label","$.prop","$$props","attrs","$.rest_props"],"mappings":";;40BAAA,gBAiBQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAKC,EAAKC,EAAAF,EAAA,sHAA3B,WAAU,kFAGlB,UAAS,YAAcH,EAAU,CAAA,EAAA,EAAA,GAASI,IAAK,OAAA,OAAA,OAAA,gBAAA,kDAEvDH,EAAK,CAAA,CAAA,aAJV"}

package/dist/components/flag/Flag.stories.d.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './Flag.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/flag/Flag.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/flag/Flag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAeX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Flag.stories.d.ts","sourceRoot":"","sources":["../../../src/components/flag/Flag.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,eAAe,CAAC;AAEvB,QAAA,MAAM,IAAI,EAAE,IAeX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}