@mozaic-ds/web-components 1.5.1 → 1.6.0

package/dist/components/checkbox/Checkbox.svelte

@@ -114,6 +114,16 @@
   transition: all ease 200ms;
   height: 1.25rem;
   width: 1.25rem;
+  position: relative;
+}
+.mc-checkbox__input::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: var(--forms-color-icon-inverse, #ffffff);
+  opacity: 0;
+  transform: scale(0.6);
+  transition: 0.15s ease;
 }
 .mc-checkbox__input:hover {
   border-color: var(--forms-color-border-hover, #4d4d4d);
@@ -123,11 +133,17 @@
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
-.mc-checkbox__input: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:checked::after {
+  opacity: 1;
+  transform: scale(1);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
 }
-.mc-checkbox__input: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:indeterminate::after {
+  opacity: 1;
+  transform: scale(1);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E") no-repeat center/contain;
 }
 .mc-checkbox__input:checked, .mc-checkbox__input:indeterminate {
   background-color: var(--forms-color-background-checked, #117f03);
@@ -141,11 +157,11 @@
   background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
 }
-.mc-checkbox__input: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:disabled:checked::after {
+  background-color: var(--forms-color-icon-disabled, #737373);
 }
-.mc-checkbox__input: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:disabled:indeterminate::after {
+  background-color: var(--forms-color-icon-disabled, #737373);
 }
 .mc-checkbox__input:disabled + .mc-checkbox__label {
   color: var(--forms-color-text-disabled, #737373);
@@ -202,13 +218,17 @@
   color: var(--field-color-validation-valid, #117f03);
 }
 .mc-field__validation-message.is-valid::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");
+  background-color: var(--field-color-validation-valid, #117f03);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;
 }
 .mc-field__validation-message.is-invalid {
   color: var(--field-color-validation-invalid, #c61112);
 }
 .mc-field__validation-message.is-invalid::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");
+  background-color: var(--field-color-validation-invalid, #c61112);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;
 }
 .mc-field__validation-message.is-loading {
   color: var(--field-color-validation-loading, #666666);

package/dist/components/checkboxgroup/CheckboxGroup.js

@@ -1,10 +1,10 @@
-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:`/**
+import{c as q,e as H,a as L,p as l,g as V,b as u,d as j,f as p,n as A,i as o,r as _,j as x,k as D,l as t,t as E,s as F,h as G,m as S}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);}
+/* 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;position:relative;}.mc-checkbox__input.svelte-11asba7::after {content:"";position:absolute;inset:0;background-color:var(--forms-color-icon-inverse, #ffffff);opacity:0;transform:scale(0.6);transition:0.15s ease;}.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::after {opacity:1;transform:scale(1);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;}.mc-checkbox__input.svelte-11asba7:indeterminate::after {opacity:1;transform:scale(1);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E") no-repeat center/contain;}.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::after {background-color:var(--forms-color-icon-disabled, #737373);}.mc-checkbox__input.svelte-11asba7:disabled:indeterminate::after {background-color:var(--forms-color-icon-disabled, #737373);}.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);}
 
 /* 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-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-color:var(--field-color-validation-valid, #117f03);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;}.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-color:var(--field-color-validation-invalid, #c61112);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;}.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=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));
+/* 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,r){H(r,!0),L(w,U);const C=[];let m=l(r,"name",7),b=l(r,"options",7),s=l(r,"value",31,()=>V([])),h=l(r,"inline",7),n=l(r,"isinvalid",7),y=A(r,["$$slots","$$events","$$legacy","$$host","name","options","value","inline","isinvalid"]);var M={get name(){return m()},set name(e){m(e),o()},get options(){return b()},set options(e){b(e),o()},get value(){return s()},set value(e=[]){s(e),o()},get inline(){return h()},set inline(e){h(e),o()},get isinvalid(){return n()},set isinvalid(e){n(e),o()}},c=T();return K(c,()=>({class:["mc-field__content",h()&&"mc-field__content--inline"],...y}),void 0,void 0,void 0,"svelte-11asba7"),J(c,21,b,e=>e.id,(e,i)=>{var f=R(),a=x(f);N(a);var k,Z=D(a,2);{var z=g=>{var d=Q(),B=x(d,!0);_(d),E(()=>{v(d,"for",t(i).id),S(B,t(i).label)}),u(g,d)};I(Z,g=>{t(i).label&&g(z)})}_(f),E(()=>{F(a,1,G(["mc-checkbox__input",n()&&"is-invalid"]),"svelte-11asba7"),v(a,"id",t(i).id),v(a,"name",m()),a.disabled=t(i).disabled,a.indeterminate=t(i).indeterminate,v(a,"aria-invalid",n()),k!==(k=t(i).value)&&(a.value=(a.__value=t(i).value)??"")}),O(C,[],a,()=>(t(i).value,s()),s),u(e,f)}),_(c),u(w,c),j(M)}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:{}},[],[],{mode:"open"},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      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"}
+{"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,6PAzCIsB"}

package/dist/components/checkboxgroup/CheckboxGroup.svelte

@@ -101,6 +101,16 @@
   transition: all ease 200ms;
   height: 1.25rem;
   width: 1.25rem;
+  position: relative;
+}
+.mc-checkbox__input::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: var(--forms-color-icon-inverse, #ffffff);
+  opacity: 0;
+  transform: scale(0.6);
+  transition: 0.15s ease;
 }
 .mc-checkbox__input:hover {
   border-color: var(--forms-color-border-hover, #4d4d4d);
@@ -110,11 +120,17 @@
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
-.mc-checkbox__input: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:checked::after {
+  opacity: 1;
+  transform: scale(1);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' 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") no-repeat center/contain;
 }
-.mc-checkbox__input: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:indeterminate::after {
+  opacity: 1;
+  transform: scale(1);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E") no-repeat center/contain;
 }
 .mc-checkbox__input:checked, .mc-checkbox__input:indeterminate {
   background-color: var(--forms-color-background-checked, #117f03);
@@ -128,11 +144,11 @@
   background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
 }
-.mc-checkbox__input: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:disabled:checked::after {
+  background-color: var(--forms-color-icon-disabled, #737373);
 }
-.mc-checkbox__input: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:disabled:indeterminate::after {
+  background-color: var(--forms-color-icon-disabled, #737373);
 }
 .mc-checkbox__input:disabled + .mc-checkbox__label {
   color: var(--forms-color-text-disabled, #737373);
@@ -189,13 +205,17 @@
   color: var(--field-color-validation-valid, #117f03);
 }
 .mc-field__validation-message.is-valid::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");
+  background-color: var(--field-color-validation-valid, #117f03);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;
 }
 .mc-field__validation-message.is-invalid {
   color: var(--field-color-validation-invalid, #c61112);
 }
 .mc-field__validation-message.is-invalid::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");
+  background-color: var(--field-color-validation-invalid, #c61112);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' 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") no-repeat center/contain;
 }
 .mc-field__validation-message.is-loading {
   color: var(--field-color-validation-loading, #666666);

package/dist/components/checklistmenu/CheckListMenu.js

@@ -1,4 +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:`/**
+import{o as j,c as B,e as D,a as E,p as f,t,b as p,d as F,f as v,i as h,r as b,l as o,j as g,u as L,w as M,s as N,h as S}from"../../custom-element.js";import{i as q}from"../../if.js";import{e as A,i as G}from"../../each.js";import{g as s}from"../../attributes.js";import{i as H}from"../../Condition20.js";import"../builtinmenu/BuiltInMenu.js";import"../builtinmenuitem/BuiltInMenuItem.js";import"../../branches.js";import"../../slot.js";import"../../svelte-element.js";var I=v('<span slot="icon"><!></span>'),J=v("<m-built-in-menu-item><!></m-built-in-menu-item>",2),K=v("<m-built-in-menu></m-built-in-menu>",2);const O={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));
+ */.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 P(k,a){D(a,!0),E(k,O);let i=f(a,"selected",15),m=f(a,"items",7),u=f(a,"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=K();return t(()=>s(n,"selected",i())),t(()=>s(n,"outlined",u())),A(n,21,m,G,(l,r,d)=>{const z=M(()=>o(r).href?"a":"button");var e=J();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));var x=g(e);{var C=_=>{var c=I(),w=g(c);H(w,{}),b(c),t(()=>N(c,1,S({"mc-check-list-menu__icon":!0,"mc-check-list-menu__icon--selected":i()===d}),"svelte-1k60ooz")),p(_,c)};q(x,_=>{o(r).checked&&_(C)})}b(e),L("click",e,()=>i(d)),p(l,e)}),b(n),p(k,n),F(y)}j(["click"]);customElements.define("m-check-list-menu",B(P,{selected:{attribute:"selected",reflect:!0,type:"Number"},outlined:{attribute:"outlined",reflect:!0,type:"Boolean"},items:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=CheckListMenu.js.map

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

@@ -1 +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"}
+{"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,UANhDC,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,YAAhBA,EAAgB,IAOCd,EAAWY,CAAK,CAAA,MAPjCE,CAAgB,MAHpBT,CAAe,MAAfA,CAAe,MAFR"}

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

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import './CheckListMenu.svelte';
 const meta = {
-    title: 'Navigation/Check list menu',
+    title: 'Navigation/Check-list Menu',
     component: 'm-check-list-menu',
     tags: ['v2'],
     args: {

package/dist/components/circularprogressbar/CircularProgressbar.js

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

package/dist/components/container/Container.js

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

package/dist/components/datepicker/Datepicker.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.js","sources":["../../../src/components/datepicker/Datepicker.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-datepicker',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n      isclearable: { reflect: true, type: 'Boolean', attribute: 'isclearable' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import { CrossCircleFilled24 } from '@mozaic-ds/icons-svelte';\n  /**\n   * A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the datepicker element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the datepicker element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the datepicker field.\n     */\n    value?: string | number;\n    /**\n     * If `true`, applies an invalid state to the datepicker.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the datepicker, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the datepicker.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the datepicker is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the datepicker has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    isinvalid,\n    disabled,\n    size = 'm',\n    readonly,\n    isclearable,\n    clearlabel = 'clear content',\n    ...attrs\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div\n  class={[\n    'mc-datepicker mc-text-input',\n    `mc-text-input--${size}`,\n    `mc-datepicker--${size}`,\n    isinvalid && 'is-invalid',\n  ]}\n>\n  <input\n    class=\"mc-datepicker__control mc-text-input__control\"\n    type=\"date\"\n    bind:value\n    {id}\n    {name}\n    {disabled}\n    {readonly}\n    aria-invalid={isinvalid}\n    {...attrs}\n  />\n\n  {#if isclearable && value}\n    <div class=\"mc-datepicker__controls-options mc-controls-options\">\n      <button type=\"button\" class=\"mc-controls-options__button\" onclick={resetValue}>\n        <CrossCircleFilled24 className=\"mc-controls-options__icon\" />\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/text-input';\n  @use '@mozaic-ds/styles/components/datepicker';\n  @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["id","$.prop","$$props","name","value","isinvalid","disabled","size","readonly","isclearable","clearlabel","attrs","$.rest_props","resetValue","div","root","input","$.child","node","$.sibling","div_1","root_1","button","CrossCircleFilled24","node_1","span","$$render","consequent","$.reset","$.bind_value","$.append","$$anchor","customElementForwardEvents"],"mappings":";;;;;uoMAaA,oBA+CIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,eAAO,GAAG,EACVC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAWR,EAAAC,EAAA,cAAA,CAAA,EACXQ,qBAAa,eAAe,EACzBC,EAAAC,EAAAV,EAAA,0IAGCW,EAAU,IAAUT,EAAQ,EAAE,4RAP3B,IAAG,yKAGG,gBAAe,YAO/BU,EAAAC,EAAA,EAQEC,EAAAC,EARFH,CAAA,IAQEE,6EAIEhB,EAAE,OACFG,EAAI,WACJG,EAAQ,WACRE,EAAQ,iBACKH,EAAS,KACnBM,6CATL,IAAAO,EAAAC,EAAAH,EAAA,CAAA,iBAaEI,EAAGC,EAAA,EACDC,IADFF,CAAG,EACDE,EAAyD,QAAST,UAAlES,CAAM,EACJC,EAAmBC,EAAA,CAAA,UAAA,2BAAA,CAAA,MACnBC,EAAIN,EAAAK,EAAA,CAAA,MAAJC,EAAI,EAAA,IAAJA,CAAI,IAFNH,CAAM,IADRF,CAAG,YAG0CV,EAAU,CAAA,CAAA,MAHvDU,CAAG,WADDX,EAAW,GAAIL,KAAKsB,EAAAC,CAAA,IApB1BC,OAAAA,EAAAd,CAAA,UAAAA,OAEG,gDACkBP,EAAI,CAAA,qBACJA,EAAI,CAAA,GACtBF,KAAa,iCAGdwB,EAAAb,EAAAZ,CAAA,EARF0B,EAAAC,EAAAjB,CAAA,MAFO,+VAhEIkB"}
+{"version":3,"file":"Datepicker.js","sources":["../../../src/components/datepicker/Datepicker.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-datepicker',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n      isclearable: { reflect: true, type: 'Boolean', attribute: 'isclearable' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import { CrossCircleFilled24 } from '@mozaic-ds/icons-svelte';\n  /**\n   * A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * A unique identifier for the datepicker element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the datepicker element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the datepicker field.\n     */\n    value?: string | number;\n    /**\n     * If `true`, applies an invalid state to the datepicker.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the datepicker, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the datepicker.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the datepicker is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the datepicker has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    isinvalid,\n    disabled,\n    size = 'm',\n    readonly,\n    isclearable,\n    clearlabel = 'clear content',\n    ...attrs\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div\n  class={[\n    'mc-datepicker mc-text-input',\n    `mc-text-input--${size}`,\n    `mc-datepicker--${size}`,\n    isinvalid && 'is-invalid',\n  ]}\n>\n  <input\n    class=\"mc-datepicker__control mc-text-input__control\"\n    type=\"date\"\n    bind:value\n    {id}\n    {name}\n    {disabled}\n    {readonly}\n    aria-invalid={isinvalid}\n    {...attrs}\n  />\n\n  {#if isclearable && value}\n    <div class=\"mc-datepicker__controls-options mc-controls-options\">\n      <button type=\"button\" class=\"mc-controls-options__button\" onclick={resetValue}>\n        <CrossCircleFilled24 className=\"mc-controls-options__icon\" />\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/text-input';\n  @use '@mozaic-ds/styles/components/datepicker';\n  @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["id","$.prop","$$props","name","value","isinvalid","disabled","size","readonly","isclearable","clearlabel","attrs","$.rest_props","resetValue","div","root","input","$.child","node","$.sibling","div_1","root_1","button","CrossCircleFilled24","node_1","span","$.delegated","$$render","consequent","$.reset","$.bind_value","$.append","$$anchor","customElementForwardEvents"],"mappings":";;;;;wpRAaA,oBA+CIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAASJ,EAAAC,EAAA,YAAA,CAAA,EACTI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,eAAO,GAAG,EACVC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAWR,EAAAC,EAAA,cAAA,CAAA,EACXQ,qBAAa,eAAe,EACzBC,EAAAC,EAAAV,EAAA,0IAGCW,EAAU,IAAUT,EAAQ,EAAE,4RAP3B,IAAG,yKAGG,gBAAe,YAO/BU,EAAAC,EAAA,EAQEC,EAAAC,EARFH,CAAA,IAQEE,6EAIEhB,EAAE,OACFG,EAAI,WACJG,EAAQ,WACRE,EAAQ,iBACKH,EAAS,KACnBM,6CATL,IAAAO,EAAAC,EAAAH,EAAA,CAAA,iBAaEI,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAM,EACJC,EAAmBC,EAAA,CAAA,UAAA,2BAAA,CAAA,MACnBC,EAAIN,EAAAK,EAAA,CAAA,MAAJC,EAAI,EAAA,IAAJA,CAAI,IAFNH,CAAM,IADRF,CAAG,YAG0CV,EAAU,CAAA,CAAA,EAFrDgB,EAAA,QAAAJ,EAAkET,CAAU,MAD9EO,CAAG,WADDX,EAAW,GAAIL,KAAKuB,EAAAC,CAAA,IApB1BC,OAAAA,EAAAf,CAAA,UAAAA,OAEG,gDACkBP,EAAI,CAAA,qBACJA,EAAI,CAAA,GACtBF,KAAa,iCAGdyB,EAAAd,EAAAZ,CAAA,EARF2B,EAAAC,EAAAlB,CAAA,MAFO,0WAhEImB"}

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

@@ -3,7 +3,7 @@ import './Datepicker.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
-export declare const WithValue: Story;
+export declare const Value: Story;
 export declare const Default: Story;
 export declare const Small: Story;
 export declare const Disabled: Story;

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

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

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

@@ -5,7 +5,7 @@ import './Datepicker.svelte';
 const meta = {
     title: 'Form Elements/Datepicker',
     component: 'm-datepicker',
-    subcomponents: { 'Field': 'm-field' },
+    subcomponents: { Field: 'm-field' },
     tags: ['v2'],
     argTypes: {
         size: {
@@ -49,7 +49,7 @@ const meta = {
     },
 };
 export default meta;
-export const WithValue = {
+export const Value = {
     args: {
         id: 'withValueId',
         value: '2025-07-22',