@mozaic-ds/web-components 1.3.0 → 1.5.0

package/dist/components/carousel/Carousel.stories.js

@@ -5,6 +5,7 @@ import './Carousel.svelte';
 const meta = {
     title: 'Content/Carousel',
     component: 'm-carousel',
+    tags: ['v2'],
     argTypes: {
         'aria-labelledby': {
             table: {

package/dist/components/carousel/Carousel.svelte

@@ -2,8 +2,7 @@
 
 <script lang="ts">
   import IconButton from '../iconbutton/IconButton.svelte';
-  import ChevronLeft20 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft20/ChevronLeft20.svelte';
-  import ChevronRight20 from '@mozaic-ds/icons-svelte/svelte/ChevronRight20/ChevronRight20.svelte';
+  import { ChevronLeft20, ChevronRight20 } from '@mozaic-ds/icons-svelte';
   /**
    * A Carousel allows users to browse through multiple items within a horizontal container, using swipe gestures on mobile or navigation controls on desktop. It is primarily used to showcase products, promotions, or visual content, offering an engaging way to explore information in a condensed and interactive format. Carousels help optimize space while keeping content visually appealing and easily accessible.
    *
@@ -11,6 +10,7 @@
    * @slot header  - Use this slot to insert the title, subtitle or link of the carousel.
    */
   interface Props {
+    [key: string]: any;
     /**
      * Aria label for the previous button.
      */
@@ -164,6 +164,7 @@
 .mc-carousel__controls {
   display: flex;
   column-gap: 0.5rem;
+  margin: 0.25rem 0.25rem 0 0;
 }
 .mc-carousel__content {
   display: flex;

package/dist/components/carousel/Carousel.svelte.d.ts

@@ -5,6 +5,7 @@
  * @slot header  - Use this slot to insert the title, subtitle or link of the carousel.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Aria label for the previous button.
      */

package/dist/components/carousel/Carousel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/Carousel.svelte.ts"],"names":[],"mappings":"AAOE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAoGH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;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,QAAQ;;;;;;;;UAAqF,CAAC;AAClF,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/Carousel.svelte.ts"],"names":[],"mappings":"AAME;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAmGH,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,QAAQ;;;;;;;;UAAqF,CAAC;AAClF,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/components/checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import{c as y,p as M,a as B,b as t,f as p,r as Z,d as g,s as q,t as b,h as u,i as H,j as r,e as _,g as j,l as D,m as F}from"../../custom-element.js";import{i as L}from"../../if.js";import{a as S,s as V}from"../../attributes.js";import{a as A}from"../../input.js";import{c as G}from"../../custom-element-forward-events.js";var I=p('<label class="mc-checkbox__label svelte-zknfk3"> </label>'),J=p("<div><input/> <!></div>");const K={hash:"svelte-zknfk3",code:`/**
+import{c as y,p as B,a as M,b as t,s as Z,t as g,f as b,g as q,h as p,i as H,d as u,j as r,r as _,e as j,l as D,m as F}from"../../custom-element.js";import{i as L}from"../../if.js";import{a as S,s as V}from"../../attributes.js";import{a as A}from"../../input.js";import{c as G}from"../../custom-element-forward-events.js";import"../../branches.js";var I=p('<label class="mc-checkbox__label svelte-zknfk3"> </label>'),J=p("<div><input/> <!></div>");const K={hash:"svelte-zknfk3",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-checkbox.svelte-zknfk3 {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox--indented.svelte-zknfk3 {margin-left:1.75rem;}.mc-checkbox__label.svelte-zknfk3 {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-zknfk3 {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-width-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 0.25rem);transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-zknfk3:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-zknfk3: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-zknfk3: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-zknfk3: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-zknfk3:checked, .mc-checkbox__input.svelte-zknfk3:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-zknfk3:checked, .mc-checkbox__input.svelte-zknfk3:indeterminate, .mc-checkbox__input.svelte-zknfk3:disabled {border-color:transparent;}.mc-checkbox__input.svelte-zknfk3:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-zknfk3: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-zknfk3: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-zknfk3:disabled + .mc-checkbox__label:where(.svelte-zknfk3) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-zknfk3:not(:disabled):checked:hover, .mc-checkbox__input.svelte-zknfk3:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-zknfk3:not(:checked, :indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-zknfk3:not(:checked, :indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
@@ -6,5 +6,5 @@ import{c as y,p as M,a as B,b as t,f as p,r as Z,d as g,s as q,t as b,h as u,i a
 /* stylelint-enable string-no-newline */
 /* stylelint-disable string-no-newline */.mc-field__label.svelte-zknfk3, .mc-field__legend.svelte-zknfk3 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__legend.svelte-zknfk3 {padding-inline:0;}.mc-field__requirement.svelte-zknfk3, .mc-field__help.svelte-zknfk3 {font-size:var(--font-size-50, 0.75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666);}.mc-field__help.svelte-zknfk3 {display:block;margin-top:0.125rem;}.mc-field__content.svelte-zknfk3 {margin-top:0.5rem;}.mc-field__validation-message.svelte-zknfk3 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.is-valid.svelte-zknfk3::before, .mc-field__validation-message.is-invalid.svelte-zknfk3::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-zknfk3 {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-zknfk3::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-invalid.svelte-zknfk3 {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-zknfk3::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-loading.svelte-zknfk3 {color:var(--field-color-validation-loading, #666666);}.mc-field--group.svelte-zknfk3 {border-width:0;margin-inline:0;padding:0;}
 
-/* stylelint-enable string-no-newline */`};function N(h,i){M(i,!0),B(h,K);let a=t(i,"id",7),s=t(i,"name",7),l=t(i,"label",7),c=t(i,"checked",15,!1),m=t(i,"indeterminate",7),v=t(i,"disabled",7),n=t(i,"isinvalid",7),f=t(i,"indented",7),x=Z(i,["$$slots","$$events","$$legacy","$$host","id","name","label","checked","indeterminate","disabled","isinvalid","indented"]);var w={get id(){return a()},set id(e){a(e),r()},get name(){return s()},set name(e){s(e),r()},get label(){return l()},set label(e){l(e),r()},get checked(){return c()},set checked(e=!1){c(e),r()},get indeterminate(){return m()},set indeterminate(e){m(e),r()},get disabled(){return v()},set disabled(e){v(e),r()},get isinvalid(){return n()},set isinvalid(e){n(e),r()},get indented(){return f()},set indented(e){f(e),r()}},o=J(),k=g(o);S(k,()=>({id:a(),type:"checkbox",class:["mc-checkbox__input",n()&&"is-invalid"],"aria-invalid":n(),name:s(),disabled:v(),indeterminate:m(),...x}),void 0,void 0,void 0,"svelte-zknfk3",!0);var z=q(k,2);{var E=e=>{var d=I(),C=g(d,!0);_(d),b(()=>{V(d,"for",a()),j(C,l())}),u(e,d)};L(z,e=>{l()&&e(E)})}return _(o),b(()=>D(o,1,F(["mc-checkbox",f()&&"mc-checkbox--indented"]),"svelte-zknfk3")),A(k,c),u(h,o),H(w)}customElements.define("m-checkbox",y(N,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},id:{},name:{},label:{},indeterminate:{},disabled:{},isinvalid:{},indented:{}},[],[],!0,G));
+/* stylelint-enable string-no-newline */`};function N(h,i){B(i,!0),M(h,K);let a=t(i,"id",7),s=t(i,"name",7),l=t(i,"label",7),c=t(i,"checked",15,!1),m=t(i,"indeterminate",7),v=t(i,"disabled",7),n=t(i,"isinvalid",7),f=t(i,"indented",7),x=H(i,["$$slots","$$events","$$legacy","$$host","id","name","label","checked","indeterminate","disabled","isinvalid","indented"]);var w={get id(){return a()},set id(e){a(e),r()},get name(){return s()},set name(e){s(e),r()},get label(){return l()},set label(e){l(e),r()},get checked(){return c()},set checked(e=!1){c(e),r()},get indeterminate(){return m()},set indeterminate(e){m(e),r()},get disabled(){return v()},set disabled(e){v(e),r()},get isinvalid(){return n()},set isinvalid(e){n(e),r()},get indented(){return f()},set indented(e){f(e),r()}},o=J(),k=u(o);S(k,()=>({id:a(),type:"checkbox",class:["mc-checkbox__input",n()&&"is-invalid"],"aria-invalid":n(),name:s(),disabled:v(),indeterminate:m(),...x}),void 0,void 0,void 0,"svelte-zknfk3",!0);var z=Z(k,2);{var E=e=>{var d=I(),C=u(d,!0);_(d),g(()=>{V(d,"for",a()),j(C,l())}),b(e,d)};L(z,e=>{l()&&e(E)})}return _(o),g(()=>D(o,1,F(["mc-checkbox",f()&&"mc-checkbox--indented"]),"svelte-zknfk3")),A(k,c),b(h,o),q(w)}customElements.define("m-checkbox",y(N,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},indeterminate:{attribute:"indeterminate",reflect:!0,type:"Boolean"},isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},indented:{attribute:"indented",reflect:!0,type:"Boolean"},id:{},name:{},label:{}},[],[],!0,G));
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox',\n    props: {\n      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\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.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the checkbox, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the checkbox element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the checkbox.\n     */\n    label?: string;\n    /**\n     * The checkbox's checked state.\n     */\n    checked?: boolean;\n    /**\n     * Sets the checkbox to an indeterminate state (partially selected).\n     */\n    indeterminate?: boolean;\n    /**\n     * If `true`, applies an invalid state to the checkbox.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the checkbox, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, indent the checkbox.\n     */\n    indented?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    label,\n    checked = $bindable(false),\n    indeterminate,\n    disabled,\n    isinvalid,\n    indented,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<div class={['mc-checkbox', indented && 'mc-checkbox--indented']}>\n  <input\n    {id}\n    type=\"checkbox\"\n    class={['mc-checkbox__input', isinvalid && 'is-invalid']}\n    aria-invalid={isinvalid}\n    {name}\n    {disabled}\n    {indeterminate}\n    bind:checked\n    {...attrs}\n  />\n  {#if label}\n    <label for={id} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","name","label","checked","indeterminate","disabled","isinvalid","indented","attrs","$.rest_props","$$render","consequent","customElementForwardEvents"],"mappings":";;;;;;;;0DAAA,oBAmDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,mBAAoB,EAAK,EACzBC,EAAaL,EAAAC,EAAA,gBAAA,CAAA,EACbK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAASP,EAAAC,EAAA,YAAA,CAAA,EACTO,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACLQ,EAAAC,EAAAT,EAAA,gTALiB,GAAK,iSAajB,qBAAsBM,EAAS,GAAI,YAAY,iBACzCA,EAAS,6CAKnBE,+GAGQV,GAAE,MAA8BI,GAAK,oBAD9CA,EAAK,GAAAQ,EAAAC,CAAA,+BAZC,cAAeJ,EAAQ,GAAI,uBAAuB,CAAA,EAAA,eAAA,CAAA,oBAF/D,wLAvDYK"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox',\n    props: {\n      checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\n      indeterminate: { reflect: true, type: 'Boolean', attribute: 'indeterminate' },\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      indented: { reflect: true, type: 'Boolean', attribute: 'indented' },\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.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the checkbox, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the checkbox element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The text label displayed next to the checkbox.\n     */\n    label?: string;\n    /**\n     * The checkbox's checked state.\n     */\n    checked?: boolean;\n    /**\n     * Sets the checkbox to an indeterminate state (partially selected).\n     */\n    indeterminate?: boolean;\n    /**\n     * If `true`, applies an invalid state to the checkbox.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the checkbox, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * If `true`, indent the checkbox.\n     */\n    indented?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    label,\n    checked = $bindable(false),\n    indeterminate,\n    disabled,\n    isinvalid,\n    indented,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<div class={['mc-checkbox', indented && 'mc-checkbox--indented']}>\n  <input\n    {id}\n    type=\"checkbox\"\n    class={['mc-checkbox__input', isinvalid && 'is-invalid']}\n    aria-invalid={isinvalid}\n    {name}\n    {disabled}\n    {indeterminate}\n    bind:checked\n    {...attrs}\n  />\n  {#if label}\n    <label for={id} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","name","label","checked","indeterminate","disabled","isinvalid","indented","attrs","$.rest_props","div","root","input","$.child","node","$.sibling","label_1","root_1","$.set_attribute","$$render","consequent","$.template_effect","$.set_class","$.clsx","$.bind_checked","customElementForwardEvents"],"mappings":";;;;;;;;0DAcA,oBA0CIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,mBAAoB,EAAK,EACzBC,EAAaL,EAAAC,EAAA,gBAAA,CAAA,EACbK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAASP,EAAAC,EAAA,YAAA,CAAA,EACTO,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACLQ,EAAAC,EAAAT,EAAA,gTALiB,GAAK,4OAS5BU,EAAGC,EAAA,EACDC,EAAAC,EADFH,CAAG,IACDE,WACEd,EAAE,yBAEK,qBAAsBQ,EAAS,GAAI,YAAY,iBACzCA,EAAS,OACtBL,EAAI,WACJI,EAAQ,gBACRD,EAAa,KAEVI,6CATL,IAAAM,EAAAC,EAAAH,EAAA,CAAA,iBAYEI,EAAKC,EAAA,MAALD,EAAK,EAAA,IAALA,CAAK,SAALE,EAAAF,QAAWlB,GAAE,MAA8BI,GAAK,QAAhDc,CAAK,WADHd,EAAK,GAAAiB,EAAAC,CAAA,aAZXV,CAAG,EAAHW,EAAA,IAAAC,EAAAZ,EAAG,EAAAa,EAAA,CAAS,cAAehB,EAAQ,GAAI,uBAAuB,CAAA,EAAA,eAAA,CAAA,EAC5DiB,EAAAZ,EAAAT,CAAA,MADFO,CAAG,MAFI,sXAxDIe"}

package/dist/components/checkbox/Checkbox.stories.js

@@ -18,11 +18,11 @@ const meta = {
         id=${ifDefined(args.id)}
         name=${ifDefined(args.name)}
         label=${ifDefined(args.label)}
-        checked=${ifDefined(args.checked)}
-        indeterminate=${ifDefined(args.indeterminate)}
-        isinvalid=${ifDefined(args.isinvalid)}
-        disabled=${ifDefined(args.disabled)}
-        indented=${ifDefined(args.indented)}
+        ?checked=${args.checked}
+        ?indeterminate=${args.indeterminate}
+        ?isinvalid=${args.isinvalid}
+        ?disabled=${args.disabled}
+        ?indented=${args.indented}
         @change=${(event) => {
             onChange(event);
         }}

package/dist/components/checkbox/Checkbox.svelte

@@ -3,6 +3,10 @@
     tag: 'm-checkbox',
     props: {
       checked: { reflect: true, type: 'Boolean', attribute: 'checked' },
+      indeterminate: { reflect: true, type: 'Boolean', attribute: 'indeterminate' },
+      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
+      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
+      indented: { reflect: true, type: 'Boolean', attribute: 'indented' },
     },
     extend: customElementForwardEvents,
   }}
@@ -14,6 +18,7 @@
    * 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.
    */
   interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the checkbox, used to associate the label with the form element.
      */

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -2,6 +2,7 @@
  * 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.
  */
 interface Props {
+    [key: string]: any;
     /**
      * A unique identifier for the checkbox, used to associate the label with the form element.
      */

package/dist/components/checkbox/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAKE;;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,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqCH,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyCH,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/checkboxgroup/CheckboxGroup.js

@@ -1,4 +1,4 @@
-import{c as q,p as H,a as j,b as t,k as A,f as p,r as D,h as u,i as F,j as s,e as _,d as k,s as G,n as r,t as E,l as L,m as S,g as V}from"../../custom-element.js";import{i as I}from"../../if.js";import{e as J}from"../../each.js";import{a as K,r as N,s as v}from"../../attributes.js";import{b as O}from"../../input.js";import{c as P}from"../../custom-element-forward-events.js";var Q=p('<label class="mc-checkbox__label svelte-11asba7"> </label>'),R=p('<div class="mc-checkbox mc-field__item svelte-11asba7"><input type="checkbox"/> <!></div>'),T=p("<div></div>");const U={hash:"svelte-11asba7",code:`/**
+import{c as q,p as H,a as j,b as t,k as A,f as u,g as D,h as p,i as F,j as s,r as _,d as k,s as G,n as r,t as E,l as L,m as S,e as V}from"../../custom-element.js";import{i as I}from"../../if.js";import{e as J}from"../../each.js";import{a as K,r as N,s as v}from"../../attributes.js";import{b as O}from"../../input.js";import{c as P}from"../../custom-element-forward-events.js";import"../../branches.js";var Q=p('<label class="mc-checkbox__label svelte-11asba7"> </label>'),R=p('<div class="mc-checkbox mc-field__item svelte-11asba7"><input type="checkbox"/> <!></div>'),T=p("<div></div>");const U={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--indented.svelte-11asba7 {margin-left:1.75rem;}.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-width-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, 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 q,p as H,a as j,b as t,k as A,f as p,r as D,h as u,i as F,j as s,e a
 /* stylelint-enable string-no-newline */
 /* stylelint-disable string-no-newline */.mc-field__label.svelte-11asba7, .mc-field__legend.svelte-11asba7 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__legend.svelte-11asba7 {padding-inline:0;}.mc-field__requirement.svelte-11asba7, .mc-field__help.svelte-11asba7 {font-size:var(--font-size-50, 0.75rem);line-height:var(--line-height-m, 1.5);font-weight:var(--font-weight-regular, 400);vertical-align:top;color:var(--field-color-requirement, #666666);}.mc-field__help.svelte-11asba7 {display:block;margin-top:0.125rem;}.mc-field__content.svelte-11asba7 {margin-top:0.5rem;}.mc-field__validation-message.svelte-11asba7 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-m, 1.5);display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.is-valid.svelte-11asba7::before, .mc-field__validation-message.is-invalid.svelte-11asba7::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-11asba7 {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-11asba7::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-invalid.svelte-11asba7 {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-11asba7::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-loading.svelte-11asba7 {color:var(--field-color-validation-loading, #666666);}.mc-field--group.svelte-11asba7 {border-width:0;margin-inline:0;padding:0;}
 
-/* 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 W(w,l){H(l,!0),j(w,U);const C=[];let m=t(l,"name",7),b=t(l,"options",7),o=t(l,"value",31,()=>A([])),f=t(l,"inline",7),n=t(l,"isinvalid",7),y=D(l,["$$slots","$$events","$$legacy","$$host","name","options","value","inline","isinvalid"]);var z={get name(){return m()},set name(e){m(e),s()},get options(){return b()},set options(e){b(e),s()},get value(){return o()},set value(e=[]){o(e),s()},get inline(){return f()},set inline(e){f(e),s()},get isinvalid(){return n()},set isinvalid(e){n(e),s()}},d=T();return K(d,()=>({class:["mc-field__content",f()&&"mc-field__content--inline"],...y}),void 0,void 0,void 0,"svelte-11asba7"),J(d,21,b,e=>e.id,(e,i)=>{var h=R(),a=k(h);N(a);var x,M=G(a,2);{var Z=g=>{var c=Q(),B=k(c,!0);_(c),E(()=>{v(c,"for",r(i).id),V(B,r(i).label)}),u(g,c)};I(M,g=>{r(i).label&&g(Z)})}_(h),E(()=>{L(a,1,S(["mc-checkbox__input",n()&&"is-invalid"]),"svelte-11asba7"),v(a,"id",r(i).id),v(a,"name",m()),a.disabled=r(i).disabled,a.indeterminate=r(i).indeterminate,v(a,"aria-invalid",n()),x!==(x=r(i).value)&&(a.value=(a.__value=r(i).value)??"")}),O(C,[],a,()=>(r(i).value,o()),o),u(e,h)}),_(d),u(w,d),F(z)}customElements.define("m-checkbox-group",q(W,{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 W(w,l){H(l,!0),j(w,U);const C=[];let m=t(l,"name",7),b=t(l,"options",7),o=t(l,"value",31,()=>A([])),f=t(l,"inline",7),n=t(l,"isinvalid",7),y=F(l,["$$slots","$$events","$$legacy","$$host","name","options","value","inline","isinvalid"]);var z={get name(){return m()},set name(e){m(e),s()},get options(){return b()},set options(e){b(e),s()},get value(){return o()},set value(e=[]){o(e),s()},get inline(){return f()},set inline(e){f(e),s()},get isinvalid(){return n()},set isinvalid(e){n(e),s()}},d=T();return K(d,()=>({class:["mc-field__content",f()&&"mc-field__content--inline"],...y}),void 0,void 0,void 0,"svelte-11asba7"),J(d,21,b,e=>e.id,(e,i)=>{var h=R(),a=k(h);N(a);var x,M=G(a,2);{var B=g=>{var c=Q(),Z=k(c,!0);_(c),E(()=>{v(c,"for",r(i).id),V(Z,r(i).label)}),u(g,c)};I(M,g=>{r(i).label&&g(B)})}_(h),E(()=>{L(a,1,S(["mc-checkbox__input",n()&&"is-invalid"]),"svelte-11asba7"),v(a,"id",r(i).id),v(a,"name",m()),a.disabled=r(i).disabled,a.indeterminate=r(i).indeterminate,v(a,"aria-invalid",n()),x!==(x=r(i).value)&&(a.value=(a.__value=r(i).value)??"")}),O(C,[],a,()=>(r(i).value,o()),o),u(e,h)}),_(d),u(w,d),D(z)}customElements.define("m-checkbox-group",q(W,{options:{attribute:"options",reflect:!0,type:"Array"},isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},inline:{attribute:"inline",reflect:!0,type:"Boolean"},name:{},value:{}},[],[],!0,P));
 //# 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 { name, options, value = $bindable([]), inline, isinvalid, ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']} {...attrs}>\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","attrs","$.rest_props","$.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,EAAKM,EAAKC,EAAAP,EAAA,0XAG5D,oBAAqBI,EAAM,GAAI,2BAA2B,KAAOE,2CACrEE,EAAAC,EAAA,GAAAR,EAAWS,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,qBAAsBZ,KAAa,YAAY,CAAA,EAAA,gBAAA,EACnDM,EAAAO,EAAA,KAAAL,EAAAH,CAAM,EAAC,EAAE,kBAEHQ,EAAA,SAAAL,EAAAH,CAAM,EAAC,SACFQ,EAAA,cAAAL,EAAAH,CAAM,EAAC,iCACRL,GAAS,EAEhBc,KAAAA,EAAAN,EAAAH,CAAM,EAAC,SAAPQ,EAAA,OAAAA,EAAA,QAAAL,EAAAH,CAAM,EAAC,QAAK,oBAAZG,EAAAH,CAAM,EAAC,MADFR,EAAK,GAALA,4BAbpB,uJAxCYkB"}
+{"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      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      inline: { reflect: true, type: 'Boolean', attribute: 'inline' },\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    [key: string]: any;\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, ...attrs }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']} {...attrs}>\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","attrs","$.rest_props","div","root","option","$$anchor","div_1","root_1","input","$.child","$.remove_input_defaults","node","$.sibling","label","root_2","$.get","$.set_text","text","$$render","consequent","$.set_class","$.clsx","$.set_attribute","input_value","customElementForwardEvents"],"mappings":";;;;;;;;wMAYA,+BAoCQA,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,EAAKM,EAAKC,EAAAP,EAAA,4VAGxEQ,EAAGC,EAAA,WAAHD,eAAY,oBAAqBJ,EAAM,GAAI,2BAA2B,KAAOE,6CAA7EE,EAAG,GACKP,EAAWS,GAAQA,EAAO,GAAE,CAAAC,EAAjBD,IAAM,KACrBE,EAAGC,EAAA,EACDC,EAAAC,EADFH,CAAG,EACDI,EAAAF,CAAA,QAAAG,EAAAC,EAAAJ,EAAA,CAAA,iBAYEK,EAAKC,EAAA,MAALD,EAAK,EAAA,IAALA,CAAK,WAALA,EAAK,MAAAE,EAAMX,CAAM,EAAC,EAAE,EAA8BY,EAAAC,EAAAF,EAAAX,CAAM,EAAC,KAAK,QAA9DS,CAAK,WADHE,EAAAX,CAAM,EAAC,OAAKc,EAAAC,CAAA,MAZlBb,CAAG,SACDc,EAAAZ,EAAA,EAAAa,EAAA,CAES,qBAAsBtB,KAAa,YAAY,CAAA,EAAA,gBAAA,IAFxDS,EAAA,KAAAO,EAGKX,CAAM,EAAC,EAAE,EAHdkB,EAAAd,EAAA,OAIEhB,GAAI,EAJNgB,EAAA,SAAAO,EAKWX,CAAM,EAAC,SALlBI,EAAA,cAAAO,EAMgBX,CAAM,EAAC,cANvBkB,EAAAd,EAAA,eAOeT,GAAS,EAEhBwB,KAAAA,EAAAR,EAAAX,CAAM,EAAC,SATfI,EAAA,OAAAA,EAAA,QAAAO,EASQX,CAAM,EAAC,QAAK,aATpBI,OASQO,EAAAX,CAAM,EAAC,MADFR,EAAK,GAALA,OATfU,CAAG,MAFPJ,CAAG,MAAHA,CAAG,MAFI,kPAzCIsB"}

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

@@ -41,8 +41,8 @@ const meta = {
         name=${ifDefined(args.name)}
         .options=${ifDefined(args.options)}
         value=${ifDefined(args.value)}
-        isinvalid=${ifDefined(args.isinvalid)}
-        inline=${ifDefined(args.inline)}
+        ?isinvalid=${args.isinvalid}
+        ?inline=${args.inline}
         @input=${(event) => {
             onInput(event);
         }}

package/dist/components/checkboxgroup/CheckboxGroup.svelte

@@ -3,6 +3,8 @@
     tag: 'm-checkbox-group',
     props: {
       options: { reflect: true, type: 'Array', attribute: 'options' },
+      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
+      inline: { reflect: true, type: 'Boolean', attribute: 'inline' },
     },
     extend: customElementForwardEvents,
   }}
@@ -14,6 +16,7 @@
    * 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).
    */
   interface Props {
+    [key: string]: any;
     /**
      * The name attribute for the checkbox element, typically used for form submission.
      */

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

@@ -2,6 +2,7 @@
  * 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).
  */
 interface Props {
+    [key: string]: any;
     /**
      * The name attribute for the checkbox element, typically used for form submission.
      */

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;AA+BH,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,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;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;AAiCH,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/checklistmenu/CheckListMenu.js

@@ -0,0 +1,4 @@
+import{o as w,c as B,p as D,a as E,b as f,t,f as p,g as F,h as b,j as h,r as v,n as o,d as g,v as L,l as M,m as N}from"../../custom-element.js";import{i as S}from"../../if.js";import{e as q,i as A}from"../../each.js";import{f as s}from"../../attributes.js";import{h as G}from"../../Condition20.js";import"../builtinmenu/BuiltInMenu.js";import"../builtinmenuitem/BuiltInMenuItem.js";import"../../branches.js";import"../../slot.js";import"../../svelte-element.js";var H=b('<span slot="icon"><!></span>'),I=b("<m-built-in-menu-item><!></m-built-in-menu-item>",2),J=b("<m-built-in-menu></m-built-in-menu>",2);const K={hash:"svelte-1k60ooz",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-check-list-menu__icon.svelte-1k60ooz {fill:var(--built-in-menu-color-text-default, #404040);}.mc-check-list-menu__icon--selected.svelte-1k60ooz {fill:var(--built-in-menu-color-text-selected, #006902);}`};function O(k,c){D(c,!0),E(k,K);let i=f(c,"selected",15),m=f(c,"items",7),u=f(c,"outlined",7);var y={get selected(){return i()},set selected(l){i(l),h()},get items(){return m()},set items(l){m(l),h()},get outlined(){return u()},set outlined(l){u(l),h()}},n=J();return t(()=>s(n,"selected",i())),t(()=>s(n,"outlined",u())),q(n,21,m,A,(l,r,d)=>{const z=L(()=>o(r).href?"a":"button");var e=I();s(e,"slot","item"),t(()=>s(e,"label",o(r).label)),t(()=>s(e,"href",o(r).href)),t(()=>s(e,"target",o(r).target)),t(()=>s(e,"selected",i()===d)),t(()=>s(e,"role",o(z)==="button"?"menuitem":void 0)),e.__click=()=>i(d);var x=g(e);{var C=_=>{var a=H(),j=g(a);G(j,{}),v(a),t(()=>M(a,1,N({"mc-check-list-menu__icon":!0,"mc-check-list-menu__icon--selected":i()===d}),"svelte-1k60ooz")),p(_,a)};S(x,_=>{o(r).checked&&_(C)})}v(e),p(l,e)}),v(n),p(k,n),F(y)}w(["click"]);customElements.define("m-check-list-menu",B(O,{selected:{attribute:"selected",reflect:!0,type:"Number"},outlined:{attribute:"outlined",reflect:!0,type:"Boolean"},items:{}},[],[],!0));
+//# sourceMappingURL=CheckListMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckListMenu.js","sources":["../../../src/components/checklistmenu/CheckListMenu.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-check-list-menu',\n    props: {\n      selected: { reflect: true, type: 'Number', attribute: 'selected' },\n      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { CheckCircleFilled24 } from '@mozaic-ds/icons-svelte';\n  import '../builtinmenu/BuiltInMenu.svelte';\n  import '../builtinmenuitem/BuiltInMenuItem.svelte';\n\n  type CheckListMenuItem = {\n    label: string;\n    href?: string;\n    target?: '_self' | '_blank' | '_parent' | '_top';\n    checked: boolean;\n  };\n\n  /**\n   * A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.\n   */\n  interface Props {\n    /**\n     * Defines the menu items, each of which sets a checked state and act as a button, link, or router-link.\n     */\n    items: CheckListMenuItem[];\n    /**\n     * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.\n     */\n    selected?: number;\n    /**\n     * When enabled, adds a visible border around the wrapper to highlight or separate its content.\n     */\n    outlined?: boolean;\n  }\n\n  let { selected = $bindable(), items, outlined }: Props = $props();\n</script>\n\n<m-built-in-menu {selected} {outlined}>\n  {#each items as item, index (index)}\n    {@const tag = item.href ? 'a' : 'button'}\n    <m-built-in-menu-item\n      slot=\"item\"\n      label={item.label}\n      href={item.href}\n      target={item.target}\n      selected={selected === index}\n      role={tag === 'button' ? 'menuitem' : undefined}\n      onclick={() => (selected = index)}\n    >\n      {#if item.checked}\n        <span\n          slot=\"icon\"\n          class={{\n            'mc-check-list-menu__icon': true,\n            'mc-check-list-menu__icon--selected': selected === index,\n          }}\n        >\n          <CheckCircleFilled24 />\n        </span>\n      {/if}\n    </m-built-in-menu-item>\n  {/each}\n</m-built-in-menu>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/built-in-menu/t.built-in-menu' as menu;\n\n  .mc-check-list-menu__icon {\n    @include menu.set-default-icon();\n\n    &--selected {\n      @include menu.set-selected-icon();\n    }\n  }\n</style>\n"],"names":["selected","$.prop","$$props","items","outlined","m_built_in_menu","root","$.template_effect","$.set_custom_element_data","$.index","$$anchor","item","index","tag","m_built_in_menu_item","root_1","$.get","span","root_2","node_1","$.child","CheckCircleFilled24","$.reset","$.append","$$render","consequent"],"mappings":";;kOAUA,oBA8BQA,EAAQC,EAAAC,EAAA,WAAA,EAAA,EAAgBC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAQH,EAAAC,EAAA,WAAA,CAAA,mKAG9CG,EAAeC,EAAA,EAAfC,OAAAA,EAAA,IAAAC,EAAAH,aAAiBL,EAAQ,CAAA,CAAA,EAAzBO,EAAA,IAAAC,EAAAH,aAA4BD,EAAQ,CAAA,CAAA,IAApCC,EAAe,GACPF,EAAKM,EAAA,CAAAC,EAAIC,EAAIC,IAAA,CACV,MAAAC,UAAMF,CAAI,EAAC,KAAO,IAAM,QAAQ,MACvCG,EAAgBC,EAAA,IAAhBD,EAAgB,OAAA,MAAA,UAAhBA,EAAgB,QAAAE,EAERL,CAAI,EAAC,KAAK,CAAA,UAFlBG,EAAgB,OAAAE,EAGTL,CAAI,EAAC,IAAI,CAAA,UAHhBG,EAAgB,SAAAE,EAIPL,CAAI,EAAC,MAAM,CAAA,UAJpBG,EAAgB,WAKLd,EAAQ,IAAKY,CAAK,CAAA,EAL7BL,EAAA,IAAAC,EAAAM,WAMOD,CAAG,IAAK,SAAW,WAAa,MAAS,CAAA,EANhDC,EAOC,QAAO,IAASd,EAAWY,CAAK,UAPjCE,CAAgB,aAUZ,IAAAG,EAAAC,EAAA,EAAAC,EAAAC,EAAAH,CAAA,EAOEI,EAAmBF,EAAA,EAAA,EAPrBG,EAAAL,CAAA,UAAAA,OAGG,2BAA4B,GAC5B,qCAAsCjB,EAAQ,IAAKY,uBAJtDW,EAAAb,EAAAO,CAAA,WADED,EAAAL,CAAI,EAAC,SAAOa,EAAAC,CAAA,MATlBX,CAAgB,MAAhBA,CAAgB,MAHpBT,CAAe,MAAfA,CAAe,MAFR"}

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

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

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

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

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

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

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

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

package/dist/components/checklistmenu/CheckListMenu.svelte

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

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

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

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

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

package/dist/components/checklistmenu/README.md

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

package/dist/components/circularprogressbar/CircularProgressbar.js

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

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

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

package/dist/components/circularprogressbar/CircularProgressbar.svelte

@@ -5,6 +5,7 @@
    * 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.
    */
   interface Props {
+    [key: string]: any;
     /**
      * Sets the size of the progress bar.
      */

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

@@ -2,6 +2,7 @@
  * 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.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Sets the size of the progress bar.
      */

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;AA2CH,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,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;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;AA2CH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}