@mozaic-ds/web-components 1.5.1 → 1.7.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,m as o,h as x,s as D,i as t,r as _,t as E,j as F,l as G,k 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,m as h,i as o,h as g,r as b,u as L,w as M,j as N,l 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 W,a as q,p as l,s as z,h as a,b as m,d as A,f as g,n as F,m as i,t as f,r as t,aW as G,k 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){W(r,!0),q(x,O);let n=l(r,"size",7),o=l(r,"value",7,0),v=l(r,"type",7,"percentage"),_=l(r,"contentvalue",7),p=l(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),i()},get value(){return o()},set value(e=0){o(e),i()},get type(){return v()},set type(e="percentage"){v(e),i()},get contentvalue(){return _()},set contentvalue(e){_(e),i()},get additionalinfo(){return p()},set additionalinfo(e){p(e),i()}},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/combobox/Combobox.js

@@ -0,0 +1,4 @@
+import{o as ue,c as ve,e as we,a as fe,p as t,i as a,s as _,y as pe,x as he,b as y,q as k,t as $,u as ee,d as xe,f as N,v as z,w as J,h as s,m as r,r as i,k as oe,j as ge,l as _e}from"../../custom-element.js";import{a as ye}from"../../index-client.js";import{i as te}from"../../if.js";import{s as ke}from"../../slot.js";import{a as ze,s as Ce}from"../../attributes.js";import{b as M}from"../../this.js";import{O as Be}from"../optionlistbox/OptionListbox.js";import{c as Ee,e as Le}from"../../Condition20.js";import"../../branches.js";import"../../each.js";import"../../svelte-component.js";import"../button/Button.js";import"../loader/Loader.js";import"../textinput/Textinput.js";import"../../input.js";import"../../custom-element-forward-events.js";var Pe=N('<span class="mc-combobox__counter svelte-aew1wn"> </span>'),Se=N('<button type="button" class="mc-combobox__clear svelte-aew1wn" aria-label="Clear value"><!></button>'),De=N('<div><div class="mc-combobox__input svelte-aew1wn"><button> </button> <!> <!> <button type="button" class="mc-combobox__icon svelte-aew1wn" aria-label="Expand options list"><!></button></div> <div class="mc-combobox__listbox svelte-aew1wn"><!></div></div>');const Oe={hash:"svelte-aew1wn",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-combobox.svelte-aew1wn {position:relative;width:18.75rem;}.mc-combobox__input.svelte-aew1wn {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%;display:flex;align-items:center;gap:0.5rem;box-sizing:border-box;}.mc-combobox__input.svelte-aew1wn: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-combobox__input.svelte-aew1wn: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-combobox__input.svelte-aew1wn:has(.mc-combobox__control:where(.svelte-aew1wn):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-combobox__input.svelte-aew1wn .mc-combobox__control:where(.svelte-aew1wn) {text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:0.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.mc-combobox__input.svelte-aew1wn .mc-combobox__control:where(.svelte-aew1wn):focus-within {outline:none;}.mc-combobox__icon.svelte-aew1wn {border:none;display:flex;align-items:center;cursor:pointer;padding-right:0.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor;}.mc-combobox__clear.svelte-aew1wn {padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor;}.mc-combobox__counter.svelte-aew1wn {height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 0.5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, 0.75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff);}.mc-combobox__listbox.svelte-aew1wn {position:absolute;left:0;top:calc(100% + 0.25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, 0.0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, 0.5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all;}.mc-combobox--open.svelte-aew1wn .mc-combobox__listbox:where(.svelte-aew1wn) {visibility:visible;opacity:1;}.mc-combobox--s.svelte-aew1wn .mc-combobox__control:where(.svelte-aew1wn) {height:2rem;font-size:var(--font-size-100, 0.875rem);padding-left:0.5rem;}.mc-combobox--s.svelte-aew1wn .mc-combobox__icon:where(.svelte-aew1wn) {padding-right:0.5rem;}.mc-combobox--s.svelte-aew1wn .mc-combobox__clear:where(.svelte-aew1wn) {width:1.25rem;height:1.25rem;}.mc-combobox--invalid.svelte-aew1wn .mc-combobox__input:where(.svelte-aew1wn) {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-combobox--invalid.svelte-aew1wn .mc-combobox__input:where(.svelte-aew1wn):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-combobox--disabled.svelte-aew1wn .mc-combobox__input:where(.svelte-aew1wn) {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-combobox--disabled.svelte-aew1wn .mc-combobox__control:where(.svelte-aew1wn) {color:var(--forms-color-text-disabled, #737373);}.mc-combobox--disabled.svelte-aew1wn .mc-combobox__icon:where(.svelte-aew1wn) {color:var(--forms-color-icon-disabled, #737373);}.mc-combobox--readonly.svelte-aew1wn .mc-combobox__input:where(.svelte-aew1wn) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}`};function je(Q,o){we(o,!0),fe(Q,Oe);let n=t(o,"value",15),b=t(o,"multiple",7),C=t(o,"size",7,"m"),v=t(o,"disabled",7),B=t(o,"readonly",7),E=t(o,"invalid",7),L=t(o,"clearable",7),w=t(o,"search",7),P=t(o,"actions",7),S=t(o,"checkablesections",7),f=t(o,"placeholder",7,"Select an option"),D=t(o,"counterlabel",7,"99 selected"),O=t(o,"searchplaceholder",7,"Find an option..."),j=t(o,"selectlabel",7,"Select all"),F=t(o,"clearlabel",7,"Clear"),p=t(o,"options",7),I=t(o,"onopen",7);const A=crypto.randomUUID();let h,x=z(null),U=z(null),q,c=z(!1),K=z(-1);const re=J(()=>a(K)>=0?`option-${A}-${a(K)}`:void 0),ae=J(()=>Array.isArray(n())?n().length?n().join(", "):f():p().find(e=>e.value===n())?.label||f()),le=J(()=>b()?!!n().length:!!n());function V(e){const l=e.composedPath?e.composedPath():[];!l.includes(h)&&!l.includes(a(U))&&G()}function R(){k(c,!0),W(),document.addEventListener("click",V)}function G(){k(c,!1),W(),document.removeEventListener("click",V)}function T(){return a(c)?G():R()}function W(){I()?.(a(c)),h.dispatchEvent(new CustomEvent("update:open",{bubbles:!0,composed:!0}))}ye(()=>{document.removeEventListener("click",V)});var ne={get value(){return n()},set value(e){n(e),r()},get multiple(){return b()},set multiple(e){b(e),r()},get size(){return C()},set size(e="m"){C(e),r()},get disabled(){return v()},set disabled(e){v(e),r()},get readonly(){return B()},set readonly(e){B(e),r()},get invalid(){return E()},set invalid(e){E(e),r()},get clearable(){return L()},set clearable(e){L(e),r()},get search(){return w()},set search(e){w(e),r()},get actions(){return P()},set actions(e){P(e),r()},get checkablesections(){return S()},set checkablesections(e){S(e),r()},get placeholder(){return f()},set placeholder(e="Select an option"){f(e),r()},get counterlabel(){return D()},set counterlabel(e="99 selected"){D(e),r()},get searchplaceholder(){return O()},set searchplaceholder(e="Find an option..."){O(e),r()},get selectlabel(){return j()},set selectlabel(e="Select all"){j(e),r()},get clearlabel(){return F()},set clearlabel(e="Clear"){F(e),r()},get options(){return p()},set options(e){p(e),r()},get onopen(){return I()},set onopen(e){I(e),r()}},m=De(),H=s(m),u=s(H);ze(u,()=>({"aria-expanded":a(c),"aria-haspopup":"listbox","aria-controls":`listbox-${A}`,disabled:v(),class:"mc-combobox__control","aria-label":"Combobox input",onclick:T,...w()?{}:{role:"combobox","aria-activedescendant":a(re),onkeydown:a(x)?.handleKeydown}}),void 0,void 0,void 0,"svelte-aew1wn");var ce=s(u,!0);i(u),M(u,e=>q=e,()=>q);var X=_(u,2);{var se=e=>{var l=Pe(),d=s(l,!0);i(l),$(()=>oe(d,D())),y(e,l)};te(X,e=>{b()&&e(se)})}var Y=_(X,2);{var ie=e=>{var l=Se(),d=s(l);Le(d,{}),i(l),ee("click",l,()=>a(x)?.clearSelection()),y(e,l)};te(Y,e=>{L()&&a(le)&&e(ie)})}var g=_(Y,2);Ce(g,"tabindex",-1);var be=s(g);Ee(be,{}),i(g),i(H);var Z=_(H,2),de=s(Z);return M(Be(de,{get id(){return A},get open(){return a(c)},get multiple(){return b()},get search(){return w()},get actions(){return P()},get checkablesections(){return S()},get searchplaceholder(){return O()},get selectlabel(){return j()},get clearlabel(){return F()},get options(){return p()},activeindex:a(K),onopen:R,onclose:()=>{G(),q?.focus()},get element(){return a(U)},set element(e){k(U,e,!0)},get value(){return n()},set value(e){n(e)},$$slots:{optionPrefix:(e,l)=>{var d=pe(),me=he(d);ke(me,o,"optionPrefix",{},null),y(e,d)}}}),e=>k(x,e,!0),()=>a(x)),i(Z),i(m),M(m,e=>h=e,()=>h),$(()=>{ge(m,1,_e({"mc-combobox":!0,"mc-combobox--open":a(c),"mc-combobox--multiple":b(),"mc-combobox--invalid":E(),"mc-combobox--s":C()==="s","mc-combobox--disabled":v(),"mc-combobox--readonly":B()}),"svelte-aew1wn"),oe(ce,a(ae))}),ee("click",g,T),y(Q,m),xe(ne)}ue(["click"]);customElements.define("m-combobox",ve(je,{multiple:{attribute:"multiple",reflect:!0,type:"Boolean"},compact:{attribute:"compact",reflect:!0,type:"Boolean"},disabled:{attribute:"disabled",reflect:!0,type:"Boolean"},readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},invalid:{attribute:"invalid",reflect:!0,type:"Boolean"},clearable:{attribute:"clearable",reflect:!0,type:"Boolean"},search:{attribute:"search",reflect:!0,type:"Boolean"},actions:{attribute:"actions",reflect:!0,type:"Boolean"},checkablesections:{attribute:"checkablesections",reflect:!0,type:"Boolean"},value:{},size:{},placeholder:{},counterlabel:{},searchplaceholder:{},selectlabel:{},clearlabel:{},options:{},onopen:{}},["optionPrefix"],[],{mode:"open"}));
+//# sourceMappingURL=Combobox.js.map

package/dist/components/combobox/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/combobox/Combobox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-combobox',\n    props: {\n      multiple: { reflect: true, type: 'Boolean', attribute: 'multiple' },\n      compact: { reflect: true, type: 'Boolean', attribute: 'compact' },\n      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },\n      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },\n      invalid: { reflect: true, type: 'Boolean', attribute: 'invalid' },\n      clearable: { reflect: true, type: 'Boolean', attribute: 'clearable' },\n      search: { reflect: true, type: 'Boolean', attribute: 'search' },\n      actions: { reflect: true, type: 'Boolean', attribute: 'actions' },\n      checkablesections: { reflect: true, type: 'Boolean', attribute: 'checkablesections' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { onDestroy } from 'svelte';\n  import OptionListbox, { type ListboxOption } from '../optionlistbox/OptionListbox.svelte';\n  import { ChevronDown24, CrossCircleFilled24 } from '@mozaic-ds/icons-svelte';\n\n  /**\n   * A combobox is an input field that allows users to select an option from a dropdown list or enter a custom value. It combines the functionality of a text input and a dropdown menu, providing flexibility and ease of use in forms and user interfaces.\n   * @slot optionPrefix - Use this slot to add a prefix to options.\n   * @event update:open {CustomEvent<boolean>} - Emitted when the listbox is opened or closed.\n   */\n  interface Props {\n    /**\n     * The current selected value(s) of the combobox.\n     */\n    value: string | number | null | (string | number)[];\n    /**\n     * Enable multiple value mode.\n     */\n    multiple?: boolean;\n    /**\n     * Size of the combobox: small ('s') or medium ('m').\n     */\n    size?: 's' | 'm';\n    /**\n     * Disable the combobox input.\n     */\n    disabled?: boolean;\n    /**\n     * Make the combobox read-only.\n     */\n    readonly?: boolean;\n    /**\n     * Mark the combobox as invalid.\n     */\n    invalid?: boolean;\n    /**\n     * Show a clear value button.\n     */\n    clearable?: boolean;\n    /**\n     * Enable the search input inside the listbox.\n     */\n    search?: boolean;\n    /**\n     * Show select all / clear buttons when multiple.\n     */\n    actions?: boolean;\n    /**\n     * Enable checkable section headers in the listbox.\n     */\n    checkablesections?: boolean;\n    /**\n     * Placeholder text when no value is selected.\n     */\n    placeholder?: string;\n    /**\n     * Label for the selected items counter.\n     */\n    counterlabel?: string;\n    /**\n     * Placeholder text for the search input.\n     */\n    searchplaceholder?: string;\n    /**\n     * Label for the \"Select all\" button.\n     */\n    selectlabel?: string;\n    /**\n     * Label for the \"Clear value\" button.\n     */\n    clearlabel?: string;\n    /**\n     * Array of options to display in the listbox.\n     */\n    options: Array<ListboxOption>;\n    /**\n     * Callback to trigger when the listbox is opened or closed.\n     */\n    onopen?: (value: boolean) => void;\n  }\n\n  let {\n    value = $bindable(),\n    multiple,\n    size = 'm',\n    disabled,\n    readonly,\n    invalid,\n    clearable,\n    search,\n    actions,\n    checkablesections,\n    placeholder = 'Select an option',\n    counterlabel = '99 selected',\n    searchplaceholder = 'Find an option...',\n    selectlabel = 'Select all',\n    clearlabel = 'Clear',\n    options,\n    onopen,\n  }: Props = $props();\n\n  const id = crypto.randomUUID();\n\n  let combobox: HTMLElement;\n  let listbox: InstanceType<typeof OptionListbox> | null = $state(null);\n  let listboxEl: HTMLElement | null | undefined = $state(null);\n  let comboboxControl: HTMLElement;\n\n  let isOpen = $state(false);\n\n  let activeIndex = $state(-1);\n\n  const activeDescendantId = $derived.by(() => {\n    return activeIndex >= 0 ? `option-${id}-${activeIndex}` : undefined;\n  });\n\n  const selectionLabel = $derived.by(() => {\n    if (Array.isArray(value)) {\n      if (!value.length) return placeholder;\n      return (value as (string | number)[]).join(', ');\n    }\n\n    return options.find((option) => option.value === value)?.label || placeholder;\n  });\n\n  const hasValue = $derived.by(() =>\n    multiple ? !!(value as (string | number)[]).length : !!value,\n  );\n\n  function handleClickOutside(event: MouseEvent) {\n    const path = event.composedPath ? event.composedPath() : [];\n    if (!path.includes(combobox) && !path.includes(listboxEl!)) {\n      close();\n    }\n  }\n\n  function open() {\n    isOpen = true;\n    handleOpen();\n    document.addEventListener('click', handleClickOutside);\n  }\n\n  function close() {\n    isOpen = false;\n    handleOpen();\n    document.removeEventListener('click', handleClickOutside);\n  }\n\n  function toggleListbox() {\n    return isOpen ? close() : open();\n  }\n\n  function handleOpen() {\n    onopen?.(isOpen);\n\n    combobox.dispatchEvent(new CustomEvent('update:open', { bubbles: true, composed: true }));\n  }\n\n  onDestroy(() => {\n    document.removeEventListener('click', handleClickOutside);\n  });\n</script>\n\n<div\n  bind:this={combobox}\n  class={{\n    'mc-combobox': true,\n    'mc-combobox--open': isOpen,\n    'mc-combobox--multiple': multiple,\n    'mc-combobox--invalid': invalid,\n    'mc-combobox--s': size === 's',\n    'mc-combobox--disabled': disabled,\n    'mc-combobox--readonly': readonly,\n  }}\n>\n  <div class=\"mc-combobox__input\">\n    <button\n      bind:this={comboboxControl}\n      aria-expanded={isOpen}\n      aria-haspopup=\"listbox\"\n      aria-controls={`listbox-${id}`}\n      {disabled}\n      class=\"mc-combobox__control\"\n      aria-label=\"Combobox input\"\n      onclick={toggleListbox}\n      {...search\n        ? {}\n        : {\n            role: 'combobox',\n            'aria-activedescendant': activeDescendantId,\n            onkeydown: listbox?.handleKeydown,\n          }}\n    >\n      {selectionLabel}\n    </button>\n    {#if multiple}\n      <span class=\"mc-combobox__counter\">\n        {counterlabel}\n      </span>\n    {/if}\n\n    {#if clearable && hasValue}\n      <button\n        type=\"button\"\n        class=\"mc-combobox__clear\"\n        aria-label=\"Clear value\"\n        onclick={() => listbox?.clearSelection()}\n      >\n        <CrossCircleFilled24 />\n      </button>\n    {/if}\n\n    <button\n      type=\"button\"\n      tabindex={-1}\n      class=\"mc-combobox__icon\"\n      aria-label=\"Expand options list\"\n      onclick={toggleListbox}\n    >\n      <ChevronDown24 />\n    </button>\n  </div>\n\n  <div class=\"mc-combobox__listbox\">\n    <OptionListbox\n      bind:this={listbox}\n      bind:element={listboxEl}\n      bind:value\n      {id}\n      open={isOpen}\n      {multiple}\n      {search}\n      {actions}\n      {checkablesections}\n      {searchplaceholder}\n      {selectlabel}\n      {clearlabel}\n      {options}\n      activeindex={activeIndex}\n      onopen={open}\n      onclose={() => {\n        close();\n        comboboxControl?.focus();\n      }}\n    >\n      <slot name=\"optionPrefix\" slot=\"optionPrefix\" />\n    </OptionListbox>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/combobox';\n</style>\n"],"names":["value","$.prop","$$props","multiple","size","disabled","readonly","invalid","clearable","search","actions","checkablesections","placeholder","counterlabel","searchplaceholder","selectlabel","clearlabel","options","onopen","id","combobox","listbox","$.state","listboxEl","comboboxControl","isOpen","activeIndex","activeDescendantId","$.derived","$.get","selectionLabel","option","hasValue","handleClickOutside","event","path","close","open","$.set","handleOpen","toggleListbox","onDestroy","div","root","div_1","$.child","button","text","$.reset","$$value","node","$.sibling","span","root_1","$$render","consequent","button_1","root_2","node_2","CrossCircleFilled24","$.append","$$anchor","consequent_1","button_2","node_1","$.set_attribute","node_3","ChevronDown24","div_2","OptionListbox","node_4","$.delegated"],"mappings":";;+sJAiBA,uBAkFIA,EAAKC,EAAAC,EAAA,QAAA,EAAA,EACLC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,eAAO,GAAG,EACVC,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EACRI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAAON,EAAAC,EAAA,UAAA,CAAA,EACPM,EAASP,EAAAC,EAAA,YAAA,CAAA,EACTO,EAAMR,EAAAC,EAAA,SAAA,CAAA,EACNQ,EAAOT,EAAAC,EAAA,UAAA,CAAA,EACPS,EAAiBV,EAAAC,EAAA,oBAAA,CAAA,EACjBU,sBAAc,kBAAkB,EAChCC,uBAAe,aAAa,EAC5BC,4BAAoB,mBAAmB,EACvCC,sBAAc,YAAY,EAC1BC,qBAAa,OAAO,EACpBC,EAAOhB,EAAAC,EAAA,UAAA,CAAA,EACPgB,EAAMjB,EAAAC,EAAA,SAAA,CAAA,QAGFiB,EAAK,OAAO,WAAU,MAExBC,EACAC,EAAqDC,EAAO,IAAI,EAChEC,EAA4CD,EAAO,IAAI,EACvDE,EAEAC,EAASH,EAAO,EAAK,EAErBI,EAAcJ,EAAM,EAAG,EAErB,MAAAK,GAAkBC,EAAA,IACfC,EAAAH,CAAW,GAAI,EAAC,UAAaP,CAAE,IAAAU,EAAIH,CAAW,IAAK,MAC3D,EAEKI,GAAcF,EAAA,IACd,MAAM,QAAQ5B,EAAK,CAAA,EAChBA,EAAK,EAAC,OACHA,EAAK,EAAyB,KAAK,IAAI,EADrBY,EAAW,EAIhCK,EAAO,EAAC,KAAMc,GAAWA,EAAO,QAAU/B,EAAK,CAAA,GAAG,OAASY,EAAW,CAC9E,EAEKoB,SACJ7B,IAAQ,CAAA,CAAMH,EAAK,EAAyB,SAAWA,GAAK,WAGrDiC,EAAmBC,EAAmB,CACvC,MAAAC,EAAOD,EAAM,aAAeA,EAAM,aAAY,EAAA,CAAA,GAC/CC,EAAK,SAASf,CAAQ,GAAA,CAAMe,EAAK,SAAQN,EAACN,CAAS,CAAA,GACtDa,EAAK,CAET,CAES,SAAAC,GAAO,CACdC,EAAAb,EAAS,EAAI,EACbc,EAAU,EACV,SAAS,iBAAiB,QAASN,CAAkB,CACvD,CAES,SAAAG,GAAQ,CACfE,EAAAb,EAAS,EAAK,EACdc,EAAU,EACV,SAAS,oBAAoB,QAASN,CAAkB,CAC1D,CAES,SAAAO,GAAgB,UAChBf,CAAM,EAAGW,EAAK,EAAKC,EAAI,CAChC,CAES,SAAAE,GAAa,CACpBrB,EAAM,MAAGO,CAAM,CAAA,EAEfL,EAAS,cAAa,IAAK,YAAY,cAAa,CAAI,QAAS,GAAM,SAAU,EAAI,CAAA,CAAA,CACvF,CAEAqB,GAAS,IAAO,CACd,SAAS,oBAAoB,QAASR,CAAkB,CAC1D,CAAC,gJA5EQ,IAAG,0bAQI,mBAAkB,6DACjB,cAAa,uEACR,oBAAmB,2DACzB,aAAY,yDACb,QAAO,gHAmEvBS,EAAAC,GAAA,EAYEC,EAAGC,EAZLH,CAAA,EAaII,EAAAD,EADFD,CAAG,KACDE,0BAEgBrB,CAAM,uDAEKN,CAAE,YAC3Bd,EAAQ,qEAGAmC,EACL,GAAA/B,EAAA,MAGE,KAAM,WACN,0BAAyBkB,EAAkB,EAC3C,UAASE,EAAER,CAAO,GAAE,uDAd3B,IAAA0B,GAAAF,EAAAC,EAAA,EAAA,EAAAE,EAAAF,CAAA,IAAAA,EAAAG,GACYzB,QAAAA,CAAe,EAD3B,IAAA0B,EAAAC,EAAAL,EAAA,CAAA,kBAoBEM,EAAIC,GAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,aACFvC,EAAY,CAAA,CAAA,MADduC,CAAI,YADFjD,EAAQ,GAAAmD,EAAAC,EAAA,6BAOV,IAAAC,EAAAC,GAAA,EAAAC,EAAAb,EAAAW,CAAA,EAMEG,GAAmBD,EAAA,EAAA,EANrBV,EAAAQ,CAAA,aAAAA,EAAA,IAAA3B,EAIgBR,CAAO,GAAE,gBAAc,EAJvCuC,EAAAC,EAAAL,CAAA,YADEhD,EAAS,KAAIwB,EAAQ,GAAAsB,EAAAQ,EAAA,IAWzB,IAAAC,EAAAZ,EAAAa,EAAA,CAAA,EAAAC,GAAAF,EAAA,WAAA,EAEa,EAFb,IAAAG,GAAArB,EAAAkB,CAAA,EAOEI,GAAaD,GAAA,EAAA,EAPflB,EAAAe,CAAA,IArCFnB,CAAG,EAgDH,IAAAwB,IAhDAxB,EAAG,CAAA,OAgDHwB,CAAG,WACDC,GAAAC,GAAA,iBAIEnD,uBACKM,CAAM,yBACXtB,EAAQ,uBACRM,EAAM,wBACNC,EAAO,kCACPC,EAAiB,kCACjBG,EAAiB,4BACjBC,EAAW,2BACXC,EAAU,wBACVC,EAAO,iBACKS,CAAW,SAChBW,EACO,QAAA,IAAA,CACbD,EAAK,EACLZ,GAAiB,MAAK,CACxB,MAjBA,SAAY,UAAED,CAAS,OAAvB,QAAY0B,EAAA,GAAE1B,EAAS0B,EAAA,EAAA,OACvB,OAAK,iBAAL,MAAKA,EAAA,yGAFM5B,EAAO4B,EAAA,EAAA,QAAP5B,CAAO,KAFrB+C,CAAG,EA5DLpB,EAAAN,CAAA,IAAAA,EAAAO,GACY7B,QAAAA,CAAQ,YADpBsB,QAGG,cAAe,GACf,sBAAqBjB,CAAM,EAC3B,wBAAyBtB,EAAQ,EACjC,uBAAwBI,EAAO,EAC/B,iBAAkBH,EAAI,IAAK,IAC3B,wBAAyBC,EAAQ,EACjC,wBAAyBC,EAAQ,6BAqB9BwB,EAAc,CAAA,IAmBhByC,GAAA,QAAAR,EAKUvB,CAAa,EAtD3BoB,EAAAC,EAAAnB,CAAA,QAFO"}

package/dist/components/combobox/Combobox.spec.js

@@ -0,0 +1,186 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, fireEvent, screen, cleanup } from '@testing-library/svelte';
+import Combobox from './Combobox.svelte';
+const mockOptions = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+];
+const getControl = () => screen.getByRole('combobox', { name: /combobox input/i });
+const getControlAsButton = () => screen.getByRole('button', { name: /combobox input/i });
+describe('Combobox', () => {
+    afterEach(() => {
+        cleanup();
+        vi.restoreAllMocks();
+    });
+    describe('Rendering', () => {
+        it('renders the combobox control element', () => {
+            render(Combobox, { props: { value: null, options: mockOptions } });
+            expect(getControl()).toBeTruthy();
+        });
+        it('shows placeholder when no value', () => {
+            render(Combobox, {
+                props: { value: null, options: mockOptions, placeholder: 'Pick something' },
+            });
+            expect(screen.getByText('Pick something')).toBeTruthy();
+        });
+        it('shows counterlabel in multiple mode (non-compact)', () => {
+            render(Combobox, {
+                props: {
+                    value: ['apple', 'banana'],
+                    options: mockOptions,
+                    multiple: true,
+                    counterlabel: '2 selected',
+                },
+            });
+            expect(screen.getByText('2 selected')).toBeTruthy();
+        });
+        it('shows joined values as label in multiple+compact mode', () => {
+            render(Combobox, {
+                props: {
+                    value: ['apple', 'banana'],
+                    options: mockOptions,
+                    multiple: true,
+                    compact: true,
+                },
+            });
+            expect(screen.getByText('apple, banana')).toBeTruthy();
+        });
+        it('does not render removable tags in compact mode', () => {
+            render(Combobox, {
+                props: { value: ['apple'], options: mockOptions, multiple: true, compact: true },
+            });
+            expect(screen.queryByLabelText(/remove/i)).toBeNull();
+        });
+        it('renders as a native button (no role override) when search prop is true', () => {
+            render(Combobox, { props: { value: null, options: mockOptions, search: true } });
+            expect(getControlAsButton()).toBeTruthy();
+        });
+    });
+    describe('CSS modifier classes', () => {
+        it('applies mc-combobox--multiple when multiple', () => {
+            const { container } = render(Combobox, {
+                props: { value: [], options: mockOptions, multiple: true },
+            });
+            expect(container.querySelector('.mc-combobox--multiple')).toBeTruthy();
+        });
+        it('applies mc-combobox--invalid when invalid', () => {
+            const { container } = render(Combobox, {
+                props: { value: null, options: mockOptions, invalid: true },
+            });
+            expect(container.querySelector('.mc-combobox--invalid')).toBeTruthy();
+        });
+        it('applies mc-combobox--disabled when disabled', () => {
+            const { container } = render(Combobox, {
+                props: { value: null, options: mockOptions, disabled: true },
+            });
+            expect(container.querySelector('.mc-combobox--disabled')).toBeTruthy();
+        });
+        it('applies mc-combobox--readonly when readonly', () => {
+            const { container } = render(Combobox, {
+                props: { value: null, options: mockOptions, readonly: true },
+            });
+            expect(container.querySelector('.mc-combobox--readonly')).toBeTruthy();
+        });
+        it('applies mc-combobox--s for size s', () => {
+            const { container } = render(Combobox, {
+                props: { value: null, options: mockOptions, size: 's' },
+            });
+            expect(container.querySelector('.mc-combobox--s')).toBeTruthy();
+        });
+        it('does NOT apply mc-combobox--s for size m', () => {
+            const { container } = render(Combobox, {
+                props: { value: null, options: mockOptions, size: 'm' },
+            });
+            expect(container.querySelector('.mc-combobox--s')).toBeNull();
+        });
+    });
+    describe('Open / Close behaviour', () => {
+        it('opens the listbox when the control is clicked', async () => {
+            const { container } = render(Combobox, { props: { value: null, options: mockOptions } });
+            await fireEvent.click(getControl());
+            expect(container.querySelector('.mc-combobox--open')).toBeTruthy();
+        });
+        it('closes the listbox on second click (toggle)', async () => {
+            const { container } = render(Combobox, { props: { value: null, options: mockOptions } });
+            const control = getControl();
+            await fireEvent.click(control);
+            await fireEvent.click(control);
+            expect(container.querySelector('.mc-combobox--open')).toBeNull();
+        });
+        it('opens the listbox when the chevron icon button is clicked', async () => {
+            const { container } = render(Combobox, { props: { value: null, options: mockOptions } });
+            await fireEvent.click(screen.getByRole('button', { name: /expand options list/i }));
+            expect(container.querySelector('.mc-combobox--open')).toBeTruthy();
+        });
+        it('closes the listbox on outside click', async () => {
+            const { container } = render(Combobox, { props: { value: null, options: mockOptions } });
+            await fireEvent.click(getControl());
+            expect(container.querySelector('.mc-combobox--open')).toBeTruthy();
+            await fireEvent.click(document.body);
+            expect(container.querySelector('.mc-combobox--open')).toBeNull();
+        });
+        it('sets aria-expanded=true when open', async () => {
+            render(Combobox, { props: { value: null, options: mockOptions } });
+            const control = getControl();
+            await fireEvent.click(control);
+            expect(control.getAttribute('aria-expanded')).toBe('true');
+        });
+        it('sets aria-expanded=false when closed', () => {
+            render(Combobox, { props: { value: null, options: mockOptions } });
+            expect(getControl().getAttribute('aria-expanded')).toBe('false');
+        });
+    });
+    describe('Clear button', () => {
+        it('shows clear button when clearable and a single value is selected', () => {
+            render(Combobox, {
+                props: { value: 'apple', options: mockOptions, clearable: true },
+            });
+            expect(screen.getByRole('button', { name: /clear value/i })).toBeTruthy();
+        });
+        it('does not show clear button when no value is selected', () => {
+            render(Combobox, {
+                props: { value: null, options: mockOptions, clearable: true },
+            });
+            expect(screen.queryByRole('button', { name: /clear value/i })).toBeNull();
+        });
+        it('does not show clear button when clearable is false', () => {
+            render(Combobox, {
+                props: { value: 'apple', options: mockOptions, clearable: false },
+            });
+            expect(screen.queryByRole('button', { name: /clear value/i })).toBeNull();
+        });
+        it('resets single value to null when clear button is clicked', async () => {
+            render(Combobox, {
+                props: { value: 'apple', options: mockOptions, clearable: true },
+            });
+            await fireEvent.click(screen.getByRole('button', { name: /clear value/i }));
+            expect(screen.getByText('Select an option')).toBeTruthy();
+        });
+        it('resets multiple value to [] when clear button is clicked', async () => {
+            render(Combobox, {
+                props: {
+                    value: ['apple', 'banana'],
+                    options: mockOptions,
+                    clearable: true,
+                    multiple: true,
+                },
+            });
+            await fireEvent.click(screen.getByRole('button', { name: /clear value/i }));
+            expect(screen.getByText('Select an option')).toBeTruthy();
+        });
+        it('shows clear button in multiple mode when at least one item is selected', () => {
+            render(Combobox, {
+                props: { value: ['apple'], options: mockOptions, clearable: true, multiple: true },
+            });
+            expect(screen.getByRole('button', { name: /clear value/i })).toBeTruthy();
+        });
+        it('hides clear button in multiple mode when value is empty', () => {
+            render(Combobox, {
+                props: { value: [], options: mockOptions, clearable: true, multiple: true },
+            });
+            expect(screen.queryByRole('button', { name: /clear value/i })).toBeNull();
+        });
+    });
+});