npm - @mozaic-ds/web-components - Versions diffs - 1.1.0 → 1.2.0 - Mend

@mozaic-ds/web-components 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (230) hide show

package/dist/components/radio/Radio.svelte CHANGED Viewed

@@ -77,7 +77,7 @@
   flex-shrink: 0;
   transition: box-shadow 200ms ease;
   background-color: var(--forms-color-background-default, #ffffff);
-  border: var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);
+  border: var(--border-width-m, 0.125rem) solid var(--forms-color-border-default, #666666);
   border-radius: 100%;
   transition: all ease 200ms;
   height: 1.25rem;
@@ -85,7 +85,7 @@
   position: relative;
 }
 .mc-radio__input::before {
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   content: "";
   display: block;
   height: 0.5rem;

package/dist/components/radiogroup/RadioGroup.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import{c as D,p as F,a as G,b as i,f as E,t as g,i as k,j as R,k as t,r as _,e as w,g as x,d as y,s as S,m as o,h as q}from"../../custom-element.js";import{e as B}from"../../each.js";import{r as C,s as b}from"../../attributes.js";import{b as H}from"../../input.js";import{c as I}from"../../custom-element-forward-events.js";var J=E('<div class="mc-radio mc-field__item svelte-clvmul"><input type="radio"/> <label class="mc-radio__label svelte-clvmul"> </label></div>'),K=E("<div></div>");const L={hash:"svelte-clvmul",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-radio.svelte-clvmul {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-clvmul {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.svelte-clvmul {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-clvmul::before {border-radius:var(--radius-full, 100%);content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-clvmul:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-clvmul: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-radio__input.svelte-clvmul:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-clvmul:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-clvmul:checked, .mc-radio__input.svelte-clvmul:disabled {border-color:transparent;}.mc-radio__input.svelte-clvmul:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-clvmul:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-clvmul:disabled + .mc-radio__label:where(.svelte-clvmul) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-clvmul:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-clvmul:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-clvmul:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
+ */.mc-radio.svelte-clvmul {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-clvmul {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.svelte-clvmul {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-clvmul::before {border-radius:var(--border-radius-full, 100%);content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-clvmul:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-clvmul: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-radio__input.svelte-clvmul:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-clvmul:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-clvmul:checked, .mc-radio__input.svelte-clvmul:disabled {border-color:transparent;}.mc-radio__input.svelte-clvmul:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-clvmul:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-clvmul:disabled + .mc-radio__label:where(.svelte-clvmul) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-clvmul:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-clvmul:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-clvmul:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 /* stylelint-disable string-no-newline */.mc-field__content.svelte-clvmul {margin-top:0.5rem;}

package/dist/components/radiogroup/RadioGroup.svelte CHANGED Viewed

@@ -83,7 +83,7 @@
   flex-shrink: 0;
   transition: box-shadow 200ms ease;
   background-color: var(--forms-color-background-default, #ffffff);
-  border: var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);
+  border: var(--border-width-m, 0.125rem) solid var(--forms-color-border-default, #666666);
   border-radius: 100%;
   transition: all ease 200ms;
   height: 1.25rem;
@@ -91,7 +91,7 @@
   position: relative;
 }
 .mc-radio__input::before {
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   content: "";
   display: block;
   height: 0.5rem;

package/dist/components/select/Select.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import{c as j,p as A,a as D,b as a,f as _,d as g,s as F,t as p,i as x,j as q,k as t,r as w,h as E,e as G,g as H,m as n}from"../../custom-element.js";import{i as I}from"../../if.js";import{e as J,i as K}from"../../each.js";import{d as N,s as C}from"../../attributes.js";import{c as O}from"../../custom-element-forward-events.js";var P=_("<option disabled selected> </option>"),Q=_("<option> </option>"),R=_("<select><!><!></select>");const T={hash:"svelte-6nznl5",code:`/**
+import{c as j,p as A,a as D,b as a,f as x,d as g,s as F,t as p,i as w,j as q,k as t,r as _,h as E,e as G,g as H,m as n}from"../../custom-element.js";import{i as I}from"../../if.js";import{e as J,i as K}from"../../each.js";import{c as N,s as C}from"../../attributes.js";import{c as O}from"../../custom-element-forward-events.js";var P=x("<option disabled selected> </option>"),Q=x("<option> </option>"),R=x("<select><!><!></select>");const T={hash:"svelte-6nznl5",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* 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-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-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);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;border-radius:var(--border-radius-s, 0.25rem);}.mc-select.svelte-6nznl5:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-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-width-s, 0.0625rem) 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-width-s, 0.0625rem) 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 U(z,r){A(r,!0),D(z,T);let d=a(r,"id",7),c=a(r,"name",7),v=a(r,"value",15),i=a(r,"placeholder",7),m=a(r,"size",7,"m"),u=a(r,"isinvalid",7),f=a(r,"disabled",7),b=a(r,"readonly",7),h=a(r,"options",7);var B={get id(){return d()},set id(e){d(e),t()},get name(){return c()},set name(e){c(e),t()},get value(){return v()},set value(e){v(e),t()},get placeholder(){return i()},set placeholder(e){i(e),t()},get size(){return m()},set size(e="m"){m(e),t()},get isinvalid(){return u()},set isinvalid(e){u(e),t()},get disabled(){return f()},set disabled(e){f(e),t()},get readonly(){return b()},set readonly(e){b(e),t()},get options(){return h()},set options(e){h(e),t()}},l=R(),y=g(l);{var L=e=>{var o=P(),s=g(o);w(o),o.value=o.__value="",p(()=>E(s,`-- ${i()??""} --`)),x(e,o)};I(y,e=>{i()&&e(L)})}var M=F(y);return J(M,17,h,K,(e,o)=>{var s=Q(),S=g(s,!0);w(s);var k={};p(()=>{s.disabled=n(o).disabled,E(S,n(o).text),k!==(k=n(o).value)&&(s.value=(s.__value=n(o).value)??"")}),x(e,s)}),w(l),p(()=>{C(l,"id",d()),G(l,1,H(["mc-select",`mc-select--${m()}`,b()&&"mc-select--readonly",u()&&"is-invalid"]),"svelte-6nznl5"),C(l,"name",c()),l.disabled=f()}),N(l,v),x(z,l),q(B)}customElements.define("m-select",j(U,{options:{attribute:"options",type:"Array"},id:{},name:{},value:{},placeholder:{},size:{},isinvalid:{},disabled:{},readonly:{}},[],[],!0,O));
+/* stylelint-enable string-no-newline */`};function U(z,r){A(r,!0),D(z,T);let d=a(r,"id",7),c=a(r,"name",7),v=a(r,"value",15),i=a(r,"placeholder",7),m=a(r,"size",7,"m"),u=a(r,"isinvalid",7),f=a(r,"disabled",7),b=a(r,"readonly",7),h=a(r,"options",7);var B={get id(){return d()},set id(e){d(e),t()},get name(){return c()},set name(e){c(e),t()},get value(){return v()},set value(e){v(e),t()},get placeholder(){return i()},set placeholder(e){i(e),t()},get size(){return m()},set size(e="m"){m(e),t()},get isinvalid(){return u()},set isinvalid(e){u(e),t()},get disabled(){return f()},set disabled(e){f(e),t()},get readonly(){return b()},set readonly(e){b(e),t()},get options(){return h()},set options(e){h(e),t()}},l=R(),y=g(l);{var L=e=>{var o=P(),s=g(o);_(o),o.value=o.__value="",p(()=>E(s,`-- ${i()??""} --`)),w(e,o)};I(y,e=>{i()&&e(L)})}var M=F(y);return J(M,17,h,K,(e,o)=>{var s=Q(),S=g(s,!0);_(s);var k={};p(()=>{s.disabled=n(o).disabled,E(S,n(o).text),k!==(k=n(o).value)&&(s.value=(s.__value=n(o).value)??"")}),w(e,s)}),_(l),p(()=>{C(l,"id",d()),G(l,1,H(["mc-select",`mc-select--${m()}`,b()&&"mc-select--readonly",u()&&"is-invalid"]),"svelte-6nznl5"),C(l,"name",c()),l.disabled=f()}),N(l,v),w(z,l),q(B)}customElements.define("m-select",j(U,{options:{attribute:"options",type:"Array"},id:{},name:{},value:{},placeholder:{},size:{},isinvalid:{},disabled:{},readonly:{}},[],[],!0,O));
 //# sourceMappingURL=Select.js.map

package/dist/components/select/Select.svelte CHANGED Viewed

@@ -109,8 +109,7 @@
   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);
+  border: var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);
   display: block;
   width: 100%;
   color: var(--forms-color-text-default, #000000);
@@ -118,10 +117,11 @@
   text-overflow: ellipsis;
   background-repeat: no-repeat;
   background-size: 1rem;
+  border-radius: var(--border-radius-s, 0.25rem);
 }
 .mc-select:hover {
   border-color: var(--forms-color-border-hover, #4d4d4d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-select: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));
@@ -142,11 +142,11 @@
 }
 .mc-select.is-invalid {
   border-color: var(--forms-color-border-invalid, #ea302d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-select.is-invalid: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);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
 }
 .mc-select--s {
   font-size: var(--font-size-100, 0.875rem);

package/dist/components/statusbadge/StatusBadge.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{c as f,p as v,a as m,b as l,f as p,d as u,s as h,t as k,i as y,j as w,k as n,r as b,e as _,g as x,h as S}from"../../custom-element.js";import{S as z}from"../statusdot/StatusDot.js";var D=p('<div><!> <span class="mc-status-badge__label svelte-1oceydf"> </span></div>');const j={hash:"svelte-1oceydf",code:`/**
+import{c as f,p as m,a as v,b as l,f as h,d as u,s as k,t as p,i as y,j as w,k as b,r as n,e as _,g as x,h as S}from"../../custom-element.js";import{S as z}from"../statusdot/StatusDot.js";var D=h('<div><!> <span class="mc-status-badge__label svelte-1oceydf"> </span></div>');const j={hash:"svelte-1oceydf",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.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 B(o,r){v(r,!0),m(o,j);let e=l(r,"status",7,"info"),a=l(r,"label",7);var g={get status(){return e()},set status(s="info"){e(s),n()},get label(){return a()},set label(s){a(s),n()}},t=D(),d=u(t);z(d,{get status(){return e()},size:"m"});var c=h(d,2),i=u(c,!0);return b(c),b(t),k(()=>{_(t,1,x(["mc-status-badge",`mc-status-badge--${e()}`]),"svelte-1oceydf"),S(i,a())}),y(o,t),w(g)}customElements.define("m-status-badge",f(B,{status:{},label:{}},[],[],!0));
+ */.mc-status-badge.svelte-1oceydf {background-color:var(--status-badge-color-background-info, #e1f3f9);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-info, #a7d9ed);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-100, 0.875rem);display:inline-flex;align-items:center;gap:0.25rem;border-radius:var(--border-radius-s, 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-width-s, 0.0625rem) 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-width-s, 0.0625rem) 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-width-s, 0.0625rem) 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-width-s, 0.0625rem) solid var(--status-badge-color-border-neutral, #cccccc);}.mc-status-dot.svelte-1oceydf {background-color:var(--status-dot-color-background-info, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--border-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 B(o,t){m(t,!0),v(o,j);let e=l(t,"status",7,"info"),a=l(t,"label",7);var g={get status(){return e()},set status(s="info"){e(s),b()},get label(){return a()},set label(s){a(s),b()}},r=D(),d=u(r);z(d,{get status(){return e()},size:"m"});var c=k(d,2),i=u(c,!0);return n(c),n(r),p(()=>{_(r,1,x(["mc-status-badge",`mc-status-badge--${e()}`]),"svelte-1oceydf"),S(i,a())}),y(o,r),w(g)}customElements.define("m-status-badge",f(B,{status:{},label:{}},[],[],!0));
 //# sourceMappingURL=StatusBadge.js.map

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

	@@ -1 +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 StatusDot from '../statusdot/StatusDot.svelte';\n /*\n A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.\n /\n interface Props {\n /\n Content of the status badge.\n /\n label: string;\n /\n Allows to define the status badge type.\n */\n status?: 'info' \| 'success' \| 'warning' \| 'error' \| 'neutral';\n }\n\n let { status = 'info', label }: Props = $props();\n</script>\n\n<div class={['mc-status-badge', `mc-status-badge--${status}`]}>\n <StatusDot {status} size=\"m\" />\n <span class=\"mc-status-badge__label\">{label}</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","label","$.prop","$$props","$.set_class","div","$.clsx"],"mappings":";;~~wpEAAA~~,gBAkBQ,IAAAA,iBAAS,MAAM,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,+CAAb,OAAM,gKAGVC,EAAAC,EAAA,EAAAC,EAAA,CAAA,sCAAuCN,EAAM,CAAA,EAAA,CAAA,EAAA,gBAAA,MAElBC,GAAK,eAJ7C"}
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 StatusDot from '../statusdot/StatusDot.svelte';\n /*\n A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.\n /\n interface Props {\n /\n Content of the status badge.\n /\n label: string;\n /\n Allows to define the status badge type.\n */\n status?: 'info' \| 'success' \| 'warning' \| 'error' \| 'neutral';\n }\n\n let { status = 'info', label }: Props = $props();\n</script>\n\n<div class={['mc-status-badge', `mc-status-badge--${status}`]}>\n <StatusDot {status} size=\"m\" />\n <span class=\"mc-status-badge__label\">{label}</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","label","$.prop","$$props","$.set_class","div","$.clsx"],"mappings":";;6sEAAA,gBAkBQ,IAAAA,iBAAS,MAAM,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,+CAAb,OAAM,gKAGVC,EAAAC,EAAA,EAAAC,EAAA,CAAA,sCAAuCN,EAAM,CAAA,EAAA,CAAA,EAAA,gBAAA,MAElBC,GAAK,eAJ7C"}

package/dist/components/statusbadge/StatusBadge.svelte CHANGED Viewed

@@ -28,14 +28,14 @@
  * Do not edit directly, this file was auto-generated.
  */
 .mc-status-badge {
-  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);
+  background-color: var(--status-badge-color-background-info, #e1f3f9);
+  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-info, #a7d9ed);
   font-weight: var(--font-weight-regular, 400);
   font-size: var(--font-size-100, 0.875rem);
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
+  border-radius: var(--border-radius-s, 0.25rem);
   padding-right: 0.5rem;
   padding-left: 0.5rem;
   text-transform: lowercase;
@@ -50,26 +50,26 @@
 }
 .mc-status-badge--success {
   background-color: var(--status-badge-color-background-success, #ebf5de);
-  border: var(--border-s, 1px) solid var(--status-badge-color-border-success, #c5e39e);
+  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-success, #c5e39e);
 }
 .mc-status-badge--error {
   background-color: var(--status-badge-color-background-error, #fdeaea);
-  border: var(--border-s, 1px) solid var(--status-badge-color-border-error, #f8bcbb);
+  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-error, #f8bcbb);
 }
 .mc-status-badge--warning {
   background-color: var(--status-badge-color-background-warning, #fdf1e8);
-  border: var(--border-s, 1px) solid var(--status-badge-color-border-warning, #f8d2b3);
+  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-warning, #f8d2b3);
 }
 .mc-status-badge--neutral {
   background-color: var(--status-badge-color-background-neutral, #f2f2f2);
-  border: var(--border-s, 1px) solid var(--status-badge-color-border-neutral, #cccccc);
+  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-neutral, #cccccc);
 }
 .mc-status-dot {
-  background-color: var(--status-dot-color-background-information, #0b96cc);
+  background-color: var(--status-dot-color-background-info, #0b96cc);
   height: 0.5rem;
   width: 0.5rem;
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   display: inline-block;
 }
 .mc-status-dot--s {

package/dist/components/statusdot/StatusDot.js CHANGED Viewed

@@ -1,4 +1,4 @@
 import{c as l,p as n,a as i,b as c,f as m,t as v,i as p,j as g,k as u,e as b,g as f}from"../../custom-element.js";var h=m("<div></div>");const k={hash:"svelte-14acsp3",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.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 w(o,t){n(t,!0),i(o,k);let s=c(t,"size",7,"m"),a=c(t,"status",7,"info");var d={get size(){return s()},set size(e="m"){s(e),u()},get status(){return a()},set status(e="info"){a(e),u()}},r=h();return v(()=>b(r,1,f(["mc-status-dot",`mc-status-dot--${s()}`,`mc-status-dot--${a()}`]),"svelte-14acsp3")),p(o,r),g(d)}customElements.define("m-status-dot",l(w,{size:{},status:{}},[],[],!0));export{w as S};
+ */.mc-status-dot.svelte-14acsp3 {background-color:var(--status-dot-color-background-info, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--border-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 w(o,t){n(t,!0),i(o,k);let s=c(t,"size",7,"m"),e=c(t,"status",7,"info");var d={get size(){return s()},set size(a="m"){s(a),u()},get status(){return e()},set status(a="info"){e(a),u()}},r=h();return v(()=>b(r,1,f(["mc-status-dot",`mc-status-dot--${s()}`,`mc-status-dot--${e()}`]),"svelte-14acsp3")),p(o,r),g(d)}customElements.define("m-status-dot",l(w,{size:{},status:{}},[],[],!0));export{w as S};
 //# sourceMappingURL=StatusDot.js.map

package/dist/components/statusdot/StatusDot.svelte CHANGED Viewed

@@ -24,10 +24,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 .mc-status-dot {
-  background-color: var(--status-dot-color-background-information, #0b96cc);
+  background-color: var(--status-dot-color-background-info, #0b96cc);
   height: 0.5rem;
   width: 0.5rem;
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   display: inline-block;
 }
 .mc-status-dot--s {

package/dist/components/statusmessage/README.md ADDED Viewed

@@ -0,0 +1,11 @@
+# `m-status-message`
+A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.
+## Props
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `status` | Allows to define the status message style. | `'info'` `'success'` `'warning'` `'error'` `'neutral'` `'inprogress'` | `info` |
+| `label*` | Label of the status message. | `string` |   |

package/dist/components/statusmessage/StatusMessage.js ADDED Viewed

@@ -0,0 +1,4 @@
+import{c as w,p as h,b as l,z as b,t as _,i as v,j as p,k as i,e as x,g as y,a as q,w as A,l as G,f as M,d as z,s as H,m as J,r as j,h as K}from"../../custom-element.js";import{i as O}from"../../if.js";import{c as P}from"../../svelte-component.js";import"../../legacy.js";import{s as f,a as C}from"../../attributes.js";import{C as Q}from"../../CrossCircleFilled24.js";import{L as R}from"../loader/Loader.js";var T=b('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m0 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m1 2a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0z"></path></svg>');function N(u,s){h(s,!1);let n=l(s,"id",12,void 0),a=l(s,"style",12,void 0),r=l(s,"className",12,void 0),o=l(s,"fill",12,void 0),m=l(s,"size",12,"1.5rem");var d={get id(){return n()},set id(e){n(e),i()},get style(){return a()},set style(e){a(e),i()},get className(){return r()},set className(e){r(e),i()},get fill(){return o()},set fill(e){o(e),i()},get size(){return m()},set size(e){m(e),i()}},t=T();return _(()=>{f(t,"id",n()),C(t,a()),x(t,0,y(r())),f(t,"fill",o())}),v(u,t),p(d)}customElements.define("info-circle-filled-24",w(N,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var U=b('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m1 6a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0zm-1 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2"></path></svg>');function k(u,s){h(s,!1);let n=l(s,"id",12,void 0),a=l(s,"style",12,void 0),r=l(s,"className",12,void 0),o=l(s,"fill",12,void 0),m=l(s,"size",12,"1.5rem");var d={get id(){return n()},set id(e){n(e),i()},get style(){return a()},set style(e){a(e),i()},get className(){return r()},set className(e){r(e),i()},get fill(){return o()},set fill(e){o(e),i()},get size(){return m()},set size(e){m(e),i()}},t=U();return _(()=>{f(t,"id",n()),C(t,a()),x(t,0,y(r())),f(t,"fill",o())}),v(u,t),p(d)}customElements.define("warning-circle-filled-24",w(k,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var V=b('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m5.207 6.793a1 1 0 0 1 0 1.414l-5.5 5.5a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L11 13.586l4.793-4.793a1 1 0 0 1 1.414 0"></path></svg>');function E(u,s){h(s,!1);let n=l(s,"id",12,void 0),a=l(s,"style",12,void 0),r=l(s,"className",12,void 0),o=l(s,"fill",12,void 0),m=l(s,"size",12,"1.5rem");var d={get id(){return n()},set id(e){n(e),i()},get style(){return a()},set style(e){a(e),i()},get className(){return r()},set className(e){r(e),i()},get fill(){return o()},set fill(e){o(e),i()},get size(){return m()},set size(e){m(e),i()}},t=V();return _(()=>{f(t,"id",n()),C(t,a()),x(t,0,y(r())),f(t,"fill",o())}),v(u,t),p(d)}customElements.define("check-circle-filled-24",w(E,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var X=M('<span class="mc-status-message__icon svelte-o2wjin"><!></span>'),Y=M('<div><!> <p class="mc-status-message__description svelte-o2wjin"> </p></div>');const Z={hash:"svelte-o2wjin",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-status-message.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-info, #0b96cc);}.mc-status-message.svelte-o2wjin {display:inline-flex;gap:0.25rem;align-items:center;}.mc-status-message__icon.svelte-o2wjin {width:1.5rem;height:1.5rem;}.mc-status-message__description.svelte-o2wjin {margin:0;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(--action-bottom-bar-color-status-item-text, #404040);}.mc-status-message--success.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-success, #3f9e10);}.mc-status-message--error.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-error, #ea302d);}.mc-status-message--warning.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-warning, #ea7315);}.mc-status-message--neutral.svelte-o2wjin .mc-status-message__icon:where(.svelte-o2wjin) {fill:var(--status-message-color-icon-neutral, #808080);}`};function $(u,s){h(s,!0),q(u,Z);let n=l(s,"label",7),a=l(s,"status",7,"info");const r=[{status:"info",component:N},{status:"success",component:E},{status:"warning",component:k},{status:"error",component:Q},{status:"neutral",component:N}];function o(c){return r.find(g=>g.status===c)||r[0]}let m=A(G(o(a())));var d={get label(){return n()},set label(c){n(c),i()},get status(){return a()},set status(c="info"){a(c),i()}},t=Y(),e=z(t);{var F=c=>{var g=X(),D=z(g);P(D,()=>J(m).component,(I,W)=>{W(I,{"aria-hidden":"true"})}),j(g),v(c,g)},B=c=>{R(c,{size:"s"})};O(e,c=>{a()!=="inprogress"?c(F):c(B,!1)})}var S=H(e,2),L=z(S,!0);return j(S),j(t),_(()=>{x(t,1,y(["mc-status-message",`mc-status-message--${a()}`]),"svelte-o2wjin"),K(L,n())}),v(u,t),p(d)}customElements.define("m-status-message",w($,{label:{},status:{}},[],[],!0));
+//# sourceMappingURL=StatusMessage.js.map

package/dist/components/statusmessage/StatusMessage.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"StatusMessage.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/InfoCircleFilled24/InfoCircleFilled24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/WarningCircleFilled24/WarningCircleFilled24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CheckCircleFilled24/CheckCircleFilled24.svelte","../../../src/components/statusmessage/StatusMessage.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'info-circle-filled-24', shadow: 'none' }} />\n<script>\n export let id = undefined;\n export let style = undefined;\n export let className = undefined;\n export let fill = undefined;\n export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id} style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m0 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m1 2a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0z\"/></svg>","<svelte:options customElement={{ tag: 'warning-circle-filled-24', shadow: 'none' }} />\n<script>\n export let id = undefined;\n export let style = undefined;\n export let className = undefined;\n export let fill = undefined;\n export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id} style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m1 6a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0zm-1 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2\"/></svg>","<svelte:options customElement={{ tag: 'check-circle-filled-24', shadow: 'none' }} />\n<script>\n export let id = undefined;\n export let style = undefined;\n export let className = undefined;\n export let fill = undefined;\n export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id} style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m5.207 6.793a1 1 0 0 1 0 1.414l-5.5 5.5a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L11 13.586l4.793-4.793a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'm-status-message' }} />\n\n<script lang=\"ts\">\n import InfoCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled24/InfoCircleFilled24.svelte';\n import WarningCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled24/WarningCircleFilled24.svelte';\n import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n import CheckCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled24/CheckCircleFilled24.svelte';\n import Loader from '../loader/Loader.svelte';\n /**\n * A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.\n */\n interface Props {\n /**\n * Allows to define the status message style.\n */\n status?: 'info' | 'success' | 'warning' | 'error' | 'neutral' | 'inprogress';\n /**\n * Label of the status message.\n */\n label: string;\n }\n\n let { label, status = 'info' }: Props = $props();\n\n const iconMap = [\n { status: 'info', component: InfoCircleFilled24 },\n { status: 'success', component: CheckCircleFilled24 },\n { status: 'warning', component: WarningCircleFilled24 },\n { status: 'error', component: CrossCircleFilled24 },\n { status: 'neutral', component: InfoCircleFilled24 },\n ];\n\n function getSelected(status: string) {\n return iconMap.find((icon) => icon.status === status) || iconMap[0];\n }\n\n let selected = $state(getSelected(status));\n</script>\n\n<div class={['mc-status-message', `mc-status-message--${status}`]}>\n {#if status !== 'inprogress'}\n <span class=\"mc-status-message__icon\">\n <selected.component aria-hidden=\"true\" />\n </span>\n {:else}\n <Loader size=\"s\" />\n {/if}\n <p class=\"mc-status-message__description\">{label}</p>\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/status-message';\n</style>\n"],"names":["id","style","className","fill","size","label","$.prop","$$props","status","iconMap","InfoCircleFilled24","CheckCircleFilled24","WarningCircleFilled24","CrossCircleFilled24","getSelected","icon","selected","$.state","$.proxy","$$render","consequent","alternate","$.set_class","div","$.clsx"],"mappings":"ktBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,uaCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,keCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;4mCCPA,oBAsBQE,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,iBAAS,MAAM,QAEtBC,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,CAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,CAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,CAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,CAAmB,EAC/C,CAAA,OAAQ,UAAW,UAAWH,CAAkB,YAG3CI,EAAYN,EAAgB,CAC5B,OAAAC,EAAQ,KAAMM,GAASA,EAAK,SAAWP,CAAM,GAAKC,EAAQ,CAAC,CACpE,KAEIO,EAAQC,EAAAC,EAAUJ,EAAYN,EAAM,CAAA,CAAA,CAAA,8FAdlB,OAAM,8JAkBvBA,EAAM,IAAK,aAAYW,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,mDADjBC,EAAAC,EAAA,EAAAC,EAAA,CAAA,0CAA2ChB,EAAM,CAAA,EAAA,CAAA,EAAA,eAAA,MAQjBH,GAAK,eAVlD","x_google_ignoreList":[0,1,2]}

package/dist/components/statusmessage/StatusMessage.spec.js ADDED Viewed

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import StatusMessage from './StatusMessage.svelte';
+describe('m-status-message component', () => {
+    const baseProps = {
+        label: 'Test message',
+    };
+    it('renders with default status "info" and displays label', () => {
+        const { container, getByText } = render(StatusMessage, {
+            props: baseProps,
+        });
+        const wrapper = container.querySelector('.mc-status-message');
+        expect(wrapper).toBeTruthy();
+        expect(wrapper?.classList.contains('mc-status-message--info')).toBe(true);
+        expect(getByText(baseProps.label)).toBeTruthy();
+        const icon = container.querySelector('.mc-status-message__icon > svg');
+        expect(icon).toBeTruthy();
+    });
+    it('renders correct icon for each status except "inprogress"', () => {
+        const statuses = ['info', 'success', 'warning', 'error', 'neutral'];
+        statuses.forEach((status) => {
+            const { container } = render(StatusMessage, {
+                props: { ...baseProps, status },
+            });
+            const wrapper = container.querySelector('.mc-status-message');
+            expect(wrapper?.classList.contains(`mc-status-message--${status}`)).toBe(true);
+            const icon = container.querySelector('.mc-status-message__icon > svg');
+            expect(icon).toBeTruthy();
+        });
+    });
+    it('renders Loader instead of icon when status is "inprogress"', () => {
+        const { container } = render(StatusMessage, {
+            props: { ...baseProps, status: 'inprogress' },
+        });
+        const wrapper = container.querySelector('.mc-status-message');
+        expect(wrapper?.classList.contains('mc-status-message--inprogress')).toBe(true);
+        expect(container.querySelector('.mc-status-message__icon')).toBeNull();
+        const loader = container.querySelector('m-loader, loader, .mc-loader, [data-testid="loader"]');
+        expect(loader).toBeTruthy();
+    });
+    it('displays the provided label', () => {
+        const { getByText } = render(StatusMessage, {
+            props: { label: 'Hello world', status: 'success' },
+        });
+        expect(getByText('Hello world')).toBeTruthy();
+    });
+});

package/dist/components/statusmessage/StatusMessage.stories.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Info: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const Neutral: Story;
+export declare const InProgress: Story;
+//# sourceMappingURL=StatusMessage.stories.d.ts.map

package/dist/components/statusmessage/StatusMessage.stories.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"StatusMessage.stories.d.ts","sourceRoot":"","sources":["../../../src/components/statusmessage/StatusMessage.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAkBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,KAAU,CAAC;AAE9B,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC"}

package/dist/components/statusmessage/StatusMessage.stories.js ADDED Viewed

@@ -0,0 +1,37 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
+    title: 'Status/Status Message',
+    component: 'm-status-message',
+    tags: ['v2'],
+    argTypes: {
+        status: {
+            control: 'radio',
+            options: ['info', 'success', 'warning', 'error', 'neutral', 'inprogress'],
+        },
+    },
+    args: {
+        label: 'Brief status message',
+    },
+    render: (args) => html `<m-status-message
+      label=${ifDefined(args.label)}
+      status=${ifDefined(args.status)}
+    ></m-status-message>`,
+};
+export default meta;
+export const Info = {};
+export const Success = {
+    args: { status: 'success' },
+};
+export const Warning = {
+    args: { status: 'warning' },
+};
+export const Error = {
+    args: { status: 'error' },
+};
+export const Neutral = {
+    args: { status: 'neutral' },
+};
+export const InProgress = {
+    args: { status: 'inprogress' },
+};

package/dist/components/statusmessage/StatusMessage.svelte ADDED Viewed

@@ -0,0 +1,84 @@
+<svelte:options customElement={{ tag: 'm-status-message' }} />
+<script lang="ts">
+  import InfoCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled24/InfoCircleFilled24.svelte';
+  import WarningCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled24/WarningCircleFilled24.svelte';
+  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';
+  import CheckCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled24/CheckCircleFilled24.svelte';
+  import Loader from '../loader/Loader.svelte';
+  /**
+   * A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.
+   */
+  interface Props {
+    /**
+     * Allows to define the status message style.
+     */
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral' | 'inprogress';
+    /**
+     * Label of the status message.
+     */
+    label: string;
+  }
+  let { label, status = 'info' }: Props = $props();
+  const iconMap = [
+    { status: 'info', component: InfoCircleFilled24 },
+    { status: 'success', component: CheckCircleFilled24 },
+    { status: 'warning', component: WarningCircleFilled24 },
+    { status: 'error', component: CrossCircleFilled24 },
+    { status: 'neutral', component: InfoCircleFilled24 },
+  ];
+  function getSelected(status: string) {
+    return iconMap.find((icon) => icon.status === status) || iconMap[0];
+  }
+  let selected = $state(getSelected(status));
+</script>
+<div class={['mc-status-message', `mc-status-message--${status}`]}>
+  {#if status !== 'inprogress'}
+    <span class="mc-status-message__icon">
+      <selected.component aria-hidden="true" />
+    </span>
+  {:else}
+    <Loader size="s" />
+  {/if}
+  <p class="mc-status-message__description">{label}</p>
+</div>
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-status-message .mc-status-message__icon {
+  fill: var(--status-message-color-icon-info, #0b96cc);
+}
+.mc-status-message {
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+.mc-status-message__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-status-message__description {
+  margin: 0;
+  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(--action-bottom-bar-color-status-item-text, #404040);
+}
+.mc-status-message--success .mc-status-message__icon {
+  fill: var(--status-message-color-icon-success, #3f9e10);
+}
+.mc-status-message--error .mc-status-message__icon {
+  fill: var(--status-message-color-icon-error, #ea302d);
+}
+.mc-status-message--warning .mc-status-message__icon {
+  fill: var(--status-message-color-icon-warning, #ea7315);
+}
+.mc-status-message--neutral .mc-status-message__icon {
+  fill: var(--status-message-color-icon-neutral, #808080);
+}</style>

package/dist/components/statusmessage/StatusMessage.svelte.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+/**
+ * A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.
+ */
+interface Props {
+    /**
+     * Allows to define the status message style.
+     */
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral' | 'inprogress';
+    /**
+     * Label of the status message.
+     */
+    label: string;
+}
+declare const StatusMessage: import("svelte").Component<Props, {}, "">;
+type StatusMessage = ReturnType<typeof StatusMessage>;
+export default StatusMessage;
+//# sourceMappingURL=StatusMessage.svelte.d.ts.map

package/dist/components/statusmessage/StatusMessage.svelte.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"StatusMessage.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusmessage/StatusMessage.svelte.ts"],"names":[],"mappings":"AASE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,YAAY,CAAC;IAC7E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AA2CH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/statusnotification/StatusNotification.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{v as q,c as A,p as B,a as G,b as s,w as H,l as J,f as w,m as K,d as r,s as l,t as L,i as p,j as O,k as b,r as e,e as P,g as Q,h as _}from"../../custom-element.js";import{i as R}from"../../if.js";import{s as T}from"../../slot.js";import{c as U,I as V,C as X,W as Y,a as Z,b as $}from"../../Cross20.js";import{b as oo}from"../../this.js";import"../../legacy.js";import"../../attributes.js";var to=w('<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>'),ro=w('<section role="status"><span class="mc-status-notification__icon svelte-18b6syz" aria-hidden="true"><!></span> <div class="mc-status-notification__content svelte-18b6syz"><h2 class="mc-status-notification__title svelte-18b6syz"> </h2> <p class="mc-status-notification__message svelte-18b6syz"> </p> <div class="mc-status-notification__footer svelte-18b6syz"><!></div></div> <!></section>');const eo={hash:"svelte-18b6syz",code:`/**
+import{v as q,c as A,p as B,a as G,b as s,w as H,l as J,f as w,m as K,d as r,s as l,t as L,i as p,j as O,k as b,r as e,e as P,g as Q,h as _}from"../../custom-element.js";import{i as R}from"../../if.js";import{s as T}from"../../slot.js";import{c as U}from"../../svelte-component.js";import{b as V}from"../../this.js";import{I as X,C as Y,W as Z,a as $,b as oo}from"../../Cross20.js";import"../../legacy.js";import"../../attributes.js";var to=w('<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>'),ro=w('<section role="status"><span class="mc-status-notification__icon svelte-18b6syz" aria-hidden="true"><!></span> <div class="mc-status-notification__content svelte-18b6syz"><h2 class="mc-status-notification__title svelte-18b6syz"> </h2> <p class="mc-status-notification__message svelte-18b6syz"> </p> <div class="mc-status-notification__footer svelte-18b6syz"><!></div></div> <!></section>');const eo={hash:"svelte-18b6syz",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.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__label.svelte-18b6syz {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-18b6syz {flex-shrink:0;width:1.5rem;height:1.5rem;}.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--m.svelte-18b6syz {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-18b6syz {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-18b6syz {padding:0.25rem;}.mc-button--outlined.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.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--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--accent.svelte-18b6syz {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.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--danger.svelte-18b6syz {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.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--inverse.svelte-18b6syz {--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-18b6syz:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.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;}.mc-button--outlined.mc-button--standard.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.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--outlined.mc-button--accent.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.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--outlined.mc-button--danger.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.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--outlined.mc-button--inverse.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.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--ghost.mc-button--standard.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.mc-button--standard.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.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--ghost.mc-button--accent.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.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--ghost.mc-button--danger.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.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--ghost.mc-button--inverse.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.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-status-notification.svelte-18b6syz {border-radius:var(--radius-m, 0.5rem);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);display:flex;flex-flow:row wrap;align-items:flex-start;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--information.svelte-18b6syz {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);}.mc-status-notification--information.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-information, #0b96cc);}.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;}.mc-status-notification__footer.svelte-18b6syz:empty {display:none;}`};function no(h,n){B(n,!0),G(h,eo);let d=s(n,"title",7),i=s(n,"description",7),c=s(n,"status",7,"info"),u=s(n,"closable",7),v;const y=[{status:"info",component:V},{status:"success",component:X},{status:"warning",component:Y},{status:"error",component:Z}];function x(o){return y.find(t=>t.status===o)||y[0]}let C=H(J(x(c())));const F=()=>{const o=new CustomEvent("close",{bubbles:!0,composed:!0});v.dispatchEvent(o)};var E={get title(){return d()},set title(o){d(o),b()},get description(){return i()},set description(o){i(o),b()},get status(){return c()},set status(o="info"){c(o),b()},get closable(){return u()},set closable(o){u(o),b()}},a=ro(),f=r(a),S=r(f);U(S,()=>K(C).component,(o,t)=>{t(o,{class:"mc-status-notification__icon","aria-hidden":"true"})}),e(f);var g=l(f,2),m=r(g),j=r(m,!0);e(m);var k=l(m,2),I=r(k,!0);e(k);var z=l(k,2),W=r(z);T(W,n,"footer",{}),e(z),e(g);var D=l(g,2);{var M=o=>{var t=to();t.__click=F;var N=r(t);$(N,{class:"mc-status-notification-closable__icon","aria-hidden":"true"}),e(t),p(o,t)};R(D,o=>{u()&&o(M)})}return e(a),oo(a,o=>v=o,()=>v),L(()=>{P(a,1,Q(["mc-status-notification",`mc-status-notification--${c()}`]),"svelte-18b6syz"),_(j,d()),_(I,i())}),p(h,a),O(E)}q(["click"]);customElements.define("m-status-notification",A(no,{title:{},description:{},status:{},closable:{}},["footer"],[],!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-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-18b6syz {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-18b6syz {flex-shrink:0;width:1.5rem;height:1.5rem;}.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--m.svelte-18b6syz {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-18b6syz {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-18b6syz {padding:0.25rem;}.mc-button--outlined.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.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--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--accent.svelte-18b6syz {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.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--danger.svelte-18b6syz {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.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--inverse.svelte-18b6syz {--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-18b6syz:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.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(--border-radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.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--outlined.mc-button--accent.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.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--outlined.mc-button--danger.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.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--outlined.mc-button--inverse.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.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--ghost.mc-button--standard.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.mc-button--standard.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.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--ghost.mc-button--accent.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.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--ghost.mc-button--danger.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.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--ghost.mc-button--inverse.svelte-18b6syz {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-18b6syz:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.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-status-notification.svelte-18b6syz {border-radius:var(--border-radius-m, 0.5rem);background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;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-info, #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--information.svelte-18b6syz {background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);}.mc-status-notification--information.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-info, #0b96cc);}.mc-status-notification--success.svelte-18b6syz {background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) 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-width-s, 0.0625rem) 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-width-s, 0.0625rem) 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;}.mc-status-notification__footer.svelte-18b6syz:empty {display:none;}`};function no(h,n){B(n,!0),G(h,eo);let d=s(n,"title",7),i=s(n,"description",7),c=s(n,"status",7,"info"),u=s(n,"closable",7),v;const y=[{status:"info",component:X},{status:"success",component:Y},{status:"warning",component:Z},{status:"error",component:$}];function x(o){return y.find(t=>t.status===o)||y[0]}let C=H(J(x(c())));const F=()=>{const o=new CustomEvent("close",{bubbles:!0,composed:!0});v.dispatchEvent(o)};var E={get title(){return d()},set title(o){d(o),b()},get description(){return i()},set description(o){i(o),b()},get status(){return c()},set status(o="info"){c(o),b()},get closable(){return u()},set closable(o){u(o),b()}},a=ro(),f=r(a),S=r(f);U(S,()=>K(C).component,(o,t)=>{t(o,{class:"mc-status-notification__icon","aria-hidden":"true"})}),e(f);var g=l(f,2),m=r(g),j=r(m,!0);e(m);var k=l(m,2),I=r(k,!0);e(k);var z=l(k,2),W=r(z);T(W,n,"footer",{}),e(z),e(g);var D=l(g,2);{var M=o=>{var t=to();t.__click=F;var N=r(t);oo(N,{class:"mc-status-notification-closable__icon","aria-hidden":"true"}),e(t),p(o,t)};R(D,o=>{u()&&o(M)})}return e(a),V(a,o=>v=o,()=>v),L(()=>{P(a,1,Q(["mc-status-notification",`mc-status-notification--${c()}`]),"svelte-18b6syz"),_(j,d()),_(I,i())}),p(h,a),O(E)}q(["click"]);customElements.define("m-status-notification",A(no,{title:{},description:{},status:{},closable:{}},["footer"],[],!0));
 //# sourceMappingURL=StatusNotification.js.map

package/dist/components/statusnotification/StatusNotification.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusNotification.js","sources":["../../../src/components/statusnotification/StatusNotification.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-notification' }} />\n\n<script lang=\"ts\">\n import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';\n import InfoCircle32 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled32/InfoCircleFilled32.svelte';\n import WarningCircle32 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled32/WarningCircleFilled32.svelte';\n import CrossCircle32 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled32/CrossCircleFilled32.svelte';\n import CheckCircle32 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled32/CheckCircleFilled32.svelte';\n /*\n A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.\n \n @slot footer - Use this slot to insert a button or a link in the footer\n * @event close {CustomEvent<void>} - Emits when closing the notification.\n /\n interface Props {\n /\n Title of the status notification.\n /\n title: string;\n /\n Description of the status notification.\n /\n description: string;\n /\n Allows to define the status notification type.\n /\n status?: 'info' \| 'success' \| 'warning' \| 'error';\n /\n if `true`, display the close button.\n */\n closable?: boolean;\n }\n\n let { title, description, status = 'info', closable }: Props = $props();\n let element: HTMLElement;\n\n const iconMap = [\n { status: 'info', component: InfoCircle32 },\n { status: 'success', component: CheckCircle32 },\n { status: 'warning', component: WarningCircle32 },\n { status: 'error', component: CrossCircle32 },\n ];\n\n function getSelected(status: string) {\n return iconMap.find((icon) => icon.status === status) \|\| iconMap[0];\n }\n\n let selected = $state(getSelected(status));\n\n const onClose = () => {\n const event = new CustomEvent('close', {\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\n };\n</script>\n\n<section\n class={['mc-status-notification', `mc-status-notification--${status}`]}\n role=\"status\"\n bind:this={element}\n>\n <span class=\"mc-status-notification__icon\" aria-hidden=\"true\">\n <selected.component class=\"mc-status-notification__icon\" aria-hidden=\"true\" />\n </span>\n\n <div class=\"mc-status-notification__content\">\n <h2 class=\"mc-status-notification__title\">{title}</h2>\n <p class=\"mc-status-notification__message\">\n {description}\n </p>\n\n <div class=\"mc-status-notification__footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n\n {#if closable}\n <button\n class=\"mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost\"\n aria-label=\"Close\"\n onclick={onClose}\n >\n <Cross20 class=\"mc-status-notification-closable__icon\" aria-hidden=\"true\" />\n </button>\n {/if}\n</section>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/button';\n @use '@mozaic-ds/styles/components/status-notification';\n\n .mc-status-notification__footer:empty {\n display: none;\n }\n</style>\n"],"names":["title","$.prop","$$props","description","status","closable","element","iconMap","InfoCircle32","CheckCircle32","WarningCircle32","CrossCircle32","getSelected","icon","selected","$.state","$.proxy","onClose","event","$$render","consequent","$.bind_this","section","$$value"],"mappings":";;~~wgcAAA~~,qBAiCQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAAEE,iBAAS,MAAM,EAAEC,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAC/CI,QAEEC,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,CAAY,EACvC,CAAA,OAAQ,UAAW,UAAWC,CAAa,EAC3C,CAAA,OAAQ,UAAW,UAAWC,CAAe,EAC7C,CAAA,OAAQ,QAAS,UAAWC,CAAa,YAGpCC,EAAYR,EAAgB,CAC5B,OAAAG,EAAQ,KAAMM,GAASA,EAAK,SAAWT,CAAM,GAAKG,EAAQ,CAAC,CACpE,KAEIO,EAAQC,EAAAC,EAAUJ,EAAYR,EAAM,CAAA,CAAA,CAAA,EAElC,MAAAa,EAAO,IAAS,OACdC,EAAK,IAAO,YAAY,QAAO,CACnC,QAAS,GACT,SAAU,GAAI,EAEhBZ,EAAQ,cAAcY,CAAK,CAC7B,yJAtBmC,OAAM,0VAiD5BD,~~4GAJRZ~~,EAAQ,GAAAc,EAAAC,CAAA,gBAjBFC,~~GAAAC~~,EAAAC,GAAAjB,QAAAA,CAAO,kBAFV,oDAAqDF,GAAM,2BAStBJ,GAAK,MAE7CG,GAAW,eAdlB"}
1	+ {"version":3,"file":"StatusNotification.js","sources":["../../../src/components/statusnotification/StatusNotification.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-notification' }} />\n\n<script lang=\"ts\">\n import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';\n import InfoCircle32 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled32/InfoCircleFilled32.svelte';\n import WarningCircle32 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled32/WarningCircleFilled32.svelte';\n import CrossCircle32 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled32/CrossCircleFilled32.svelte';\n import CheckCircle32 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled32/CheckCircleFilled32.svelte';\n /*\n A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.\n \n @slot footer - Use this slot to insert a button or a link in the footer\n * @event close {CustomEvent<void>} - Emits when closing the notification.\n /\n interface Props {\n /\n Title of the status notification.\n /\n title: string;\n /\n Description of the status notification.\n /\n description: string;\n /\n Allows to define the status notification type.\n /\n status?: 'info' \| 'success' \| 'warning' \| 'error';\n /\n if `true`, display the close button.\n */\n closable?: boolean;\n }\n\n let { title, description, status = 'info', closable }: Props = $props();\n let element: HTMLElement;\n\n const iconMap = [\n { status: 'info', component: InfoCircle32 },\n { status: 'success', component: CheckCircle32 },\n { status: 'warning', component: WarningCircle32 },\n { status: 'error', component: CrossCircle32 },\n ];\n\n function getSelected(status: string) {\n return iconMap.find((icon) => icon.status === status) \|\| iconMap[0];\n }\n\n let selected = $state(getSelected(status));\n\n const onClose = () => {\n const event = new CustomEvent('close', {\n bubbles: true,\n composed: true,\n });\n element.dispatchEvent(event);\n };\n</script>\n\n<section\n class={['mc-status-notification', `mc-status-notification--${status}`]}\n role=\"status\"\n bind:this={element}\n>\n <span class=\"mc-status-notification__icon\" aria-hidden=\"true\">\n <selected.component class=\"mc-status-notification__icon\" aria-hidden=\"true\" />\n </span>\n\n <div class=\"mc-status-notification__content\">\n <h2 class=\"mc-status-notification__title\">{title}</h2>\n <p class=\"mc-status-notification__message\">\n {description}\n </p>\n\n <div class=\"mc-status-notification__footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n\n {#if closable}\n <button\n class=\"mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost\"\n aria-label=\"Close\"\n onclick={onClose}\n >\n <Cross20 class=\"mc-status-notification-closable__icon\" aria-hidden=\"true\" />\n </button>\n {/if}\n</section>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/button';\n @use '@mozaic-ds/styles/components/status-notification';\n\n .mc-status-notification__footer:empty {\n display: none;\n }\n</style>\n"],"names":["title","$.prop","$$props","description","status","closable","element","iconMap","InfoCircle32","CheckCircle32","WarningCircle32","CrossCircle32","getSelected","icon","selected","$.state","$.proxy","onClose","event","$$render","consequent","$.bind_this","section","$$value"],"mappings":";;ijcAAA,qBAiCQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAAEE,iBAAS,MAAM,EAAEC,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAC/CI,QAEEC,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,CAAY,EACvC,CAAA,OAAQ,UAAW,UAAWC,CAAa,EAC3C,CAAA,OAAQ,UAAW,UAAWC,CAAe,EAC7C,CAAA,OAAQ,QAAS,UAAWC,CAAa,YAGpCC,EAAYR,EAAgB,CAC5B,OAAAG,EAAQ,KAAMM,GAASA,EAAK,SAAWT,CAAM,GAAKG,EAAQ,CAAC,CACpE,KAEIO,EAAQC,EAAAC,EAAUJ,EAAYR,EAAM,CAAA,CAAA,CAAA,EAElC,MAAAa,EAAO,IAAS,OACdC,EAAK,IAAO,YAAY,QAAO,CACnC,QAAS,GACT,SAAU,GAAI,EAEhBZ,EAAQ,cAAcY,CAAK,CAC7B,yJAtBmC,OAAM,0VAiD5BD,6GAJRZ,EAAQ,GAAAc,EAAAC,CAAA,gBAjBFC,EAAAC,EAAAC,GAAAjB,QAAAA,CAAO,kBAFV,oDAAqDF,GAAM,2BAStBJ,GAAK,MAE7CG,GAAW,eAdlB"}