@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0-beta.7

package/dist/components/radiogroup/RadioGroup.svelte

@@ -68,9 +68,6 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-radio {
   align-items: center;
   display: flex;
@@ -78,9 +75,9 @@
   padding: 0.375rem;
 }
 .mc-radio__label {
-  font-size: 1rem;
-  line-height: 1.3;
-  color: #000000;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-s, 1.3);
+  color: var(--forms-color-text-default, #000000);
   cursor: pointer;
 }
 .mc-radio__input {
@@ -89,8 +86,8 @@
   cursor: pointer;
   flex-shrink: 0;
   transition: box-shadow 200ms ease;
-  background-color: #ffffff;
-  border: 0.125rem solid #666666;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);
   border-radius: 100%;
   transition: all ease 200ms;
   height: 1.25rem;
@@ -98,7 +95,7 @@
   position: relative;
 }
 .mc-radio__input::before {
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
   content: "";
   display: block;
   height: 0.5rem;
@@ -109,59 +106,59 @@
   width: 0.5rem;
 }
 .mc-radio__input:hover {
-  border-color: #4d4d4d;
+  border-color: var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-radio__input:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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-radio__input:checked {
-  background-color: #117f03;
+  background-color: var(--forms-color-background-checked, #117f03);
 }
 .mc-radio__input:checked::before {
-  background-color: #ffffff;
+  background-color: var(--forms-color-background-default, #ffffff);
 }
 .mc-radio__input:checked, .mc-radio__input:disabled {
   border-color: transparent;
 }
 .mc-radio__input:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
 }
 .mc-radio__input:disabled:checked::before {
-  background-color: #737373;
+  background-color: var(--forms-color-icon-disabled, #737373);
 }
 .mc-radio__input:disabled + .mc-radio__label {
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
   cursor: not-allowed;
 }
 .mc-radio__input:not(:disabled):checked:hover {
-  background-color: #006902;
+  background-color: var(--forms-color-background-checked-hover, #006902);
 }
 .mc-radio__input.is-invalid:not(:checked) {
-  border-color: #ea302d;
+  border-color: var(--forms-color-border-invalid, #ea302d);
 }
 .mc-radio__input.is-invalid:not(:checked):hover {
-  border-color: #c61112;
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
 }
 
 /* stylelint-disable string-no-newline */
 .mc-field__label, .mc-field__legend {
-  font-size: 0.875rem;
-  line-height: 1.3;
-  font-weight: 400;
-  color: #000000;
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--field-color-label, #000000);
 }
 .mc-field__legend {
   padding-inline: 0;
 }
 .mc-field__requirement, .mc-field__help {
-  font-size: 0.75rem;
-  line-height: 1.5;
-  font-weight: 400;
+  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: #666666;
+  color: var(--field-color-requirement, #666666);
 }
 .mc-field__help {
   display: block;
@@ -171,8 +168,8 @@
   margin-top: 0.5rem;
 }
 .mc-field__validation-message {
-  font-size: 0.875rem;
-  line-height: 1.5;
+  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;
@@ -183,19 +180,19 @@
   width: 1.25rem;
 }
 .mc-field__validation-message.is-valid {
-  color: #117f03;
+  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='%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-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 {
-  color: #c61112;
+  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='%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-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
 }
 .mc-field__validation-message.is-loading {
-  color: #666666;
+  color: var(--field-color-validation-loading, #666666);
 }
 .mc-field--group {
   border-width: 0;

package/dist/components/select/Select.js

@@ -1,10 +1,7 @@
-import{n as M,c as A,p as F,a as G,b as l,v as H,l as I,f as k,s as J,d as x,t as _,u as K,e as N,o as O,m as n,h as y,i as P,j as i,r as j,w as Q,g as S}from"../../custom-element.js";import{i as R}from"../../if.js";import{e as T,i as U}from"../../each.js";import{s as V,d as W}from"../../attributes.js";import{c as X}from"../../custom-element-forward-events.js";var Y=k("<option disabled selected> </option>"),Z=k("<option> </option>"),$=k("<select><!><!></select>");const ee={hash:"svelte-14ej849",code:`/**
+import{n as D,c as F,p as G,a as H,b as s,v as I,l as J,f as k,s as K,d as w,t as _,u as N,e as O,o as P,m as n,h as z,i as Q,j as t,r as y,w as R,g as j}from"../../custom-element.js";import{i as T}from"../../if.js";import{e as U,i as V}from"../../each.js";import{s as W,d as X}from"../../attributes.js";import{c as Y}from"../../custom-element-forward-events.js";var Z=k("<option disabled selected> </option>"),$=k("<option> </option>"),ee=k("<select><!><!></select>");const re={hash:"svelte-6nznl5",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
-/* stylelint-disable string-no-newline */.mc-select.svelte-14ej849 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:1rem;line-height:1.3;height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");border:1px solid #666666;border-radius:0.25rem;display:block;width:100%;color:#000000;background-color:#ffffff;text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;}.mc-select.svelte-14ej849:hover {border-color:#4d4d4d;box-shadow:0 0 0 1px #4d4d4d;}.mc-select.svelte-14ej849:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-select.svelte-14ej849:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");background-color:#d9d9d9;border-color:transparent;cursor:not-allowed;box-shadow:none;color:#737373;}.mc-select--readonly.svelte-14ej849 {border-color:#cccccc;pointer-events:none;}.mc-select.is-invalid.svelte-14ej849 {border-color:#ea302d;box-shadow:0 0 0 1px #ea302d;}.mc-select.is-invalid.svelte-14ej849:hover {border-color:#c61112;box-shadow:0 0 0 1px #c61112;}.mc-select--s.svelte-14ej849 {font-size:0.875rem;line-height:1.3;height:2rem;padding:0 2rem 0 0.5rem;background-position:right 0.5rem center;}
+/* stylelint-disable string-no-newline */.mc-select.svelte-6nznl5 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--radius-s, 0.25rem);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;}.mc-select.svelte-6nznl5:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-6nznl5:focus {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-select.svelte-6nznl5:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-select--readonly.svelte-6nznl5 {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-select.is-invalid.svelte-6nznl5 {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-select.is-invalid.svelte-6nznl5:hover {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}.mc-select--s.svelte-6nznl5 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);height:2rem;padding:0 2rem 0 0.5rem;background-position:right 0.5rem center;}
 
-/* stylelint-enable string-no-newline */`};function te(z,s){F(s,!0),G(z,ee);let c=l(s,"id",7),u=l(s,"valueselected",7,""),d=l(s,"placeholder",7),v=l(s,"size",7,"m"),m=l(s,"isvalid",7,!1),g=l(s,"isinvalid",7,!1),h=l(s,"disabled",7,!1),f=l(s,"required",7,!1),b=l(s,"options",7),p=l(s,"onchange",7),w=l(s,"onblur",7),E=H(I(u()));function B(e,t,a){const o=["mc-select"];return e&&o.push("is-valid"),t&&o.push("is-invalid"),a&&o.push(`mc-select--${a}`),o.join(" ")}var r=$();r.__change=function(...e){var t;(t=p())==null||t.apply(this,e)};var C=x(r);{var D=e=>{var t=Y(),a=x(t);j(t),t.value=t.__value="",_(()=>S(a,`-- ${d()??""} --`)),y(e,t)};R(C,e=>{d()&&e(D)})}var L=J(C);return T(L,17,b,U,(e,t)=>{var a=Z(),o=x(a,!0);j(a);var q={};_(()=>{a.disabled=n(t).disabled,S(o,n(t).text),q!==(q=n(t).value)&&(a.value=(a.__value=n(t).value)??"")}),y(e,a)}),j(r),_(e=>{V(r,"id",c()),N(r,1,e,"svelte-14ej849"),r.disabled=h(),r.required=f()},[()=>K(B(m(),g(),v()))]),O("blur",r,function(...e){var t;(t=w())==null||t.apply(this,e)}),W(r,()=>n(E),e=>Q(E,e)),y(z,r),P({get id(){return c()},set id(e){c(e),i()},get valueselected(){return u()},set valueselected(e=""){u(e),i()},get placeholder(){return d()},set placeholder(e){d(e),i()},get size(){return v()},set size(e="m"){v(e),i()},get isvalid(){return m()},set isvalid(e=!1){m(e),i()},get isinvalid(){return g()},set isinvalid(e=!1){g(e),i()},get disabled(){return h()},set disabled(e=!1){h(e),i()},get required(){return f()},set required(e=!1){f(e),i()},get options(){return b()},set options(e){b(e),i()},get onchange(){return p()},set onchange(e){p(e),i()},get onblur(){return w()},set onblur(e){w(e),i()}})}M(["change"]);customElements.define("m-select",A(te,{options:{attribute:"options",type:"Array"},id:{},valueselected:{},placeholder:{},size:{},isvalid:{},isinvalid:{},disabled:{},required:{},onchange:{},onblur:{}},[],[],!0,X));
+/* stylelint-enable string-no-newline */`};function oe(E,o){G(o,!0),H(E,re);let c=s(o,"id",7),v=s(o,"valueselected",7,""),d=s(o,"placeholder",7),u=s(o,"size",7,"m"),m=s(o,"isvalid",7,!1),f=s(o,"isinvalid",7,!1),h=s(o,"disabled",7,!1),b=s(o,"required",7,!1),g=s(o,"options",7),p=s(o,"onchange",7),x=s(o,"onblur",7),C=I(J(v()));function B(e,r,a){const i=["mc-select"];return e&&i.push("is-valid"),r&&i.push("is-invalid"),a&&i.push(`mc-select--${a}`),i.join(" ")}var L={get id(){return c()},set id(e){c(e),t()},get valueselected(){return v()},set valueselected(e=""){v(e),t()},get placeholder(){return d()},set placeholder(e){d(e),t()},get size(){return u()},set size(e="m"){u(e),t()},get isvalid(){return m()},set isvalid(e=!1){m(e),t()},get isinvalid(){return f()},set isinvalid(e=!1){f(e),t()},get disabled(){return h()},set disabled(e=!1){h(e),t()},get required(){return b()},set required(e=!1){b(e),t()},get options(){return g()},set options(e){g(e),t()},get onchange(){return p()},set onchange(e){p(e),t()},get onblur(){return x()},set onblur(e){x(e),t()}},l=ee();l.__change=function(...e){var r;(r=p())==null||r.apply(this,e)};var q=w(l);{var M=e=>{var r=Z(),a=w(r);y(r),r.value=r.__value="",_(()=>j(a,`-- ${d()??""} --`)),z(e,r)};T(q,e=>{d()&&e(M)})}var A=K(q);return U(A,17,g,V,(e,r)=>{var a=$(),i=w(a,!0);y(a);var S={};_(()=>{a.disabled=n(r).disabled,j(i,n(r).text),S!==(S=n(r).value)&&(a.value=(a.__value=n(r).value)??"")}),z(e,a)}),y(l),_(e=>{W(l,"id",c()),O(l,1,e,"svelte-6nznl5"),l.disabled=h(),l.required=b()},[()=>N(B(m(),f(),u()))]),P("blur",l,function(...e){var r;(r=x())==null||r.apply(this,e)}),X(l,()=>n(C),e=>R(C,e)),z(E,l),Q(L)}D(["change"]);customElements.define("m-select",F(oe,{options:{attribute:"options",type:"Array"},id:{},valueselected:{},placeholder:{},size:{},isvalid:{},isinvalid:{},disabled:{},required:{},onchange:{},onblur:{}},[],[],!0,Y));
 //# sourceMappingURL=Select.js.map

package/dist/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-select',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import type { SelectOption, SelectSize } from './select.types';\n\n  interface Props {\n    id: string;\n    name: string;\n    valueselected?: string;\n    placeholder: string;\n    size?: SelectSize;\n    isvalid?: boolean;\n    isinvalid?: boolean;\n    disabled?: boolean;\n    required?: boolean;\n    options: Array<SelectOption>;\n    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    id,\n    valueselected = '',\n    placeholder,\n    size = 'm',\n    isvalid = false,\n    isinvalid = false,\n    disabled = false,\n    required = false,\n    options,\n    onchange,\n    onblur,\n  }: Props = $props();\n  let valueSelected = $state(valueselected);\n\n  function setClasses(isvalid: boolean, isinvalid: boolean, size: SelectSize): string {\n    const classes = ['mc-select'];\n\n    if(isvalid) {\n      classes.push('is-valid');\n    }\n\n    if (isinvalid) {\n      classes.push('is-invalid');\n    }\n    if (size) {\n      classes.push(`mc-select--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<select\n  {id}\n  class={setClasses(isvalid, isinvalid, size)}\n  {disabled}\n  {required}\n  bind:value={valueSelected}\n  {onchange}\n  {onblur}\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each options as opt}\n    <option disabled={opt.disabled} value={opt.value}>\n      {opt.text}\n    </option>\n  {/each}\n</select>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","$.prop","$$props","valueselected","placeholder","size","isvalid","isinvalid","disabled","required","options","onchange","onblur","valueSelected","setClasses","classes","$$render","consequent","$.each","node_1","opt","option_1","$.get","$.set_text","text_1","option_1_value","$.clsx","$.bind_select_value","select","$$value","customElementForwardEvents"],"mappings":";;;;;;;;2DAAA,qBA8BIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,wBAAgB,EAAE,EAClBC,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,eAAO,GAAG,EACVC,kBAAU,EAAK,EACfC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,mBAAW,EAAK,EAChBC,EAAOT,EAAAC,EAAA,UAAA,CAAA,EACPS,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACRU,EAAMX,EAAAC,EAAA,SAAA,CAAA,EAEJW,MAAuBV,EAAa,CAAA,CAAA,EAE/B,SAAAW,EAAWR,EAAkBC,EAAoBF,EAA0B,CAC5E,MAAAU,GAAW,WAAW,EAEzB,OAAAT,GACDS,EAAQ,KAAK,UAAU,EAGrBR,GACFQ,EAAQ,KAAK,YAAY,EAEvBV,GACFU,EAAQ,KAAI,cAAeV,CAAI,EAAA,EAG1BU,EAAQ,KAAK,GAAG,CACzB,4JAcQX,KAAW,EAAA,KAAA,CAAA,kBAFdA,EAAW,GAAAY,EAAAC,CAAA,eAMTC,OAAAA,EAAAC,EAAA,GAAAT,OAAWU,IAAG,0CACDC,EAAA,SAAAC,EAAAF,CAAG,EAAC,SACnBG,EAAAC,EAAAF,EAAAF,CAAG,EAAC,IAAI,EAD4BK,KAAAA,EAAAH,EAAAF,CAAG,EAAC,SAAJC,EAAA,OAAAA,EAAA,QAAAC,EAAAF,CAAG,EAAC,QAAK,iGAd3C,CAAA,IAAAM,EAAAZ,EAAWR,EAAS,EAAAC,IAAWF,EAAI,CAAA,CAAA,CAAA,oEAG9BsB,EAAAC,EAAA,IAAAN,EAAAT,CAAa,OAAbA,EAAagB,CAAA,CAAA,yGApCP,GAAE,wGAEX,IAAG,mDACA,GAAK,uDACH,GAAK,qDACN,GAAK,qDACL,GAAK,qKAuBpB,+NAtDYC"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-select',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import type { SelectOption, SelectSize } from './select.types';\n\n  interface Props {\n    id: string;\n    name: string;\n    valueselected?: string;\n    placeholder: string;\n    size?: SelectSize;\n    isvalid?: boolean;\n    isinvalid?: boolean;\n    disabled?: boolean;\n    required?: boolean;\n    options: Array<SelectOption>;\n    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    id,\n    valueselected = '',\n    placeholder,\n    size = 'm',\n    isvalid = false,\n    isinvalid = false,\n    disabled = false,\n    required = false,\n    options,\n    onchange,\n    onblur,\n  }: Props = $props();\n  let valueSelected = $state(valueselected);\n\n  function setClasses(isvalid: boolean, isinvalid: boolean, size: SelectSize): string {\n    const classes = ['mc-select'];\n\n    if(isvalid) {\n      classes.push('is-valid');\n    }\n\n    if (isinvalid) {\n      classes.push('is-invalid');\n    }\n    if (size) {\n      classes.push(`mc-select--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<select\n  {id}\n  class={setClasses(isvalid, isinvalid, size)}\n  {disabled}\n  {required}\n  bind:value={valueSelected}\n  {onchange}\n  {onblur}\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each options as opt}\n    <option disabled={opt.disabled} value={opt.value}>\n      {opt.text}\n    </option>\n  {/each}\n</select>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","$.prop","$$props","valueselected","placeholder","size","isvalid","isinvalid","disabled","required","options","onchange","onblur","valueSelected","setClasses","classes","$$render","consequent","$.each","node_1","opt","option_1","$.get","$.set_text","text_1","option_1_value","$.clsx","$.bind_select_value","select","$$value","customElementForwardEvents"],"mappings":";;;;;2DAAA,qBA8BIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,wBAAgB,EAAE,EAClBC,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,eAAO,GAAG,EACVC,kBAAU,EAAK,EACfC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,mBAAW,EAAK,EAChBC,EAAOT,EAAAC,EAAA,UAAA,CAAA,EACPS,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACRU,EAAMX,EAAAC,EAAA,SAAA,CAAA,EAEJW,MAAuBV,EAAa,CAAA,CAAA,EAE/B,SAAAW,EAAWR,EAAkBC,EAAoBF,EAA0B,CAC5E,MAAAU,GAAW,WAAW,EAEzB,OAAAT,GACDS,EAAQ,KAAK,UAAU,EAGrBR,GACFQ,EAAQ,KAAK,YAAY,EAEvBV,GACFU,EAAQ,KAAI,cAAeV,CAAI,EAAA,EAG1BU,EAAQ,KAAK,GAAG,CACzB,qGA5BkB,GAAE,wGAEX,IAAG,mDACA,GAAK,uDACH,GAAK,qDACN,GAAK,qDACL,GAAK,6TAoCVX,KAAW,EAAA,KAAA,CAAA,kBAFdA,EAAW,GAAAY,EAAAC,CAAA,eAMTC,OAAAA,EAAAC,EAAA,GAAAT,OAAWU,IAAG,0CACDC,EAAA,SAAAC,EAAAF,CAAG,EAAC,SACnBG,EAAAC,EAAAF,EAAAF,CAAG,EAAC,IAAI,EAD4BK,KAAAA,EAAAH,EAAAF,CAAG,EAAC,SAAJC,EAAA,OAAAA,EAAA,QAAAC,EAAAF,CAAG,EAAC,QAAK,gGAd3C,CAAA,IAAAM,EAAAZ,EAAWR,EAAO,EAAEC,EAAS,EAAEF,EAAI,CAAA,CAAA,CAAA,oEAG9BsB,EAAAC,EAAA,IAAAN,EAAAT,CAAa,OAAbA,EAAagB,CAAA,CAAA,aAP3B,+NAtDYC"}

package/dist/components/select/Select.svelte

@@ -85,62 +85,59 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 /* stylelint-disable string-no-newline */
 .mc-select {
   appearance: none;
   font-family: inherit;
   transition: box-shadow 200ms ease;
-  font-size: 1rem;
-  line-height: 1.3;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-s, 1.3);
   height: 3rem;
   padding: 0 3rem 0 0.75rem;
   background-position: right 1rem center;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
-  border: 1px solid #666666;
-  border-radius: 0.25rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--radius-s, 0.25rem);
   display: block;
   width: 100%;
-  color: #000000;
-  background-color: #ffffff;
+  color: var(--forms-color-text-default, #000000);
+  background-color: var(--forms-color-background-default, #ffffff);
   text-overflow: ellipsis;
   background-repeat: no-repeat;
   background-size: 1rem;
 }
 .mc-select:hover {
-  border-color: #4d4d4d;
-  box-shadow: 0 0 0 1px #4d4d4d;
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-select:focus {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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-select:disabled {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
-  background-color: #d9d9d9;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   border-color: transparent;
   cursor: not-allowed;
   box-shadow: none;
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
 }
 .mc-select--readonly {
-  border-color: #cccccc;
+  border-color: var(--forms-color-border-read-only, #cccccc);
   pointer-events: none;
 }
 .mc-select.is-invalid {
-  border-color: #ea302d;
-  box-shadow: 0 0 0 1px #ea302d;
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-select.is-invalid:hover {
-  border-color: #c61112;
-  box-shadow: 0 0 0 1px #c61112;
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);
 }
 .mc-select--s {
-  font-size: 0.875rem;
-  line-height: 1.3;
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
   height: 2rem;
   padding: 0 2rem 0 0.5rem;
   background-position: right 0.5rem center;

package/dist/components/statusbadge/StatusBadge.js

@@ -1,7 +1,4 @@
-import{c as u,p as n,a as i,b as f,f as m,d as o,s as g,t as p,h as v,i as h,j as _,r as d,e as k}from"../../custom-element.js";import{s as w}from"../../slot.js";import{S as x}from"../statusdot/StatusDot.js";var y=m('<div><!> <span class="mc-status-badge__label svelte-2arfbl"><!></span></div>');const S={hash:"svelte-2arfbl",code:`/**
+import{c as b,p as g,a as i,b as f,f as m,d,s as v,t as p,h,i as y,j as k,r as c,e as w}from"../../custom-element.js";import{s as _}from"../../slot.js";import{S as x}from"../statusdot/StatusDot.js";var S=m('<div><!> <span class="mc-status-badge__label svelte-1oceydf"><!></span></div>');const z={hash:"svelte-1oceydf",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-status-badge.svelte-2arfbl {background-color:#e1f3f9;border:1px solid #a7d9ed;border-radius:0.25rem;font-weight:400;font-size:0.875rem;display:inline-flex;align-items:center;gap:0.25rem;padding-right:0.5rem;padding-left:0.5rem;text-transform:lowercase;white-space:nowrap;min-height:1.5rem;}.mc-status-badge__label.svelte-2arfbl {color:#000000;}.mc-status-badge__label.svelte-2arfbl::first-letter {text-transform:uppercase;}.mc-status-badge--success.svelte-2arfbl {background-color:#ebf5de;border:1px solid #c5e39e;}.mc-status-badge--error.svelte-2arfbl {background-color:#fdeaea;border:1px solid #f8bcbb;}.mc-status-badge--warning.svelte-2arfbl {background-color:#fdf1e8;border:1px solid #f8d2b3;}.mc-status-badge--neutral.svelte-2arfbl {background-color:#f2f2f2;border:1px solid #cccccc;}.mc-status-dot.svelte-2arfbl {background-color:#0b96cc;height:0.5rem;width:0.5rem;border-radius:100%;display:inline-block;}.mc-status-dot--s.svelte-2arfbl {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-2arfbl {height:1rem;width:1rem;}.mc-status-dot--success.svelte-2arfbl {background-color:#3f9e10;}.mc-status-dot--error.svelte-2arfbl {background-color:#ea302d;}.mc-status-dot--warning.svelte-2arfbl {background-color:#ea7315;}.mc-status-dot--neutral.svelte-2arfbl {background-color:#808080;}`};function D(a,s){n(s,!0),i(a,S);let e=f(s,"status",7);var t=y(),r=o(t);x(r,{get status(){return e()},size:"m"});var l=g(r,2),c=o(l);return w(c,s,"default",{}),d(l),d(t),p(()=>k(t,1,`mc-status-badge ${e()?`mc-status-badge--${e()}`:""}`,"svelte-2arfbl")),v(a,t),h({get status(){return e()},set status(b){e(b),_()}})}customElements.define("m-status-badge",u(D,{status:{}},["default"],[],!0));
+ */.mc-status-badge.svelte-1oceydf {background-color:var(--status-badge-color-background-information, #e1f3f9);border:var(--border-s, 1px) solid var(--status-badge-color-border-information, #a7d9ed);border-radius:var(--radius-s, 0.25rem);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-100, 0.875rem);display:inline-flex;align-items:center;gap:0.25rem;padding-right:0.5rem;padding-left:0.5rem;text-transform:lowercase;white-space:nowrap;min-height:1.5rem;}.mc-status-badge__label.svelte-1oceydf {color:var(--status-badge-color-label, #000000);}.mc-status-badge__label.svelte-1oceydf::first-letter {text-transform:uppercase;}.mc-status-badge--success.svelte-1oceydf {background-color:var(--status-badge-color-background-success, #ebf5de);border:var(--border-s, 1px) solid var(--status-badge-color-border-success, #c5e39e);}.mc-status-badge--error.svelte-1oceydf {background-color:var(--status-badge-color-background-error, #fdeaea);border:var(--border-s, 1px) solid var(--status-badge-color-border-error, #f8bcbb);}.mc-status-badge--warning.svelte-1oceydf {background-color:var(--status-badge-color-background-warning, #fdf1e8);border:var(--border-s, 1px) solid var(--status-badge-color-border-warning, #f8d2b3);}.mc-status-badge--neutral.svelte-1oceydf {background-color:var(--status-badge-color-background-neutral, #f2f2f2);border:var(--border-s, 1px) solid var(--status-badge-color-border-neutral, #cccccc);}.mc-status-dot.svelte-1oceydf {background-color:var(--status-dot-color-background-information, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--radius-full, 100%);display:inline-block;}.mc-status-dot--s.svelte-1oceydf {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-1oceydf {height:1rem;width:1rem;}.mc-status-dot--success.svelte-1oceydf {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-1oceydf {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-1oceydf {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-1oceydf {background-color:var(--status-dot-color-background-neutral, #808080);}`};function D(a,t){g(t,!0),i(a,z);let e=f(t,"status",7);var l={get status(){return e()},set status(n){e(n),k()}},r=S(),s=d(r);x(s,{get status(){return e()},size:"m"});var o=v(s,2),u=d(o);return _(u,t,"default",{}),c(o),c(r),p(()=>w(r,1,`mc-status-badge ${e()?`mc-status-badge--${e()}`:""}`,"svelte-1oceydf")),h(a,r),y(l)}customElements.define("m-status-badge",b(D,{status:{}},["default"],[],!0));
 //# sourceMappingURL=StatusBadge.js.map

package/dist/components/statusbadge/StatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.js","sources":["../../../src/components/statusbadge/StatusBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-badge' }} />\n\n<script lang=\"ts\">\n  import type { StatusBadgeStyle } from './StatusBadge.types';\n  import StatusDot from '../statusdot/StatusDot.svelte';\n\n  interface Props {\n    status: StatusBadgeStyle;\n  }\n\n  let { status }: Props = $props();\n</script>\n\n<div class=\"mc-status-badge {status ? `mc-status-badge--${status}` : ''}\">\n  <StatusDot {status} size=\"m\" />\n  <span class=\"mc-status-badge__label\"><slot /></span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-badge';\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["status","$.prop","$$props"],"mappings":";;;;;myCAAA,oBAUQA,EAAMC,EAAAC,EAAA,SAAA,CAAA,oJAGeF,EAAM,EAAA,oBAAuBA,EAAM,CAAA,GAAK,EAAE,GAAA,eAAA,CAAA,8DAFvE"}
+{"version":3,"file":"StatusBadge.js","sources":["../../../src/components/statusbadge/StatusBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-badge' }} />\n\n<script lang=\"ts\">\n  import type { StatusBadgeStyle } from './StatusBadge.types';\n  import StatusDot from '../statusdot/StatusDot.svelte';\n\n  interface Props {\n    status: StatusBadgeStyle;\n  }\n\n  let { status }: Props = $props();\n</script>\n\n<div class=\"mc-status-badge {status ? `mc-status-badge--${status}` : ''}\">\n  <StatusDot {status} size=\"m\" />\n  <span class=\"mc-status-badge__label\"><slot /></span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-badge';\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["status","$.prop","$$props"],"mappings":";;wpEAAA,oBAUQA,EAAMC,EAAAC,EAAA,SAAA,CAAA,yMAGeF,EAAM,EAAA,oBAAuBA,EAAM,CAAA,GAAK,EAAE,GAAA,gBAAA,CAAA,aAFvE"}

package/dist/components/statusbadge/StatusBadge.svelte

@@ -19,15 +19,12 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-status-badge {
-  background-color: #e1f3f9;
-  border: 1px solid #a7d9ed;
-  border-radius: 0.25rem;
-  font-weight: 400;
-  font-size: 0.875rem;
+  background-color: var(--status-badge-color-background-information, #e1f3f9);
+  border: var(--border-s, 1px) solid var(--status-badge-color-border-information, #a7d9ed);
+  border-radius: var(--radius-s, 0.25rem);
+  font-weight: var(--font-weight-regular, 400);
+  font-size: var(--font-size-100, 0.875rem);
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
@@ -38,33 +35,33 @@
   min-height: 1.5rem;
 }
 .mc-status-badge__label {
-  color: #000000;
+  color: var(--status-badge-color-label, #000000);
 }
 .mc-status-badge__label::first-letter {
   text-transform: uppercase;
 }
 .mc-status-badge--success {
-  background-color: #ebf5de;
-  border: 1px solid #c5e39e;
+  background-color: var(--status-badge-color-background-success, #ebf5de);
+  border: var(--border-s, 1px) solid var(--status-badge-color-border-success, #c5e39e);
 }
 .mc-status-badge--error {
-  background-color: #fdeaea;
-  border: 1px solid #f8bcbb;
+  background-color: var(--status-badge-color-background-error, #fdeaea);
+  border: var(--border-s, 1px) solid var(--status-badge-color-border-error, #f8bcbb);
 }
 .mc-status-badge--warning {
-  background-color: #fdf1e8;
-  border: 1px solid #f8d2b3;
+  background-color: var(--status-badge-color-background-warning, #fdf1e8);
+  border: var(--border-s, 1px) solid var(--status-badge-color-border-warning, #f8d2b3);
 }
 .mc-status-badge--neutral {
-  background-color: #f2f2f2;
-  border: 1px solid #cccccc;
+  background-color: var(--status-badge-color-background-neutral, #f2f2f2);
+  border: var(--border-s, 1px) solid var(--status-badge-color-border-neutral, #cccccc);
 }
 
 .mc-status-dot {
-  background-color: #0b96cc;
+  background-color: var(--status-dot-color-background-information, #0b96cc);
   height: 0.5rem;
   width: 0.5rem;
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
   display: inline-block;
 }
 .mc-status-dot--s {
@@ -76,14 +73,14 @@
   width: 1rem;
 }
 .mc-status-dot--success {
-  background-color: #3f9e10;
+  background-color: var(--status-dot-color-background-success, #3f9e10);
 }
 .mc-status-dot--error {
-  background-color: #ea302d;
+  background-color: var(--status-dot-color-background-error, #ea302d);
 }
 .mc-status-dot--warning {
-  background-color: #ea7315;
+  background-color: var(--status-dot-color-background-warning, #ea7315);
 }
 .mc-status-dot--neutral {
-  background-color: #808080;
+  background-color: var(--status-dot-color-background-neutral, #808080);
 }</style>

package/dist/components/statusdot/StatusDot.js

@@ -1,7 +1,4 @@
-import{c as r,p as c,a as n,b as d,f as l,t as m,h,i as v,j as i,e as f}from"../../custom-element.js";var g=l("<div></div>");const p={hash:"svelte-1di8xou",code:`/**
+import{c as l,p as n,a as i,b as c,f as m,t as v,h as p,i as g,j as u,e as h}from"../../custom-element.js";var b=m("<div></div>");const f={hash:"svelte-14acsp3",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-status-dot.svelte-1di8xou {background-color:#0b96cc;height:0.5rem;width:0.5rem;border-radius:100%;display:inline-block;}.mc-status-dot--s.svelte-1di8xou {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-1di8xou {height:1rem;width:1rem;}.mc-status-dot--success.svelte-1di8xou {background-color:#3f9e10;}.mc-status-dot--error.svelte-1di8xou {background-color:#ea302d;}.mc-status-dot--warning.svelte-1di8xou {background-color:#ea7315;}.mc-status-dot--neutral.svelte-1di8xou {background-color:#808080;}`};function x(a,s){c(s,!0),n(a,p);let t=d(s,"size",7,"m"),e=d(s,"status",7,"info");var u=g();return m(()=>f(u,1,`mc-status-dot ${t()?`mc-status-dot--${t()}`:""}  ${e()?`mc-status-dot--${e()}`:""}`,"svelte-1di8xou")),h(a,u),v({get size(){return t()},set size(o="m"){t(o),i()},get status(){return e()},set status(o="info"){e(o),i()}})}customElements.define("m-status-dot",r(x,{size:{},status:{}},[],[],!0));export{x as S};
+ */.mc-status-dot.svelte-14acsp3 {background-color:var(--status-dot-color-background-information, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--radius-full, 100%);display:inline-block;}.mc-status-dot--s.svelte-14acsp3 {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-14acsp3 {height:1rem;width:1rem;}.mc-status-dot--success.svelte-14acsp3 {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-14acsp3 {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-14acsp3 {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-14acsp3 {background-color:var(--status-dot-color-background-neutral, #808080);}`};function k(o,a){n(a,!0),i(o,f);let t=c(a,"size",7,"m"),s=c(a,"status",7,"info");var d={get size(){return t()},set size(e="m"){t(e),u()},get status(){return s()},set status(e="info"){s(e),u()}},r=b();return v(()=>h(r,1,`mc-status-dot ${t()?`mc-status-dot--${t()}`:""}  ${s()?`mc-status-dot--${s()}`:""}`,"svelte-14acsp3")),p(o,r),g(d)}customElements.define("m-status-dot",l(k,{size:{},status:{}},[],[],!0));export{k as S};
 //# sourceMappingURL=StatusDot.js.map

package/dist/components/statusdot/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../../../src/components/statusdot/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-dot' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.\n   */\n  interface Props {\n    /**\n     * Allows to define the status dot type.\n     */\n    status: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n    /**\n     * Determines the size of the status dot.\n     */\n\t\tsize: 's' | 'm' | 'l'\n\t}\n\n  let { size = 'm', status = 'info'}: Props = $props();\n</script>\n\n<div\n  class=\"mc-status-dot {size ? `mc-status-dot--${size}` : ''}  {status\n    ? `mc-status-dot--${status}`\n    : ''}\"\n></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["size","status"],"mappings":";;;;;ihBAAA,gBAiBQ,IAAAA,eAAO,GAAG,EAAEC,iBAAS,MAAM,gDAIXD,IAAI,kBAAqBA,GAAS,GAAA,EAAE,KAAIC,IACxC,kBAAAA,MAClB,EAAE,GAAA,gBAAA,CAAA,8CANO,IAAG,iDAAW,OAAM,YACnC"}
+{"version":3,"file":"StatusDot.js","sources":["../../../src/components/statusdot/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-dot' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.\n   */\n  interface Props {\n    /**\n     * Allows to define the status dot type.\n     */\n    status: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n    /**\n     * Determines the size of the status dot.\n     */\n\t\tsize: 's' | 'm' | 'l'\n\t}\n\n  let { size = 'm', status = 'info'}: Props = $props();\n</script>\n\n<div\n  class=\"mc-status-dot {size ? `mc-status-dot--${size}` : ''}  {status\n    ? `mc-status-dot--${status}`\n    : ''}\"\n></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["size","status"],"mappings":";;mwBAAA,gBAiBQ,IAAAA,eAAO,GAAG,EAAEC,iBAAS,MAAM,2CAApB,IAAG,iDAAW,OAAM,sDAIXD,IAAI,kBAAqBA,GAAI,GAAK,EAAE,KAAIC,IAAA,kBACxCA,MAClB,EAAE,GAAA,gBAAA,CAAA,aALR"}

package/dist/components/statusdot/StatusDot.svelte

@@ -27,14 +27,11 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-status-dot {
-  background-color: #0b96cc;
+  background-color: var(--status-dot-color-background-information, #0b96cc);
   height: 0.5rem;
   width: 0.5rem;
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
   display: inline-block;
 }
 .mc-status-dot--s {
@@ -46,14 +43,14 @@
   width: 1rem;
 }
 .mc-status-dot--success {
-  background-color: #3f9e10;
+  background-color: var(--status-dot-color-background-success, #3f9e10);
 }
 .mc-status-dot--error {
-  background-color: #ea302d;
+  background-color: var(--status-dot-color-background-error, #ea302d);
 }
 .mc-status-dot--warning {
-  background-color: #ea7315;
+  background-color: var(--status-dot-color-background-warning, #ea7315);
 }
 .mc-status-dot--neutral {
-  background-color: #808080;
+  background-color: var(--status-dot-color-background-neutral, #808080);
 }</style>

package/dist/components/statusnotification/StatusNotification.js

@@ -1,11 +1,8 @@
-import{F as w,G as U,H,I as me,J as ge,K as ve,L as he,N as _e,M as be,O as ze,P as we,Q as xe,R as X,S as Y,T as ye,U as Ne,V as pe,W as Ce,c as B,p as D,b as i,q as j,t as k,h as m,i as F,j as n,e as E,u as G,n as ke,a as Ee,v as Se,l as Me,f as J,m as Ae,d as p,s as R,r as C,A,B as L,X as Le,g as Te}from"../../custom-element.js";import{s as Z}from"../../snippet.js";import{i as T}from"../../if.js";import{s as $}from"../../slot.js";import{c as Be,C as De}from"../../Cross20.js";import"../../legacy.js";import{s as x,a as I}from"../../attributes.js";function Fe(g,t,r,l,o,f){let d=w;w&&U();var a,e,u=null;w&&H.nodeType===me&&(u=H,U());var y=w?H:g,h;ge(()=>{const v=t()||null;var P=v==="svg"?_e:null;v!==a&&(h&&(v===null?Ne(h,()=>{h=null,e=null}):v===e?pe(h):Ce(h)),v&&v!==e&&(h=he(()=>{if(u=w?u:P?document.createElementNS(P,v):document.createElement(v),be(u,u),l){w&&ze(v)&&u.append(document.createComment(""));var z=w?we(u):u.appendChild(xe());w&&(z===null?X(!1):Y(z)),l(u,z)}ye.nodes_end=u,y.before(u)})),a=v,a&&(e=a))},ve),d&&(X(!0),Y(y))}var Pe=j('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5M3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16m13-2.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1M16 12a1.333 1.333 0 1 0 0-2.667A1.333 1.333 0 0 0 16 12"></path></svg>');function ee(g,t){D(t,!1);let r=i(t,"id",12,void 0),l=i(t,"style",12,void 0),o=i(t,"className",12,void 0),f=i(t,"fill",12,void 0),d=i(t,"size",12,"2rem");var a=Pe();return k(()=>{x(a,"id",r()),I(a,l()),E(a,0,G(o())),x(a,"fill",f())}),m(g,a),F({get id(){return r()},set id(e){r(e),n()},get style(){return l()},set style(e){l(e),n()},get className(){return o()},set className(e){o(e),n()},get fill(){return f()},set fill(e){f(e),n()},get size(){return d()},set size(e){d(e),n()}})}customElements.define("info-circle-32",B(ee,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Re=j('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5M3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16m13-6.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1m0 13A1.333 1.333 0 1 0 16 20a1.333 1.333 0 0 0 0 2.667"></path></svg>');function te(g,t){D(t,!1);let r=i(t,"id",12,void 0),l=i(t,"style",12,void 0),o=i(t,"className",12,void 0),f=i(t,"fill",12,void 0),d=i(t,"size",12,"2rem");var a=Re();return k(()=>{x(a,"id",r()),I(a,l()),E(a,0,G(o())),x(a,"fill",f())}),m(g,a),F({get id(){return r()},set id(e){r(e),n()},get style(){return l()},set style(e){l(e),n()},get className(){return o()},set className(e){o(e),n()},get fill(){return f()},set fill(e){f(e),n()},get size(){return d()},set size(e){d(e),n()}})}customElements.define("warning-circle-32",B(te,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var je=j('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m-3.293 8.293a1 1 0 0 0-1.414 1.414L14.586 16l-3.293 3.293a1 1 0 0 0 1.414 1.414L16 17.414l3.293 3.293a1 1 0 0 0 1.414-1.414L17.414 16l3.293-3.293a1 1 0 0 0-1.414-1.414L16 14.586z"></path></svg>');function se(g,t){D(t,!1);let r=i(t,"id",12,void 0),l=i(t,"style",12,void 0),o=i(t,"className",12,void 0),f=i(t,"fill",12,void 0),d=i(t,"size",12,"2rem");var a=je();return k(()=>{x(a,"id",r()),I(a,l()),E(a,0,G(o())),x(a,"fill",f())}),m(g,a),F({get id(){return r()},set id(e){r(e),n()},get style(){return l()},set style(e){l(e),n()},get className(){return o()},set className(e){o(e),n()},get fill(){return f()},set fill(e){f(e),n()},get size(){return d()},set size(e){d(e),n()}})}customElements.define("cross-circle-32",B(se,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Ge=j('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m6.707 10.374a1 1 0 0 0-1.414-1.414l-6.626 6.626-3.293-3.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0z"></path></svg>');function ae(g,t){D(t,!1);let r=i(t,"id",12,void 0),l=i(t,"style",12,void 0),o=i(t,"className",12,void 0),f=i(t,"fill",12,void 0),d=i(t,"size",12,"2rem");var a=Ge();return k(()=>{x(a,"id",r()),I(a,l()),E(a,0,G(o())),x(a,"fill",f())}),m(g,a),F({get id(){return r()},set id(e){r(e),n()},get style(){return l()},set style(e){l(e),n()},get className(){return o()},set className(e){o(e),n()},get fill(){return f()},set fill(e){f(e),n()},get size(){return d()},set size(e){d(e),n()}})}customElements.define("check-circle-32",B(ae,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Ie=J('<div class="mc-status-notification__footer svelte-11acz86"><!></div>'),Oe=J('<button class="mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost svelte-11acz86" aria-label="Close"><!></button>'),Ve=J('<section role="status"><span class="mc-status-notification__icon svelte-11acz86" aria-hidden="true"><!></span> <div class="mc-status-notification__content svelte-11acz86"><!> <p class="mc-status-notification__message svelte-11acz86"><!></p> <!></div> <!></section>');const We={hash:"svelte-11acz86",code:`/**
+import{F as y,G as X,H as J,I as vt,J as bt,K as gt,L as ht,N as _t,M as yt,O as zt,P as wt,Q as xt,R as Y,S as Z,T as kt,U as pt,V as Nt,W as Ct,c as B,p as F,b as o,q as G,t as N,h as m,i as P,j as i,e as C,u as I,n as Et,a as St,v as Mt,l as At,f as K,m as Lt,d as k,s as D,r as p,A,B as L,X as Tt,g as Bt}from"../../custom-element.js";import{s as $}from"../../snippet.js";import{i as T}from"../../if.js";import{s as tt}from"../../slot.js";import{c as Ft,C as Pt}from"../../Cross20.js";import"../../legacy.js";import{s as z,a as O}from"../../attributes.js";function Rt(v,e,l,r,n,d){let u=y;y&&X();var f,a,t=null;y&&J.nodeType===vt&&(t=J,X());var w=y?J:v,g;bt(()=>{const b=e()||null;var R=b==="svg"?_t:null;b!==f&&(g&&(b===null?pt(g,()=>{g=null,a=null}):b===a?Nt(g):Ct(g)),b&&b!==a&&(g=ht(()=>{if(t=y?t:R?document.createElementNS(R,b):document.createElement(b),yt(t,t),r){y&&zt(b)&&t.append(document.createComment(""));var E=y?wt(t):t.appendChild(xt());y&&(E===null?Y(!1):Z(E)),r(t,E)}kt.nodes_end=t,w.before(t)})),f=b,f&&(a=f))},gt),u&&(Y(!0),Z(w))}var jt=G('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5M3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16m13-2.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1M16 12a1.333 1.333 0 1 0 0-2.667A1.333 1.333 0 0 0 16 12"></path></svg>');function et(v,e){F(e,!1);let l=o(e,"id",12,void 0),r=o(e,"style",12,void 0),n=o(e,"className",12,void 0),d=o(e,"fill",12,void 0),u=o(e,"size",12,"2rem");var f={get id(){return l()},set id(t){l(t),i()},get style(){return r()},set style(t){r(t),i()},get className(){return n()},set className(t){n(t),i()},get fill(){return d()},set fill(t){d(t),i()},get size(){return u()},set size(t){u(t),i()}},a=jt();return N(()=>{z(a,"id",l()),O(a,r()),C(a,0,I(n())),z(a,"fill",d())}),m(v,a),P(f)}customElements.define("info-circle-32",B(et,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Dt=G('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5M3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16m13-6.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1m0 13A1.333 1.333 0 1 0 16 20a1.333 1.333 0 0 0 0 2.667"></path></svg>');function st(v,e){F(e,!1);let l=o(e,"id",12,void 0),r=o(e,"style",12,void 0),n=o(e,"className",12,void 0),d=o(e,"fill",12,void 0),u=o(e,"size",12,"2rem");var f={get id(){return l()},set id(t){l(t),i()},get style(){return r()},set style(t){r(t),i()},get className(){return n()},set className(t){n(t),i()},get fill(){return d()},set fill(t){d(t),i()},get size(){return u()},set size(t){u(t),i()}},a=Dt();return N(()=>{z(a,"id",l()),O(a,r()),C(a,0,I(n())),z(a,"fill",d())}),m(v,a),P(f)}customElements.define("warning-circle-32",B(st,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Gt=G('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m-3.293 8.293a1 1 0 0 0-1.414 1.414L14.586 16l-3.293 3.293a1 1 0 0 0 1.414 1.414L16 17.414l3.293 3.293a1 1 0 0 0 1.414-1.414L17.414 16l3.293-3.293a1 1 0 0 0-1.414-1.414L16 14.586z"></path></svg>');function at(v,e){F(e,!1);let l=o(e,"id",12,void 0),r=o(e,"style",12,void 0),n=o(e,"className",12,void 0),d=o(e,"fill",12,void 0),u=o(e,"size",12,"2rem");var f={get id(){return l()},set id(t){l(t),i()},get style(){return r()},set style(t){r(t),i()},get className(){return n()},set className(t){n(t),i()},get fill(){return d()},set fill(t){d(t),i()},get size(){return u()},set size(t){u(t),i()}},a=Gt();return N(()=>{z(a,"id",l()),O(a,r()),C(a,0,I(n())),z(a,"fill",d())}),m(v,a),P(f)}customElements.define("cross-circle-32",B(at,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var It=G('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32px" height="32px"><path fill-rule="evenodd" d="M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m6.707 10.374a1 1 0 0 0-1.414-1.414l-6.626 6.626-3.293-3.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0z"></path></svg>');function ot(v,e){F(e,!1);let l=o(e,"id",12,void 0),r=o(e,"style",12,void 0),n=o(e,"className",12,void 0),d=o(e,"fill",12,void 0),u=o(e,"size",12,"2rem");var f={get id(){return l()},set id(t){l(t),i()},get style(){return r()},set style(t){r(t),i()},get className(){return n()},set className(t){n(t),i()},get fill(){return d()},set fill(t){d(t),i()},get size(){return u()},set size(t){u(t),i()}},a=It();return N(()=>{z(a,"id",l()),O(a,r()),C(a,0,I(n())),z(a,"fill",d())}),m(v,a),P(f)}customElements.define("check-circle-32",B(ot,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var Ot=K('<div class="mc-status-notification__footer svelte-18b6syz"><!></div>'),Vt=K('<button class="mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost svelte-18b6syz" aria-label="Close"><!></button>'),Wt=K('<section role="status"><span class="mc-status-notification__icon svelte-18b6syz" aria-hidden="true"><!></span> <div class="mc-status-notification__content svelte-18b6syz"><!> <p class="mc-status-notification__message svelte-18b6syz"><!></p> <!></div> <!></section>');const qt={hash:"svelte-18b6syz",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-11acz86 {color:#ffffff;background-color:#464e63;font-weight:600;padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius: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.svelte-11acz86:hover {background-color:#343b4c;}.mc-button.svelte-11acz86:active {background-color:#242938;}.mc-button.svelte-11acz86:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button.svelte-11acz86:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button.svelte-11acz86:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--s.svelte-11acz86 {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--ghost.svelte-11acz86 {color:#242938;background-color:rgba(255, 255, 255, 0.01);}.mc-button--ghost.svelte-11acz86:hover {background-color:rgba(70, 78, 99, 0.1);}.mc-button--ghost.svelte-11acz86:active {background-color:rgba(70, 78, 99, 0.2);}.mc-button--ghost.svelte-11acz86:disabled {background-color:#d9d9d9;border-color:transparent;color:#737373;cursor:not-allowed;}.mc-button--icon-button.svelte-11acz86 {border-radius:100%;padding:0;}
+ */.mc-button.svelte-18b6syz {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-18b6syz:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-18b6syz:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-18b6syz: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-18b6syz {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-18b6syz {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 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.svelte-18b6syz: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-18b6syz: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-18b6syz {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--ghost.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-18b6syz: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-18b6syz {border-radius:var(--radius-full, 100%);padding:0;}
 
 /* create columns */
 /* create columns */
-/* create custom named columns with custom content */.mc-status-notification.svelte-11acz86 {border-radius:0.5rem;display:flex;flex-flow:row wrap;align-items:flex-start;background:#e1f3f9;box-shadow:inset 0 0 0 1px #3facd7;position:relative;box-sizing:border-box;color:#000000;}.mc-status-notification__icon.svelte-11acz86 {width:2rem;height:2rem;margin:0.75rem;fill:#0b96cc;}.mc-status-notification__content.svelte-11acz86 {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-status-notification__title.svelte-11acz86, .mc-status-notification__message.svelte-11acz86 {line-height:1.3;margin-block:0;}.mc-status-notification__title.svelte-11acz86 {font-weight:600;font-size:1rem;margin-block-end:0.25rem;}.mc-status-notification__message.svelte-11acz86 {font-size:0.875rem;}.mc-status-notification__footer.svelte-11acz86 {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-status-notification--success.svelte-11acz86 {background:#ebf5de;box-shadow:inset 0 0 0 1px #78be20;}.mc-status-notification--success.svelte-11acz86 .mc-status-notification__icon:where(.svelte-11acz86) {fill:#3f9e10;}.mc-status-notification--warning.svelte-11acz86 {background:#fdf1e8;box-shadow:inset 0 0 0 1px #ef934a;}.mc-status-notification--warning.svelte-11acz86 .mc-status-notification__icon:where(.svelte-11acz86) {fill:#ea7315;}.mc-status-notification--error.svelte-11acz86 {background:#fdeaea;box-shadow:inset 0 0 0 1px #ef5f5c;}.mc-status-notification--error.svelte-11acz86 .mc-status-notification__icon:where(.svelte-11acz86) {fill:#ea302d;}.mc-status-notification-closable__close.svelte-11acz86 {margin:0.25rem;}`};function qe(g,t){D(t,!0),Ee(g,We);let r=i(t,"title",7),l=i(t,"children",7),o=i(t,"status",7,"information"),f=i(t,"closable",7,!1),d=i(t,"hasfooter",7,!1),a=i(t,"footer",7),e=i(t,"closelabel",7,"Close"),u=i(t,"titletag",7,"h2"),y=i(t,"onclose",7);const h=[{status:"information",component:ee},{status:"success",component:ae},{status:"warning",component:te},{status:"error",component:se}];function v(s){return h.find(c=>c.status===s)||h[0]}let P=Se(Me(v(o())));var z=Ve();let K;var O=p(z),ie=p(O);Be(ie,()=>Ae(P).component,(s,c)=>{c(s,{class:"mc-status-notification__icon","aria-hidden":"true"})}),C(O);var V=R(O,2),Q=p(V);{var ne=s=>{var c=A(),_=L(c);Fe(_,u,!1,(S,N)=>{E(S,0,"mc-status-notification__title svelte-11acz86");var b=Le();k(()=>Te(b,r())),m(N,b)}),m(s,c)};T(Q,s=>{r()&&s(ne)})}var W=R(Q,2),le=p(W);{var oe=s=>{var c=A(),_=L(c);Z(_,l),m(s,c)},re=s=>{var c=A(),_=L(c);$(_,t,"default",{}),m(s,c)};T(le,s=>{l()?s(oe):s(re,!1)})}C(W);var ce=R(W,2);{var fe=s=>{var c=Ie(),_=p(c);{var S=b=>{var M=A(),q=L(M);Z(q,a),m(b,M)},N=b=>{var M=A(),q=L(M);$(q,t,"footer",{}),m(b,M)};T(_,b=>{a()?b(S):b(N,!1)})}C(c),m(s,c)};T(ce,s=>{d()&&s(fe)})}C(V);var de=R(V,2);{var ue=s=>{var c=Oe();c.__click=function(...S){var N;(N=y())==null||N.apply(this,S)};var _=p(c);De(_,{class:"mc-status-notification-closable__icon","aria-hidden":"true"}),C(c),m(s,c)};T(de,s=>{f()&&s(ue)})}return C(z),k(s=>K=E(z,1,"mc-status-notification svelte-11acz86",null,K,s),[()=>({"mc-status-notification--success":o()==="success","mc-status-notification--warning":o()==="warning","mc-status-notification--error":o()==="error"})]),m(g,z),F({get title(){return r()},set title(s){r(s),n()},get children(){return l()},set children(s){l(s),n()},get status(){return o()},set status(s="information"){o(s),n()},get closable(){return f()},set closable(s=!1){f(s),n()},get hasfooter(){return d()},set hasfooter(s=!1){d(s),n()},get footer(){return a()},set footer(s){a(s),n()},get closelabel(){return e()},set closelabel(s="Close"){e(s),n()},get titletag(){return u()},set titletag(s="h2"){u(s),n()},get onclose(){return y()},set onclose(s){y(s),n()}})}ke(["click"]);customElements.define("m-status-notification",B(qe,{title:{},children:{},status:{},closable:{},hasfooter:{},footer:{},closelabel:{},titletag:{},onclose:{}},["default","footer"],[],!0));
+/* create custom named columns with custom content */.mc-status-notification.svelte-18b6syz {border-radius:var(--radius-m, 0.5rem);display:flex;flex-flow:row wrap;align-items:flex-start;background:var(--status-notification-color-background-information, #e1f3f9);box-shadow:inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000);}.mc-status-notification__icon.svelte-18b6syz {width:2rem;height:2rem;margin:0.75rem;fill:var(--status-notification-color-icon-information, #0b96cc);}.mc-status-notification__content.svelte-18b6syz {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-status-notification__title.svelte-18b6syz, .mc-status-notification__message.svelte-18b6syz {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-status-notification__title.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-status-notification__message.svelte-18b6syz {font-size:var(--font-size-100, 0.875rem);}.mc-status-notification__footer.svelte-18b6syz {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-status-notification--success.svelte-18b6syz {background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-success, #78be20);}.mc-status-notification--success.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-success, #3f9e10);}.mc-status-notification--warning.svelte-18b6syz {background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-warning, #ef934a);}.mc-status-notification--warning.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-warning, #ea7315);}.mc-status-notification--error.svelte-18b6syz {background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-error, #ef5f5c);}.mc-status-notification--error.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-error, #ea302d);}.mc-status-notification-closable__close.svelte-18b6syz {margin:0.25rem;}`};function Ht(v,e){F(e,!0),St(v,qt);let l=o(e,"title",7),r=o(e,"children",7),n=o(e,"status",7,"information"),d=o(e,"closable",7,!1),u=o(e,"hasfooter",7,!1),f=o(e,"footer",7),a=o(e,"closelabel",7,"Close"),t=o(e,"titletag",7,"h2"),w=o(e,"onclose",7);const g=[{status:"information",component:et},{status:"success",component:ot},{status:"warning",component:st},{status:"error",component:at}];function b(s){return g.find(c=>c.status===s)||g[0]}let R=Mt(At(b(n())));var E={get title(){return l()},set title(s){l(s),i()},get children(){return r()},set children(s){r(s),i()},get status(){return n()},set status(s="information"){n(s),i()},get closable(){return d()},set closable(s=!1){d(s),i()},get hasfooter(){return u()},set hasfooter(s=!1){u(s),i()},get footer(){return f()},set footer(s){f(s),i()},get closelabel(){return a()},set closelabel(s="Close"){a(s),i()},get titletag(){return t()},set titletag(s="h2"){t(s),i()},get onclose(){return w()},set onclose(s){w(s),i()}},j=Wt();let Q;var V=k(j),it=k(V);Ft(it,()=>Lt(R).component,(s,c)=>{c(s,{class:"mc-status-notification__icon","aria-hidden":"true"})}),p(V);var W=D(V,2),U=k(W);{var rt=s=>{var c=A(),h=L(c);Rt(h,t,!1,(S,x)=>{C(S,0,"mc-status-notification__title svelte-18b6syz");var _=Tt();N(()=>Bt(_,l())),m(x,_)}),m(s,c)};T(U,s=>{l()&&s(rt)})}var q=D(U,2),nt=k(q);{var lt=s=>{var c=A(),h=L(c);$(h,r),m(s,c)},ct=s=>{var c=A(),h=L(c);tt(h,e,"default",{}),m(s,c)};T(nt,s=>{r()?s(lt):s(ct,!1)})}p(q);var dt=D(q,2);{var ut=s=>{var c=Ot(),h=k(c);{var S=_=>{var M=A(),H=L(M);$(H,f),m(_,M)},x=_=>{var M=A(),H=L(M);tt(H,e,"footer",{}),m(_,M)};T(h,_=>{f()?_(S):_(x,!1)})}p(c),m(s,c)};T(dt,s=>{u()&&s(ut)})}p(W);var ft=D(W,2);{var mt=s=>{var c=Vt();c.__click=function(...S){var x;(x=w())==null||x.apply(this,S)};var h=k(c);Pt(h,{class:"mc-status-notification-closable__icon","aria-hidden":"true"}),p(c),m(s,c)};T(ft,s=>{d()&&s(mt)})}return p(j),N(s=>Q=C(j,1,"mc-status-notification svelte-18b6syz",null,Q,s),[()=>({"mc-status-notification--success":n()==="success","mc-status-notification--warning":n()==="warning","mc-status-notification--error":n()==="error"})]),m(v,j),P(E)}Et(["click"]);customElements.define("m-status-notification",B(Ht,{title:{},children:{},status:{},closable:{},hasfooter:{},footer:{},closelabel:{},titletag:{},onclose:{}},["default","footer"],[],!0));
 //# sourceMappingURL=StatusNotification.js.map