@mozaic-ds/web-components 1.0.0 → 1.1.0

package/README.md

@@ -11,8 +11,8 @@
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/@mozaic-ds/web-components/v/beta">
-    <img src="https://img.shields.io/npm/v/@mozaic-ds/web-components/beta?label=NPM&logo=npm&color=yellow" alt="npm beta version">
+  <a href="https://www.npmjs.com/package/@mozaic-ds/web-components">
+    <img src="https://img.shields.io/npm/v/@mozaic-ds/web-components?label=NPM&logo=npm&color=yellow" alt="npm version">
   </a>
   <a href="https://github.com/adeo/mozaic-web-components/blob/master/CONTRIBUTING.md">
     <img src="https://img.shields.io/badge/PRs-welcome-blue.svg?logo=github" alt="PRs welcome" />

package/dist/bundle.d.ts

@@ -28,6 +28,7 @@ import './components/select/Select.js';
 import './components/statusbadge/StatusBadge.js';
 import './components/statusdot/StatusDot.js';
 import './components/statusnotification/StatusNotification.js';
+import './components/segmentedcontrol/SegmentedControl.js';
 import './components/tab/Tab.js';
 import './components/tabs/Tabs.js';
 import './components/tags/Tag.js';

package/dist/bundle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bundle.d.ts","sourceRoot":"","sources":["../src/bundle.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAC;AACvC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,6CAA6C,CAAC;AACrD,OAAO,yDAAyD,CAAC;AACjE,OAAO,uCAAuC,CAAC;AAC/C,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,iEAAiE,CAAC;AACzE,OAAO,yEAAyE,CAAC;AACjF,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+CAA+C,CAAC;AACvD,OAAO,6BAA6B,CAAC;AACrC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iCAAiC,CAAC;AACzC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,6CAA6C,CAAC;AACrD,OAAO,iCAAiC,CAAC;AACzC,OAAO,mDAAmD,CAAC;AAC3D,OAAO,6BAA6B,CAAC;AACrC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uDAAuD,CAAC;AAC/D,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,wCAAwC,CAAC;AAChD,OAAO,qCAAqC,CAAC;AAC7C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iCAAiC,CAAC"}
+{"version":3,"file":"bundle.d.ts","sourceRoot":"","sources":["../src/bundle.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAC;AACvC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,6CAA6C,CAAC;AACrD,OAAO,yDAAyD,CAAC;AACjE,OAAO,uCAAuC,CAAC;AAC/C,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,iEAAiE,CAAC;AACzE,OAAO,yEAAyE,CAAC;AACjF,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+CAA+C,CAAC;AACvD,OAAO,6BAA6B,CAAC;AACrC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iCAAiC,CAAC;AACzC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,6CAA6C,CAAC;AACrD,OAAO,iCAAiC,CAAC;AACzC,OAAO,mDAAmD,CAAC;AAC3D,OAAO,6BAA6B,CAAC;AACrC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uDAAuD,CAAC;AAC/D,OAAO,mDAAmD,CAAC;AAC3D,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,wCAAwC,CAAC;AAChD,OAAO,qCAAqC,CAAC;AAC7C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iCAAiC,CAAC"}

package/dist/bundle.js

@@ -28,6 +28,7 @@ import './components/select/Select.js';
 import './components/statusbadge/StatusBadge.js';
 import './components/statusdot/StatusDot.js';
 import './components/statusnotification/StatusNotification.js';
+import './components/segmentedcontrol/SegmentedControl.js';
 import './components/tab/Tab.js';
 import './components/tabs/Tabs.js';
 import './components/tags/Tag.js';

package/dist/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-avatar' }} />\n\n<script lang=\"ts\">\n  /**\n   * An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.\n   * \n   * @slot default - Use this slot to insert the image, icon or intials of the avatar.\n   */\n  interface Props {\n    /**\n     * Determines the size of the avatar.\n     */\n\t\tsize: 's' | 'm' | 'l'\n\t}\n\n  let { size = 's'}: Props = $props();\n</script>\n\n<div class={[\"mc-avatar\", size && `mc-avatar--${size}`]} >\n  <slot/>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/avatar';\n\n  ::slotted(img) {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n</style>\n"],"names":["size"],"mappings":";;ypBAAA,gBAeQ,IAAAA,eAAO,GAAG,2CAAH,IAAG,wEAGL,YAAaA,EAAI,GAAA,cAAkBA,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,CAAA,aAFpD"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/avatar/Avatar.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-avatar' }} />\n\n<script lang=\"ts\">\n  /**\n   * An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.\n   *\n   * @slot default - Use this slot to insert the image, icon or intials of the avatar.\n   */\n  interface Props {\n    /**\n     * Determines the size of the avatar.\n     */\n    size: 's' | 'm' | 'l';\n  }\n\n  let { size = 's' }: Props = $props();\n</script>\n\n<div class={['mc-avatar', size && `mc-avatar--${size}`]}>\n  <slot />\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/avatar';\n\n  ::slotted(img) {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n</style>\n"],"names":["size"],"mappings":";;ypBAAA,gBAeQ,IAAAA,eAAO,GAAG,2CAAH,IAAG,wEAGL,YAAaA,EAAI,GAAA,cAAkBA,EAAI,CAAA,EAAA,CAAA,EAAA,gBAAA,CAAA,aAFpD"}

package/dist/components/avatar/Avatar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,gEAAgE,CAAC;AAExE,QAAA,MAAM,IAAI,EAAE,IAoBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC"}
+{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,gEAAgE,CAAC;AAExE,QAAA,MAAM,IAAI,EAAE,IAkBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC"}

package/dist/components/avatar/Avatar.stories.js

@@ -18,9 +18,7 @@ const meta = {
     `,
     },
     render: (args) => html `
-    <m-avatar size=${ifDefined(args.size)}>
-      ${unsafeHTML(ifDefined(args.default))}
-    </m-avatar>
+    <m-avatar size=${ifDefined(args.size)}> ${unsafeHTML(ifDefined(args.default))} </m-avatar>
   `,
 };
 export default meta;

package/dist/components/avatar/Avatar.svelte

@@ -3,21 +3,21 @@
 <script lang="ts">
   /**
    * An avatar is a graphical representation of a user, entity, or group, commonly displayed as an image, initials, or an icon. It helps identify individuals or accounts in profiles, comments, chat interfaces, and user lists. Avatars can be customized with different styles, sizes, and fallback options (such as initials or placeholders) to ensure consistency and recognition across interfaces. When multiple users are represented, Avatar groups provide a compact way to display them collectively.
-   * 
+   *
    * @slot default - Use this slot to insert the image, icon or intials of the avatar.
    */
   interface Props {
     /**
      * Determines the size of the avatar.
      */
-		size: 's' | 'm' | 'l'
-	}
+    size: 's' | 'm' | 'l';
+  }
 
-  let { size = 's'}: Props = $props();
+  let { size = 's' }: Props = $props();
 </script>
 
-<div class={["mc-avatar", size && `mc-avatar--${size}`]} >
-  <slot/>
+<div class={['mc-avatar', size && `mc-avatar--${size}`]}>
+  <slot />
 </div>
 
 <style>/**

package/dist/components/avatar/Avatar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACL,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;CACrB;AAiBF,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":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/Avatar.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACvB;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,MAAM;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/components/breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-breadcrumb',\n  }}\n/>\n\n<script lang=\"ts\">\n  /**\n   * A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.\n   */\n  interface Props {\n    /**\n     * Allows to define the breadcrumb appearance.\n     */\n    appearance: 'standard' | 'inverse';\n    /**\n     * Links of the breadcrumb.\n     */\n    links: Array<{\n      /**\n       * The label displayed for the link.\n       */\n      label: string;\n      /**\n       * URL for the link.\n       */\n      href: string;\n      /**\n       * Where to open the link.\n       */\n      target?: '_blank' | '_self' | '_parent' | '_top';\n    }>;\n  }\n\n  let { appearance = 'standard', links }: Props = $props();\n\n  const isLastLink = (index: number) => index === links.length - 1;\n</script>\n\n<nav\n  class={`mc-breadcrumb mc-breadcrumb--${appearance}`}\n  aria-label=\"Breadcrumb\"\n>\n  <ol class=\"mc-breadcrumb__container\">\n    {#each links as link, index (index)}\n      <li class=\"mc-breadcrumb__item\">\n        <a\n          href={link.href}\n          target={link.target}\n          class={[\n            'mc-link',\n            'mc-link--m',\n            'mc-link--inline',\n            appearance && `mc-link--${appearance}`,\n            isLastLink(index) && 'mc-breadcrumb__current',\n          ]}\n        >\n          <span class=\"mc-link__label\">{link.label}</span>\n        </a>\n      </li>\n    {/each}\n  </ol>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/breadcrumb';\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["appearance","links","$.prop","$$props","isLastLink","index","$.each","ol","link","$.set_attribute","a","$.get","$.set_text","text"],"mappings":";;;;;;kxDAAA,gBAkCQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,QAE9BC,EAAcC,GAAkBA,IAAUJ,EAAK,EAAC,OAAS,uDAF5C,WAAU,wEAUpBK,OAAAA,EAAAC,EAAA,GAAAN,OAASO,EAAIH,IAAA,wDAGRI,EAAAC,EAAA,OAAAC,EAAAH,CAAI,EAAC,IAAI,EACPC,EAAAC,EAAA,SAAAC,EAAAH,CAAI,EAAC,MAAM,4BASWI,EAAAC,EAAAF,EAAAH,CAAI,EAAC,KAAK,WAPtC,UACA,aACA,kBACAR,iBAA0BA,EAAU,CAAA,GACpCI,EAAWC,CAAK,GAAK,4FAdQL,EAAU,CAAA,GAAA,gBAAA,CAAA,aAHnD"}
+{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/breadcrumb/Breadcrumb.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-breadcrumb',\n  }}\n/>\n\n<script lang=\"ts\">\n  /**\n   * A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.\n   */\n  interface Props {\n    /**\n     * Allows to define the breadcrumb appearance.\n     */\n    appearance: 'standard' | 'inverse';\n    /**\n     * Links of the breadcrumb.\n     */\n    links: Array<{\n      /**\n       * The label displayed for the link.\n       */\n      label: string;\n      /**\n       * URL for the link.\n       */\n      href: string;\n      /**\n       * Where to open the link.\n       */\n      target?: '_blank' | '_self' | '_parent' | '_top';\n    }>;\n  }\n\n  let { appearance = 'standard', links }: Props = $props();\n\n  const isLastLink = (index: number) => index === links.length - 1;\n</script>\n\n<nav class={`mc-breadcrumb mc-breadcrumb--${appearance}`} aria-label=\"Breadcrumb\">\n  <ol class=\"mc-breadcrumb__container\">\n    {#each links as link, index (index)}\n      <li class=\"mc-breadcrumb__item\">\n        <a\n          href={link.href}\n          target={link.target}\n          class={[\n            'mc-link',\n            'mc-link--m',\n            'mc-link--inline',\n            appearance && `mc-link--${appearance}`,\n            isLastLink(index) && 'mc-breadcrumb__current',\n          ]}\n        >\n          <span class=\"mc-link__label\">{link.label}</span>\n        </a>\n      </li>\n    {/each}\n  </ol>\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/breadcrumb';\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["appearance","links","$.prop","$$props","isLastLink","index","$.each","ol","link","$.set_attribute","a","$.get","$.set_text","text"],"mappings":";;;;;;kxDAAA,gBAkCQ,IAAAA,qBAAa,UAAU,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,QAE9BC,EAAcC,GAAkBA,IAAUJ,EAAK,EAAC,OAAS,uDAF5C,WAAU,wEAOpBK,OAAAA,EAAAC,EAAA,GAAAN,OAASO,EAAIH,IAAA,wDAGRI,EAAAC,EAAA,OAAAC,EAAAH,CAAI,EAAC,IAAI,EACPC,EAAAC,EAAA,SAAAC,EAAAH,CAAI,EAAC,MAAM,4BASWI,EAAAC,EAAAF,EAAAH,CAAI,EAAC,KAAK,WAPtC,UACA,aACA,kBACAR,iBAA0BA,EAAU,CAAA,GACpCI,EAAWC,CAAK,GAAK,4FAZWL,EAAU,CAAA,GAAA,gBAAA,CAAA,aAFtD"}

package/dist/components/breadcrumb/Breadcrumb.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.stories.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/Breadcrumb.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAmCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}
+{"version":3,"file":"Breadcrumb.stories.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/Breadcrumb.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAgCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/breadcrumb/Breadcrumb.stories.js

@@ -30,10 +30,7 @@ const meta = {
         },
     },
     render: (args) => html `
-    <m-breadcrumb
-      appearance=${ifDefined(args.appearance)}
-      .links=${args.links}
-    ></m-breadcrumb>
+    <m-breadcrumb appearance=${ifDefined(args.appearance)} .links=${args.links}></m-breadcrumb>
   `,
 };
 export default meta;

package/dist/components/breadcrumb/Breadcrumb.svelte

@@ -37,10 +37,7 @@
   const isLastLink = (index: number) => index === links.length - 1;
 </script>
 
-<nav
-  class={`mc-breadcrumb mc-breadcrumb--${appearance}`}
-  aria-label="Breadcrumb"
->
+<nav class={`mc-breadcrumb mc-breadcrumb--${appearance}`} aria-label="Breadcrumb">
   <ol class="mc-breadcrumb__container">
     {#each links as link, index (index)}
       <li class="mc-breadcrumb__item">

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-button' }} />\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  /**\n   * Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.\n   *\n   * @slot default - The content displayed in the button.\n   * @slot icon - Use this slot to insert an icon for the Button.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Defines the visual style of the button.\n     */\n    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n    /**\n     * Determines the size of the button.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * If `true`, disables the button, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, applies a \"ghost\" style to the button, typically a transparent background with a border.\n     */\n    ghost?: boolean;\n    /**\n     * If `true`, the button gets an outlined style, usually with just the border and no solid background.\n     */\n    outlined?: boolean;\n    /**\n     * Controls the positioning of an icon in the button.\n     */\n    iconposition?: 'left' | 'right' | 'only';\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n    /**\n     * If `true`, a loading state is displayed.\n     */\n    isloading?: boolean;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    type = 'button',\n    ghost,\n    outlined,\n    disabled,\n    isloading,\n    iconposition,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<button\n  class={[\n    'mc-button',\n    `mc-button--${size}`,\n    `mc-button--${appearance}`,\n    ghost && 'mc-button--ghost',\n    outlined && 'mc-button--outlined',\n    isloading && 'mc-button--loading',\n    iconposition === 'only' && 'mc-button--icon-only',\n  ]}\n  {disabled}\n  {type}\n  {...attrs}\n>\n  {#if iconposition === 'left' && !isloading}\n    <span class=\"mc-button__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n\n  {#if isloading}\n    <span\n      class=\"mc-button__icon\"\n      style=\"color: currentColor;position: absolute; visibility: visible;\"\n    >\n      <Loader appearance={'inverse'} size=\"s\" />\n    </span>\n  {/if}\n\n  {#if iconposition === 'only'}\n    <span class=\"mc-button__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n\n  {#if iconposition !== 'only'}\n    <span class={['mc-button__label', isloading && 'hidden']}>\n      <slot />\n    </span>\n  {/if}\n\n  {#if iconposition === 'right'}\n    <span class=\"mc-button__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n\n  .hidden {\n    visibility: hidden;\n  }\n</style>\n"],"names":["appearance","size","type","ghost","$.prop","$$props","outlined","disabled","isloading","iconposition","attrs","$.rest_props","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4"],"mappings":";;;o/LAAA,gBA+CI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,eAAO,QAAQ,EACfC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACRG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAYL,EAAAC,EAAA,eAAA,CAAA,EACTK,EAAAC,EAAAN,EAAA,qLARU,WAAU,6CAChB,IAAG,6CACH,SAAQ,gTAYf,0BACcJ,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,EAAQ,GAAI,sBACZE,EAAS,GAAI,qBACbC,EAAY,IAAK,QAAU,iDAIzBC,gHAECD,EAAY,IAAK,QAAM,CAAKD,EAAS,GAAAI,EAAAC,CAAA,6DAWlB,UAAS,KAAA,IAAA,uBAL5BL,EAAS,GAAAI,EAAAE,CAAA,mFASTL,EAAY,IAAK,QAAMG,EAAAG,CAAA,qFAOZ,mBAAoBP,EAAS,GAAI,QAAQ,CAAA,EAAA,eAAA,CAAA,kBADpDC,EAAY,IAAK,QAAMG,EAAAI,CAAA,mFAMvBP,EAAY,IAAK,SAAOG,EAAAK,CAAA,2BA3C/B"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-button' }} />\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  /**\n   * Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.\n   *\n   * @slot default - The content displayed in the button.\n   * @slot icon - Use this slot to insert an icon for the Button.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Defines the visual style of the button.\n     */\n    appearance?: 'standard' | 'accent' | 'danger' | 'inverse';\n    /**\n     * Determines the size of the button.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * If `true`, disables the button, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, applies a \"ghost\" style to the button, typically a transparent background with a border.\n     */\n    ghost?: boolean;\n    /**\n     * If `true`, the button gets an outlined style, usually with just the border and no solid background.\n     */\n    outlined?: boolean;\n    /**\n     * Controls the positioning of an icon in the button.\n     */\n    iconposition?: 'left' | 'right' | 'only';\n    /**\n     * Specifies the button's HTML `type` attribute.\n     */\n    type?: 'button' | 'reset' | 'submit';\n    /**\n     * If `true`, a loading state is displayed.\n     */\n    isloading?: boolean;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    type = 'button',\n    ghost,\n    outlined,\n    disabled,\n    isloading,\n    iconposition,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<button\n  class={[\n    'mc-button',\n    `mc-button--${size}`,\n    `mc-button--${appearance}`,\n    ghost && 'mc-button--ghost',\n    outlined && 'mc-button--outlined',\n    isloading && 'mc-button--loading',\n    iconposition === 'only' && 'mc-button--icon-only',\n  ]}\n  {disabled}\n  {type}\n  {...attrs}\n>\n  {#if iconposition === 'left' && !isloading}\n    <span class=\"mc-button__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n\n  {#if isloading}\n    <span\n      class=\"mc-button__icon\"\n      style=\"color: currentColor;position: absolute; visibility: visible;\"\n    >\n      <Loader appearance=\"inverse\" size=\"s\" />\n    </span>\n  {/if}\n\n  {#if iconposition === 'only'}\n    <span class=\"mc-button__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n\n  {#if iconposition !== 'only'}\n    <span class={['mc-button__label', isloading && 'hidden']}>\n      <slot />\n    </span>\n  {/if}\n\n  {#if iconposition === 'right'}\n    <span class=\"mc-button__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n\n  .hidden {\n    visibility: hidden;\n  }\n</style>\n"],"names":["appearance","size","type","ghost","$.prop","$$props","outlined","disabled","isloading","iconposition","attrs","$.rest_props","$$render","consequent","consequent_1","consequent_2","consequent_3","consequent_4"],"mappings":";;;o/LAAA,gBA+CI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,eAAO,QAAQ,EACfC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACRG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAYL,EAAAC,EAAA,eAAA,CAAA,EACTK,EAAAC,EAAAN,EAAA,qLARU,WAAU,6CAChB,IAAG,6CACH,SAAQ,gTAYf,0BACcJ,EAAI,CAAA,iBACJD,EAAU,CAAA,GACxBG,EAAK,GAAI,mBACTG,EAAQ,GAAI,sBACZE,EAAS,GAAI,qBACbC,EAAY,IAAK,QAAU,iDAIzBC,gHAECD,EAAY,IAAK,QAAM,CAAKD,EAAS,GAAAI,EAAAC,CAAA,uGAMrCL,EAAS,GAAAI,EAAAE,CAAA,mFASTL,EAAY,IAAK,QAAMG,EAAAG,CAAA,qFAOZ,mBAAoBP,EAAS,GAAI,QAAQ,CAAA,EAAA,eAAA,CAAA,kBADpDC,EAAY,IAAK,QAAMG,EAAAI,CAAA,mFAMvBP,EAAY,IAAK,SAAOG,EAAAK,CAAA,2BA3C/B"}

package/dist/components/button/Button.svelte

@@ -82,7 +82,7 @@
       class="mc-button__icon"
       style="color: currentColor;position: absolute; visibility: visible;"
     >
-      <Loader appearance={'inverse'} size="s" />
+      <Loader appearance="inverse" size="s" />
     </span>
   {/if}
 

package/dist/components/callout/Callout.js

@@ -1,7 +1,4 @@
-import{c as j,p as C,a as D,b as m,f as E,d as t,s as r,t as S,i as q,j as A,k as u,r as l,e as B,g as F,h}from"../../custom-element.js";import{s as d}from"../../slot.js";var G=E('<section role="status"><div class="mc-callout__icon svelte-1pnlv3f"><!></div> <div class="mc-callout__content svelte-1pnlv3f"><h2 class="mc-callout__title svelte-1pnlv3f"> </h2> <p class="mc-callout__message svelte-1pnlv3f"> </p> <!> <div class="mc-callout__footer svelte-1pnlv3f"><!></div></div></section>');const H={hash:"svelte-1pnlv3f",code:`/**
+import{c as j,p as C,a as D,b as d,f as E,d as t,s as r,t as S,i as q,j as A,k as m,r as l,e as B,g as F,h}from"../../custom-element.js";import{s as u}from"../../slot.js";var G=E('<section role="status"><div class="mc-callout__icon svelte-1pnlv3f"><!></div> <div class="mc-callout__content svelte-1pnlv3f"><h2 class="mc-callout__title svelte-1pnlv3f"> </h2> <p class="mc-callout__message svelte-1pnlv3f"> </p> <!> <div class="mc-callout__footer svelte-1pnlv3f"><!></div></div></section>');const H={hash:"svelte-1pnlv3f",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/* create columns */
-/* create columns */
-/* create custom named columns with custom content */.mc-callout.svelte-1pnlv3f {border-radius:var(--radius-m, 0.5rem);display:flex;flex-flow:row wrap;align-items:flex-start;background:var(--callout-color-background-standard, #eff1f6);position:relative;box-sizing:border-box;color:var(--callout-color-text, #000000);}.mc-callout__icon.svelte-1pnlv3f {width:2rem;height:2rem;margin:0.75rem;color:currentcolor;}.mc-callout__content.svelte-1pnlv3f {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-callout__title.svelte-1pnlv3f, .mc-callout__message.svelte-1pnlv3f {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-callout__title.svelte-1pnlv3f {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-callout__message.svelte-1pnlv3f {font-size:var(--font-size-100, 0.875rem);}.mc-callout__footer.svelte-1pnlv3f {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-callout--standard.svelte-1pnlv3f {background:var(--callout-color-background-standard, #eff1f6);}.mc-callout--accent.svelte-1pnlv3f {background:var(--callout-color-background-accent, #ebf5de);}.mc-callout--tips.svelte-1pnlv3f {background:var(--callout-color-background-tips, #ffebaf);}.mc-callout--inverse.svelte-1pnlv3f {background:var(--callout-color-background-inverse, #ffffff);}.mc-callout__footer.svelte-1pnlv3f:empty {display:none;}`};function I(p,e){C(e,!0),D(p,H);let c=m(e,"title",7),s=m(e,"description",7),n=m(e,"appearance",7,"standard");var x={get title(){return c()},set title(a){c(a),u()},get description(){return s()},set description(a){s(a),u()},get appearance(){return n()},set appearance(a="standard"){n(a),u()}},o=G(),i=t(o),k=t(i);d(k,e,"icon",{}),l(i);var _=r(i,2),v=t(_),w=t(v,!0);l(v);var f=r(v,2),y=t(f,!0);l(f);var g=r(f,2);d(g,e,"default",{});var b=r(g,2),z=t(b);return d(z,e,"footer",{}),l(b),l(_),l(o),S(()=>{B(o,1,F(["mc-callout",`mc-callout--${n()}`]),"svelte-1pnlv3f"),h(w,c()),h(y,s())}),q(p,o),A(x)}customElements.define("m-callout",j(I,{title:{},description:{},appearance:{}},["icon","default","footer"],[],!0));
+ */.mc-callout.svelte-1pnlv3f {border-radius:var(--radius-m, 0.5rem);background:var(--callout-color-background-standard, #eff1f6);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--callout-color-text, #000000);}.mc-callout__icon.svelte-1pnlv3f {width:2rem;height:2rem;margin:0.75rem;color:currentcolor;}.mc-callout__content.svelte-1pnlv3f {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-callout__title.svelte-1pnlv3f, .mc-callout__message.svelte-1pnlv3f {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-callout__title.svelte-1pnlv3f {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-callout__message.svelte-1pnlv3f {font-size:var(--font-size-100, 0.875rem);}.mc-callout__footer.svelte-1pnlv3f {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-callout--standard.svelte-1pnlv3f {background:var(--callout-color-background-standard, #eff1f6);}.mc-callout--accent.svelte-1pnlv3f {background:var(--callout-color-background-accent, #ebf5de);}.mc-callout--tips.svelte-1pnlv3f {background:var(--callout-color-background-tips, #ffebaf);}.mc-callout--inverse.svelte-1pnlv3f {background:var(--callout-color-background-inverse, #ffffff);}.mc-callout__footer.svelte-1pnlv3f:empty {display:none;}`};function I(p,e){C(e,!0),D(p,H);let c=d(e,"title",7),s=d(e,"description",7),n=d(e,"appearance",7,"standard");var x={get title(){return c()},set title(a){c(a),m()},get description(){return s()},set description(a){s(a),m()},get appearance(){return n()},set appearance(a="standard"){n(a),m()}},o=G(),i=t(o),k=t(i);u(k,e,"icon",{}),l(i);var _=r(i,2),v=t(_),w=t(v,!0);l(v);var f=r(v,2),y=t(f,!0);l(f);var g=r(f,2);u(g,e,"default",{});var b=r(g,2),z=t(b);return u(z,e,"footer",{}),l(b),l(_),l(o),S(()=>{B(o,1,F(["mc-callout",`mc-callout--${n()}`]),"svelte-1pnlv3f"),h(w,c()),h(y,s())}),q(p,o),A(x)}customElements.define("m-callout",j(I,{title:{},description:{},appearance:{}},["icon","default","footer"],[],!0));
 //# sourceMappingURL=Callout.js.map

package/dist/components/callout/Callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.js","sources":["../../../src/components/callout/Callout.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-callout' }} />\n\n<script lang=\"ts\">\n  /**\n   * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.\n   *\n   * @slot icon - Use this slot to insert an icon.\n   * @slot default - Use this slot to insert custom content.\n   * @slot footer - Use this slot to insert a button or a link in the footer of the callout.\n   */\n  interface Props {\n    /**\n     * Title of the callout.\n     */\n    title: string;\n    /**\n     * Description of the callout.\n     */\n    description: string;\n    /**\n     * Allows to define the callout appearance.\n     */\n    appearance?: 'standard' | 'accent' | 'tips' | 'inverse';\n  }\n\n  let {\n    title,\n    description,\n    appearance = 'standard',\n  }: Props = $props();\n</script>\n\n<section class={[\"mc-callout\", `mc-callout--${appearance}`]} role=\"status\">\n  <div class=\"mc-callout__icon\">\n    <slot name=\"icon\"/>\n  </div>\n  <div class=\"mc-callout__content\">\n    <h2 class=\"mc-callout__title\">{ title }</h2>\n\n    <p class=\"mc-callout__message\">\n      { description }\n    </p>\n\n    <slot/>\n\n    <div class=\"mc-callout__footer\">\n      <slot name=\"footer\"/>\n    </div>\n  </div>\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/callout';\n\n  .mc-callout__footer:empty {\n    display: none;\n  }\n</style>\n"],"names":["title","$.prop","$$props","description","appearance","$.set_class","section","$.clsx"],"mappings":";;;;;i6CAAA,oBA0BIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EACXE,qBAAa,UAAU,iKAAV,WAAU,0NAIVC,EAAAC,EAAA,EAAAC,EAAA,CAAA,4BAA6BH,EAAU,CAAA,EAAA,CAAA,EAAA,gBAAA,MAKpBJ,GAAK,MAGjCG,GAAW,eAVnB"}
+{"version":3,"file":"Callout.js","sources":["../../../src/components/callout/Callout.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-callout' }} />\n\n<script lang=\"ts\">\n  /**\n   * A callout is used to highlight additional information that can assist users with tips, extra details, or helpful guidance, without signaling a critical status or alert. Unlike notifications, callouts are not triggered by user actions and do not correspond to specific system states. They are designed to enhance the user experience by providing contextually relevant information that supports comprehension and usability.\n   *\n   * @slot icon - Use this slot to insert an icon.\n   * @slot default - Use this slot to insert custom content.\n   * @slot footer - Use this slot to insert a button or a link in the footer of the callout.\n   */\n  interface Props {\n    /**\n     * Title of the callout.\n     */\n    title: string;\n    /**\n     * Description of the callout.\n     */\n    description: string;\n    /**\n     * Allows to define the callout appearance.\n     */\n    appearance?: 'standard' | 'accent' | 'tips' | 'inverse';\n  }\n\n  let { title, description, appearance = 'standard' }: Props = $props();\n</script>\n\n<section class={['mc-callout', `mc-callout--${appearance}`]} role=\"status\">\n  <div class=\"mc-callout__icon\">\n    <slot name=\"icon\" />\n  </div>\n  <div class=\"mc-callout__content\">\n    <h2 class=\"mc-callout__title\">{title}</h2>\n\n    <p class=\"mc-callout__message\">\n      {description}\n    </p>\n\n    <slot />\n\n    <div class=\"mc-callout__footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/callout';\n\n  .mc-callout__footer:empty {\n    display: none;\n  }\n</style>\n"],"names":["title","$.prop","$$props","description","appearance","$.set_class","section","$.clsx"],"mappings":";;+2CAAA,oBAyBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAAEE,qBAAa,UAAU,iKAAV,WAAU,0NAGlCC,EAAAC,EAAA,EAAAC,EAAA,CAAA,4BAA6BH,EAAU,CAAA,EAAA,CAAA,EAAA,gBAAA,MAKrBJ,GAAK,MAGjCG,GAAW,eAVlB"}

package/dist/components/callout/Callout.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,kEAAkE,CAAC;AAC1E,OAAO,oEAAoE,CAAC;AAE5E,QAAA,MAAM,IAAI,EAAE,IA0BX,CAAC;AAEF,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,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAUpB,CAAC"}
+{"version":3,"file":"Callout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,kEAAkE,CAAC;AAC1E,OAAO,oEAAoE,CAAC;AAE5E,QAAA,MAAM,IAAI,EAAE,IAyBX,CAAC;AAEF,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,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAUpB,CAAC"}

package/dist/components/callout/Callout.svelte

@@ -23,28 +23,24 @@
     appearance?: 'standard' | 'accent' | 'tips' | 'inverse';
   }
 
-  let {
-    title,
-    description,
-    appearance = 'standard',
-  }: Props = $props();
+  let { title, description, appearance = 'standard' }: Props = $props();
 </script>
 
-<section class={["mc-callout", `mc-callout--${appearance}`]} role="status">
+<section class={['mc-callout', `mc-callout--${appearance}`]} role="status">
   <div class="mc-callout__icon">
-    <slot name="icon"/>
+    <slot name="icon" />
   </div>
   <div class="mc-callout__content">
-    <h2 class="mc-callout__title">{ title }</h2>
+    <h2 class="mc-callout__title">{title}</h2>
 
     <p class="mc-callout__message">
-      { description }
+      {description}
     </p>
 
-    <slot/>
+    <slot />
 
     <div class="mc-callout__footer">
-      <slot name="footer"/>
+      <slot name="footer" />
     </div>
   </div>
 </section>
@@ -52,15 +48,12 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/* create columns */
-/* create columns */
-/* create custom named columns with custom content */
 .mc-callout {
   border-radius: var(--radius-m, 0.5rem);
+  background: var(--callout-color-background-standard, #eff1f6);
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;
-  background: var(--callout-color-background-standard, #eff1f6);
   position: relative;
   box-sizing: border-box;
   color: var(--callout-color-text, #000000);

package/dist/components/callout/Callout.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;GAMG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;CACzD;AAoCH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,OAAO;;;;;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Callout.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/callout/Callout.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;GAMG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;CACzD;AAgCH,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/checkbox/Checkbox.spec.js

@@ -34,7 +34,7 @@ describe('m-checkbox component', () => {
         expect(checkbox.checked).toBe(true);
     });
     it('applies "is-invalid" class and aria-invalid when isinvalid=true', () => {
-        const { container, getByLabelText } = render(Checkbox, {
+        const { getByLabelText } = render(Checkbox, {
             props: { id, label, isinvalid: true },
         });
         const checkbox = getByLabelText(label);

package/dist/components/checkboxgroup/CheckboxGroup.js

@@ -1,4 +1,4 @@
-import{c as A,p as D,a as F,b as o,l as G,f as k,t as _,i as g,j as S,k as s,r as p,e as E,g as y,d as C,s as q,m as t,h as I}from"../../custom-element.js";import{i as J}from"../../if.js";import{e as K,i as L}from"../../each.js";import{r as N,s as m}from"../../attributes.js";import{b as O}from"../../input.js";import{c as P}from"../../custom-element-forward-events.js";var Q=k('<label class="mc-checkbox__label svelte-11asba7"> </label>'),R=k('<div class="mc-checkbox mc-field__item svelte-11asba7"><input type="checkbox"/> <!></div>'),T=k("<div></div>");const U={hash:"svelte-11asba7",code:`/**
+import{c as A,p as D,a as F,b as o,l as G,f as k,t as _,i as g,j as S,k as s,r as p,e as E,g as y,d as C,s as q,m as t,h as I}from"../../custom-element.js";import{i as J}from"../../if.js";import{e as K}from"../../each.js";import{r as L,s as m}from"../../attributes.js";import{b as N}from"../../input.js";import{c as O}from"../../custom-element-forward-events.js";var P=k('<label class="mc-checkbox__label svelte-11asba7"> </label>'),Q=k('<div class="mc-checkbox mc-field__item svelte-11asba7"><input type="checkbox"/> <!></div>'),R=k("<div></div>");const T={hash:"svelte-11asba7",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-checkbox.svelte-11asba7 {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox__label.svelte-11asba7 {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-checkbox__input.svelte-11asba7 {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-11asba7:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-11asba7: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-checkbox__input.svelte-11asba7:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:checked, .mc-checkbox__input.svelte-11asba7:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-11asba7:checked, .mc-checkbox__input.svelte-11asba7:indeterminate, .mc-checkbox__input.svelte-11asba7:disabled {border-color:transparent;}.mc-checkbox__input.svelte-11asba7:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-11asba7:disabled:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:disabled:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-11asba7:disabled + .mc-checkbox__label:where(.svelte-11asba7) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-11asba7:not(:disabled):checked:hover, .mc-checkbox__input.svelte-11asba7:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-11asba7:not(:checked, :indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-11asba7:not(:checked, :indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
@@ -6,5 +6,5 @@ import{c as A,p as D,a as F,b as o,l as G,f as k,t as _,i as g,j as S,k as s,r a
 /* stylelint-enable string-no-newline */
 /* stylelint-disable string-no-newline */.mc-field__content.svelte-11asba7 {margin-top:0.5rem;}
 
-/* stylelint-enable string-no-newline */.mc-field__content.svelte-11asba7:where(.mc-field__content--inline:where(.svelte-11asba7)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function V(x,i){D(i,!0),F(x,U);const z=[];let v=o(i,"name",7),b=o(i,"options",7),l=o(i,"value",31,()=>G([])),u=o(i,"inline",7),n=o(i,"isinvalid",7);var B={get name(){return v()},set name(e){v(e),s()},get options(){return b()},set options(e){b(e),s()},get value(){return l()},set value(e=[]){l(e),s()},get inline(){return u()},set inline(e){u(e),s()},get isinvalid(){return n()},set isinvalid(e){n(e),s()}},c=T();return K(c,21,b,L,(e,r)=>{var h=R(),a=C(h);N(a);var w,M=q(a,2);{var H=f=>{var d=Q(),j=C(d,!0);p(d),_(()=>{m(d,"for",t(r).id),I(j,t(r).label)}),g(f,d)};J(M,f=>{t(r).label&&f(H)})}p(h),_(()=>{E(a,1,y(["mc-checkbox__input",n()&&"is-invalid"]),"svelte-11asba7"),m(a,"id",t(r).id),m(a,"name",v()),a.disabled=t(r).disabled,a.indeterminate=t(r).indeterminate,m(a,"aria-invalid",n()),w!==(w=t(r).value)&&(a.value=(a.__value=t(r).value)??"")}),O(z,[],a,()=>(t(r).value,l()),l),g(e,h)}),p(c),_(()=>E(c,1,y(["mc-field__content",u()&&"mc-field__content--inline"]),"svelte-11asba7")),g(x,c),S(B)}customElements.define("m-checkbox-group",A(V,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},value:{},inline:{},isinvalid:{}},[],[],!0,P));
+/* stylelint-enable string-no-newline */.mc-field__content.svelte-11asba7:where(.mc-field__content--inline:where(.svelte-11asba7)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function U(x,i){D(i,!0),F(x,T);const z=[];let v=o(i,"name",7),b=o(i,"options",7),l=o(i,"value",31,()=>G([])),u=o(i,"inline",7),n=o(i,"isinvalid",7);var B={get name(){return v()},set name(e){v(e),s()},get options(){return b()},set options(e){b(e),s()},get value(){return l()},set value(e=[]){l(e),s()},get inline(){return u()},set inline(e){u(e),s()},get isinvalid(){return n()},set isinvalid(e){n(e),s()}},c=R();return K(c,21,b,e=>e.id,(e,r)=>{var h=Q(),a=C(h);L(a);var w,M=q(a,2);{var H=f=>{var d=P(),j=C(d,!0);p(d),_(()=>{m(d,"for",t(r).id),I(j,t(r).label)}),g(f,d)};J(M,f=>{t(r).label&&f(H)})}p(h),_(()=>{E(a,1,y(["mc-checkbox__input",n()&&"is-invalid"]),"svelte-11asba7"),m(a,"id",t(r).id),m(a,"name",v()),a.disabled=t(r).disabled,a.indeterminate=t(r).indeterminate,m(a,"aria-invalid",n()),w!==(w=t(r).value)&&(a.value=(a.__value=t(r).value)??"")}),N(z,[],a,()=>(t(r).value,l()),l),g(e,h)}),p(c),_(()=>E(c,1,y(["mc-field__content",u()&&"mc-field__content--inline"]),"svelte-11asba7")),g(x,c),S(B)}customElements.define("m-checkbox-group",A(U,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},value:{},inline:{},isinvalid:{}},[],[],!0,O));
 //# sourceMappingURL=CheckboxGroup.js.map

package/dist/components/checkboxgroup/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../../../src/components/checkboxgroup/CheckboxGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).\n   */\n  interface Props {\n    /**\n     * The name attribute for the checkbox element, typically used for form submission.\n     */\n    name: string;\n    /**\n     * The current value of the checkbox group.\n     */\n    value?: Array<string>;\n    /**\n     * list of properties of each checkbox button of the checkbox group\n     */\n    options: Array<{\n      id: string;\n      label: string;\n      value: string;\n      disabled?: boolean;\n      indeterminate?: boolean;\n      indented?: boolean;\n    }>;\n    /**\n     * If `true`, applies an invalid state to the checkbox group.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, make the form element of the group inline.\n     */\n    inline?: boolean;\n  }\n\n  let {\n    name,\n    options,\n    value = $bindable([]),\n    inline,\n    isinvalid,\n  }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n  {#each options as option}\n    <div class=\"mc-checkbox mc-field__item\">\n      <input\n        type=\"checkbox\"\n        class={['mc-checkbox__input', isinvalid && 'is-invalid']}\n        id={option.id}\n        {name}\n        disabled={option.disabled}\n        indeterminate={option.indeterminate}\n        aria-invalid={isinvalid}\n        bind:group={value}\n        value={option.value}\n      />\n      {#if option.label}\n        <label for={option.id} class=\"mc-checkbox__label\">{option.label}</label>\n      {/if}\n    </div>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n\n  .mc-field__content:where(.mc-field__content--inline) {\n    display: flex;\n    flex-flow: row wrap;\n    gap: 0.25rem 1rem;\n  }\n</style>\n"],"names":["name","$.prop","$$props","options","value","$.proxy","inline","isinvalid","$.each","div","option","$.set_attribute","label","$.get","$.set_text","text","$$render","consequent","input","input_value","customElementForwardEvents"],"mappings":";;;;;;;;wMAAA,+BA8CIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAOF,EAAAC,EAAA,UAAA,CAAA,EACPE,EAAKH,EAAAC,EAAA,QAAA,GAAA,IAAAG,EAAA,CAAA,CAAA,CAAA,EACLC,EAAML,EAAAC,EAAA,SAAA,CAAA,EACNK,EAASN,EAAAC,EAAA,YAAA,CAAA,0QAKJM,OAAAA,EAAAC,EAAA,GAAAN,OAAWO,IAAM,iFAcNC,EAAAC,EAAA,MAAAC,EAAAH,CAAM,EAAC,EAAE,EAA8BI,EAAAC,EAAAF,EAAAH,CAAM,EAAC,KAAK,oBAD5DG,EAAAH,CAAM,EAAC,OAAKM,EAAAC,CAAA,yBATP,qBAAsBV,KAAa,YAAY,CAAA,EAAA,gBAAA,EACnDI,EAAAO,EAAA,KAAAL,EAAAH,CAAM,EAAC,EAAE,kBAEHQ,EAAA,SAAAL,EAAAH,CAAM,EAAC,SACFQ,EAAA,cAAAL,EAAAH,CAAM,EAAC,iCACRH,GAAS,EAEhBY,KAAAA,EAAAN,EAAAH,CAAM,EAAC,SAAPQ,EAAA,OAAAA,EAAA,QAAAL,EAAAH,CAAM,EAAC,QAAK,oBAAZG,EAAAH,CAAM,EAAC,MADFN,EAAK,GAALA,gCAXP,oBAAqBE,EAAM,GAAI,2BAA2B,CAAA,EAAA,gBAAA,CAAA,aAFvE,uJA9CYc"}
+{"version":3,"file":"CheckboxGroup.js","sources":["../../../src/components/checkboxgroup/CheckboxGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).\n   */\n  interface Props {\n    /**\n     * The name attribute for the checkbox element, typically used for form submission.\n     */\n    name: string;\n    /**\n     * The current value of the checkbox group.\n     */\n    value?: Array<string>;\n    /**\n     * list of properties of each checkbox button of the checkbox group\n     */\n    options: Array<{\n      id: string;\n      label: string;\n      value: string;\n      disabled?: boolean;\n      indeterminate?: boolean;\n      indented?: boolean;\n    }>;\n    /**\n     * If `true`, applies an invalid state to the checkbox group.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, make the form element of the group inline.\n     */\n    inline?: boolean;\n  }\n\n  let { name, options, value = $bindable([]), inline, isinvalid }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n  {#each options as option (option.id)}\n    <div class=\"mc-checkbox mc-field__item\">\n      <input\n        type=\"checkbox\"\n        class={['mc-checkbox__input', isinvalid && 'is-invalid']}\n        id={option.id}\n        {name}\n        disabled={option.disabled}\n        indeterminate={option.indeterminate}\n        aria-invalid={isinvalid}\n        bind:group={value}\n        value={option.value}\n      />\n      {#if option.label}\n        <label for={option.id} class=\"mc-checkbox__label\">{option.label}</label>\n      {/if}\n    </div>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n\n  .mc-field__content:where(.mc-field__content--inline) {\n    display: flex;\n    flex-flow: row wrap;\n    gap: 0.25rem 1rem;\n  }\n</style>\n"],"names":["name","$.prop","$$props","options","value","$.proxy","inline","isinvalid","$.each","div","option","$.set_attribute","label","$.get","$.set_text","text","$$render","consequent","input","input_value","customElementForwardEvents"],"mappings":";;;;;;;;wMAAA,+BA6CQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAOF,EAAAC,EAAA,UAAA,CAAA,EAAEE,EAAKH,EAAAC,EAAA,QAAA,GAAA,IAAAG,EAAA,CAAA,CAAA,CAAA,EAAkBC,EAAML,EAAAC,EAAA,SAAA,CAAA,EAAEK,EAASN,EAAAC,EAAA,YAAA,CAAA,0QAItDM,OAAAA,EAAAC,EAAA,GAAAN,EAAWO,GAAQA,EAAO,MAAfA,IAAM,iFAcNC,EAAAC,EAAA,MAAAC,EAAAH,CAAM,EAAC,EAAE,EAA8BI,EAAAC,EAAAF,EAAAH,CAAM,EAAC,KAAK,oBAD5DG,EAAAH,CAAM,EAAC,OAAKM,EAAAC,CAAA,yBATP,qBAAsBV,KAAa,YAAY,CAAA,EAAA,gBAAA,EACnDI,EAAAO,EAAA,KAAAL,EAAAH,CAAM,EAAC,EAAE,kBAEHQ,EAAA,SAAAL,EAAAH,CAAM,EAAC,SACFQ,EAAA,cAAAL,EAAAH,CAAM,EAAC,iCACRH,GAAS,EAEhBY,KAAAA,EAAAN,EAAAH,CAAM,EAAC,SAAPQ,EAAA,OAAAA,EAAA,QAAAL,EAAAH,CAAM,EAAC,QAAK,oBAAZG,EAAAH,CAAM,EAAC,MADFN,EAAK,GAALA,gCAXP,oBAAqBE,EAAM,GAAI,2BAA2B,CAAA,EAAA,gBAAA,CAAA,aAFvE,uJAxCYc"}

package/dist/components/checkboxgroup/CheckboxGroup.spec.js

@@ -102,9 +102,7 @@ describe('m-checkbox-group component', () => {
         const { container } = render(CheckboxGroup, {
             props: {
                 name: 'choices',
-                options: [
-                    { id: 'cb1', label: 'Option 1', value: 'opt1', indeterminate: true },
-                ],
+                options: [{ id: 'cb1', label: 'Option 1', value: 'opt1', indeterminate: true }],
             },
         });
         const input = container.querySelector('input[type="checkbox"]');

package/dist/components/checkboxgroup/CheckboxGroup.svelte

@@ -43,17 +43,11 @@
     inline?: boolean;
   }
 
-  let {
-    name,
-    options,
-    value = $bindable([]),
-    inline,
-    isinvalid,
-  }: Props = $props();
+  let { name, options, value = $bindable([]), inline, isinvalid }: Props = $props();
 </script>
 
 <div class={['mc-field__content', inline && 'mc-field__content--inline']}>
-  {#each options as option}
+  {#each options as option (option.id)}
     <div class="mc-checkbox mc-field__item">
       <input
         type="checkbox"

package/dist/components/checkboxgroup/CheckboxGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkboxgroup/CheckboxGroup.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAqCH,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CheckboxGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkboxgroup/CheckboxGroup.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA+BH,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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    /**\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  }: Props = $props();\n</script>\n\n<div\n  class={[\n    'mc-circular-progressbar',\n    size && `mc-circular-progressbar--${size}`,\n  ]}\n  role=\"progressbar\"\n  aria-valuenow={value}\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  style={`--progress-value: ${value};`}\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","$$render","consequent","consequent_1","consequent_2"],"mappings":";;;;2QAAA,oBA8BIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,gBAAQ,CAAC,EACTC,eAAO,YAAY,EACnBC,EAAYJ,EAAAC,EAAA,eAAA,CAAA,EACZI,EAAcL,EAAAC,EAAA,iBAAA,CAAA,0FAHN,EAAC,6CACF,aAAY,2NA6B0BC,EAAK,CAAA,CAAA,kBAF/CC,EAAI,IAAK,cAAYG,EAAAC,CAAA,uHAWsBF,EAAc,CAAA,CAAA,kBADrDA,EAAc,GAAAC,EAAAE,CAAA,mBADyBJ,EAAY,CAAA,CAAA,kBAFvDD,EAAI,IAAK,WAASG,EAAAG,CAAA,gCA1BrB,0BACAV,iCAAoCA,GAAI,0CAG3BG,GAAK,2BAGQA,EAAK,CAAA,GAAA,eAXnC"}
+{"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    /**\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 { size, value = 0, type = 'percentage', contentvalue, additionalinfo }: 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>\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","$$render","consequent","consequent_1","consequent_2"],"mappings":";;;;2QAAA,oBA6BQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,gBAAQ,CAAC,EAAEC,eAAO,YAAY,EAAEC,EAAYJ,EAAAC,EAAA,eAAA,CAAA,EAAEI,EAAcL,EAAAC,EAAA,iBAAA,CAAA,0FAApD,EAAC,6CAAS,aAAY,2NAuBKC,EAAK,CAAA,CAAA,kBAF/CC,EAAI,IAAK,cAAYG,EAAAC,CAAA,uHAWsBF,EAAc,CAAA,CAAA,kBADrDA,EAAc,GAAAC,EAAAE,CAAA,mBADyBJ,EAAY,CAAA,CAAA,kBAFvDD,EAAI,IAAK,WAASG,EAAAG,CAAA,gCAxBf,0BAA2BV,iCAAoCA,GAAI,0CAE5DG,GAAK,2BAGQA,EAAK,CAAA,GAAA,eARnC"}

package/dist/components/circularprogressbar/CircularProgressbar.svelte

@@ -27,20 +27,11 @@
     additionalinfo?: string;
   }
 
-  let {
-    size,
-    value = 0,
-    type = 'percentage',
-    contentvalue,
-    additionalinfo,
-  }: Props = $props();
+  let { size, value = 0, type = 'percentage', contentvalue, additionalinfo }: Props = $props();
 </script>
 
 <div
-  class={[
-    'mc-circular-progressbar',
-    size && `mc-circular-progressbar--${size}`,
-  ]}
+  class={['mc-circular-progressbar', size && `mc-circular-progressbar--${size}`]}
   role="progressbar"
   aria-valuenow={value}
   aria-valuemin="0"

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

@@ -1 +1 @@
-{"version":3,"file":"CircularProgressbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/circularprogressbar/CircularProgressbar.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA6CH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"CircularProgressbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/circularprogressbar/CircularProgressbar.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAoCH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/datepicker/Datepicker.js

@@ -3,5 +3,5 @@ import{v as Z,c as B,p as D,a as F,b as o,f as H,s as k,d as c,t as V,i as y,j a
  */
 /* 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-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 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-s, 1px) 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-s, 1px) 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-s, 1px) 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(--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-s, 1px) 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-s, 1px) 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(--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(v,r){D(r,!0),F(v,R);let h=o(r,"id",7),m=o(r,"name",7),a=o(r,"value",7),l=o(r,"isinvalid",7),u=o(r,"disabled",7),s=o(r,"size",7,"m"),p=o(r,"readonly",7),x=o(r,"isclearable",7),b=o(r,"clearlabel",7,"clear content");var z={get id(){return h()},set id(e){h(e),t()},get name(){return m()},set name(e){m(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 u()},set disabled(e){u(e),t()},get size(){return s()},set size(e="m"){s(e),t()},get readonly(){return p()},set readonly(e){p(e),t()},get isclearable(){return x()},set isclearable(e){x(e),t()},get clearlabel(){return b()},set clearlabel(e="clear content"){b(e),t()}},n=Q(),i=c(n);G(i);var C=k(i,2);{var E=e=>{var f=P(),g=c(f);g.__click=[N,a];var _=c(g);K(_,{class:"mc-controls-options__icon","aria-hidden":"true"});var j=k(_,2),M=c(j,!0);d(j),d(g),d(f),V(()=>O(M,b())),y(e,f)};A(C,e=>{x()&&a()&&e(E)})}return d(n),V(()=>{S(n,1,q(["mc-datepicker mc-text-input",`mc-text-input--${s()}`,`mc-datepicker--${s()}`,l()&&"is-invalid"]),"svelte-xj4ivh"),w(i,"id",h()),w(i,"name",m()),i.disabled=u(),i.readOnly=p(),w(i,"aria-invalid",l())}),I(i,a),y(v,n),L(z)}Z(["click"]);customElements.define("m-datepicker",B(T,{id:{},name:{},value:{},isinvalid:{},disabled:{},size:{},readonly:{},isclearable:{},clearlabel:{}},[],[],!0,J));
+/* stylelint-enable string-no-newline */.mc-datepicker.svelte-xj4ivh {border-radius:var(--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-s, 1px) 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-s, 1px) 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(--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(v,r){D(r,!0),F(v,R);let h=o(r,"id",7),m=o(r,"name",7),a=o(r,"value",15),l=o(r,"isinvalid",7),u=o(r,"disabled",7),s=o(r,"size",7,"m"),p=o(r,"readonly",7),x=o(r,"isclearable",7),b=o(r,"clearlabel",7,"clear content");var z={get id(){return h()},set id(e){h(e),t()},get name(){return m()},set name(e){m(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 u()},set disabled(e){u(e),t()},get size(){return s()},set size(e="m"){s(e),t()},get readonly(){return p()},set readonly(e){p(e),t()},get isclearable(){return x()},set isclearable(e){x(e),t()},get clearlabel(){return b()},set clearlabel(e="clear content"){b(e),t()}},n=Q(),i=c(n);G(i);var C=k(i,2);{var E=e=>{var f=P(),g=c(f);g.__click=[N,a];var _=c(g);K(_,{class:"mc-controls-options__icon","aria-hidden":"true"});var j=k(_,2),M=c(j,!0);d(j),d(g),d(f),V(()=>O(M,b())),y(e,f)};A(C,e=>{x()&&a()&&e(E)})}return d(n),V(()=>{S(n,1,q(["mc-datepicker mc-text-input",`mc-text-input--${s()}`,`mc-datepicker--${s()}`,l()&&"is-invalid"]),"svelte-xj4ivh"),w(i,"id",h()),w(i,"name",m()),i.disabled=u(),i.readOnly=p(),w(i,"aria-invalid",l())}),I(i,a),y(v,n),L(z)}Z(["click"]);customElements.define("m-datepicker",B(T,{id:{},name:{},value:{},isinvalid:{},disabled:{},size:{},readonly:{},isclearable:{},clearlabel:{}},[],[],!0,J));
 //# 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\n  customElement={{ tag: 'm-datepicker', extend: customElementForwardEvents }}\n/>\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,\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\n        type=\"button\"\n        class=\"mc-controls-options__button\"\n        onclick={resetValue}\n      >\n        <CrossCircleFilled24\n          class=\"mc-controls-options__icon\"\n          aria-hidden=\"true\"\n        />\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":["resetValue","_","value","id","$.prop","$$props","name","isinvalid","disabled","size","readonly","isclearable","clearlabel","$$render","consequent","customElementForwardEvents"],"mappings":"iZA6DQA,EAAU,CAAAC,EAAAC,IAAUA,EAAQ,EAAE;;;;;28LA7DtC,oBAkDIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJH,EAAKE,EAAAC,EAAA,QAAA,CAAA,EACLE,EAASH,EAAAC,EAAA,YAAA,CAAA,EACTG,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EACRI,eAAO,GAAG,EACVC,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAWP,EAAAC,EAAA,cAAA,CAAA,EACXO,qBAAa,eAAe,4RAHrB,IAAG,yKAGG,gBAAe,kFA8BfZ,EAAUE,CAAA,2HAMuBU,EAAU,CAAA,CAAA,kBAXrDD,EAAW,GAAIT,KAAKW,EAAAC,CAAA,gCAjBvB,gDACkBL,EAAI,CAAA,qBACJA,EAAI,CAAA,GACtBF,KAAa,+GAWCA,GAAS,sBAlB3B,mKA7DgDQ"}
+{"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":["resetValue","_","value","id","$.prop","$$props","name","isinvalid","disabled","size","readonly","isclearable","clearlabel","$$render","consequent","customElementForwardEvents"],"mappings":"iZA2DQA,EAAU,CAAAC,EAAAC,IAAUA,EAAQ,EAAE;;;;;28LA3DtC,oBAgDIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJH,EAAKE,EAAAC,EAAA,QAAA,EAAA,EACLE,EAASH,EAAAC,EAAA,YAAA,CAAA,EACTG,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EACRI,eAAO,GAAG,EACVC,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAWP,EAAAC,EAAA,cAAA,CAAA,EACXO,qBAAa,eAAe,4RAHrB,IAAG,yKAGG,gBAAe,kFA2ByCZ,EAAUE,CAAA,2HAEjCU,EAAU,CAAA,CAAA,kBAJrDD,EAAW,GAAIT,KAAKW,EAAAC,CAAA,gCAjBvB,gDACkBL,EAAI,CAAA,qBACJA,EAAI,CAAA,GACtBF,KAAa,+GAWCA,GAAS,sBAlB3B,mKA5D8DQ"}

package/dist/components/datepicker/Datepicker.svelte

@@ -1,6 +1,4 @@
-<svelte:options
-  customElement={{ tag: 'm-datepicker', extend: customElementForwardEvents }}
-/>
+<svelte:options customElement={{ tag: 'm-datepicker', extend: customElementForwardEvents }} />
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
@@ -50,7 +48,7 @@
   let {
     id,
     name,
-    value,
+    value = $bindable(),
     isinvalid,
     disabled,
     size = 'm',
@@ -83,15 +81,8 @@
 
   {#if isclearable && value}
     <div class="mc-datepicker__controls-options mc-controls-options">
-      <button
-        type="button"
-        class="mc-controls-options__button"
-        onclick={resetValue}
-      >
-        <CrossCircleFilled24
-          class="mc-controls-options__icon"
-          aria-hidden="true"
-        />
+      <button type="button" class="mc-controls-options__button" onclick={resetValue}>
+        <CrossCircleFilled24 class="mc-controls-options__icon" aria-hidden="true" />
         <span class="mc-controls-options__label">{clearlabel}</span>
       </button>
     </div>

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

@@ -39,7 +39,7 @@ interface Props {
      */
     clearlabel?: string;
 }
-declare const Datepicker: import("svelte").Component<Props, {}, "">;
+declare const Datepicker: import("svelte").Component<Props, {}, "value">;
 type Datepicker = ReturnType<typeof Datepicker>;
 export default Datepicker;
 //# sourceMappingURL=Datepicker.svelte.d.ts.map

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

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