@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/components/checklistmenu/CheckListMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckListMenu.js","sources":["../../../src/components/checklistmenu/CheckListMenu.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-check-list-menu',\n    props: {\n      selected: { reflect: true, type: 'Number', attribute: 'selected' },\n      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { CheckCircleFilled24 } from '@mozaic-ds/icons-svelte';\n  import MBuiltInMenu from '../builtinmenu/BuiltInMenu.svelte';\n  import MBuiltInMenuItem from '../builtinmenuitem/BuiltInMenuItem.svelte';\n\n  type CheckListMenuItem = {\n    label: string;\n    href?: string;\n    target?: '_self' | '_blank' | '_parent' | '_top';\n    checked: boolean;\n  };\n\n  /**\n   * A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.\n   */\n  interface Props {\n    /**\n     * Defines the menu items, each of which sets a checked state and act as a button, link, or router-link.\n     */\n    items: CheckListMenuItem[];\n    /**\n     * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.\n     */\n    selected?: number;\n    /**\n     * When enabled, adds a visible border around the wrapper to highlight or separate its content.\n     */\n    outlined?: boolean;\n  }\n\n  let { selected = $bindable(), items, outlined }: Props = $props();\n</script>\n\n<MBuiltInMenu {selected} {outlined}>\n  {#each items as item, index (index)}\n    {@const tag = item.href ? 'a' : 'button'}\n    <MBuiltInMenuItem\n      label={item.label}\n      href={item.href}\n      target={item.target}\n      selected={selected === index}\n      role={tag === 'button' ? 'menuitem' : undefined}\n      onclick={() => (selected = index)}\n    >\n      {#snippet icon()}\n        {#if item.checked}\n          <span\n            class={{\n              'mc-check-list-menu__icon': true,\n              'mc-check-list-menu__icon--selected': selected === index,\n            }}\n          >\n            <CheckCircleFilled24 />\n          </span>\n        {/if}\n      {/snippet}\n    </MBuiltInMenuItem>\n  {/each}\n</MBuiltInMenu>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/built-in-menu/t.built-in-menu' as menu;\n\n  .mc-check-list-menu__icon {\n    @include menu.set-default-icon();\n\n    &--selected {\n      @include menu.set-selected-icon();\n    }\n  }\n</style>\n"],"names":["selected","$.prop","$$props","items","outlined","MBuiltInMenu","$$anchor","$.each","node","item","index","tag","icon","span","root_4","node_2","$.child","CheckCircleFilled24","$.reset","$.append","$.get","$$render","consequent","$0","$.derived","$1","MBuiltInMenuItem"],"mappings":";;kOAUA,oBA8BQA,EAAQC,EAAAC,EAAA,WAAA,EAAA,EAAgBC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAQH,EAAAC,EAAA,WAAA,CAAA,mKAG9CG,OAAAA,EAAYC,EAAA,uBAAEN,EAAQ,yBAAGI,EAAQ,qCACzBG,EAAAC,EAAA,GAAAL,OAASM,EAAIC,IAAA,CACV,MAAAC,UAAMF,CAAI,EAAC,KAAO,IAAM,QAAQ,SAS5BG,EAAIN,GAAA,6BAET,IAAAO,EAAAC,EAAA,EAAAC,EAAAC,EAAAH,CAAA,EAMEI,EAAmBF,EAAA,EAAA,EANrBG,EAAAL,CAAA,UAAAA,OAEG,2BAA4B,GAC5B,qCAAsCb,EAAQ,IAAKU,uBAHtDS,EAAAb,EAAAO,CAAA,WADEO,EAAAX,CAAI,EAAC,SAAOY,EAAAC,CAAA,YALT,IAAAC,EAAAC,EAAA,IAAAxB,EAAQ,IAAKU,CAAK,EACtBe,EAAAD,EAAA,IAAAJ,EAAAT,CAAG,IAAK,SAAW,WAAa,MAAS,EALhDe,EAAApB,EAAA,aACQ,OAAAc,EAAAX,CAAI,EAAC,kBACN,OAAAW,EAAAX,CAAI,EAAC,mBACH,OAAAW,EAAAX,CAAI,EAAC,4DAGG,QAAA,IAAAT,EAAWU,CAAK,EAEtB,KAAAE,4DAbR"}

package/dist/components/checklistmenu/CheckListMenu.spec.js

@@ -0,0 +1,33 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import CheckListMenu from './CheckListMenu.svelte';
+const items = [
+    { label: 'First', checked: true },
+    { label: 'Second', href: '/two', target: '_blank', checked: false },
+    { label: 'Third', checked: true },
+];
+describe('CheckListMenu component', () => {
+    it('renders the correct number of menu items', () => {
+        const { container } = render(CheckListMenu, { props: { items, selected: 0 } });
+        const menuItems = container.querySelectorAll('.mc-built-in-menu__item');
+        expect(menuItems.length).toBe(items.length);
+    });
+    it('passes href attributes to items with links', () => {
+        const { container } = render(CheckListMenu, { props: { items, selected: undefined } });
+        const linked = container.querySelector('.mc-built-in-menu__item a[href="/two"]');
+        expect(linked).not.toBe(undefined);
+    });
+    it('renders icons for checked items and marks the selected one', () => {
+        const { container } = render(CheckListMenu, { props: { items, selected: 0 } });
+        const icons = container.querySelectorAll('.mc-check-list-menu__icon');
+        expect(icons.length).toBe(2);
+        expect(icons[0].classList.contains('mc-check-list-menu__icon--selected')).toBe(true);
+    });
+    it('updates selected state when an item is clicked', async () => {
+        const { container } = render(CheckListMenu, { props: { items, selected: 0 } });
+        const menuItems = container.querySelectorAll('.mc-built-in-menu__item');
+        expect(menuItems[0].getAttribute('selected')).not.toBe(undefined);
+        await fireEvent.click(menuItems[1]);
+        expect(menuItems[1].getAttribute('selected')).not.toBe(undefined);
+    });
+});

package/dist/components/checklistmenu/CheckListMenu.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './CheckListMenu.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Outlined: Story;
+//# sourceMappingURL=CheckListMenu.stories.d.ts.map

package/dist/components/checklistmenu/CheckListMenu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckListMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/checklistmenu/CheckListMenu.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,wBAAwB,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAqBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC"}

package/dist/components/checklistmenu/CheckListMenu.stories.js

@@ -0,0 +1,32 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import './CheckListMenu.svelte';
+const meta = {
+    title: 'Navigation/Check list menu',
+    component: 'm-check-list-menu',
+    tags: ['v2'],
+    args: {
+        selected: 1,
+        items: [
+            { label: 'Label', checked: true },
+            { label: 'Label', checked: true },
+            { label: 'Label', checked: false },
+            { label: 'Label', checked: true },
+        ],
+    },
+    render: (args) => html `
+    <m-check-list-menu
+      selected=${ifDefined(args.selected)}
+      ?outlined=${args.outlined}
+      .items=${ifDefined(args.items)}
+    >
+    </m-check-list-menu>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Outlined = {
+    args: {
+        outlined: true,
+    },
+};

package/dist/components/checklistmenu/CheckListMenu.svelte

@@ -0,0 +1,79 @@
+<svelte:options
+  customElement={{
+    tag: 'm-check-list-menu',
+    props: {
+      selected: { reflect: true, type: 'Number', attribute: 'selected' },
+      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  import { CheckCircleFilled24 } from '@mozaic-ds/icons-svelte';
+  import MBuiltInMenu from '../builtinmenu/BuiltInMenu.svelte';
+  import MBuiltInMenuItem from '../builtinmenuitem/BuiltInMenuItem.svelte';
+
+  type CheckListMenuItem = {
+    label: string;
+    href?: string;
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    checked: boolean;
+  };
+
+  /**
+   * A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.
+   */
+  interface Props {
+    /**
+     * Defines the menu items, each of which sets a checked state and act as a button, link, or router-link.
+     */
+    items: CheckListMenuItem[];
+    /**
+     * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.
+     */
+    selected?: number;
+    /**
+     * When enabled, adds a visible border around the wrapper to highlight or separate its content.
+     */
+    outlined?: boolean;
+  }
+
+  let { selected = $bindable(), items, outlined }: Props = $props();
+</script>
+
+<MBuiltInMenu {selected} {outlined}>
+  {#each items as item, index (index)}
+    {@const tag = item.href ? 'a' : 'button'}
+    <MBuiltInMenuItem
+      label={item.label}
+      href={item.href}
+      target={item.target}
+      selected={selected === index}
+      role={tag === 'button' ? 'menuitem' : undefined}
+      onclick={() => (selected = index)}
+    >
+      {#snippet icon()}
+        {#if item.checked}
+          <span
+            class={{
+              'mc-check-list-menu__icon': true,
+              'mc-check-list-menu__icon--selected': selected === index,
+            }}
+          >
+            <CheckCircleFilled24 />
+          </span>
+        {/if}
+      {/snippet}
+    </MBuiltInMenuItem>
+  {/each}
+</MBuiltInMenu>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-check-list-menu__icon {
+  fill: var(--built-in-menu-color-text-default, #404040);
+}
+.mc-check-list-menu__icon--selected {
+  fill: var(--built-in-menu-color-text-selected, #006902);
+}</style>

package/dist/components/checklistmenu/CheckListMenu.svelte.d.ts

@@ -0,0 +1,27 @@
+type CheckListMenuItem = {
+    label: string;
+    href?: string;
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    checked: boolean;
+};
+/**
+ * A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.
+ */
+interface Props {
+    /**
+     * Defines the menu items, each of which sets a checked state and act as a button, link, or router-link.
+     */
+    items: CheckListMenuItem[];
+    /**
+     * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.
+     */
+    selected?: number;
+    /**
+     * When enabled, adds a visible border around the wrapper to highlight or separate its content.
+     */
+    outlined?: boolean;
+}
+declare const CheckListMenu: import("svelte").Component<Props, {}, "selected">;
+type CheckListMenu = ReturnType<typeof CheckListMenu>;
+export default CheckListMenu;
+//# sourceMappingURL=CheckListMenu.svelte.d.ts.map

package/dist/components/checklistmenu/CheckListMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckListMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checklistmenu/CheckListMenu.svelte.ts"],"names":[],"mappings":"AAQE,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyCH,QAAA,MAAM,aAAa,mDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/checklistmenu/README.md

@@ -0,0 +1,12 @@
+# `m-check-list-menu`
+
+A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `items*` | Defines the menu items, each of which sets a checked state and act as a button, link, or router-link. | `CheckListMenuItem[]` |   |
+| `selected` | Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use. | `number` | `$bindable()` |
+| `outlined` | When enabled, adds a visible border around the wrapper to highlight or separate its content. | `boolean` |   |
+

package/dist/components/circularprogressbar/CircularProgressbar.js

@@ -1,6 +1,6 @@
-import{c as P,p as S,a as q,b as l,f as m,s as z,d as a,i as g,j as A,k as i,D as G,t as f,r as t,F as H,h}from"../../custom-element.js";import{i as w}from"../../if.js";import{b as I}from"../../attributes.js";var J=m('<div class="mc-circular-progressbar__percentage svelte-oy9ecz"><p class="mc-circular-progressbar__value svelte-oy9ecz"> </p> <p class="mc-circular-progressbar__unit svelte-oy9ecz">%</p></div>'),K=m('<p class="mc-circular-progressbar__text svelte-oy9ecz"> </p>'),N=m('<div class="mc-circular-progressbar__content svelte-oy9ecz"><p class="mc-circular-progressbar__number svelte-oy9ecz"> </p> <!></div>'),O=m('<div><svg class="mc-circular-progressbar__line svelte-oy9ecz" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 100 100"><circle class="mc-circular-progressbar__track svelte-oy9ecz" cx="50" cy="50" r="46"></circle><circle class="mc-circular-progressbar__indicator svelte-oy9ecz" cx="50" cy="50" r="46"></circle></svg> <!> <!></div>');const Q={hash:"svelte-oy9ecz",code:`/**
+import{c as S,p as q,a as A,b as l,s as z,d as a,f as g,g as F,h as m,i as G,j as i,t as f,r as t,aC as H,e as h}from"../../custom-element.js";import{i as w}from"../../if.js";import{a as I}from"../../attributes.js";var J=m('<div class="mc-circular-progressbar__percentage svelte-oy9ecz"><p class="mc-circular-progressbar__value svelte-oy9ecz"> </p> <p class="mc-circular-progressbar__unit svelte-oy9ecz">%</p></div>'),K=m('<p class="mc-circular-progressbar__text svelte-oy9ecz"> </p>'),N=m('<div class="mc-circular-progressbar__content svelte-oy9ecz"><p class="mc-circular-progressbar__number svelte-oy9ecz"> </p> <!></div>'),O=m('<div><svg class="mc-circular-progressbar__line svelte-oy9ecz" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 100 100"><circle class="mc-circular-progressbar__track svelte-oy9ecz" cx="50" cy="50" r="46"></circle><circle class="mc-circular-progressbar__indicator svelte-oy9ecz" cx="50" cy="50" r="46"></circle></svg> <!> <!></div>');const Q={hash:"svelte-oy9ecz",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-circular-progressbar.svelte-oy9ecz {--progress-value: 40;font-family:var(--font-family, LeroyMerlin), sans-serif;color:var(--progressbar-color-text, #000000);position:relative;display:inline-block;width:9rem;height:9rem;border-radius:50%;}.mc-circular-progressbar__line.svelte-oy9ecz {transform:rotate(270deg);}.mc-circular-progressbar__track.svelte-oy9ecz, .mc-circular-progressbar__indicator.svelte-oy9ecz {stroke-width:calc(8 / (144 / 100));fill:none;stroke-linecap:round;}.mc-circular-progressbar__track.svelte-oy9ecz {stroke:var(--progressbar-color-background, #c9d0de);}.mc-circular-progressbar__indicator.svelte-oy9ecz {stroke:var(--progressbar-color-indicator, #464e63);stroke-dasharray:289.1428571429;stroke-dashoffset:calc((100 - var(--progress-value)) / 100 * 289.1428571429);transition:stroke-dashoffset 0.3s ease;}.mc-circular-progressbar__content.svelte-oy9ecz {display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;margin:0;top:50%;left:50%;transform:translate(-50%, -50%);}.mc-circular-progressbar__number.svelte-oy9ecz, .mc-circular-progressbar__text.svelte-oy9ecz {white-space:nowrap;text-align:center;line-height:var(--line-height-s, 1.3);margin:0;color:var(--progressbar-color-text, #000000);}.mc-circular-progressbar__number.svelte-oy9ecz {font-size:var(--font-size-300, 1.5rem);}.mc-circular-progressbar__text.svelte-oy9ecz {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-circular-progressbar__percentage.svelte-oy9ecz {display:flex;justify-content:center;align-items:center;position:absolute;margin:0;top:50%;left:50%;transform:translate(-50%, -50%);}.mc-circular-progressbar__value.svelte-oy9ecz, .mc-circular-progressbar__unit.svelte-oy9ecz {font-weight:var(--font-weight-semi-bold, 600);line-height:var(--line-height-s, 1.3);color:var(--progressbar-color-text, #000000);}.mc-circular-progressbar__value.svelte-oy9ecz {font-size:var(--font-size-600, 2.5rem);}.mc-circular-progressbar__unit.svelte-oy9ecz {font-size:var(--font-size-300, 1.5rem);}.mc-circular-progressbar--m.svelte-oy9ecz .mc-circular-progressbar__content:where(.svelte-oy9ecz), .mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__content:where(.svelte-oy9ecz) {display:none;}.mc-circular-progressbar--m.svelte-oy9ecz .mc-circular-progressbar__percentage:where(.svelte-oy9ecz), .mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__percentage:where(.svelte-oy9ecz) {display:none;}.mc-circular-progressbar--m.svelte-oy9ecz::after, .mc-circular-progressbar--s.svelte-oy9ecz::after {display:none;}.mc-circular-progressbar--m.svelte-oy9ecz .mc-circular-progressbar__track:where(.svelte-oy9ecz),
 .mc-circular-progressbar--m.svelte-oy9ecz .mc-circular-progressbar__indicator:where(.svelte-oy9ecz) {stroke-width:calc(4 / (48 / 100));}.mc-circular-progressbar--m.svelte-oy9ecz {width:3rem;height:3rem;}.mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__track:where(.svelte-oy9ecz),
-.mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__indicator:where(.svelte-oy9ecz) {stroke-width:calc(4 / (32 / 100));transform-origin:center;transform:scale(0.95);}.mc-circular-progressbar--s.svelte-oy9ecz {width:2rem;height:2rem;}`};function R(x,r){S(r,!0),q(x,Q);let n=l(r,"size",7),o=l(r,"value",7,0),v=l(r,"type",7,"percentage"),_=l(r,"contentvalue",7),u=l(r,"additionalinfo",7),j=G(r,["$$slots","$$events","$$legacy","$$host","size","value","type","contentvalue","additionalinfo"]);var C={get size(){return n()},set size(e){n(e),i()},get value(){return o()},set value(e=0){o(e),i()},get type(){return v()},set type(e="percentage"){v(e),i()},get contentvalue(){return _()},set contentvalue(e){_(e),i()},get additionalinfo(){return u()},set additionalinfo(e){u(e),i()}},p=O();I(p,()=>({class:["mc-circular-progressbar",n()&&`mc-circular-progressbar--${n()}`],role:"progressbar","aria-valuenow":o(),"aria-valuemin":"0","aria-valuemax":"100",style:`--progress-value: ${o()};`,...j}),void 0,void 0,void 0,"svelte-oy9ecz");var k=z(a(p),2);{var D=e=>{var s=J(),c=a(s),y=a(c,!0);t(c),H(2),t(s),f(()=>h(y,o())),g(e,s)};w(k,e=>{v()==="percentage"&&e(D)})}var B=z(k,2);{var E=e=>{var s=N(),c=a(s),y=a(c,!0);t(c);var F=z(c,2);{var L=b=>{var d=K(),M=a(d,!0);t(d),f(()=>h(M,u())),g(b,d)};w(F,b=>{u()&&b(L)})}t(s),f(()=>h(y,_())),g(e,s)};w(B,e=>{v()==="content"&&e(E)})}return t(p),g(x,p),A(C)}customElements.define("m-circular-progressbar",P(R,{size:{},value:{},type:{},contentvalue:{},additionalinfo:{}},[],[],!0));export{R as C};
+.mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__indicator:where(.svelte-oy9ecz) {stroke-width:calc(4 / (32 / 100));transform-origin:center;transform:scale(0.95);}.mc-circular-progressbar--s.svelte-oy9ecz {width:2rem;height:2rem;}`};function R(x,r){q(r,!0),A(x,Q);let n=l(r,"size",7),o=l(r,"value",7,0),v=l(r,"type",7,"percentage"),_=l(r,"contentvalue",7),u=l(r,"additionalinfo",7),j=G(r,["$$slots","$$events","$$legacy","$$host","size","value","type","contentvalue","additionalinfo"]);var C={get size(){return n()},set size(e){n(e),i()},get value(){return o()},set value(e=0){o(e),i()},get type(){return v()},set type(e="percentage"){v(e),i()},get contentvalue(){return _()},set contentvalue(e){_(e),i()},get additionalinfo(){return u()},set additionalinfo(e){u(e),i()}},p=O();I(p,()=>({class:["mc-circular-progressbar",n()&&`mc-circular-progressbar--${n()}`],role:"progressbar","aria-valuenow":o(),"aria-valuemin":"0","aria-valuemax":"100",style:`--progress-value: ${o()};`,...j}),void 0,void 0,void 0,"svelte-oy9ecz");var k=z(a(p),2);{var B=e=>{var s=J(),c=a(s),y=a(c,!0);t(c),H(2),t(s),f(()=>h(y,o())),g(e,s)};w(k,e=>{v()==="percentage"&&e(B)})}var D=z(k,2);{var E=e=>{var s=N(),c=a(s),y=a(c,!0);t(c);var L=z(c,2);{var M=b=>{var d=K(),P=a(d,!0);t(d),f(()=>h(P,u())),g(b,d)};w(L,b=>{u()&&b(M)})}t(s),f(()=>h(y,_())),g(e,s)};w(D,e=>{v()==="content"&&e(E)})}return t(p),g(x,p),F(C)}customElements.define("m-circular-progressbar",S(R,{size:{},value:{},type:{},contentvalue:{},additionalinfo:{}},[],[],!0));export{R as C};
 //# sourceMappingURL=CircularProgressbar.js.map

package/dist/components/circularprogressbar/CircularProgressbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgressbar.js","sources":["../../../src/components/circularprogressbar/CircularProgressbar.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-circular-progressbar' }} />\n\n<script lang=\"ts\">\n  /**\n   * A circular progress bar visually represents progress toward a goal or completion of a process using a circular shape. It is commonly used to indicate task completion or performance metrics. The progress is displayed as a partially filled ring, often accompanied by a percentage or status indicator. Circular Progress Bars are useful for providing users with real-time feedback on ongoing actions without taking up significant screen space.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Sets the size of the progress bar.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * The current value of the progress bar.\n     */\n    value?: number;\n    /**\n     * Shows either a percentage or custom content.\n     */\n    type?: 'percentage' | 'content';\n    /**\n     * Main content shown when `type` is `'content'`.\n     */\n    contentvalue?: string;\n    /**\n     * Additional text shown to define the `contentValue`.\n     */\n    additionalinfo?: string;\n  }\n\n  let {\n    size,\n    value = 0,\n    type = 'percentage',\n    contentvalue,\n    additionalinfo,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<div\n  class={['mc-circular-progressbar', size && `mc-circular-progressbar--${size}`]}\n  role=\"progressbar\"\n  aria-valuenow={value}\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  style={`--progress-value: ${value};`}\n  {...attrs}\n>\n  <svg\n    class=\"mc-circular-progressbar__line\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n    viewBox=\"0 0 100 100\"\n  >\n    <circle class=\"mc-circular-progressbar__track\" cx=\"50\" cy=\"50\" r=\"46\" />\n    <circle class=\"mc-circular-progressbar__indicator\" cx=\"50\" cy=\"50\" r=\"46\" />\n  </svg>\n\n  {#if type === 'percentage'}\n    <div class=\"mc-circular-progressbar__percentage\">\n      <p class=\"mc-circular-progressbar__value\">{value}</p>\n      <p class=\"mc-circular-progressbar__unit\">%</p>\n    </div>\n  {/if}\n\n  {#if type === 'content'}\n    <div class=\"mc-circular-progressbar__content\">\n      <p class=\"mc-circular-progressbar__number\">{contentvalue}</p>\n      {#if additionalinfo}\n        <p class=\"mc-circular-progressbar__text\">{additionalinfo}</p>\n      {/if}\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/circular-progressbar';\n</style>\n"],"names":["size","$.prop","$$props","value","type","contentvalue","additionalinfo","attrs","$.rest_props","$$render","consequent","consequent_1","consequent_2"],"mappings":";;;;2QAAA,oBA+BIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,gBAAQ,CAAC,EACTC,eAAO,YAAY,EACnBC,EAAYJ,EAAAC,EAAA,eAAA,CAAA,EACZI,EAAcL,EAAAC,EAAA,iBAAA,CAAA,EACXK,EAAAC,EAAAN,EAAA,0LAJK,EAAC,6CACF,aAAY,iKAQb,0BAA2BF,iCAAoCA,GAAI,uCAE5DG,EAAK,uEAGQA,EAAK,CAAA,OAC7BI,yHAc2CJ,EAAK,CAAA,CAAA,kBAF/CC,EAAI,IAAK,cAAYK,EAAAC,CAAA,uHAWsBJ,EAAc,CAAA,CAAA,kBADrDA,EAAc,GAAAG,EAAAE,CAAA,mBADyBN,EAAY,CAAA,CAAA,kBAFvDD,EAAI,IAAK,WAASK,EAAAG,CAAA,2BA5BzB"}
+{"version":3,"file":"CircularProgressbar.js","sources":["../../../src/components/circularprogressbar/CircularProgressbar.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-circular-progressbar' }} />\n\n<script lang=\"ts\">\n  /**\n   * A circular progress bar visually represents progress toward a goal or completion of a process using a circular shape. It is commonly used to indicate task completion or performance metrics. The progress is displayed as a partially filled ring, often accompanied by a percentage or status indicator. Circular Progress Bars are useful for providing users with real-time feedback on ongoing actions without taking up significant screen space.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Sets the size of the progress bar.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * The current value of the progress bar.\n     */\n    value?: number;\n    /**\n     * Shows either a percentage or custom content.\n     */\n    type?: 'percentage' | 'content';\n    /**\n     * Main content shown when `type` is `'content'`.\n     */\n    contentvalue?: string;\n    /**\n     * Additional text shown to define the `contentValue`.\n     */\n    additionalinfo?: string;\n  }\n\n  let {\n    size,\n    value = 0,\n    type = 'percentage',\n    contentvalue,\n    additionalinfo,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<div\n  class={['mc-circular-progressbar', size && `mc-circular-progressbar--${size}`]}\n  role=\"progressbar\"\n  aria-valuenow={value}\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  style={`--progress-value: ${value};`}\n  {...attrs}\n>\n  <svg\n    class=\"mc-circular-progressbar__line\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n    viewBox=\"0 0 100 100\"\n  >\n    <circle class=\"mc-circular-progressbar__track\" cx=\"50\" cy=\"50\" r=\"46\" />\n    <circle class=\"mc-circular-progressbar__indicator\" cx=\"50\" cy=\"50\" r=\"46\" />\n  </svg>\n\n  {#if type === 'percentage'}\n    <div class=\"mc-circular-progressbar__percentage\">\n      <p class=\"mc-circular-progressbar__value\">{value}</p>\n      <p class=\"mc-circular-progressbar__unit\">%</p>\n    </div>\n  {/if}\n\n  {#if type === 'content'}\n    <div class=\"mc-circular-progressbar__content\">\n      <p class=\"mc-circular-progressbar__number\">{contentvalue}</p>\n      {#if additionalinfo}\n        <p class=\"mc-circular-progressbar__text\">{additionalinfo}</p>\n      {/if}\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/circular-progressbar';\n</style>\n"],"names":["size","$.prop","$$props","value","type","contentvalue","additionalinfo","attrs","$.rest_props","div","root","node","$.sibling","$.child","div_1","root_1","p","$$render","consequent","div_2","root_2","p_1","p_2","root_3","consequent_1","consequent_2","$.reset","$.append","$$anchor"],"mappings":";;;;2QAEA,oBA6BIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,gBAAQ,CAAC,EACTC,eAAO,YAAY,EACnBC,EAAYJ,EAAAC,EAAA,eAAA,CAAA,EACZI,EAAcL,EAAAC,EAAA,iBAAA,CAAA,EACXK,EAAAC,EAAAN,EAAA,0LAJK,EAAC,6CACF,aAAY,0IAOtBO,EAAAC,EAAA,IAAAD,eACS,0BAA2BT,iCAAoCA,GAAI,uCAE5DG,EAAK,uEAGQA,EAAK,CAAA,OAC7BI,0CAPL,IAAAI,EAAAC,EAAAC,EAAAJ,CAAA,EAAA,CAAA,iBAoBIK,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,EAAC,EAAA,IAADA,CAAC,SADHF,CAAG,YACyCX,EAAK,CAAA,CAAA,MADjDW,CAAG,WADDV,EAAI,IAAK,cAAYa,EAAAC,CAAA,gCAQvBC,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,EAAC,EAAA,IAADA,CAAC,UAADA,EAAC,CAAA,iBAECC,EAACC,EAAA,MAADD,EAAC,EAAA,IAADA,CAAC,YAAwChB,EAAc,CAAA,CAAA,MAAvDgB,CAAC,WADChB,EAAc,GAAAW,EAAAO,CAAA,MAFpBL,CAAG,YAC0Cd,EAAY,CAAA,CAAA,MADzDc,CAAG,WADDf,EAAI,IAAK,WAASa,EAAAQ,CAAA,IA1BxBC,OAAAA,EAAAjB,CAAA,EAAAkB,EAAAC,EAAAnB,CAAA,MAFO"}

package/dist/components/circularprogressbar/CircularProgressbar.stories.d.ts

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

package/dist/components/circularprogressbar/CircularProgressbar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgressbar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/circularprogressbar/CircularProgressbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,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,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}
+{"version":3,"file":"CircularProgressbar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/circularprogressbar/CircularProgressbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,8BAA8B,CAAC;AAEtC,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,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}

package/dist/components/circularprogressbar/CircularProgressbar.stories.js

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './CircularProgressbar.svelte';
 const meta = {
     title: 'Indicators/Circular Progress Bar',
     component: 'm-circular-progressbar',

package/dist/components/container/Container.js

@@ -1,4 +1,4 @@
-import{c as s,p as o,a as r,b as m,f as c,d as p,t as u,i as f,j as h,k as v,r as x,e as b,g as y}from"../../custom-element.js";import{s as w}from"../../slot.js";var g=c("<div><!></div>");const _={hash:"svelte-1oy286b",code:`/**
+import{c as x,p as b,a as y,b as o,t as g,f as d,g as w,h as _,d as k,j as m,k as c,l as f,r as j,n as z,o as B}from"../../custom-element.js";import{s as C}from"../../snippet.js";import{i as D}from"../../if.js";import{s as E}from"../../slot.js";var S=_("<div><!></div>");const q={hash:"svelte-1oy286b",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.ml-container.svelte-1oy286b {padding-inline:1rem;width:100%;box-sizing:border-box;margin-inline:auto;}
 @media (width >= 680px) {.ml-container.svelte-1oy286b {padding-inline:1.5rem;}
@@ -10,5 +10,5 @@ import{c as s,p as o,a as r,b as m,f as c,d as p,t as u,i as f,j as h,k as v,r a
 @media (width >= 1920px) {.ml-container.svelte-1oy286b {max-width:1480px;}
 }.ml-container--fluid.svelte-1oy286b {max-width:none;}
 @media (width >= 1024px) {.ml-container--fluid.svelte-1oy286b {padding-inline:2.5rem;}
-}`};function j(n,i){o(i,!0),r(n,_);let t=m(i,"fluid",7);var a={get fluid(){return t()},set fluid(l){t(l),v()}},e=g(),d=p(e);return w(d,i,"default",{}),x(e),u(()=>b(e,1,y(["ml-container",t()&&"ml-container--fluid"]),"svelte-1oy286b")),f(n,e),h(a)}customElements.define("m-container",s(j,{fluid:{}},["default"],[],!0));
+}`};function A(s,i){b(i,!0),y(s,q);let l=o(i,"fluid",7),n=o(i,"children",7);var u={get fluid(){return l()},set fluid(e){l(e),m()},get children(){return n()},set children(e){n(e),m()}},a=S(),p=k(a);{var h=e=>{var t=c(),r=f(t);C(r,n),d(e,t)},v=e=>{var t=c(),r=f(t);E(r,i,"default",{},null),d(e,t)};D(p,e=>{n()?e(h):e(v,!1)})}return j(a),g(()=>z(a,1,B(["ml-container",l()&&"ml-container--fluid"]),"svelte-1oy286b")),d(s,a),w(u)}customElements.define("m-container",x(A,{fluid:{attribute:"fluid",reflect:!0,type:"Boolean"},children:{}},["default"],[],!0));
 //# sourceMappingURL=Container.js.map

package/dist/components/container/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../src/components/container/Container.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-container' }} />\n\n<script lang=\"ts\">\n  /**\n   * The Container component is designed to wrap your page or section content, typically grids or other layout elements. By default, it centers the content with a maximum width to ensure consistent alignment and spacing.\n   *\n   * @slot default - Use this slot to insert the content of the container.\n   */\n  interface Props {\n    /**\n     * If `true`, the container will take the full width.\n     */\n    fluid?: boolean;\n  }\n\n  let { fluid }: Props = $props();\n</script>\n\n<div class={['ml-container', fluid && 'ml-container--fluid']}>\n  <slot />\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/layouts/container';\n</style>\n"],"names":["fluid","$.prop","$$props"],"mappings":";;;;;;;;;;;;mBAAA,oBAeQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,qHAGA,eAAgBF,EAAK,GAAI,qBAAqB,CAAA,EAAA,gBAAA,CAAA,aAF3D"}
+{"version":3,"file":"Container.js","sources":["../../../src/components/container/Container.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-container',\n    props: {\n      fluid: { reflect: true, type: 'Boolean', attribute: 'fluid' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  /**\n   * The Container component is designed to wrap your page or section content, typically grids or other layout elements. By default, it centers the content with a maximum width to ensure consistent alignment and spacing.\n   *\n   * @slot default - Use this slot to insert the content of the container.\n   */\n  interface Props {\n    /**\n     * If `true`, the container will take the full width.\n     */\n    fluid?: boolean;\n    /**\n     * Use this snippet to insert the content of the container.\n     */\n    children?: Snippet;\n  }\n\n  let { fluid, children }: Props = $props();\n</script>\n\n<div class={['ml-container', fluid && 'ml-container--fluid']}>\n  {#if children}\n    {@render children()}\n  {:else}\n    <slot />\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/layouts/container';\n</style>\n"],"names":["fluid","$.prop","$$props","children","div","root","$$render","consequent","alternate","$.template_effect","$.set_class","$.clsx"],"mappings":";;;;;;;;;;;;mBASA,oBAkBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,8GAGtBE,EAAGC,EAAA,MAAHD,CAAG,kCAESD,CAAQ,0EADdA,EAAQ,EAAAG,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,aADdJ,CAAG,EAAHK,EAAA,IAAAC,EAAAN,EAAG,EAAAO,EAAA,CAAS,eAAgBX,EAAK,GAAI,qBAAqB,CAAA,EAAA,gBAAA,CAAA,MAA1DI,CAAG,MAFI"}

package/dist/components/container/Container.stories.d.ts

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

package/dist/components/container/Container.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.stories.d.ts","sourceRoot":"","sources":["../../../src/components/container/Container.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAWX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC"}
+{"version":3,"file":"Container.stories.d.ts","sourceRoot":"","sources":["../../../src/components/container/Container.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,oBAAoB,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IASX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC"}

package/dist/components/container/Container.stories.js

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import './Container.svelte';
 const meta = {
     title: 'Foundations/Container',
     component: 'm-container',
@@ -8,9 +9,7 @@ const meta = {
         default: `<h1>Container</h1>`,
     },
     render: (args) => html `
-    <m-container fluid=${ifDefined(args.fluid)}>
-      ${unsafeHTML(ifDefined(args.default))}
-    </m-container>
+    <m-container ?fluid=${args.fluid}> ${unsafeHTML(ifDefined(args.default))} </m-container>
   `,
 };
 export default meta;

package/dist/components/container/Container.svelte

@@ -1,6 +1,14 @@
-<svelte:options customElement={{ tag: 'm-container' }} />
+<svelte:options
+  customElement={{
+    tag: 'm-container',
+    props: {
+      fluid: { reflect: true, type: 'Boolean', attribute: 'fluid' },
+    },
+  }}
+/>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   /**
    * The Container component is designed to wrap your page or section content, typically grids or other layout elements. By default, it centers the content with a maximum width to ensure consistent alignment and spacing.
    *
@@ -11,13 +19,21 @@
      * If `true`, the container will take the full width.
      */
     fluid?: boolean;
+    /**
+     * Use this snippet to insert the content of the container.
+     */
+    children?: Snippet;
   }
 
-  let { fluid }: Props = $props();
+  let { fluid, children }: Props = $props();
 </script>
 
 <div class={['ml-container', fluid && 'ml-container--fluid']}>
-  <slot />
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
 </div>
 
 <style>/**

package/dist/components/container/Container.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 /**
  * The Container component is designed to wrap your page or section content, typically grids or other layout elements. By default, it centers the content with a maximum width to ensure consistent alignment and spacing.
  *
@@ -8,6 +9,10 @@ interface Props {
      * If `true`, the container will take the full width.
      */
     fluid?: boolean;
+    /**
+     * Use this snippet to insert the content of the container.
+     */
+    children?: Snippet;
 }
 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> & {

package/dist/components/container/Container.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/container/Container.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAiBH,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,SAAS;;;;;;UAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/container/Container.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEpC;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2BH,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,SAAS;;;;;;UAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/components/container/README.md

@@ -7,6 +7,7 @@ The Container component is designed to wrap your page or section content, typica
 | Name | Description | Type | Default |
 |------|-------------|------|---------|
 | `fluid` | If `true`, the container will take the full width. | `boolean` |   |
+| `children` | Use this snippet to insert the content of the container. | `Snippet` |   |
 
 ## Slots
 

package/dist/components/datepicker/Datepicker.js

@@ -1,7 +1,7 @@
-import{v as B,c as D,p as F,a as L,b as o,f as H,s as k,d as c,t as V,i as y,j as O,k as t,r as d,h as S,e as q,g as A}from"../../custom-element.js";import{i as G}from"../../if.js";import{r as I,s as g}from"../../attributes.js";import{c as J}from"../../input.js";import{c as K}from"../../custom-element-forward-events.js";import{C as N}from"../../CrossCircleFilled24.js";import"../../legacy.js";var P=H('<div class="mc-datepicker__controls-options mc-controls-options svelte-xj4ivh"><button type="button" class="mc-controls-options__button svelte-xj4ivh"><!> <span class="mc-controls-options__label svelte-xj4ivh"> </span></button></div>'),Q=H('<div><input class="mc-datepicker__control mc-text-input__control svelte-xj4ivh" type="date"/> <!></div>');const R={hash:"svelte-xj4ivh",code:`/**
+import{u as Z,c as D,p as F,a as L,b as o,s as j,t as k,f as y,g as N,h as V,i as S,d as n,j as t,r as c,e as q,n as A,o as G}from"../../custom-element.js";import{i as I}from"../../if.js";import{a as J}from"../../attributes.js";import{c as K}from"../../input.js";import{c as O}from"../../custom-element-forward-events.js";import{d as P}from"../../Condition20.js";var Q=V('<div class="mc-datepicker__controls-options mc-controls-options svelte-xj4ivh"><button type="button" class="mc-controls-options__button svelte-xj4ivh"><!> <span class="mc-controls-options__label svelte-xj4ivh"> </span></button></div>'),R=V("<div><input/> <!></div>");const T={hash:"svelte-xj4ivh",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* stylelint-disable string-no-newline */.mc-text-input.svelte-xj4ivh {transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-xj4ivh {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control.svelte-xj4ivh {padding:0.75rem 0.6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1;}.mc-text-input__control.svelte-xj4ivh::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-xj4ivh {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-xj4ivh:focus-within {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-text-input.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-text-input.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none;}.mc-text-input.svelte-xj4ivh:has(input[readonly]:where(.svelte-xj4ivh)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh) {padding-inline-end:0;}.mc-text-input--s.svelte-xj4ivh {height:2rem;}.mc-text-input--s.svelte-xj4ivh .mc-text-input__control:where(.svelte-xj4ivh) {padding:0.375rem 0.6875rem;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-text-input--s.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-xj4ivh {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}.mc-text-input.svelte-xj4ivh :where(.svelte-xj4ivh) {box-sizing:border-box;}
+/* stylelint-disable string-no-newline */.mc-text-input.svelte-xj4ivh {transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-xj4ivh {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control.svelte-xj4ivh {padding:0.75rem 0.6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1;}.mc-text-input__control.svelte-xj4ivh::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-xj4ivh {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-xj4ivh:focus-within {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-text-input.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-text-input.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none;}.mc-text-input.svelte-xj4ivh:has(input[readonly]:where(.svelte-xj4ivh)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh) {padding-inline-start:0;}.mc-text-input.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh) {padding-inline-end:0;}.mc-text-input--s.svelte-xj4ivh {height:2rem;}.mc-text-input--s.svelte-xj4ivh .mc-text-input__control:where(.svelte-xj4ivh) {padding:0.375rem 0.6875rem;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-text-input--s.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)) {padding-inline-start:0.4375rem;}.mc-text-input--s.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-xj4ivh {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}.mc-text-input.svelte-xj4ivh :where(.svelte-xj4ivh) {box-sizing:border-box;}
 
-/* stylelint-enable string-no-newline */.mc-datepicker.svelte-xj4ivh {border-radius:var(--border-radius-s, 0.25rem);position:relative;}.mc-datepicker__control.svelte-xj4ivh {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");font-family:var(--font-family, LeroyMerlin), sans-serif;background-repeat:no-repeat;background-position:right 0.75rem center;display:block;padding:0 0.75rem;}.mc-datepicker__control.svelte-xj4ivh::-webkit-calendar-picker-indicator {padding-right:1rem;opacity:0;transform:scale(2);}.mc-datepicker__control.svelte-xj4ivh::-moz-calendar-picker-indicator {padding-right:1rem;opacity:0;transform:scale(2);}.mc-datepicker__control.is-invalid.svelte-xj4ivh {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-datepicker__control.is-invalid.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}.mc-datepicker__control.svelte-xj4ivh:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-datepicker__control.svelte-xj4ivh:disabled:hover:not(:focus-within) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-datepicker.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0;}.mc-datepicker.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:all;cursor:not-allowed;}.mc-datepicker.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled):hover {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-datepicker--s.svelte-xj4ivh .mc-datepicker__control:where(.svelte-xj4ivh) {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");}.mc-datepicker--s.svelte-xj4ivh .mc-datepicker__control:where(.svelte-xj4ivh):disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");}.mc-datepicker__controls-options.svelte-xj4ivh {position:absolute;right:2.75rem;top:0.75rem;}.mc-controls-options.svelte-xj4ivh {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-xj4ivh {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%);}.mc-controls-options__button.svelte-xj4ivh: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-controls-options__icon.svelte-xj4ivh {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-xj4ivh, .mc-controls-options__icon.svelte-xj4ivh {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-xj4ivh {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-controls-options__unit.svelte-xj4ivh {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}`};function T(w,r){F(r,!0),L(w,R);let v=o(r,"id",7),h=o(r,"name",7),a=o(r,"value",15),l=o(r,"isinvalid",7),m=o(r,"disabled",7),s=o(r,"size",7,"m"),u=o(r,"readonly",7),p=o(r,"isclearable",7),b=o(r,"clearlabel",7,"clear content");const z=()=>a("");var C={get id(){return v()},set id(e){v(e),t()},get name(){return h()},set name(e){h(e),t()},get value(){return a()},set value(e){a(e),t()},get isinvalid(){return l()},set isinvalid(e){l(e),t()},get disabled(){return m()},set disabled(e){m(e),t()},get size(){return s()},set size(e="m"){s(e),t()},get readonly(){return u()},set readonly(e){u(e),t()},get isclearable(){return p()},set isclearable(e){p(e),t()},get clearlabel(){return b()},set clearlabel(e="clear content"){b(e),t()}},n=Q(),i=c(n);I(i);var E=k(i,2);{var M=e=>{var x=P(),f=c(x);f.__click=z;var _=c(f);N(_,{class:"mc-controls-options__icon","aria-hidden":"true"});var j=k(_,2),Z=c(j,!0);d(j),d(f),d(x),V(()=>S(Z,b())),y(e,x)};G(E,e=>{p()&&a()&&e(M)})}return d(n),V(()=>{q(n,1,A(["mc-datepicker mc-text-input",`mc-text-input--${s()}`,`mc-datepicker--${s()}`,l()&&"is-invalid"]),"svelte-xj4ivh"),g(i,"id",v()),g(i,"name",h()),i.disabled=m(),i.readOnly=u(),g(i,"aria-invalid",l())}),J(i,a),y(w,n),O(C)}B(["click"]);customElements.define("m-datepicker",D(T,{id:{},name:{},value:{},isinvalid:{},disabled:{},size:{},readonly:{},isclearable:{},clearlabel:{}},[],[],!0,K));
+/* stylelint-enable string-no-newline */.mc-datepicker.svelte-xj4ivh {border-radius:var(--border-radius-s, 0.25rem);position:relative;}.mc-datepicker__control.svelte-xj4ivh {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");font-family:var(--font-family, LeroyMerlin), sans-serif;background-repeat:no-repeat;background-position:right 0.75rem center;display:block;padding:0 0.75rem;}.mc-datepicker__control.svelte-xj4ivh::-webkit-calendar-picker-indicator {padding-right:1rem;opacity:0;transform:scale(2);}.mc-datepicker__control.svelte-xj4ivh::-moz-calendar-picker-indicator {padding-right:1rem;opacity:0;transform:scale(2);}.mc-datepicker__control.is-invalid.svelte-xj4ivh {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-datepicker__control.is-invalid.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}.mc-datepicker__control.svelte-xj4ivh:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-datepicker__control.svelte-xj4ivh:disabled:hover:not(:focus-within) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-datepicker.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0;}.mc-datepicker.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:all;cursor:not-allowed;}.mc-datepicker.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled):hover {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-datepicker--s.svelte-xj4ivh .mc-datepicker__control:where(.svelte-xj4ivh) {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");}.mc-datepicker--s.svelte-xj4ivh .mc-datepicker__control:where(.svelte-xj4ivh):disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");}.mc-datepicker__controls-options.svelte-xj4ivh {position:absolute;right:2.75rem;top:0.75rem;}.mc-controls-options.svelte-xj4ivh {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-xj4ivh {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--border-radius-full, 100%);}.mc-controls-options__button.svelte-xj4ivh:hover .mc-controls-options__icon:where(.svelte-xj4ivh) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-xj4ivh: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-controls-options__icon.svelte-xj4ivh {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-xj4ivh, .mc-controls-options__icon.svelte-xj4ivh {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-xj4ivh {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-controls-options__unit.svelte-xj4ivh {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}`};function U(g,r){F(r,!0),L(g,T);let d=o(r,"id",7),v=o(r,"name",7),i=o(r,"value",15),a=o(r,"isinvalid",7),h=o(r,"disabled",7),l=o(r,"size",7,"m"),m=o(r,"readonly",7),u=o(r,"isclearable",7),p=o(r,"clearlabel",7,"clear content"),H=S(r,["$$slots","$$events","$$legacy","$$host","id","name","value","isinvalid","disabled","size","readonly","isclearable","clearlabel"]);const z=()=>i("");var E={get id(){return d()},set id(e){d(e),t()},get name(){return v()},set name(e){v(e),t()},get value(){return i()},set value(e){i(e),t()},get isinvalid(){return a()},set isinvalid(e){a(e),t()},get disabled(){return h()},set disabled(e){h(e),t()},get size(){return l()},set size(e="m"){l(e),t()},get readonly(){return m()},set readonly(e){m(e),t()},get isclearable(){return u()},set isclearable(e){u(e),t()},get clearlabel(){return p()},set clearlabel(e="clear content"){p(e),t()}},s=R(),x=n(s);J(x,()=>({class:"mc-datepicker__control mc-text-input__control",type:"date",id:d(),name:v(),disabled:h(),readonly:m(),"aria-invalid":a(),...H}),void 0,void 0,void 0,"svelte-xj4ivh",!0);var C=j(x,2);{var M=e=>{var b=Q(),f=n(b);f.__click=z;var w=n(f);P(w,{className:"mc-controls-options__icon"});var _=j(w,2),B=n(_,!0);c(_),c(f),c(b),k(()=>q(B,p())),y(e,b)};I(C,e=>{u()&&i()&&e(M)})}return c(s),k(()=>A(s,1,G(["mc-datepicker mc-text-input",`mc-text-input--${l()}`,`mc-datepicker--${l()}`,a()&&"is-invalid"]),"svelte-xj4ivh")),K(x,i),y(g,s),N(E)}Z(["click"]);customElements.define("m-datepicker",D(U,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},isclearable:{attribute:"isclearable",reflect:!0,type:"Boolean"},id:{},name:{},value:{},size:{},clearlabel:{}},[],[],!0,O));
 //# sourceMappingURL=Datepicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.js","sources":["../../../src/components/datepicker/Datepicker.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-datepicker', extend: customElementForwardEvents }} />\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n  /**\n   * 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.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the datepicker element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the datepicker element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the datepicker field.\n     */\n    value?: string | number;\n    /**\n     * If `true`, applies an invalid state to the datepicker.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the datepicker, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the datepicker.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the datepicker is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the datepicker has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    isinvalid,\n    disabled,\n    size = 'm',\n    readonly,\n    isclearable,\n    clearlabel = 'clear content',\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div\n  class={[\n    'mc-datepicker mc-text-input',\n    `mc-text-input--${size}`,\n    `mc-datepicker--${size}`,\n    isinvalid && 'is-invalid',\n  ]}\n>\n  <input\n    class=\"mc-datepicker__control mc-text-input__control\"\n    type=\"date\"\n    bind:value\n    {id}\n    {name}\n    {disabled}\n    {readonly}\n    aria-invalid={isinvalid}\n  />\n\n  {#if isclearable && value}\n    <div class=\"mc-datepicker__controls-options mc-controls-options\">\n      <button type=\"button\" class=\"mc-controls-options__button\" onclick={resetValue}>\n        <CrossCircleFilled24 class=\"mc-controls-options__icon\" aria-hidden=\"true\" />\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/text-input';\n  @use '@mozaic-ds/styles/components/datepicker';\n  @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["id","$.prop","$$props","name","value","isinvalid","disabled","size","readonly","isclearable","clearlabel","resetValue","$$render","consequent","customElementForwardEvents"],"mappings":";;;;;i/LAAA,oBAgDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,eAAO,GAAG,EACVC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAWR,EAAAC,EAAA,cAAA,CAAA,EACXQ,qBAAa,eAAe,QAGxBC,EAAU,IAAUP,EAAQ,EAAE,4RAN3B,IAAG,yKAGG,gBAAe,iFA2ByCO,2HAEvBD,EAAU,CAAA,CAAA,kBAJrDD,EAAW,GAAIL,KAAKQ,EAAAC,CAAA,gCAjBvB,gDACkBN,EAAI,CAAA,qBACJA,EAAI,CAAA,GACtBF,KAAa,+GAWCA,GAAS,sBAlB3B,mKA5D8DS"}
+{"version":3,"file":"Datepicker.js","sources":["../../../src/components/datepicker/Datepicker.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-datepicker',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n      isclearable: { reflect: true, type: 'Boolean', attribute: 'isclearable' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import { CrossCircleFilled24 } from '@mozaic-ds/icons-svelte';\n  /**\n   * 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.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the datepicker element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the datepicker element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the datepicker field.\n     */\n    value?: string | number;\n    /**\n     * If `true`, applies an invalid state to the datepicker.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the datepicker, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the datepicker.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the datepicker is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the datepicker has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    isinvalid,\n    disabled,\n    size = 'm',\n    readonly,\n    isclearable,\n    clearlabel = 'clear content',\n    ...attrs\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div\n  class={[\n    'mc-datepicker mc-text-input',\n    `mc-text-input--${size}`,\n    `mc-datepicker--${size}`,\n    isinvalid && 'is-invalid',\n  ]}\n>\n  <input\n    class=\"mc-datepicker__control mc-text-input__control\"\n    type=\"date\"\n    bind:value\n    {id}\n    {name}\n    {disabled}\n    {readonly}\n    aria-invalid={isinvalid}\n    {...attrs}\n  />\n\n  {#if isclearable && value}\n    <div class=\"mc-datepicker__controls-options mc-controls-options\">\n      <button type=\"button\" class=\"mc-controls-options__button\" onclick={resetValue}>\n        <CrossCircleFilled24 className=\"mc-controls-options__icon\" />\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/text-input';\n  @use '@mozaic-ds/styles/components/datepicker';\n  @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["id","$.prop","$$props","name","value","isinvalid","disabled","size","readonly","isclearable","clearlabel","attrs","$.rest_props","resetValue","div","root","input","$.child","node","$.sibling","div_1","root_1","button","CrossCircleFilled24","node_1","span","$$render","consequent","$.reset","$.bind_value","$.append","$$anchor","customElementForwardEvents"],"mappings":";;;;;uoMAaA,oBA+CIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,eAAO,GAAG,EACVC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAWR,EAAAC,EAAA,cAAA,CAAA,EACXQ,qBAAa,eAAe,EACzBC,EAAAC,EAAAV,EAAA,0IAGCW,EAAU,IAAUT,EAAQ,EAAE,4RAP3B,IAAG,yKAGG,gBAAe,YAO/BU,EAAAC,EAAA,EAQEC,EAAAC,EARFH,CAAA,IAQEE,6EAIEhB,EAAE,OACFG,EAAI,WACJG,EAAQ,WACRE,EAAQ,iBACKH,EAAS,KACnBM,6CATL,IAAAO,EAAAC,EAAAH,EAAA,CAAA,iBAaEI,EAAGC,EAAA,EACDC,IADFF,CAAG,EACDE,EAAyD,QAAST,UAAlES,CAAM,EACJC,EAAmBC,EAAA,CAAA,UAAA,2BAAA,CAAA,MACnBC,EAAIN,EAAAK,EAAA,CAAA,MAAJC,EAAI,EAAA,IAAJA,CAAI,IAFNH,CAAM,IADRF,CAAG,YAG0CV,EAAU,CAAA,CAAA,MAHvDU,CAAG,WADDX,EAAW,GAAIL,KAAKsB,EAAAC,CAAA,IApB1BC,OAAAA,EAAAd,CAAA,UAAAA,OAEG,gDACkBP,EAAI,CAAA,qBACJA,EAAI,CAAA,GACtBF,KAAa,iCAGdwB,EAAAb,EAAAZ,CAAA,EARF0B,EAAAC,EAAAjB,CAAA,MAFO,+VAhEIkB"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/Datepicker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA4CX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Datepicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/Datepicker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,IAAI,EAAE,IA6CX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

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

@@ -1,9 +1,11 @@
 import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
+import './Datepicker.svelte';
 const meta = {
     title: 'Form Elements/Datepicker',
     component: 'm-datepicker',
+    tags: ['v2'],
     argTypes: {
         size: {
             control: 'radio',
@@ -23,11 +25,11 @@ const meta = {
         id=${ifDefined(args.id)}
         name=${ifDefined(args.name)}
         value=${ifDefined(args.value)}
-        isinvalid=${ifDefined(args.isinvalid)}
-        disabled=${ifDefined(args.disabled)}
+        ?isinvalid=${args.isinvalid}
+        ?disabled=${args.disabled}
         size=${ifDefined(args.size)}
-        readonly=${ifDefined(args.readonly)}
-        isclearable=${ifDefined(args.isclearable)}
+        ?readonly=${args.readonly}
+        ?isclearable=${args.isclearable}
         clearlabel=${ifDefined(args.clearlabel)}
         @input=${(event) => {
             onInput(event);