@mozaic-ds/web-components 1.5.0 → 1.6.0

package/dist/components/datepicker/Datepicker.svelte

@@ -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;

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,k as u,t as g,b as y,d as z,f as b,n as k,j as _,i as d,r as x,s as D,h 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,4 +1,4 @@
-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,aK as to,k as l,t as D,u as q,b as B,d as eo,f as T,n as ro,j as r,i as c,r as d,m as K}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=T('<button class="mc-drawer__back mc-button mc-button--icon-button mc-button--ghost svelte-1d2fooj" aria-label="Back"><!></button>'),bo=T('<h2 class="mc-drawer__content__title svelte-1d2fooj"> </h2>'),uo=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 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;}
 @media (width >= 680px) {.mc-drawer.svelte-1d2fooj {padding:1rem;}
@@ -10,5 +10,5 @@ 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
 @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(z,t){Z(t,!0),$(z,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),k=a(t,"onUpdateOpen",7),h=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),k()?.(e());const o=new CustomEvent("update:open",{detail:e(),bubbles:!0,composed:!0});u.dispatchEvent(o)},I=()=>{h()?.();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 k()},set onUpdateOpen(o){k(o),c()},get onBack(){return h()},set onBack(o){h(o),c()}},s=uo(),L=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:L,...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(()=>K(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(()=>K(N,g())),q("click",_,O),B(z,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

@@ -297,6 +297,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 +308,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 +340,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 +357,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 +374,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,k as d,t as _,b as u,d as O,f as x,j as r,i as a,r as n,m as w,s as P,h 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

package/dist/components/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-field',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      isvalid: { reflect: true, type: 'Boolean', attribute: 'isvalid' },\n      isloading: { reflect: true, type: 'Boolean', attribute: 'isloading' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n\n  /**\n   * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.\n   *\n   * @slot default - Use this slot to insert the form element of your choice\n   */\n  interface Props {\n    /**\n     * A unique identifier for the form field, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The text displayed as the label for the form field.\n     */\n    label: string;\n    /**\n     * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional\n     */\n    requirementtext?: string;\n    /**\n     * Text shown below the form field to provide additional context or instructions for the user.\n     */\n    helptext?: string;\n    /**\n     * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._\n     */\n    helpid?: string;\n    /**\n     * If `true`, applies a valid state to the form field.\n     */\n    isvalid?: boolean;\n    /**\n     * If `true`, applies an invalid state to the form field.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, applies a loading state to the form field.\n     */\n    isloading?: boolean;\n    /**\n     * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._\n     */\n    messageid?: string;\n    /**\n     * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.\n     */\n    message?: string;\n  }\n\n  let {\n    id,\n    label,\n    requirementtext,\n    helpid,\n    helptext,\n    messageid,\n    message,\n    isinvalid,\n    isvalid,\n    isloading,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-field\">\n  <label for={id} class=\"mc-field__label\">\n    {label}\n    {#if requirementtext}\n      <span class=\"mc-field__requirement\" aria-hidden=\"true\">\n        {requirementtext}\n      </span>\n    {/if}\n  </label>\n\n  {#if helpid && helptext}\n    <span id={helpid} class=\"mc-field__help\">\n      {helptext}\n    </span>\n  {/if}\n\n  <div class=\"mc-field__content\">\n    <slot />\n  </div>\n\n  {#if isinvalid || isvalid || isloading}\n    <span\n      id={messageid}\n      class={['mc-field__validation-message', isvalid && 'is-valid', isinvalid && 'is-invalid']}\n    >\n      {#if isloading}\n        <Loader size=\"xs\" />\n      {/if}\n      {message}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","label","requirementtext","helpid","helptext","messageid","message","isinvalid","isvalid","isloading","div","root","label_1","span","root_1","$$render","consequent","span_1","root_2","$.set_attribute","consequent_1","div_1","$.sibling","node_1","span_2","root_3","node_4","$.child","Loader","$$anchor","consequent_2","$.reset","$.append","consequent_3"],"mappings":";;;;;2DAWA,oBAoDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAeH,EAAAC,EAAA,kBAAA,CAAA,EACfG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAOT,EAAAC,EAAA,UAAA,CAAA,EACPS,EAASV,EAAAC,EAAA,YAAA,CAAA,shBAIZU,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAK,wBAGDC,EAAIC,EAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YACFX,EAAe,CAAA,CAAA,MADjBW,CAAI,WADFX,EAAe,GAAAa,EAAAC,CAAA,MAFrBJ,CAAK,UAALA,EAAK,CAAA,iBAUHK,EAAIC,EAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,SAAJE,EAAAF,OAASd,GAAM,MACbC,GAAQ,QADVa,CAAI,WADFd,EAAM,GAAIC,KAAQW,EAAAK,CAAA,QAMtBC,EAAGC,EAAAC,EAAA,CAAA,MAAHF,CAAG,6BAAHA,CAAG,UAAHA,EAAG,CAAA,aAKD,IAAAG,EAAAC,EAAA,EAAAC,EAAAC,EAAAH,CAAA,aAKII,EAAMC,EAAA,CAAA,KAAA,IAAA,CAAA,WADJpB,EAAS,GAAAM,EAAAe,CAAA,eAJfC,EAAAP,CAAA,SAAAL,EAAAK,EAAA,KACKnB,GAAS,IADdmB,OAES,+BAAgChB,EAAO,GAAI,WAAYD,KAAa,yCAK3ED,EAAO,GAAA,EAAA,EAAA,IAPT0B,EAAAH,EAAAL,CAAA,YADEjB,EAAS,GAAIC,EAAO,GAAIC,EAAS,IAAAM,EAAAkB,CAAA,aApBvCvB,CAAG,SACDS,EAAAP,QAAWd,GAAE,SACXG,EAAK,GAAA,EAAA,GAAA,QAFTS,CAAG,MAFI"}
+{"version":3,"file":"Field.js","sources":["../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-field',\n    props: {\n      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },\n      isvalid: { reflect: true, type: 'Boolean', attribute: 'isvalid' },\n      isloading: { reflect: true, type: 'Boolean', attribute: 'isloading' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n\n  /**\n   * A field label is a text element that identifies the purpose of an input field, providing users with clear guidance on what information to enter. It is typically placed above the input field and may include indicators for required or optional fields. Field Labels improve form usability, accessibility, and data entry accuracy by ensuring users understand the expected input.\n   *\n   * @slot default - Use this slot to insert the form element of your choice\n   */\n  interface Props {\n    /**\n     * A unique identifier for the form field, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The text displayed as the label for the form field.\n     */\n    label: string;\n    /**\n     * Additional text displayed alongside the label, typically used to indicate if the form field is required or optional\n     */\n    requirementtext?: string;\n    /**\n     * Text shown below the form field to provide additional context or instructions for the user.\n     */\n    helptext?: string;\n    /**\n     * The value of the `id` attribute set on the **helpText** element. _This value is mandatory when using a helpText in order to guarantee the accessibility of the component._\n     */\n    helpid?: string;\n    /**\n     * If `true`, applies a valid state to the form field.\n     */\n    isvalid?: boolean;\n    /**\n     * If `true`, applies an invalid state to the form field.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, applies a loading state to the form field.\n     */\n    isloading?: boolean;\n    /**\n     * The value of the `id` attribute set on the **validationMessage** element. _This value is mandatory when using a validationMessage in order to guarantee the accessibility of the component._\n     */\n    messageid?: string;\n    /**\n     * message displayed when the form field has a valid or invalid state, usually indicating validation or errors.\n     */\n    message?: string;\n  }\n\n  let {\n    id,\n    label,\n    requirementtext,\n    helpid,\n    helptext,\n    messageid,\n    message,\n    isinvalid,\n    isvalid,\n    isloading,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-field\">\n  <label for={id} class=\"mc-field__label\">\n    {label}\n    {#if requirementtext}\n      <span class=\"mc-field__requirement\" aria-hidden=\"true\">\n        ({requirementtext})\n      </span>\n    {/if}\n  </label>\n\n  {#if helpid && helptext}\n    <span id={helpid} class=\"mc-field__help\">\n      {helptext}\n    </span>\n  {/if}\n\n  <div class=\"mc-field__content\">\n    <slot />\n  </div>\n\n  {#if isinvalid || isvalid || isloading}\n    <span\n      id={messageid}\n      class={['mc-field__validation-message', isvalid && 'is-valid', isinvalid && 'is-invalid']}\n    >\n      {#if isloading}\n        <Loader size=\"xs\" />\n      {/if}\n      {message}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","label","requirementtext","helpid","helptext","messageid","message","isinvalid","isvalid","isloading","div","root","label_1","span","root_1","$$render","consequent","span_1","root_2","$.set_attribute","consequent_1","div_1","$.sibling","node_1","span_2","root_3","node_4","$.child","Loader","$$anchor","consequent_2","$.reset","$.append","consequent_3"],"mappings":";;;;;2DAWA,oBAoDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAeH,EAAAC,EAAA,kBAAA,CAAA,EACfG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAOT,EAAAC,EAAA,UAAA,CAAA,EACPS,EAASV,EAAAC,EAAA,YAAA,CAAA,shBAIZU,EAAGC,EAAA,EACDC,IADFF,CAAG,MACDE,CAAK,wBAGDC,EAAIC,EAAA,MAAJD,CAAI,IAAJA,CAAI,gBACDX,KAAe,EAAA,GAAA,CAAA,MADlBW,CAAI,WADFX,EAAe,GAAAa,EAAAC,CAAA,MAFrBJ,CAAK,UAALA,EAAK,CAAA,iBAUHK,EAAIC,EAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,SAAJE,EAAAF,OAASd,GAAM,MACbC,GAAQ,QADVa,CAAI,WADFd,EAAM,GAAIC,KAAQW,EAAAK,CAAA,QAMtBC,EAAGC,EAAAC,EAAA,CAAA,MAAHF,CAAG,6BAAHA,CAAG,UAAHA,EAAG,CAAA,aAKD,IAAAG,EAAAC,EAAA,EAAAC,EAAAC,EAAAH,CAAA,aAKII,EAAMC,EAAA,CAAA,KAAA,IAAA,CAAA,WADJpB,EAAS,GAAAM,EAAAe,CAAA,eAJfC,EAAAP,CAAA,SAAAL,EAAAK,EAAA,KACKnB,GAAS,IADdmB,OAES,+BAAgChB,EAAO,GAAI,WAAYD,KAAa,yCAK3ED,EAAO,GAAA,EAAA,EAAA,IAPT0B,EAAAH,EAAAL,CAAA,YADEjB,EAAS,GAAIC,EAAO,GAAIC,EAAS,IAAAM,EAAAkB,CAAA,aApBvCvB,CAAG,SACDS,EAAAP,QAAWd,GAAE,SACXG,EAAK,GAAA,EAAA,GAAA,QAFTS,CAAG,MAFI"}

package/dist/components/field/Field.spec.js

@@ -14,7 +14,7 @@ describe('m-field component', () => {
     });
     it('renders requirement text when provided', () => {
         const { getByText } = render(Field, {
-            props: { ...baseProps, requirementtext: '(required)' },
+            props: { ...baseProps, requirementtext: 'required' },
         });
         const req = getByText('(required)');
         expect(req).toBeInTheDocument();

package/dist/components/field/Field.svelte

@@ -79,7 +79,7 @@
     {label}
     {#if requirementtext}
       <span class="mc-field__requirement" aria-hidden="true">
-        {requirementtext}
+        ({requirementtext})
       </span>
     {/if}
   </label>
@@ -150,13 +150,17 @@
   color: var(--field-color-validation-valid, #117f03);
 }
 .mc-field__validation-message.is-valid::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
+  background-color: var(--field-color-validation-valid, #117f03);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E") no-repeat center/contain;
 }
 .mc-field__validation-message.is-invalid {
   color: var(--field-color-validation-invalid, #c61112);
 }
 .mc-field__validation-message.is-invalid::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
+  background-color: var(--field-color-validation-invalid, #c61112);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E") no-repeat center/contain;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E") no-repeat center/contain;
 }
 .mc-field__validation-message.is-loading {
   color: var(--field-color-validation-loading, #666666);

package/dist/components/fileuploader/FileUploader.js

@@ -1,4 +1,4 @@
-import{o as Me,c as Ae,p as Se,a as Ve,b as l,A as Be,n,s as k,t as B,B as I,f as u,g as Ie,v as L,h as le,d as h,q as N,aN as ue,j as a,u as ce,y as O,r as c,e as y,l as fe,m as me,x as ee,aM as be}from"../../custom-element.js";import{i as ve}from"../../if.js";import{e as Le,i as Ne}from"../../each.js";import{s as te}from"../../slot.js";import{s as re}from"../../attributes.js";import{b as he}from"../../this.js";import{F as Oe}from"../fileuploaderitem/FileUploaderItem.js";import{U as Pe}from"../../Condition20.js";import"../../branches.js";import"../../svelte-component.js";import"../button/Button.js";import"../loader/Loader.js";import"../divider/Divider.js";var qe=le('<span class="mc-file-uploader__input-title svelte-1hihzzl"> </span> <span class="mc-file-uploader__input-subtitle svelte-1hihzzl"> </span>',1),Ke=le('<div class="mc-file-uploader__files-list svelte-1hihzzl"></div>'),Te=le('<div><div class="mc-file-uploader__container"><input type="file" aria-label="File input" class="mc-file-uploader__hidden-input svelte-1hihzzl"/> <div tabindex="0" role="button"><!> <div class="mc-button mc-button--outlined mc-file-uploader__button svelte-1hihzzl"><!> <span class="mc-button__label svelte-1hihzzl"> </span></div></div></div> <!></div>');const Ge={hash:"svelte-1hihzzl",code:`/**
+import{o as Se,c as Ve,e as Ae,a as Be,p as l,B as Ie,l as n,k,t as B,u as ee,C as I,b as u,d as Le,w as L,f as ae,j as h,q as O,aX as ce,i as a,v as fe,x as P,r as c,m as y,s as me,h as be,y as te,aW as ve}from"../../custom-element.js";import{i as he}from"../../if.js";import{e as Oe,i as Pe}from"../../each.js";import{s as re}from"../../slot.js";import{s as le}from"../../attributes.js";import{b as pe}from"../../this.js";import{F as qe}from"../fileuploaderitem/FileUploaderItem.js";import{U as Ke}from"../../Condition20.js";import"../../branches.js";import"../../svelte-component.js";import"../button/Button.js";import"../loader/Loader.js";import"../divider/Divider.js";var Ne=ae('<span class="mc-file-uploader__input-title svelte-1hihzzl"> </span> <span class="mc-file-uploader__input-subtitle svelte-1hihzzl"> </span>',1),Te=ae('<div class="mc-file-uploader__files-list svelte-1hihzzl"></div>'),We=ae('<div><div class="mc-file-uploader__container"><input type="file" aria-label="File input" class="mc-file-uploader__hidden-input svelte-1hihzzl"/> <div tabindex="0" role="button"><!> <div class="mc-button mc-button--outlined mc-file-uploader__button svelte-1hihzzl"><!> <span class="mc-button__label svelte-1hihzzl"> </span></div></div></div> <!></div>');const Xe={hash:"svelte-1hihzzl",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-file-uploader.svelte-1hihzzl {display:flex;flex-direction:column;gap:1rem;width:18rem;}.mc-file-uploader__files-list.svelte-1hihzzl {display:flex;flex-direction:column;gap:1rem;}.mc-file-uploader__hidden-input.svelte-1hihzzl {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-file-uploader__input.svelte-1hihzzl {display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, 0.5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938);}.mc-file-uploader__input.svelte-1hihzzl .mc-file-uploader__button:where(.svelte-1hihzzl) {width:100%;}.mc-file-uploader__input--disabled.svelte-1hihzzl .mc-file-uploader__button.mc-button.mc-button--outlined:where(.svelte-1hihzzl) {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-file-uploader__input-title.svelte-1hihzzl {height:1.125rem;font-size:var(--font-size-150, 1rem);}.mc-file-uploader__input-subtitle.svelte-1hihzzl {height:1.125rem;font-size:var(--font-size-100, 0.875rem);}.mc-file-uploader--draggable.svelte-1hihzzl {width:25rem;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input:where(.svelte-1hihzzl) {padding:2rem;outline:0.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input--disabled:where(.svelte-1hihzzl) {outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input--dragged:where(.svelte-1hihzzl) {outline-width:0.25rem;}.mc-button.svelte-1hihzzl {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1hihzzl:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1hihzzl:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1hihzzl: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-1hihzzl {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1hihzzl .mc-button__label:where(.svelte-1hihzzl) {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-1hihzzl {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-1hihzzl {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-1hihzzl: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-1hihzzl: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--outlined.svelte-1hihzzl {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-1hihzzl:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1hihzzl:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1hihzzl:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function He(ae,t){Se(t,!0),Ve(ae,Ge);let i=l(t,"files",15),P=l(t,"accept",7),g=l(t,"multiple",7),D=l(t,"allowedextensions",7),E=l(t,"maxsize",7),q=l(t,"rules",7),f=l(t,"hasdragdrop",7,!0),K=l(t,"showfileslist",7,!0),m=l(t,"disabled",7),T=l(t,"title",7,"Drag & drop"),G=l(t,"subtitle",7,"or"),H=l(t,"uploadbuttonlabel",7,"Upload file(s)"),J=l(t,"format",7,"inline"),Q=l(t,"errormessage",7),R=l(t,"deletebuttonlabel",7),F=l(t,"information",7),W=l(t,"onvalidation",7),X=l(t,"onfilesupdate",7),U,C=L(()=>pe(i())),j,M=ce(!1),A=ce(0);function pe(e=[]){const r={};return e.forEach(o=>{const v=o.name.split(".").pop()?.toLowerCase()||"";r[o.name]={size:E()&&o.size?o.size<=E():!0,extension:D()?D().includes(v):!0,customValidation:q()?.every(p=>p(o))??!0}}),r}Be(()=>{X()?.(i());const e=new CustomEvent("files-update",{detail:i(),bubbles:!0,composed:!0});if(U.dispatchEvent(e),i()?.length>0){W()?.(n(C));const r=new CustomEvent("validation",{detail:n(C),bubbles:!0,composed:!0});U.dispatchEvent(r)}});function ge(e){f()&&(e.preventDefault(),ue(A),N(M,!0))}function ze(e){f()&&(e.preventDefault(),ue(A,-1),n(A)===0&&N(M,!1))}function oe(e){return i()?.every(r=>r.name!==e.name)}function _e(e){const r=e.target,o=Array.from(r.files||[]).filter(oe);if(!o.length){r.value="";return}i(g()?[...i(),...o]:o.slice(0,1)),r.value=""}function xe(e){e.preventDefault()}function we(e){if(!f()||(e.preventDefault(),e.stopPropagation(),N(A,0),N(M,!1),m()))return;const r=Array.from(e.dataTransfer?.files||[]).filter(oe);r.length&&i(g()?[...i(),...r]:[r[0]])}function ke(e){(e.key===" "||e.key==="Enter")&&(e.preventDefault(),j.click())}function ye(e){i(i()?.filter((r,o)=>o!==e))}function De(e){return Object.values(n(C)[e.name]??{}).every(Boolean)}var Ee={get files(){return i()},set files(e){i(e),a()},get accept(){return P()},set accept(e){P(e),a()},get multiple(){return g()},set multiple(e){g(e),a()},get allowedextensions(){return D()},set allowedextensions(e){D(e),a()},get maxsize(){return E()},set maxsize(e){E(e),a()},get rules(){return q()},set rules(e){q(e),a()},get hasdragdrop(){return f()},set hasdragdrop(e=!0){f(e),a()},get showfileslist(){return K()},set showfileslist(e=!0){K(e),a()},get disabled(){return m()},set disabled(e){m(e),a()},get title(){return T()},set title(e="Drag & drop"){T(e),a()},get subtitle(){return G()},set subtitle(e="or"){G(e),a()},get uploadbuttonlabel(){return H()},set uploadbuttonlabel(e="Upload file(s)"){H(e),a()},get format(){return J()},set format(e="inline"){J(e),a()},get errormessage(){return Q()},set errormessage(e){Q(e),a()},get deletebuttonlabel(){return R()},set deletebuttonlabel(e){R(e),a()},get information(){return F()},set information(e){F(e),a()},get onvalidation(){return W()},set onvalidation(e){W(e),a()},get onfilesupdate(){return X()},set onfilesupdate(e){X(e),a()}},z=Te(),Y=h(z),b=h(Y);b.__change=_e,he(b,e=>j=e,()=>j);var s=k(b,2);s.__click=()=>j.click(),s.__keydown=ke;var ie=h(s);{var Fe=e=>{var r=qe(),o=O(r),v=h(o,!0);c(o);var p=k(o,2),Z=h(p,!0);c(p),B(()=>{y(v,T()),y(Z,G())}),u(e,r)};ve(ie,e=>{f()&&e(Fe)})}var ne=k(ie,2),se=h(ne);Pe(se,{className:"mc-button__icon"});var de=k(se,2),Ue=h(de,!0);c(de),c(ne),c(s),c(Y);var Ce=k(Y,2);{var je=e=>{var r=Ke();Le(r,21,i,Ne,(o,v,p)=>{{let Z=L(()=>De(n(v)));Oe(o,{get file(){return n(v)},get format(){return J()},get errormessage(){return Q()},get information(){return F()},get deletebuttonlabel(){return R()},get valid(){return n(Z)},ondelete:()=>ye(p),$$slots:{name:(_,S)=>{var d=ee(),x=O(d);const V=L(()=>S.file);te(x,t,"name",{get file(){return n(V)}},$=>{var w=be();B(()=>y(w,n(V).name)),u($,w)}),u(_,d)},information:(_,S)=>{var d=ee(),x=O(d);const V=L(()=>S.file);te(x,t,"information",{get file(){return n(V)}},$=>{var w=be();B(()=>y(w,F())),u($,w)}),u(_,d)},errorMessage:(_,S)=>{var d=ee(),x=O(d);te(x,t,"errorMessage",{get validationState(){return n(C)[n(v).name]}},null),u(_,d)}}})}}),c(r),u(e,r)};ve(Ce,e=>{K()&&e(je)})}return c(z),he(z,e=>U=e,()=>U),B(()=>{fe(z,1,me({"mc-file-uploader":!0,"mc-file-uploader--draggable":f()}),"svelte-1hihzzl"),re(b,"accept",P()),b.multiple=g(),b.disabled=m(),re(b,"aria-disabled",m()),fe(s,1,me({"mc-file-uploader__input":!0,"mc-file-uploader__input--dragged":n(M),"mc-file-uploader__input--disabled":m()}),"svelte-1hihzzl"),re(s,"aria-disabled",m()),y(Ue,H())}),I("dragover",s,xe),I("drop",s,we),I("dragenter",s,ge),I("dragleave",s,ze),u(ae,z),Ie(Ee)}Me(["change","click","keydown"]);customElements.define("m-file-uploader",Ae(He,{files:{},accept:{},multiple:{},allowedextensions:{},maxsize:{},rules:{},hasdragdrop:{},showfileslist:{},disabled:{},title:{},subtitle:{},uploadbuttonlabel:{},format:{},errormessage:{},deletebuttonlabel:{},information:{},onvalidation:{},onfilesupdate:{}},["name","information","errorMessage"],[],!0));
+ */.mc-file-uploader.svelte-1hihzzl {display:flex;flex-direction:column;gap:1rem;width:18rem;}.mc-file-uploader__files-list.svelte-1hihzzl {display:flex;flex-direction:column;gap:1rem;}.mc-file-uploader__hidden-input.svelte-1hihzzl {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-file-uploader__input.svelte-1hihzzl {display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);border-radius:var(--border-radius-m, 0.5rem);color:var(--file-uploader-color-drag-and-drop-text-default, #242938);}.mc-file-uploader__input.svelte-1hihzzl .mc-file-uploader__button:where(.svelte-1hihzzl) {width:100%;}.mc-file-uploader__input--disabled.svelte-1hihzzl .mc-file-uploader__button.mc-button.mc-button--outlined:where(.svelte-1hihzzl) {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-file-uploader__input-title.svelte-1hihzzl {height:1.125rem;font-size:var(--font-size-150, 1rem);}.mc-file-uploader__input-subtitle.svelte-1hihzzl {height:1.125rem;font-size:var(--font-size-100, 0.875rem);}.mc-file-uploader--draggable.svelte-1hihzzl {width:25rem;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input:where(.svelte-1hihzzl) {padding:2rem;outline:0.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);display:flex;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input--disabled:where(.svelte-1hihzzl) {outline-color:var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);color:var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);cursor:not-allowed;}.mc-file-uploader--draggable.svelte-1hihzzl .mc-file-uploader__input--dragged:where(.svelte-1hihzzl) {outline-width:0.25rem;}.mc-button.svelte-1hihzzl {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1hihzzl:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1hihzzl:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1hihzzl: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-1hihzzl {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-1hihzzl .mc-button__label:where(.svelte-1hihzzl) {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-1hihzzl {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-1hihzzl {font-size:var(--font-size-150, 1rem);}.mc-button.svelte-1hihzzl: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-1hihzzl: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--outlined.svelte-1hihzzl {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-1hihzzl:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1hihzzl:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1hihzzl:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function Ge(oe,t){Ae(t,!0),Be(oe,Xe);let i=l(t,"files",15),q=l(t,"accept",7),g=l(t,"multiple",7),D=l(t,"allowedextensions",7),E=l(t,"maxsize",7),K=l(t,"rules",7),f=l(t,"hasdragdrop",7,!0),N=l(t,"showfileslist",7,!0),m=l(t,"disabled",7),T=l(t,"title",7,"Drag & drop"),W=l(t,"subtitle",7,"or"),X=l(t,"uploadbuttonlabel",7,"Upload file(s)"),G=l(t,"format",7,"inline"),H=l(t,"errormessage",7),J=l(t,"deletebuttonlabel",7),F=l(t,"information",7),Q=l(t,"onvalidation",7),R=l(t,"onfilesupdate",7),C,U=L(()=>ge(i())),j,M=fe(!1),S=fe(0);function ge(e=[]){const r={};return e.forEach(o=>{const v=o.name.split(".").pop()?.toLowerCase()||"";r[o.name]={size:E()&&o.size?o.size<=E():!0,extension:D()?D().includes(v):!0,customValidation:K()?.every(p=>p(o))??!0}}),r}Ie(()=>{R()?.(i());const e=new CustomEvent("files-update",{detail:i(),bubbles:!0,composed:!0});if(C.dispatchEvent(e),i()?.length>0){Q()?.(n(U));const r=new CustomEvent("validation",{detail:n(U),bubbles:!0,composed:!0});C.dispatchEvent(r)}});function ze(e){f()&&(e.preventDefault(),ce(S),O(M,!0))}function _e(e){f()&&(e.preventDefault(),ce(S,-1),n(S)===0&&O(M,!1))}function ie(e){return i()?.every(r=>r.name!==e.name)}function xe(e){const r=e.target,o=Array.from(r.files||[]).filter(ie);if(!o.length){r.value="";return}i(g()?[...i(),...o]:o.slice(0,1)),r.value=""}function we(e){e.preventDefault()}function ke(e){if(!f()||(e.preventDefault(),e.stopPropagation(),O(S,0),O(M,!1),m()))return;const r=Array.from(e.dataTransfer?.files||[]).filter(ie);r.length&&i(g()?[...i(),...r]:[r[0]])}function ye(e){(e.key===" "||e.key==="Enter")&&(e.preventDefault(),j.click())}function De(e){i(i()?.filter((r,o)=>o!==e))}function Ee(e){return Object.values(n(U)[e.name]??{}).every(Boolean)}var Fe={get files(){return i()},set files(e){i(e),a()},get accept(){return q()},set accept(e){q(e),a()},get multiple(){return g()},set multiple(e){g(e),a()},get allowedextensions(){return D()},set allowedextensions(e){D(e),a()},get maxsize(){return E()},set maxsize(e){E(e),a()},get rules(){return K()},set rules(e){K(e),a()},get hasdragdrop(){return f()},set hasdragdrop(e=!0){f(e),a()},get showfileslist(){return N()},set showfileslist(e=!0){N(e),a()},get disabled(){return m()},set disabled(e){m(e),a()},get title(){return T()},set title(e="Drag & drop"){T(e),a()},get subtitle(){return W()},set subtitle(e="or"){W(e),a()},get uploadbuttonlabel(){return X()},set uploadbuttonlabel(e="Upload file(s)"){X(e),a()},get format(){return G()},set format(e="inline"){G(e),a()},get errormessage(){return H()},set errormessage(e){H(e),a()},get deletebuttonlabel(){return J()},set deletebuttonlabel(e){J(e),a()},get information(){return F()},set information(e){F(e),a()},get onvalidation(){return Q()},set onvalidation(e){Q(e),a()},get onfilesupdate(){return R()},set onfilesupdate(e){R(e),a()}},z=We(),Y=h(z),b=h(Y);pe(b,e=>j=e,()=>j);var s=k(b,2),ne=h(s);{var Ce=e=>{var r=Ne(),o=P(r),v=h(o,!0);c(o);var p=k(o,2),Z=h(p,!0);c(p),B(()=>{y(v,T()),y(Z,W())}),u(e,r)};he(ne,e=>{f()&&e(Ce)})}var se=k(ne,2),de=h(se);Ke(de,{className:"mc-button__icon"});var ue=k(de,2),Ue=h(ue,!0);c(ue),c(se),c(s),c(Y);var je=k(Y,2);{var Me=e=>{var r=Te();Oe(r,21,i,Pe,(o,v,p)=>{{let Z=L(()=>Ee(n(v)));qe(o,{get file(){return n(v)},get format(){return G()},get errormessage(){return H()},get information(){return F()},get deletebuttonlabel(){return J()},get valid(){return n(Z)},ondelete:()=>De(p),$$slots:{name:(_,V)=>{var d=te(),x=P(d);const A=L(()=>V.file);re(x,t,"name",{get file(){return n(A)}},$=>{var w=ve();B(()=>y(w,n(A).name)),u($,w)}),u(_,d)},information:(_,V)=>{var d=te(),x=P(d);const A=L(()=>V.file);re(x,t,"information",{get file(){return n(A)}},$=>{var w=ve();B(()=>y(w,F())),u($,w)}),u(_,d)},errorMessage:(_,V)=>{var d=te(),x=P(d);re(x,t,"errorMessage",{get validationState(){return n(U)[n(v).name]}},null),u(_,d)}}})}}),c(r),u(e,r)};he(je,e=>{N()&&e(Me)})}return c(z),pe(z,e=>C=e,()=>C),B(()=>{me(z,1,be({"mc-file-uploader":!0,"mc-file-uploader--draggable":f()}),"svelte-1hihzzl"),le(b,"accept",q()),b.multiple=g(),b.disabled=m(),le(b,"aria-disabled",m()),me(s,1,be({"mc-file-uploader__input":!0,"mc-file-uploader__input--dragged":n(M),"mc-file-uploader__input--disabled":m()}),"svelte-1hihzzl"),le(s,"aria-disabled",m()),y(Ue,X())}),ee("change",b,xe),I("dragover",s,we),I("drop",s,ke),I("dragenter",s,ze),I("dragleave",s,_e),ee("click",s,()=>j.click()),ee("keydown",s,ye),u(oe,z),Le(Fe)}Se(["change","click","keydown"]);customElements.define("m-file-uploader",Ve(Ge,{files:{},accept:{},multiple:{},allowedextensions:{},maxsize:{},rules:{},hasdragdrop:{},showfileslist:{},disabled:{},title:{},subtitle:{},uploadbuttonlabel:{},format:{},errormessage:{},deletebuttonlabel:{},information:{},onvalidation:{},onfilesupdate:{}},["name","information","errorMessage"],[],{mode:"open"}));
 //# sourceMappingURL=FileUploader.js.map