@mozaic-ds/web-components 1.5.1 → 1.7.0

package/dist/components/container/Container.js

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

package/dist/components/datepicker/Datepicker.js

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

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

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

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

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

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

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

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

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

package/dist/components/datepicker/Datepicker.svelte

@@ -117,10 +117,10 @@
   display: block;
   width: 100%;
   height: 3rem;
-  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  box-sizing: border-box;
 }
 .mc-text-input__control {
   background-color: transparent;
@@ -147,11 +147,17 @@
   font-size: var(--font-size-150, 1rem);
   line-height: var(--line-height-s, 1.3);
   font-weight: var(--font-weight-regular, 400);
+  color: var(--forms-color-text-default, #000000);
   flex-grow: 1;
 }
 .mc-text-input__control::placeholder {
   color: var(--forms-color-placeholder, #666666);
 }
+.mc-text-input__addon {
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  color: var(--forms-color-text-default, #000000);
+}
 .mc-text-input__icon {
   fill: var(--forms-color-icon-default, #666666);
   height: 1.5rem;
@@ -179,16 +185,16 @@
   border-color: var(--forms-color-border-read-only, #cccccc);
   pointer-events: none;
 }
-.mc-text-input:has(.mc-text-input__icon) {
+.mc-text-input:has(.mc-text-input__icon), .mc-text-input:has(.mc-text-input__addon) {
   padding-inline-start: 0.6875rem;
 }
-.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control {
+.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control, .mc-text-input:has(.mc-text-input__addon) .mc-text-input__control {
   padding-inline-start: 0;
 }
-.mc-text-input:has(.mc-controls-options) {
+.mc-text-input:has(.mc-controls-options), .mc-text-input:has(.mc-text-input__addon) {
   padding-inline-end: 0.6875rem;
 }
-.mc-text-input:has(.mc-controls-options) .mc-text-input__control {
+.mc-text-input:has(.mc-controls-options) .mc-text-input__control, .mc-text-input:has(.mc-text-input__addon) .mc-text-input__control {
   padding-inline-end: 0;
 }
 .mc-text-input--s {
@@ -223,7 +229,6 @@
   position: relative;
 }
 .mc-datepicker__control {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");
   font-family: var(--font-family, LeroyMerlin), sans-serif;
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
@@ -240,6 +245,19 @@
   opacity: 0;
   transform: scale(2);
 }
+.mc-datepicker__control::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+  background-color: var(--forms-color-icon-interactive, #000000);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E") no-repeat center/contain;
+}
 .mc-datepicker__control.is-invalid {
   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);
@@ -249,13 +267,17 @@
   box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
 }
 .mc-datepicker__control:disabled {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E") no-repeat center/contain;
   background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
   border-color: transparent;
   box-shadow: none;
   color: var(--forms-color-text-disabled, #737373);
 }
+.mc-datepicker__control:disabled::after {
+  background-color: var(--forms-color-icon-disabled, #737373);
+}
 .mc-datepicker__control:disabled:hover:not(:focus-within) {
   background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
@@ -283,10 +305,12 @@
   color: var(--forms-color-text-disabled, #737373);
 }
 .mc-datepicker--s .mc-datepicker__control {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E") no-repeat center/contain;
 }
 .mc-datepicker--s .mc-datepicker__control:disabled {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E") no-repeat center/contain;
 }
 .mc-datepicker__controls-options {
   position: absolute;
@@ -321,6 +345,7 @@
 }
 .mc-controls-options__icon {
   fill: var(--forms-color-icon-clear, #666666);
+  color: var(--forms-color-icon-clear, #666666);
 }
 .mc-controls-options__button, .mc-controls-options__icon {
   height: 1.5rem;

package/dist/components/divider/Divider.js

@@ -1,4 +1,4 @@
-import{c as f,p as h,a as p,b as o,s as u,t as g,f as y,g as z,h as b,i as k,d as _,j as d,r as x,l as D,m as $}from"../../custom-element.js";import{s as w}from"../../slot.js";import{a as j}from"../../attributes.js";var E=b("<div><div></div> <!></div>");const S={hash:"svelte-a5fs23",code:`/**
+import{c as f,e as h,a as p,p as o,s as u,t as g,b as y,d as z,f as b,n as k,h as _,m as d,r as x,j as D,l as $}from"../../custom-element.js";import{s as w}from"../../slot.js";import{a as j}from"../../attributes.js";var E=b("<div><div></div> <!></div>");const S={hash:"svelte-a5fs23",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-divider.svelte-a5fs23 {position:relative;}.mc-divider-horizontal.svelte-a5fs23 {background:var(--divider-color-primary, #cccccc);height:0.0625rem;}.mc-divider-horizontal--secondary.svelte-a5fs23 {background:var(--divider-color-secondary, #999999);}.mc-divider-horizontal--tertiary.svelte-a5fs23 {background:var(--divider-color-tertiary, #333333);}.mc-divider-horizontal--inverse.svelte-a5fs23 {background:var(--divider-color-inverse, #ffffff);}.mc-divider-horizontal--m.svelte-a5fs23 {height:0.25rem;}.mc-divider-horizontal--l.svelte-a5fs23 {height:0.5rem;}.mc-divider-vertical.svelte-a5fs23 {background:var(--divider-color-primary, #cccccc);width:0.0625rem;}.mc-divider-vertical--secondary.svelte-a5fs23 {background:var(--divider-color-secondary, #999999);}.mc-divider-vertical--tertiary.svelte-a5fs23 {background:var(--divider-color-tertiary, #333333);}.mc-divider-vertical--inverse.svelte-a5fs23 {background:var(--divider-color-inverse, #ffffff);}.mc-divider-vertical--m.svelte-a5fs23 {height:0.25rem;}.mc-divider-vertical--l.svelte-a5fs23 {height:0.5rem;}.mc-divider-vertical.svelte-a5fs23 {content:"";display:block;height:100%;position:absolute;top:50%;transform:translateY(-50%);}`};function Y(c,e){h(e,!0),p(c,S);let a=o(e,"orientation",7,"horizontal"),t=o(e,"appearance",7,"primary"),s=o(e,"size",7,"s"),l=k(e,["$$slots","$$events","$$legacy","$$host","orientation","appearance","size"]);var n={get orientation(){return a()},set orientation(r="horizontal"){a(r),d()},get appearance(){return t()},set appearance(r="primary"){t(r),d()},get size(){return s()},set size(r="s"){s(r),d()}},i=E();j(i,()=>({class:"mc-divider",...l}),void 0,void 0,void 0,"svelte-a5fs23");var v=_(i),m=u(v,2);return w(m,e,"default",{},null),x(i),g(()=>D(v,1,$([`mc-divider-${a()}`,`mc-divider-horizontal--${t()}`,`mc-divider-horizontal--${s()}`]),"svelte-a5fs23")),y(c,i),z(n)}customElements.define("m-divider",f(Y,{orientation:{},appearance:{},size:{}},["default"],[],!0));export{Y as D};
+ */.mc-divider.svelte-a5fs23 {position:relative;}.mc-divider-horizontal.svelte-a5fs23 {background:var(--divider-color-primary, #cccccc);height:0.0625rem;}.mc-divider-horizontal--secondary.svelte-a5fs23 {background:var(--divider-color-secondary, #999999);}.mc-divider-horizontal--tertiary.svelte-a5fs23 {background:var(--divider-color-tertiary, #333333);}.mc-divider-horizontal--inverse.svelte-a5fs23 {background:var(--divider-color-inverse, #ffffff);}.mc-divider-horizontal--m.svelte-a5fs23 {height:0.25rem;}.mc-divider-horizontal--l.svelte-a5fs23 {height:0.5rem;}.mc-divider-vertical.svelte-a5fs23 {background:var(--divider-color-primary, #cccccc);width:0.0625rem;}.mc-divider-vertical--secondary.svelte-a5fs23 {background:var(--divider-color-secondary, #999999);}.mc-divider-vertical--tertiary.svelte-a5fs23 {background:var(--divider-color-tertiary, #333333);}.mc-divider-vertical--inverse.svelte-a5fs23 {background:var(--divider-color-inverse, #ffffff);}.mc-divider-vertical--m.svelte-a5fs23 {height:0.25rem;}.mc-divider-vertical--l.svelte-a5fs23 {height:0.5rem;}.mc-divider-vertical.svelte-a5fs23 {content:"";display:block;height:100%;position:absolute;top:50%;transform:translateY(-50%);}`};function Y(c,e){h(e,!0),p(c,S);let a=o(e,"orientation",7,"horizontal"),t=o(e,"appearance",7,"primary"),s=o(e,"size",7,"s"),n=k(e,["$$slots","$$events","$$legacy","$$host","orientation","appearance","size"]);var l={get orientation(){return a()},set orientation(r="horizontal"){a(r),d()},get appearance(){return t()},set appearance(r="primary"){t(r),d()},get size(){return s()},set size(r="s"){s(r),d()}},i=E();j(i,()=>({class:"mc-divider",...n}),void 0,void 0,void 0,"svelte-a5fs23");var v=_(i),m=u(v,2);return w(m,e,"default",{},null),x(i),g(()=>D(v,1,$([`mc-divider-${a()}`,`mc-divider-horizontal--${t()}`,`mc-divider-horizontal--${s()}`]),"svelte-a5fs23")),y(c,i),z(l)}customElements.define("m-divider",f(Y,{orientation:{},appearance:{},size:{}},["default"],[],{mode:"open"}));export{Y as D};
 //# sourceMappingURL=Divider.js.map

package/dist/components/divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../../src/components/divider/Divider.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-divider' }} />\n\n<script lang=\"ts\">\n  /**\n   * A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.\n   *\n   * @slot default - Use this slot to insert the content who need a vertical divider\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Determines the orientation of the divider.\n     */\n    orientation?: 'vertical' | 'horizontal';\n    /**\n     * Determines the appearance of the divider.\n     */\n    appearance?: 'primary' | 'secondary' | 'tertiary' | 'inverse';\n    /**\n     * Determines the size of the divider.\n     */\n    size?: 's' | 'm' | 'l';\n  }\n\n  let { orientation = 'horizontal', appearance = 'primary', size = 's', ...attrs }: Props = $props();\n</script>\n\n<div class=\"mc-divider\" {...attrs}>\n  <div\n    class={[\n      `mc-divider-${orientation}`,\n      `mc-divider-horizontal--${appearance}`,\n      `mc-divider-horizontal--${size}`,\n    ]}\n  ></div>\n  <slot />\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/divider';\n\n  .mc-divider-vertical {\n    content: '';\n    display: block;\n    height: 100%;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n</style>\n"],"names":["orientation","appearance","size","attrs","$.rest_props","$$props","div","root","$.attribute_effect","div_1","$.child","node","$.sibling"],"mappings":";;2rCAEA,gBAsBQ,IAAAA,sBAAc,YAAY,EAAEC,qBAAa,SAAS,EAAEC,eAAO,GAAG,EAAKC,EAAKC,EAAAC,EAAA,qIAA1D,aAAY,yDAAe,UAAS,6CAAS,IAAG,YAGrEC,EAAGC,EAAA,EAAHC,EAAAF,8BAA2BH,CAAK,GAAA,OAAA,OAAA,OAAA,eAAA,EAC9B,IAAAM,EAAAC,EADFJ,CAAG,EACDK,EAAAC,EAAAH,EAAA,CAAA,oCADFH,CAAG,UACDG,qBAEiBT,EAAW,CAAA,6BACCC,EAAU,CAAA,6BACVC,GAAI,2BALnCI,CAAG,MAFI"}
+{"version":3,"file":"Divider.js","sources":["../../../src/components/divider/Divider.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-divider' }} />\n\n<script lang=\"ts\">\n  /**\n   * A divider is a visual element used to separate content or sections within an interface. It helps improve readability and organization by creating clear distinctions between groups of information. Dividers can be thin lines, thick separators, or even styled with spacing variations, adapting to different layouts. They are commonly used in menus, lists, forms, and content blocks to create a structured visual hierarchy.\n   *\n   * @slot default - Use this slot to insert the content who need a vertical divider\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Determines the orientation of the divider.\n     */\n    orientation?: 'vertical' | 'horizontal';\n    /**\n     * Determines the appearance of the divider.\n     */\n    appearance?: 'primary' | 'secondary' | 'tertiary' | 'inverse';\n    /**\n     * Determines the size of the divider.\n     */\n    size?: 's' | 'm' | 'l';\n  }\n\n  let {\n    orientation = 'horizontal',\n    appearance = 'primary',\n    size = 's',\n    ...attrs\n  }: Props = $props();\n</script>\n\n<div class=\"mc-divider\" {...attrs}>\n  <div\n    class={[\n      `mc-divider-${orientation}`,\n      `mc-divider-horizontal--${appearance}`,\n      `mc-divider-horizontal--${size}`,\n    ]}\n  ></div>\n  <slot />\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/divider';\n\n  .mc-divider-vertical {\n    content: '';\n    display: block;\n    height: 100%;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n</style>\n"],"names":["orientation","appearance","size","attrs","$.rest_props","$$props","div","root","$.attribute_effect","div_1","$.child","node","$.sibling"],"mappings":";;2rCAEA,gBAuBI,IAAAA,sBAAc,YAAY,EAC1BC,qBAAa,SAAS,EACtBC,eAAO,GAAG,EACPC,EAAAC,EAAAC,EAAA,qIAHW,aAAY,yDACb,UAAS,6CACf,IAAG,YAKbC,EAAGC,EAAA,EAAHC,EAAAF,8BAA2BH,CAAK,GAAA,OAAA,OAAA,OAAA,eAAA,EAC9B,IAAAM,EAAAC,EADFJ,CAAG,EACDK,EAAAC,EAAAH,EAAA,CAAA,oCADFH,CAAG,UACDG,qBAEiBT,EAAW,CAAA,6BACCC,EAAU,CAAA,6BACVC,GAAI,2BALnCI,CAAG,MAFI"}

package/dist/components/divider/Divider.svelte

@@ -22,7 +22,12 @@
     size?: 's' | 'm' | 'l';
   }
 
-  let { orientation = 'horizontal', appearance = 'primary', size = 's', ...attrs }: Props = $props();
+  let {
+    orientation = 'horizontal',
+    appearance = 'primary',
+    size = 's',
+    ...attrs
+  }: Props = $props();
 </script>
 
 <div class="mc-divider" {...attrs}>

package/dist/components/divider/Divider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/divider/Divider.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAsBH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,OAAO;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Divider.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/divider/Divider.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AA2BH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,OAAO;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/components/drawer/Drawer.js

@@ -1,14 +1,14 @@
-import{o as W,c as X,p as Y,a as Z,b as a,A as $,aC as oo,s as l,t as D,f as B,g as to,h as T,i as eo,d as r,j as c,r as n,e as I}from"../../custom-element.js";import{i as S}from"../../if.js";import{s as q}from"../../slot.js";import{a as ro}from"../../attributes.js";import{b as F}from"../../this.js";import{n as no,r as ao}from"../../Condition20.js";import{O as co}from"../overlay/Overlay.js";import"../../branches.js";var lo=T('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Back"><!></button>'),so=T('<h2 class="mc-drawer__content__title svelte-1d2fooj"> </h2>'),bo=T('<div><div class="mc-drawer__dialog svelte-1d2fooj" role="document"><div class="mc-drawer__header svelte-1d2fooj"><!> <h2 class="mc-drawer__title svelte-1d2fooj" id="drawerTitle" tabIndex="-1"> </h2> <button class="mc-drawer__close mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Close"><!></button></div> <div class="mc-drawer__body svelte-1d2fooj"><div class="mc-drawer__content svelte-1d2fooj"><!> <!></div></div> <div class="mc-drawer__footer svelte-1d2fooj"><!></div></div> <!></div>');const uo={hash:"svelte-1d2fooj",code:`/**
+import{o as X,c as Y,e as Z,a as $,p as a,B as oo,aL as to,s as l,t as D,u as q,b as B,d as eo,f as z,n as ro,h as r,m as c,r as d,k as L}from"../../custom-element.js";import{i as S}from"../../if.js";import{s as F}from"../../slot.js";import{a as no}from"../../attributes.js";import{b as G}from"../../this.js";import{q as ao,A as co}from"../../Condition20.js";import{O as lo}from"../overlay/Overlay.js";import"../../branches.js";var so=z('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Back"><!></button>'),bo=z('<h2 class="mc-drawer__content__title svelte-1d2fooj"> </h2>'),uo=z('<div><div class="mc-drawer__dialog svelte-1d2fooj" role="document"><div class="mc-drawer__header svelte-1d2fooj"><!> <h2 class="mc-drawer__title svelte-1d2fooj" id="drawerTitle" tabindex="-1"> </h2> <button class="mc-drawer__close mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Close"><!></button></div> <div class="mc-drawer__body svelte-1d2fooj"><div class="mc-drawer__content svelte-1d2fooj"><!> <!></div></div> <div class="mc-drawer__footer svelte-1d2fooj"><!></div></div> <!></div>');const io={hash:"svelte-1d2fooj",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-drawer.svelte-1d2fooj {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:0.5rem;justify-content:flex-end;}
+ */.mc-drawer.svelte-1d2fooj {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:0.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5);}
 @media (width >= 680px) {.mc-drawer.svelte-1d2fooj {padding:1rem;}
 }.mc-drawer--left.svelte-1d2fooj {justify-content:flex-start;}.mc-drawer--left.svelte-1d2fooj .mc-drawer__dialog:where(.svelte-1d2fooj) {transform:translate3d(-100%, 0, 0);}
 @media (width >= 680px) {.mc-drawer--extend.svelte-1d2fooj .mc-drawer__dialog:where(.svelte-1d2fooj) {max-width:39rem;}
-}.mc-drawer__dialog.svelte-1d2fooj {background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%, 0, 0);transition:visibility 0s linear 0.4s, transform 0.4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 3);border-radius:var(--border-radius-l, 1rem);}
+}.mc-drawer__dialog.svelte-1d2fooj {background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%, 0, 0);transition:visibility 0s linear 0.4s, transform 0.4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem);}
 @media (width >= 680px) {.mc-drawer__dialog.svelte-1d2fooj {max-width:25rem;}
 }.mc-drawer__header.svelte-1d2fooj {display:flex;align-items:center;justify-content:center;height:4rem;}.mc-drawer__icon.svelte-1d2fooj {height:1.5rem;margin-right:0.75rem;width:1.5rem;}.mc-drawer__title.svelte-1d2fooj {font-size:var(--font-body-s, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1;}.mc-drawer__title.svelte-1d2fooj:first-child {padding-left:4rem;}.mc-drawer__back.svelte-1d2fooj, .mc-drawer__close.svelte-1d2fooj {margin:0.5rem;}.mc-drawer__body.svelte-1d2fooj {flex:1 1;overflow:hidden;}.mc-drawer__body.svelte-1d2fooj:last-child {margin-bottom:1.5rem;padding-bottom:1.5rem;}.mc-drawer__content.svelte-1d2fooj {max-height:100%;overflow:hidden auto;padding:0.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000);}
 @media (width >= 680px) {.mc-drawer__content.svelte-1d2fooj {padding:1.5rem;}
 }.mc-drawer__content__title.svelte-1d2fooj {font-size:var(--font-title-m, 1.5rem);margin:0 0 0.5rem;}.mc-drawer__footer.svelte-1d2fooj {display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, 0.0625rem) solid var(--divider-color-primary, #cccccc);}
 @media (width >= 680px) {.mc-drawer__footer.svelte-1d2fooj {justify-content:center;flex-direction:row;}
-}.mc-drawer-open.svelte-1d2fooj {overflow:hidden;}.mc-drawer.is-open.svelte-1d2fooj .mc-drawer__dialog:where(.svelte-1d2fooj) {pointer-events:all;transform:translate3d(0, 0, 0);transition:visibility 0s linear 0s, transform 0.4s;visibility:visible;}.mc-button.svelte-1d2fooj {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1d2fooj:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1d2fooj:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1d2fooj {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1d2fooj {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-1d2fooj {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1d2fooj {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1d2fooj: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-button--s.svelte-1d2fooj {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-1d2fooj {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1d2fooj {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-1d2fooj {padding:0.25rem;}.mc-button--outlined.svelte-1d2fooj {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-1d2fooj {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-1d2fooj {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-1d2fooj {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-1d2fooj {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-1d2fooj:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-1d2fooj {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-1d2fooj {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-1d2fooj {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-1d2fooj {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-1d2fooj {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-1d2fooj {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-1d2fooj {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-1d2fooj {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function io(z,t){Y(t,!0),Z(z,uo);let e=a(t,"open",7),v=a(t,"position",7),f=a(t,"extended",7),m=a(t,"back",7),g=a(t,"title",7),b=a(t,"contentTitle",7),h=a(t,"onUpdateOpen",7),k=a(t,"onBack",7),G=eo(t,["$$slots","$$events","$$legacy","$$host","open","position","extended","back","title","contentTitle","onUpdateOpen","onBack"]),u,j;$(()=>{e()&&(async()=>(await oo(),j?.focus()))()});const O=()=>{e(!1),h()?.(e());const o=new CustomEvent("update:open",{detail:e(),bubbles:!0,composed:!0});u.dispatchEvent(o)},H=()=>{k()?.();const o=new CustomEvent("back",{bubbles:!0,composed:!0});u.dispatchEvent(o)};var J={get open(){return e()},set open(o){e(o),c()},get position(){return v()},set position(o){v(o),c()},get extended(){return f()},set extended(o){f(o),c()},get back(){return m()},set back(o){m(o),c()},get title(){return g()},set title(o){g(o),c()},get contentTitle(){return b()},set contentTitle(o){b(o),c()},get onUpdateOpen(){return h()},set onUpdateOpen(o){h(o),c()},get onBack(){return k()},set onBack(o){k(o),c()}},s=bo(),K=o=>o.key==="Escape"&&O();ro(s,()=>({class:["mc-drawer",`mc-drawer--${v()}`,e()&&"is-open",f()&&"mc-drawer--extend"],role:"dialog","aria-labelledby":"drawerTitle","aria-modal":e()?"true":"false","aria-hidden":!e(),onkeydown:K,...G}),void 0,void 0,void 0,"svelte-1d2fooj");var w=r(s),_=r(w),C=r(_);{var L=o=>{var d=lo();d.__click=H;var y=r(d);ao(y,{}),n(d),B(o,d)};S(C,o=>{m()&&o(L)})}var i=l(C,2),M=r(i,!0);n(i),F(i,o=>j=o,()=>j);var p=l(i,2);p.__click=O;var N=r(p);no(N,{}),n(p),n(_);var x=l(_,2),E=r(x),U=r(E);{var P=o=>{var d=so(),y=r(d,!0);n(d),D(()=>I(y,b())),B(o,d)};S(U,o=>{b()&&o(P)})}var Q=l(U,2);q(Q,t,"default",{},null),n(E),n(x);var A=l(x,2),R=r(A);q(R,t,"footer",{},null),n(A),n(w);var V=l(w,2);return co(V,{get isvisible(){return e()},dialoglabel:"drawerTitle"}),n(s),F(s,o=>u=o,()=>u),D(()=>I(M,g())),B(z,s),to(J)}W(["click"]);customElements.define("m-drawer",X(io,{open:{attribute:"open",reflect:!0,type:"Boolean"},extended:{attribute:"extended",reflect:!0,type:"Boolean"},back:{attribute:"back",reflect:!0,type:"Boolean"},position:{},title:{},contentTitle:{},onUpdateOpen:{},onBack:{}},["default","footer"],[],!0));
+}.mc-drawer-open.svelte-1d2fooj {overflow:hidden;}.mc-drawer.is-open.svelte-1d2fooj .mc-drawer__dialog:where(.svelte-1d2fooj) {pointer-events:all;transform:translate3d(0, 0, 0);transition:visibility 0s linear 0s, transform 0.4s;visibility:visible;}.mc-button.svelte-1d2fooj {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1d2fooj:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1d2fooj:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1d2fooj {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, 0.25rem);}.mc-button.svelte-1d2fooj {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-1d2fooj {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1d2fooj {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1d2fooj: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-button--s.svelte-1d2fooj {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, 0.25rem);}.mc-button--m.svelte-1d2fooj {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, 0.25rem);}.mc-button--l.svelte-1d2fooj {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, 0.25rem);}.mc-button--icon-only.svelte-1d2fooj {padding:0.25rem;}.mc-button--outlined.svelte-1d2fooj {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-1d2fooj {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-1d2fooj {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-1d2fooj {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-1d2fooj {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-1d2fooj:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-1d2fooj {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-1d2fooj {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-1d2fooj {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-1d2fooj {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-1d2fooj {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-1d2fooj {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-1d2fooj {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-1d2fooj {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1d2fooj:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function vo(T,t){Z(t,!0),$(T,io);let e=a(t,"open",7),v=a(t,"position",7),f=a(t,"extended",7),m=a(t,"back",7),g=a(t,"title",7),b=a(t,"contentTitle",7),h=a(t,"onUpdateOpen",7),k=a(t,"onBack",7),H=ro(t,["$$slots","$$events","$$legacy","$$host","open","position","extended","back","title","contentTitle","onUpdateOpen","onBack"]),u,j;oo(()=>{e()&&(async()=>(await to(),j?.focus()))()});const O=()=>{e(!1),h()?.(e());const o=new CustomEvent("update:open",{detail:e(),bubbles:!0,composed:!0});u.dispatchEvent(o)},I=()=>{k()?.();const o=new CustomEvent("back",{bubbles:!0,composed:!0});u.dispatchEvent(o)};var J={get open(){return e()},set open(o){e(o),c()},get position(){return v()},set position(o){v(o),c()},get extended(){return f()},set extended(o){f(o),c()},get back(){return m()},set back(o){m(o),c()},get title(){return g()},set title(o){g(o),c()},get contentTitle(){return b()},set contentTitle(o){b(o),c()},get onUpdateOpen(){return h()},set onUpdateOpen(o){h(o),c()},get onBack(){return k()},set onBack(o){k(o),c()}},s=uo(),K=o=>o.key==="Escape"&&O();no(s,()=>({class:["mc-drawer",`mc-drawer--${v()}`,e()&&"is-open",f()&&"mc-drawer--extend"],role:"dialog","aria-labelledby":"drawerTitle","aria-modal":e()?"true":"false","aria-hidden":!e(),onkeydown:K,...H}),void 0,void 0,void 0,"svelte-1d2fooj");var w=r(s),p=r(w),E=r(p);{var M=o=>{var n=so(),y=r(n);co(y,{}),d(n),q("click",n,I),B(o,n)};S(E,o=>{m()&&o(M)})}var i=l(E,2),N=r(i,!0);d(i),G(i,o=>j=o,()=>j);var _=l(i,2),P=r(_);ao(P,{}),d(_),d(p);var x=l(p,2),C=r(x),U=r(C);{var Q=o=>{var n=bo(),y=r(n,!0);d(n),D(()=>L(y,b())),B(o,n)};S(U,o=>{b()&&o(Q)})}var R=l(U,2);F(R,t,"default",{},null),d(C),d(x);var A=l(x,2),V=r(A);F(V,t,"footer",{},null),d(A),d(w);var W=l(w,2);return lo(W,{get isvisible(){return e()},dialoglabel:"drawerTitle"}),d(s),G(s,o=>u=o,()=>u),D(()=>L(N,g())),q("click",_,O),B(T,s),eo(J)}X(["click"]);customElements.define("m-drawer",Y(vo,{open:{attribute:"open",reflect:!0,type:"Boolean"},extended:{attribute:"extended",reflect:!0,type:"Boolean"},back:{attribute:"back",reflect:!0,type:"Boolean"},position:{},title:{},contentTitle:{},onUpdateOpen:{},onBack:{}},["default","footer"],[],{mode:"open"}));
 //# sourceMappingURL=Drawer.js.map

package/dist/components/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/components/drawer/Drawer.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-drawer',\n    props: {\n      open: { reflect: true, type: 'Boolean', attribute: 'open' },\n      extended: { reflect: true, type: 'Boolean', attribute: 'extended' },\n      back: { reflect: true, type: 'Boolean', attribute: 'back' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { ArrowBack24, Cross24 } from '@mozaic-ds/icons-svelte';\n  import { tick } from 'svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.\n   *\n   * @slot default - Use this slot to insert the content of the drawer\n   * @slot footer - Use this slot to insert buttons in the footer\n   * @event update:open {CustomEvent<boolean>} - Emits when the drawer open state changes.\n   * @event back {CustomEvent<void>} - Emits when click back button of the drawer.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * If `true`, display the drawer.\n     */\n    open?: boolean;\n    /**\n     * Position of the drawer.\n     */\n    position?: 'left' | 'right';\n    /**\n     * If `true`, the drawer have a bigger width.\n     */\n    extended?: boolean;\n    /**\n     * If `true`, display the back button.\n     */\n    back?: boolean;\n    /**\n     * Title of the drawer.\n     */\n    title: string;\n    /**\n     * Title of the content of the drawer.\n     */\n    contentTitle?: string;\n    /**\n     * Callback fired when the drawer open state changes.\n     */\n    onUpdateOpen?: (open: boolean) => void;\n    /**\n     * Callback fired when the back button is clicked.\n     */\n    onBack?: () => void;\n  }\n\n  let {\n    open,\n    position,\n    extended,\n    back,\n    title,\n    contentTitle,\n    onUpdateOpen,\n    onBack,\n    ...attrs\n  }: Props = $props();\n  let element: HTMLElement;\n  let titleEl: HTMLHeadingElement | undefined = undefined;\n\n  $effect(() => {\n    if (!open) return;\n\n    (async () => {\n      await tick();\n      titleEl?.focus();\n    })();\n  });\n\n  const onClose = () => {\n    open = false;\n\n    onUpdateOpen?.(open);\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  const onClickBack = () => {\n    onBack?.();\n\n    const event = new CustomEvent('back', {\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n<div\n  class={[\n    'mc-drawer',\n    `mc-drawer--${position}`,\n    open && 'is-open',\n    extended && 'mc-drawer--extend',\n  ]}\n  role=\"dialog\"\n  aria-labelledby=\"drawerTitle\"\n  aria-modal={open ? 'true' : 'false'}\n  aria-hidden={!open}\n  onkeydown={(e) => e.key === 'Escape' && onClose()}\n  bind:this={element}\n  {...attrs}\n>\n  <div class=\"mc-drawer__dialog\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      {#if back}\n        <button\n          class=\"mc-drawer__back mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Back\"\n          onclick={onClickBack}\n        >\n          <ArrowBack24 />\n        </button>\n      {/if}\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\" tabIndex=\"-1\" bind:this={titleEl}>{title}</h2>\n      <button\n        class=\"mc-drawer__close mc-button mc-button--icon-button mc-button--ghost\"\n        aria-label=\"Close\"\n        onclick={onClose}\n      >\n        <Cross24 />\n      </button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\">\n        {#if contentTitle}\n          <h2 class=\"mc-drawer__content__title\">{contentTitle}</h2>\n        {/if}\n        <slot />\n      </div>\n    </div>\n\n    <div class=\"mc-drawer__footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n  <MOverlay isvisible={open} dialoglabel=\"drawerTitle\" />\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/drawer';\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["open","$.prop","$$props","position","extended","back","title","contentTitle","onUpdateOpen","onBack","attrs","$.rest_props","element","titleEl","$.user_effect","tick","onClose","event","onClickBack","div","root","event_handler","e","div_1","$.child","div_2","button","root_1","node_1","ArrowBack24","$.reset","$.append","$$anchor","$$render","consequent","h2","$.sibling","node","$$value","button_1","node_2","Cross24","div_3","div_4","h2_1","root_2","consequent_1","div_5","MOverlay","node_6"],"mappings":";;;;;;;;;;;;u/WAWA,qBAiDIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACRG,EAAIJ,EAAAC,EAAA,OAAA,CAAA,EACJI,EAAKL,EAAAC,EAAA,QAAA,CAAA,EACLK,EAAYN,EAAAC,EAAA,eAAA,CAAA,EACZM,EAAYP,EAAAC,EAAA,eAAA,CAAA,EACZO,EAAMR,EAAAC,EAAA,SAAA,CAAA,EACHQ,EAAAC,GAAAT,EAAA,+HAEDU,EACAC,EAEJC,EAAO,IAAO,CACPd,EAAI,IAEI,gBACLe,GAAI,EACVF,GAAS,MAAK,KAElB,CAAC,EAEK,MAAAG,EAAO,IAAS,CACpBhB,EAAO,EAAK,EAEZQ,EAAY,IAAGR,GAAI,EAEb,MAAAiB,EAAK,IAAO,YAAY,eAC5B,OAAQjB,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBY,EAAQ,cAAcK,CAAK,CAC7B,EAEMC,EAAW,IAAS,CACxBT,MAAM,QAEAQ,EAAK,IAAO,YAAY,OAAM,CAClC,QAAS,GACT,SAAU,GAAI,EAEhBL,EAAQ,cAAcK,CAAK,CAC7B,waAGDE,EAAAC,GAAA,EAWaC,EAAAC,GAAMA,EAAE,MAAQ,UAAYN,EAAO,KAXhDG,eAEG,0BACchB,EAAQ,CAAA,GACtBH,EAAI,GAAI,UACRI,KAAY,gFAIFJ,IAAO,OAAS,uBACdA,EAAI,iBAGdU,2CAEH,IAAAa,EAAGC,EAfLL,CAAA,EAgBIM,IADFF,CAAG,MACDE,CAAG,aAEC,IAAAC,EAAAC,GAAA,EAAAD,EAGC,QAASR,EAHV,IAAAU,EAAAJ,EAAAE,CAAA,EAKEG,GAAWD,EAAA,EAAA,EALbE,EAAAJ,CAAA,EAAAK,EAAAC,EAAAN,CAAA,WADErB,EAAI,GAAA4B,EAAAC,CAAA,QASRC,EAAEC,EAAAC,EAAA,CAAA,MAAFF,EAAE,EAAA,IAAFA,CAAE,IAAFA,EAAEG,GAAoEzB,EAAOyB,EAAA,IAAPzB,CAAO,EAC7E,IAAA0B,EAAAH,EADAD,EAAE,CAAA,EACFI,EAGC,QAASvB,EAHV,IAAAwB,EAAAhB,EAAAe,CAAA,EAKEE,GAAOD,EAAA,EAAA,EALTV,EAAAS,CAAA,IAXFd,CAAG,EAoBH,IAAAiB,IApBAjB,EAAG,CAAA,EAqBDkB,IADFD,CAAG,MACDC,CAAG,iBAECC,EAAEC,GAAA,MAAFD,EAAE,EAAA,IAAFA,CAAE,YAAoCrC,EAAY,CAAA,CAAA,MAAlDqC,CAAE,WADArC,EAAY,GAAA0B,EAAAa,CAAA,4CADlBH,CAAG,IADLD,CAAG,EASH,IAAAK,IATAL,EAAG,CAAA,MASHK,CAAG,4BAAHA,CAAG,IA9BLxB,CAAG,UAAHA,EAAG,CAAA,EAkCHyB,OAAAA,GAAQC,EAAA,wBAAYjD,EAAI,+BAjD1B8B,EAAAX,CAAA,IAAAA,EAAAmB,GAYY1B,QAAAA,CAAO,YAcmEN,EAAK,CAAA,CAAA,EA1B3FyB,EAAAC,EAAAb,CAAA,OAFO"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/drawer/Drawer.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-drawer',\n    props: {\n      open: { reflect: true, type: 'Boolean', attribute: 'open' },\n      extended: { reflect: true, type: 'Boolean', attribute: 'extended' },\n      back: { reflect: true, type: 'Boolean', attribute: 'back' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { ArrowBack24, Cross24 } from '@mozaic-ds/icons-svelte';\n  import { tick } from 'svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality.\n   *\n   * @slot default - Use this slot to insert the content of the drawer\n   * @slot footer - Use this slot to insert buttons in the footer\n   * @event update:open {CustomEvent<boolean>} - Emits when the drawer open state changes.\n   * @event back {CustomEvent<void>} - Emits when click back button of the drawer.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * If `true`, display the drawer.\n     */\n    open?: boolean;\n    /**\n     * Position of the drawer.\n     */\n    position?: 'left' | 'right';\n    /**\n     * If `true`, the drawer have a bigger width.\n     */\n    extended?: boolean;\n    /**\n     * If `true`, display the back button.\n     */\n    back?: boolean;\n    /**\n     * Title of the drawer.\n     */\n    title: string;\n    /**\n     * Title of the content of the drawer.\n     */\n    contentTitle?: string;\n    /**\n     * Callback fired when the drawer open state changes.\n     */\n    onUpdateOpen?: (open: boolean) => void;\n    /**\n     * Callback fired when the back button is clicked.\n     */\n    onBack?: () => void;\n  }\n\n  let {\n    open,\n    position,\n    extended,\n    back,\n    title,\n    contentTitle,\n    onUpdateOpen,\n    onBack,\n    ...attrs\n  }: Props = $props();\n  let element: HTMLElement;\n  let titleEl: HTMLHeadingElement | undefined = undefined;\n\n  $effect(() => {\n    if (!open) return;\n\n    (async () => {\n      await tick();\n      titleEl?.focus();\n    })();\n  });\n\n  const onClose = () => {\n    open = false;\n\n    onUpdateOpen?.(open);\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  const onClickBack = () => {\n    onBack?.();\n\n    const event = new CustomEvent('back', {\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n<div\n  class={[\n    'mc-drawer',\n    `mc-drawer--${position}`,\n    open && 'is-open',\n    extended && 'mc-drawer--extend',\n  ]}\n  role=\"dialog\"\n  aria-labelledby=\"drawerTitle\"\n  aria-modal={open ? 'true' : 'false'}\n  aria-hidden={!open}\n  onkeydown={(e) => e.key === 'Escape' && onClose()}\n  bind:this={element}\n  {...attrs}\n>\n  <div class=\"mc-drawer__dialog\" role=\"document\">\n    <div class=\"mc-drawer__header\">\n      {#if back}\n        <button\n          class=\"mc-drawer__back mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Back\"\n          onclick={onClickBack}\n        >\n          <ArrowBack24 />\n        </button>\n      {/if}\n      <h2 class=\"mc-drawer__title\" id=\"drawerTitle\" tabIndex=\"-1\" bind:this={titleEl}>{title}</h2>\n      <button\n        class=\"mc-drawer__close mc-button mc-button--icon-button mc-button--ghost\"\n        aria-label=\"Close\"\n        onclick={onClose}\n      >\n        <Cross24 />\n      </button>\n    </div>\n\n    <div class=\"mc-drawer__body\">\n      <div class=\"mc-drawer__content\">\n        {#if contentTitle}\n          <h2 class=\"mc-drawer__content__title\">{contentTitle}</h2>\n        {/if}\n        <slot />\n      </div>\n    </div>\n\n    <div class=\"mc-drawer__footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n  <MOverlay isvisible={open} dialoglabel=\"drawerTitle\" />\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/drawer';\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["open","$.prop","$$props","position","extended","back","title","contentTitle","onUpdateOpen","onBack","attrs","$.rest_props","element","titleEl","$.user_effect","tick","onClose","event","onClickBack","div","root","event_handler","e","div_1","$.child","div_2","button","root_1","node_1","ArrowBack24","$.reset","$.delegated","$.append","$$anchor","$$render","consequent","h2","$.sibling","node","$$value","button_1","node_2","Cross24","div_3","div_4","h2_1","root_2","consequent_1","div_5","MOverlay","node_6"],"mappings":";;;;;;;;;;;;spXAWA,qBAiDIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACRE,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACRG,EAAIJ,EAAAC,EAAA,OAAA,CAAA,EACJI,EAAKL,EAAAC,EAAA,QAAA,CAAA,EACLK,EAAYN,EAAAC,EAAA,eAAA,CAAA,EACZM,EAAYP,EAAAC,EAAA,eAAA,CAAA,EACZO,EAAMR,EAAAC,EAAA,SAAA,CAAA,EACHQ,EAAAC,GAAAT,EAAA,+HAEDU,EACAC,EAEJC,GAAO,IAAO,CACPd,EAAI,IAEI,gBACLe,GAAI,EACVF,GAAS,MAAK,KAElB,CAAC,EAEK,MAAAG,EAAO,IAAS,CACpBhB,EAAO,EAAK,EAEZQ,EAAY,IAAGR,GAAI,EAEb,MAAAiB,EAAK,IAAO,YAAY,eAC5B,OAAQjB,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBY,EAAQ,cAAcK,CAAK,CAC7B,EAEMC,EAAW,IAAS,CACxBT,MAAM,QAEAQ,EAAK,IAAO,YAAY,OAAM,CAClC,QAAS,GACT,SAAU,GAAI,EAEhBL,EAAQ,cAAcK,CAAK,CAC7B,waAGDE,EAAAC,GAAA,EAWaC,EAAAC,GAAMA,EAAE,MAAQ,UAAYN,EAAO,KAXhDG,eAEG,0BACchB,EAAQ,CAAA,GACtBH,EAAI,GAAI,UACRI,KAAY,gFAIFJ,IAAO,OAAS,uBACdA,EAAI,iBAGdU,2CAEH,IAAAa,EAAGC,EAfLL,CAAA,EAgBIM,IADFF,CAAG,MACDE,CAAG,aAEC,IAAAC,EAAAC,GAAA,EAAAC,EAAAJ,EAAAE,CAAA,EAKEG,GAAWD,EAAA,EAAA,EALbE,EAAAJ,CAAA,EAAAK,EAAA,QAAAL,EAGUR,CAAW,EAHrBc,EAAAC,EAAAP,CAAA,WADErB,EAAI,GAAA6B,EAAAC,CAAA,QASRC,EAAEC,EAAAC,EAAA,CAAA,MAAFF,EAAE,EAAA,IAAFA,CAAE,IAAFA,EAAEG,GAAoE1B,EAAO0B,EAAA,IAAP1B,CAAO,EAC7E,IAAA2B,EAAAH,EADAD,EAAE,CAAA,EACFK,EAAAjB,EAAAgB,CAAA,EAKEE,GAAOD,EAAA,EAAA,EALTX,EAAAU,CAAA,IAXFf,CAAG,EAoBH,IAAAkB,IApBAlB,EAAG,CAAA,EAqBDmB,IADFD,CAAG,MACDC,CAAG,iBAECC,EAAEC,GAAA,MAAFD,EAAE,EAAA,IAAFA,CAAE,YAAoCtC,EAAY,CAAA,CAAA,MAAlDsC,CAAE,WADAtC,EAAY,GAAA2B,EAAAa,CAAA,4CADlBH,CAAG,IADLD,CAAG,EASH,IAAAK,IATAL,EAAG,CAAA,MASHK,CAAG,4BAAHA,CAAG,IA9BLzB,CAAG,UAAHA,EAAG,CAAA,EAkCH0B,OAAAA,GAAQC,EAAA,wBAAYlD,EAAI,+BAjD1B8B,EAAAX,CAAA,IAAAA,EAAAoB,GAYY3B,QAAAA,CAAO,YAcmEN,EAAK,CAAA,CAAA,EACrFyB,EAAA,QAAAS,EAGUxB,CAAO,EA9BvBgB,EAAAC,EAAAd,CAAA,OAFO"}

package/dist/components/drawer/Drawer.svelte

@@ -169,6 +169,7 @@
   overflow: hidden;
   padding: 0.5rem;
   justify-content: flex-end;
+  z-index: var(--drawer-z-index, 5);
 }
 @media (width >= 680px) {
   .mc-drawer {
@@ -196,7 +197,7 @@
   transition: visibility 0s linear 0.4s, transform 0.4s;
   visibility: hidden;
   width: 100%;
-  z-index: var(--drawer-z-index, 3);
+  z-index: var(--drawer-z-index, 5);
   border-radius: var(--border-radius-l, 1rem);
 }
 @media (width >= 680px) {
@@ -297,6 +298,7 @@
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+  border-radius: var(--button-border-radius-m, 0.25rem);
 }
 .mc-button .mc-button__label {
   font-size: var(--font-size-150, 1rem);
@@ -307,7 +309,6 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -340,6 +341,7 @@
   padding: 0 calc(0.75rem - 0.125rem);
   min-height: 2rem;
   min-width: 2rem;
+  border-radius: var(--button-border-radius-s, 0.25rem);
 }
 .mc-button--s .mc-button__label {
   font-size: var(--font-size-100, 0.875rem);
@@ -356,6 +358,7 @@
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+  border-radius: var(--button-border-radius-m, 0.25rem);
 }
 .mc-button--m .mc-button__label {
   font-size: var(--font-size-150, 1rem);
@@ -372,6 +375,7 @@
   padding: 0 calc(1.25rem - 0.125rem);
   min-height: 4rem;
   min-width: 4rem;
+  border-radius: var(--button-border-radius-l, 0.25rem);
 }
 .mc-button--l .mc-button__label {
   font-size: var(--font-size-200, 1.125rem);

package/dist/components/field/Field.js

@@ -1,7 +1,7 @@
-import{c as J,p as K,a as N,b as t,s as d,t as h,f as u,g as O,h as b,d as r,j as a,r as n,e as w,l as P,m as Q}from"../../custom-element.js";import{i as p}from"../../if.js";import{s as R}from"../../slot.js";import{s as B}from"../../attributes.js";import{L as T}from"../loader/Loader.js";import"../../branches.js";var U=b('<span class="mc-field__requirement svelte-19i2lwv" aria-hidden="true"> </span>'),W=b('<span class="mc-field__help svelte-19i2lwv"> </span>'),X=b("<span><!> </span>"),Y=b('<div class="mc-field"><label class="mc-field__label svelte-19i2lwv"> <!></label> <!> <div class="mc-field__content svelte-19i2lwv"><!></div> <!></div>');const $={hash:"svelte-19i2lwv",code:`/**
+import{c as J,e as K,a as N,p as l,s as d,t as _,b as u,d as O,f as x,h as r,m as a,r as n,k as w,j as P,l as Q}from"../../custom-element.js";import{i as p}from"../../if.js";import{s as R}from"../../slot.js";import{s as q}from"../../attributes.js";import{L as T}from"../loader/Loader.js";import"../../branches.js";var U=x('<span class="mc-field__requirement svelte-19i2lwv" aria-hidden="true"> </span>'),W=x('<span class="mc-field__help svelte-19i2lwv"> </span>'),X=x("<span><!> </span>"),Y=x('<div class="mc-field"><label class="mc-field__label svelte-19i2lwv"> <!></label> <!> <div class="mc-field__content svelte-19i2lwv"><!></div> <!></div>');const $={hash:"svelte-19i2lwv",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* stylelint-disable string-no-newline */.mc-field__label.svelte-19i2lwv {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__requirement.svelte-19i2lwv, .mc-field__help.svelte-19i2lwv {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-19i2lwv {display:block;margin-top:0.125rem;}.mc-field__content.svelte-19i2lwv {margin-top:0.5rem;}.mc-field__validation-message.svelte-19i2lwv {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-19i2lwv::before, .mc-field__validation-message.is-invalid.svelte-19i2lwv::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-19i2lwv {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-19i2lwv::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-19i2lwv {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-19i2lwv::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");}
+/* stylelint-disable string-no-newline */.mc-field__label.svelte-19i2lwv {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__requirement.svelte-19i2lwv, .mc-field__help.svelte-19i2lwv {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-19i2lwv {display:block;margin-top:0.125rem;}.mc-field__content.svelte-19i2lwv {margin-top:0.5rem;}.mc-field__validation-message.svelte-19i2lwv {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-19i2lwv::before, .mc-field__validation-message.is-invalid.svelte-19i2lwv::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-19i2lwv {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-19i2lwv::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-19i2lwv {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-19i2lwv::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;}
 
-/* stylelint-enable string-no-newline */`};function ee(M,l){K(l,!0),N(M,$);let x=t(l,"id",7),y=t(l,"label",7),v=t(l,"requirementtext",7),o=t(l,"helpid",7),m=t(l,"helptext",7),q=t(l,"messageid",7),z=t(l,"message",7),g=t(l,"isinvalid",7),c=t(l,"isvalid",7),f=t(l,"isloading",7);var j={get id(){return x()},set id(e){x(e),a()},get label(){return y()},set label(e){y(e),a()},get requirementtext(){return v()},set requirementtext(e){v(e),a()},get helpid(){return o()},set helpid(e){o(e),a()},get helptext(){return m()},set helptext(e){m(e),a()},get messageid(){return q()},set messageid(e){q(e),a()},get message(){return z()},set message(e){z(e),a()},get isinvalid(){return g()},set isinvalid(e){g(e),a()},get isvalid(){return c()},set isvalid(e){c(e),a()},get isloading(){return f()},set isloading(e){f(e),a()}},E=Y(),_=r(E),k=r(_),D=d(k);{var F=e=>{var i=U(),s=r(i,!0);n(i),h(()=>w(s,v())),u(e,i)};p(D,e=>{v()&&e(F)})}n(_);var L=d(_,2);{var S=e=>{var i=W(),s=r(i,!0);n(i),h(()=>{B(i,"id",o()),w(s,m())}),u(e,i)};p(L,e=>{o()&&m()&&e(S)})}var Z=d(L,2),V=r(Z);R(V,l,"default",{},null),n(Z);var A=d(Z,2);{var G=e=>{var i=X(),s=r(i);{var H=C=>{T(C,{size:"xs"})};p(s,C=>{f()&&C(H)})}var I=d(s);n(i),h(()=>{B(i,"id",q()),P(i,1,Q(["mc-field__validation-message",c()&&"is-valid",g()&&"is-invalid"]),"svelte-19i2lwv"),w(I,` ${z()??""}`)}),u(e,i)};p(A,e=>{(g()||c()||f())&&e(G)})}return n(E),h(()=>{B(_,"for",x()),w(k,`${y()??""} `)}),u(M,E),O(j)}customElements.define("m-field",J(ee,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},isvalid:{attribute:"isvalid",reflect:!0,type:"Boolean"},isloading:{attribute:"isloading",reflect:!0,type:"Boolean"},id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{}},["default"],[],!0));
+/* stylelint-enable string-no-newline */`};function ee(z,t){K(t,!0),N(z,$);let b=l(t,"id",7),Z=l(t,"label",7),v=l(t,"requirementtext",7),o=l(t,"helpid",7),m=l(t,"helptext",7),E=l(t,"messageid",7),C=l(t,"message",7),c=l(t,"isinvalid",7),g=l(t,"isvalid",7),f=l(t,"isloading",7);var V={get id(){return b()},set id(e){b(e),a()},get label(){return Z()},set label(e){Z(e),a()},get requirementtext(){return v()},set requirementtext(e){v(e),a()},get helpid(){return o()},set helpid(e){o(e),a()},get helptext(){return m()},set helptext(e){m(e),a()},get messageid(){return E()},set messageid(e){E(e),a()},get message(){return C()},set message(e){C(e),a()},get isinvalid(){return c()},set isinvalid(e){c(e),a()},get isvalid(){return g()},set isvalid(e){g(e),a()},get isloading(){return f()},set isloading(e){f(e),a()}},k=Y(),h=r(k),B=r(h),j=d(B);{var D=e=>{var i=U(),s=r(i);n(i),_(()=>w(s,`(${v()??""})`)),u(e,i)};p(j,e=>{v()&&e(D)})}n(h);var L=d(h,2);{var F=e=>{var i=W(),s=r(i,!0);n(i),_(()=>{q(i,"id",o()),w(s,m())}),u(e,i)};p(L,e=>{o()&&m()&&e(F)})}var y=d(L,2),S=r(y);R(S,t,"default",{},null),n(y);var A=d(y,2);{var G=e=>{var i=X(),s=r(i);{var H=M=>{T(M,{size:"xs"})};p(s,M=>{f()&&M(H)})}var I=d(s);n(i),_(()=>{q(i,"id",E()),P(i,1,Q(["mc-field__validation-message",g()&&"is-valid",c()&&"is-invalid"]),"svelte-19i2lwv"),w(I,` ${C()??""}`)}),u(e,i)};p(A,e=>{(c()||g()||f())&&e(G)})}return n(k),_(()=>{q(h,"for",b()),w(B,`${Z()??""} `)}),u(z,k),O(V)}customElements.define("m-field",J(ee,{isinvalid:{attribute:"isinvalid",reflect:!0,type:"Boolean"},isvalid:{attribute:"isvalid",reflect:!0,type:"Boolean"},isloading:{attribute:"isloading",reflect:!0,type:"Boolean"},id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{}},["default"],[],{mode:"open"}));
 //# sourceMappingURL=Field.js.map