@mozaic-ds/web-components 1.5.1 → 1.7.0

package/dist/components/kpiitem/KpiItem.js

@@ -1,5 +1,5 @@
-import{c as W,p as X,a as Y,b as m,n as b,s as _,t as g,f as v,g as Z,h as u,i as $,v as h,d as o,j as p,r as a,e as x,x as ee,y as re}from"../../custom-element.js";import{i as k}from"../../if.js";import{c as ie}from"../../svelte-component.js";import{a as oe}from"../../attributes.js";import{L as ae,A as le,o as te}from"../../Condition20.js";import"../../branches.js";var se=u('<span class="mc-kpi__label svelte-1fbscw7"> </span>'),ce=u('<span class="mc-kpi__label svelte-1fbscw7"> </span>'),ne=u('<span class="mc-kpi__detail svelte-1fbscw7"> </span>'),me=u('<div class="mc-kpi__aside svelte-1fbscw7"><!> <!></div>'),ve=u('<div><!> <div class="mc-kpi__content svelte-1fbscw7"><div class="mc-kpi__main svelte-1fbscw7"><!> <span class="mc-kpi__value svelte-1fbscw7"> </span></div> <!></div></div>');const pe={hash:"svelte-1fbscw7",code:`/**
+import{c as W,e as X,a as Y,p as m,i as b,s as _,t as g,b as v,d as Z,f as u,n as $,w as h,h as o,m as p,r as a,k as x,y as ee,x as re}from"../../custom-element.js";import{i as k}from"../../if.js";import{c as ie}from"../../svelte-component.js";import{a as oe}from"../../attributes.js";import{r as ae,y as le,z as te}from"../../Condition20.js";import"../../branches.js";var se=u('<span class="mc-kpi__label svelte-1fbscw7"> </span>'),ce=u('<span class="mc-kpi__label svelte-1fbscw7"> </span>'),ne=u('<span class="mc-kpi__detail svelte-1fbscw7"> </span>'),me=u('<div class="mc-kpi__aside svelte-1fbscw7"><!> <!></div>'),ve=u('<div><!> <div class="mc-kpi__content svelte-1fbscw7"><div class="mc-kpi__main svelte-1fbscw7"><!> <span class="mc-kpi__value svelte-1fbscw7"> </span></div> <!></div></div>');const pe={hash:"svelte-1fbscw7",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-kpi.svelte-1fbscw7,
-.mc-kpi.svelte-1fbscw7 :where(.svelte-1fbscw7) {box-sizing:border-box;}.mc-kpi.svelte-1fbscw7 {display:inline-block;}.mc-kpi.svelte-1fbscw7:not(.mc-kpi--s) {min-width:10rem;}.mc-kpi__label.svelte-1fbscw7 {font-size:var(--font-body-s, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);display:block;}.mc-kpi__content.svelte-1fbscw7 {line-height:var(--line-height-s, 1.3);display:flex;}.mc-kpi__main.svelte-1fbscw7 {align-items:center;display:flex;justify-content:center;}.mc-kpi__value.svelte-1fbscw7 {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-body-s, 0.875rem);color:var(--color-kpi-value, var(--kpi-item-color-value-info, #0074aa));}.mc-kpi__aside.svelte-1fbscw7 {align-items:center;background-color:var(--kpi-item-color-trend-item-background, #ffffff);color:var(--kpi-item-color-trend-item-text, #000000);display:flex;justify-content:center;border-radius:var(--border-radius-xs, 0.125rem);}.mc-kpi__detail.svelte-1fbscw7 {font-size:var(--font-body-s, 0.875rem);}.mc-kpi__icon.svelte-1fbscw7 {display:block;height:1rem;width:1rem;}.mc-kpi--s.svelte-1fbscw7 .mc-kpi__content:where(.svelte-1fbscw7) {gap:0.25rem;}.mc-kpi--s.svelte-1fbscw7 .mc-kpi__main:where(.svelte-1fbscw7) {background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;padding:0 0.25rem;height:1.5rem;}.mc-kpi--s.svelte-1fbscw7 .mc-kpi__aside:where(.svelte-1fbscw7) {background-color:transparent;}.mc-kpi--m.svelte-1fbscw7 .mc-kpi__label:where(.svelte-1fbscw7) {color:var(--color-kpi-label-medium, var(--kpi-item-color-label-info-medium, #000000));margin-bottom:0.25rem;}.mc-kpi--m.svelte-1fbscw7 .mc-kpi__content:where(.svelte-1fbscw7) {background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;height:3rem;align-items:center;padding:0 0.25rem 0 0.5rem;gap:0.5rem;}.mc-kpi--m.svelte-1fbscw7 .mc-kpi__main:where(.svelte-1fbscw7) {flex-grow:1;height:2.5rem;}.mc-kpi--m.svelte-1fbscw7 .mc-kpi__value:where(.svelte-1fbscw7) {font-size:var(--font-body-l, 1.125rem);}.mc-kpi--m.svelte-1fbscw7 .mc-kpi__aside:where(.svelte-1fbscw7) {padding:0 0.5rem;height:2.5rem;width:2.5rem;}.mc-kpi--l.svelte-1fbscw7 {background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;padding:0.5rem;height:9rem;}.mc-kpi--l.svelte-1fbscw7 .mc-kpi__content:where(.svelte-1fbscw7) {flex-direction:column;width:100%;height:100%;justify-content:space-between;}.mc-kpi--l.svelte-1fbscw7 .mc-kpi__main:where(.svelte-1fbscw7) {flex-direction:column;flex-grow:1;}.mc-kpi--l.svelte-1fbscw7 .mc-kpi__label:where(.svelte-1fbscw7) {font-size:var(--font-body-m, 1rem);color:var(--color-kpi-label-large, var(--kpi-item-color-label-info-large, #0074aa));}.mc-kpi--l.svelte-1fbscw7 .mc-kpi__value:where(.svelte-1fbscw7) {font-size:var(--font-heading-l, 2rem);}.mc-kpi--l.svelte-1fbscw7 .mc-kpi__aside:where(.svelte-1fbscw7) {gap:0.5rem;height:2.5rem;padding:0 0.5rem;font-size:var(--font-body-s, 0.875rem);}.mc-kpi--warning.svelte-1fbscw7 {--color-kpi-background: var(--kpi-item-color-background-warning, #fdf1e8);--color-kpi-border: var(--kpi-item-color-border-warning, #ef934a);--color-kpi-label-medium: var(--kpi-item-color-label-warning-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-warning-large, #b64f00);--color-kpi-value: var(--kpi-item-color-value-warning, #b64f00);}.mc-kpi--error.svelte-1fbscw7 {--color-kpi-background: var(--kpi-item-color-background-error, #fdeaea);--color-kpi-border: var(--kpi-item-color-border-error, #ef5f5c);--color-kpi-label-medium: var(--kpi-item-color-label-error-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-error-large, #c61112);--color-kpi-value: var(--kpi-item-color-value-error, #c61112);}.mc-kpi--success.svelte-1fbscw7 {--color-kpi-background: var(--kpi-item-color-background-success, #ebf5de);--color-kpi-border: var(--kpi-item-color-border-success, #78be20);--color-kpi-label-medium: var(--kpi-item-color-label-success-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-success-large, #117f03);--color-kpi-value: var(--kpi-item-color-value-success, #117f03);}.mc-kpi--neutral.svelte-1fbscw7 {--color-kpi-background: var(--kpi-item-color-background-neutral, #f2f2f2);--color-kpi-border: var(--kpi-item-color-border-neutral, #999999);--color-kpi-label-medium: var(--kpi-item-color-label-neutral-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-neutral-large, #666666);--color-kpi-value: var(--kpi-item-color-value-neutral, #666666);}`};function de(L,i){X(i,!0),Y(L,pe);let y=m(i,"value",7),t=m(i,"trend",7),s=m(i,"label",7),z=m(i,"status",7,"info"),d=m(i,"information",7),f=m(i,"size",7,"s"),D=$(i,["$$slots","$$events","$$legacy","$$host","value","trend","label","status","information","size"]);const E=h(()=>f()==="m"),C=h(()=>f()==="l"),K={increasing:te,decreasing:le,stable:ae},N=h(()=>t()?K[t()]:void 0),S=h(()=>`mc-kpi mc-kpi--${f()} mc-kpi--${z()}`);var T={get value(){return y()},set value(e){y(e),p()},get trend(){return t()},set trend(e){t(e),p()},get label(){return s()},set label(e){s(e),p()},get status(){return z()},set status(e="info"){z(e),p()},get information(){return d()},set information(e){d(e),p()},get size(){return f()},set size(e="s"){f(e),p()}},w=ve();oe(w,()=>({class:b(S),...D}),void 0,void 0,void 0,"svelte-1fbscw7");var I=o(w);{var q=e=>{var r=se(),c=o(r,!0);a(r),g(()=>x(c,s())),v(e,r)};k(I,e=>{b(E)&&s()&&e(q)})}var M=_(I,2),j=o(M),R=o(j);{var F=e=>{var r=ce(),c=o(r,!0);a(r),g(()=>x(c,s())),v(e,r)};k(R,e=>{b(C)&&s()&&e(F)})}var B=_(R,2),G=o(B,!0);a(B),a(j);var H=_(j,2);{var J=e=>{var r=me(),c=o(r);{var O=l=>{var n=ne(),A=o(n,!0);a(n),g(()=>x(A,d())),v(l,n)};k(c,l=>{b(C)&&d()&&l(O)})}var P=_(c,2);{var Q=l=>{var n=ee(),A=re(n);ie(A,()=>b(N),(U,V)=>{V(U,{className:"mc-kpi__icon",color:"black"})}),v(l,n)};k(P,l=>{t()&&l(Q)})}a(r),v(e,r)};k(H,e=>{(t()||d())&&e(J)})}return a(M),a(w),g(()=>x(G,y())),v(L,w),Z(T)}customElements.define("m-kpi-item",W(de,{value:{},trend:{},label:{},status:{},information:{},size:{}},[],[],!0));
+.mc-kpi.svelte-1fbscw7 :where(.svelte-1fbscw7) {box-sizing:border-box;}.mc-kpi.svelte-1fbscw7 {display:inline-block;}.mc-kpi.svelte-1fbscw7:not(.mc-kpi--s) {min-width:10rem;}.mc-kpi__label.svelte-1fbscw7 {font-size:var(--font-body-s, 0.875rem);font-weight:var(--font-weight-semi-bold, 600);display:block;}.mc-kpi__content.svelte-1fbscw7 {line-height:var(--line-height-s, 1.3);display:flex;}.mc-kpi__main.svelte-1fbscw7 {align-items:center;display:flex;justify-content:center;}.mc-kpi__value.svelte-1fbscw7 {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-body-s, 0.875rem);color:var(--color-kpi-value, var(--kpi-item-color-value-info, #0074aa));}.mc-kpi__aside.svelte-1fbscw7 {align-items:center;background-color:var(--kpi-item-color-trend-item-background, #ffffff);color:var(--kpi-item-color-trend-item-text, #000000);display:flex;justify-content:center;border-radius:var(--border-radius-xs, 0.125rem);}.mc-kpi__detail.svelte-1fbscw7 {font-size:var(--font-body-s, 0.875rem);}.mc-kpi__icon.svelte-1fbscw7 {display:block;height:1rem;width:1rem;}.mc-kpi--s.svelte-1fbscw7 .mc-kpi__content:where(.svelte-1fbscw7) {gap:0.25rem;}.mc-kpi--s.svelte-1fbscw7 .mc-kpi__main:where(.svelte-1fbscw7) {background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;padding:0 0.25rem;height:1.5rem;}.mc-kpi--s.svelte-1fbscw7 .mc-kpi__aside:where(.svelte-1fbscw7) {background-color:transparent;}.mc-kpi--m.svelte-1fbscw7 .mc-kpi__label:where(.svelte-1fbscw7) {color:var(--color-kpi-label-medium, var(--kpi-item-color-label-info-medium, #000000));margin-bottom:0.25rem;}.mc-kpi--m.svelte-1fbscw7 .mc-kpi__content:where(.svelte-1fbscw7) {background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;height:3rem;align-items:center;padding:0 0.25rem 0 0.5rem;gap:0.5rem;}.mc-kpi--m.svelte-1fbscw7 .mc-kpi__main:where(.svelte-1fbscw7) {flex-grow:1;height:2.5rem;}.mc-kpi--m.svelte-1fbscw7 .mc-kpi__value:where(.svelte-1fbscw7) {font-size:var(--font-body-l, 1.125rem);}.mc-kpi--m.svelte-1fbscw7 .mc-kpi__aside:where(.svelte-1fbscw7) {padding:0 0.5rem;height:2.5rem;width:2.5rem;}.mc-kpi--l.svelte-1fbscw7 {background-color:var(--color-kpi-background, var(--kpi-item-color-background-info, #e1f3f9));border:1px solid var(--color-kpi-border, var(--kpi-item-color-border-info, #3facd7));border-radius:4px;overflow:hidden;padding:0.5rem;height:9rem;}.mc-kpi--l.svelte-1fbscw7 .mc-kpi__content:where(.svelte-1fbscw7) {flex-direction:column;width:100%;height:100%;justify-content:space-between;}.mc-kpi--l.svelte-1fbscw7 .mc-kpi__main:where(.svelte-1fbscw7) {flex-direction:column;flex-grow:1;}.mc-kpi--l.svelte-1fbscw7 .mc-kpi__label:where(.svelte-1fbscw7) {font-size:var(--font-body-m, 1rem);color:var(--color-kpi-label-large, var(--kpi-item-color-label-info-large, #0074aa));}.mc-kpi--l.svelte-1fbscw7 .mc-kpi__value:where(.svelte-1fbscw7) {font-size:var(--font-heading-l, 2rem);}.mc-kpi--l.svelte-1fbscw7 .mc-kpi__aside:where(.svelte-1fbscw7) {gap:0.5rem;height:2.5rem;padding:0 0.5rem;font-size:var(--font-body-s, 0.875rem);}.mc-kpi--warning.svelte-1fbscw7 {--color-kpi-background: var(--kpi-item-color-background-warning, #fdf1e8);--color-kpi-border: var(--kpi-item-color-border-warning, #ef934a);--color-kpi-label-medium: var(--kpi-item-color-label-warning-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-warning-large, #b64f00);--color-kpi-value: var(--kpi-item-color-value-warning, #b64f00);}.mc-kpi--error.svelte-1fbscw7 {--color-kpi-background: var(--kpi-item-color-background-error, #fdeaea);--color-kpi-border: var(--kpi-item-color-border-error, #ef5f5c);--color-kpi-label-medium: var(--kpi-item-color-label-error-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-error-large, #c61112);--color-kpi-value: var(--kpi-item-color-value-error, #c61112);}.mc-kpi--success.svelte-1fbscw7 {--color-kpi-background: var(--kpi-item-color-background-success, #ebf5de);--color-kpi-border: var(--kpi-item-color-border-success, #78be20);--color-kpi-label-medium: var(--kpi-item-color-label-success-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-success-large, #117f03);--color-kpi-value: var(--kpi-item-color-value-success, #117f03);}.mc-kpi--neutral.svelte-1fbscw7 {--color-kpi-background: var(--kpi-item-color-background-neutral, #f2f2f2);--color-kpi-border: var(--kpi-item-color-border-neutral, #999999);--color-kpi-label-medium: var(--kpi-item-color-label-neutral-medium, #000000);--color-kpi-label-large: var(--kpi-item-color-label-neutral-large, #666666);--color-kpi-value: var(--kpi-item-color-value-neutral, #666666);}`};function de(C,i){X(i,!0),Y(C,pe);let y=m(i,"value",7),t=m(i,"trend",7),s=m(i,"label",7),z=m(i,"status",7,"info"),d=m(i,"information",7),f=m(i,"size",7,"s"),D=$(i,["$$slots","$$events","$$legacy","$$host","value","trend","label","status","information","size"]);const E=h(()=>f()==="m"),I=h(()=>f()==="l"),K={increasing:te,decreasing:le,stable:ae},N=h(()=>t()?K[t()]:void 0),S=h(()=>`mc-kpi mc-kpi--${f()} mc-kpi--${z()}`);var T={get value(){return y()},set value(e){y(e),p()},get trend(){return t()},set trend(e){t(e),p()},get label(){return s()},set label(e){s(e),p()},get status(){return z()},set status(e="info"){z(e),p()},get information(){return d()},set information(e){d(e),p()},get size(){return f()},set size(e="s"){f(e),p()}},w=ve();oe(w,()=>({class:b(S),...D}),void 0,void 0,void 0,"svelte-1fbscw7");var L=o(w);{var q=e=>{var r=se(),c=o(r,!0);a(r),g(()=>x(c,s())),v(e,r)};k(L,e=>{b(E)&&s()&&e(q)})}var M=_(L,2),j=o(M),R=o(j);{var F=e=>{var r=ce(),c=o(r,!0);a(r),g(()=>x(c,s())),v(e,r)};k(R,e=>{b(I)&&s()&&e(F)})}var B=_(R,2),G=o(B,!0);a(B),a(j);var H=_(j,2);{var J=e=>{var r=me(),c=o(r);{var O=l=>{var n=ne(),A=o(n,!0);a(n),g(()=>x(A,d())),v(l,n)};k(c,l=>{b(I)&&d()&&l(O)})}var P=_(c,2);{var Q=l=>{var n=ee(),A=re(n);ie(A,()=>b(N),(U,V)=>{V(U,{className:"mc-kpi__icon",color:"black"})}),v(l,n)};k(P,l=>{t()&&l(Q)})}a(r),v(e,r)};k(H,e=>{(t()||d())&&e(J)})}return a(M),a(w),g(()=>x(G,y())),v(C,w),Z(T)}customElements.define("m-kpi-item",W(de,{value:{},trend:{},label:{},status:{},information:{},size:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=KpiItem.js.map

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.js

@@ -1,4 +1,4 @@
-import{c as n,p as f,a as c,b as o,t as b,f as m,g,h as p,i as h,d as z,j as l,r as _,l as k,m as j}from"../../custom-element.js";import{a as w}from"../../attributes.js";var $=p("<div><div></div></div>");const x={hash:"svelte-kfj12z",code:`/**
+import{c as u,e as f,a as c,p as i,t as b,b as m,d as g,f as p,n as h,h as z,m as l,r as _,j as k,l as j}from"../../custom-element.js";import{a as w}from"../../attributes.js";var $=p("<div><div></div></div>");const x={hash:"svelte-kfj12z",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-linear-progressbar-buffer.svelte-kfj12z {--progress-value: 40;background-color:var(--progressbar-color-background, #c9d0de);height:0.25rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);}.mc-linear-progressbar-buffer__indicator.svelte-kfj12z {background-color:var(--progressbar-color-indicator, #464e63);height:100%;transition:width 0.4s ease;overflow:hidden;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;width:calc(var(--progress-value) * 1%);}.mc-linear-progressbar-buffer--s.svelte-kfj12z {height:0.125rem;}.mc-linear-progressbar-buffer--l.svelte-kfj12z {height:0.5rem;}`};function y(i,e){f(e,!0),c(i,x);let r=o(e,"value",7,0),a=o(e,"size",7,"m"),d=h(e,["$$slots","$$events","$$legacy","$$host","value","size"]);var u={get value(){return r()},set value(t=0){r(t),l()},get size(){return a()},set size(t="m"){a(t),l()}},s=$(),v=z(s);return w(v,()=>({class:"mc-linear-progressbar-buffer__indicator",role:"progressbar",style:`--progress-value: ${r()};`,"aria-valuenow":r(),"aria-valuemin":"0","aria-valuemax":"100",...d}),void 0,void 0,void 0,"svelte-kfj12z"),_(s),b(()=>k(s,1,j(["mc-linear-progressbar-buffer",`mc-linear-progressbar-buffer--${a()}`]),"svelte-kfj12z")),m(i,s),g(u)}customElements.define("m-linear-progressbar-buffer",n(y,{value:{},size:{}},[],[],!0));
+ */.mc-linear-progressbar-buffer.svelte-kfj12z {--progress-value: 40;background-color:var(--progressbar-color-background, #c9d0de);height:0.25rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);}.mc-linear-progressbar-buffer__indicator.svelte-kfj12z {background-color:var(--progressbar-color-indicator, #464e63);height:100%;transition:width 0.4s ease;overflow:hidden;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;width:calc(var(--progress-value) * 1%);}.mc-linear-progressbar-buffer--s.svelte-kfj12z {height:0.125rem;}.mc-linear-progressbar-buffer--l.svelte-kfj12z {height:0.5rem;}`};function y(o,e){f(e,!0),c(o,x);let r=i(e,"value",7,0),a=i(e,"size",7,"m"),d=h(e,["$$slots","$$events","$$legacy","$$host","value","size"]);var n={get value(){return r()},set value(t=0){r(t),l()},get size(){return a()},set size(t="m"){a(t),l()}},s=$(),v=z(s);return w(v,()=>({class:"mc-linear-progressbar-buffer__indicator",role:"progressbar",style:`--progress-value: ${r()};`,"aria-valuenow":r(),"aria-valuemin":"0","aria-valuemax":"100",...d}),void 0,void 0,void 0,"svelte-kfj12z"),_(s),b(()=>k(s,1,j(["mc-linear-progressbar-buffer",`mc-linear-progressbar-buffer--${a()}`]),"svelte-kfj12z")),m(o,s),g(n)}customElements.define("m-linear-progressbar-buffer",u(y,{value:{},size:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=LinearProgressbarBuffer.js.map

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js

@@ -1,4 +1,4 @@
-import{c as g,p as b,a as m,b as u,t as f,f as h,g as _,h as x,i as k,d as r,j as w,aH as y,r as a,e as $}from"../../custom-element.js";import{a as z}from"../../attributes.js";var j=x('<div class="mc-linear-progressbar-percentage svelte-kh7ttv"><div><div class="mc-linear-progressbar-percentage__label svelte-kh7ttv"><p class="mc-linear-progressbar-percentage__value svelte-kh7ttv"> <span class="mc-linear-progressbar-percentage__unit svelte-kh7ttv">%</span></p></div></div></div>');const L={hash:"svelte-kh7ttv",code:`/**
+import{c as g,e as b,a as m,p as u,t as f,b as h,d as _,f as k,n as x,h as r,m as w,aW as y,r as a,k as $}from"../../custom-element.js";import{a as z}from"../../attributes.js";var j=k('<div class="mc-linear-progressbar-percentage svelte-kh7ttv"><div><div class="mc-linear-progressbar-percentage__label svelte-kh7ttv"><p class="mc-linear-progressbar-percentage__value svelte-kh7ttv"> <span class="mc-linear-progressbar-percentage__unit svelte-kh7ttv">%</span></p></div></div></div>');const L={hash:"svelte-kh7ttv",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-linear-progressbar-percentage.svelte-kh7ttv {--progress-value: 40;font-family:var(--font-family, LeroyMerlin), sans-serif;background-color:var(--progressbar-color-background, #c9d0de);height:1.5rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;}.mc-linear-progressbar-percentage__indicator.svelte-kh7ttv {border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-color-indicator, #464e63);min-width:40px;height:100%;top:0;left:0;position:absolute;transition:width 0.4s ease;overflow:hidden;display:flex;justify-content:flex-end;width:calc(40px + var(--progress-value) * (100% - 40px) / 100);}.mc-linear-progressbar-percentage__label.svelte-kh7ttv {box-sizing:border-box;border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-badge-color-background, #ffffff);color:var(--progressbar-badge-color-text, #171b26);height:1.5rem;width:2.5rem;border:0.125rem solid var(--progressbar-color-indicator, #464e63);display:flex;align-items:center;justify-content:center;}.mc-linear-progressbar-percentage__value.svelte-kh7ttv {font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;}.mc-linear-progressbar-percentage__unit.svelte-kh7ttv {font-size:var(--font-size-25, 0.625rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;position:relative;bottom:1px;}`};function P(i,t){b(t,!0),m(i,L);let e=u(t,"value",7,0),v=k(t,["$$slots","$$events","$$legacy","$$host","value"]);var c={get value(){return e()},set value(p=0){e(p),w()}},s=j(),o=r(s);z(o,()=>({class:"mc-linear-progressbar-percentage__indicator",role:"progressbar",style:`--progress-value: ${e()};`,"aria-valuenow":e(),"aria-valuemin":"0","aria-valuemax":"100",...v}),void 0,void 0,void 0,"svelte-kh7ttv");var l=r(o),n=r(l),d=r(n);return y(),a(n),a(l),a(o),a(s),f(()=>$(d,`${e()??""} `)),h(i,s),_(c)}customElements.define("m-linear-progressbar-percentage",g(P,{value:{}},[],[],!0));
+ */.mc-linear-progressbar-percentage.svelte-kh7ttv {--progress-value: 40;font-family:var(--font-family, LeroyMerlin), sans-serif;background-color:var(--progressbar-color-background, #c9d0de);height:1.5rem;position:relative;min-width:6rem;border-radius:var(--border-radius-l, 1rem);box-sizing:border-box;}.mc-linear-progressbar-percentage__indicator.svelte-kh7ttv {border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-color-indicator, #464e63);min-width:40px;height:100%;top:0;left:0;position:absolute;transition:width 0.4s ease;overflow:hidden;display:flex;justify-content:flex-end;width:calc(40px + var(--progress-value) * (100% - 40px) / 100);}.mc-linear-progressbar-percentage__label.svelte-kh7ttv {box-sizing:border-box;border-radius:var(--border-radius-l, 1rem);background-color:var(--progressbar-badge-color-background, #ffffff);color:var(--progressbar-badge-color-text, #171b26);height:1.5rem;width:2.5rem;border:0.125rem solid var(--progressbar-color-indicator, #464e63);display:flex;align-items:center;justify-content:center;}.mc-linear-progressbar-percentage__value.svelte-kh7ttv {font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;}.mc-linear-progressbar-percentage__unit.svelte-kh7ttv {font-size:var(--font-size-25, 0.625rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;position:relative;bottom:1px;}`};function P(i,t){b(t,!0),m(i,L);let e=u(t,"value",7,0),v=x(t,["$$slots","$$events","$$legacy","$$host","value"]);var c={get value(){return e()},set value(p=0){e(p),w()}},s=j(),o=r(s);z(o,()=>({class:"mc-linear-progressbar-percentage__indicator",role:"progressbar",style:`--progress-value: ${e()};`,"aria-valuenow":e(),"aria-valuemin":"0","aria-valuemax":"100",...v}),void 0,void 0,void 0,"svelte-kh7ttv");var l=r(o),n=r(l),d=r(n);return y(),a(n),a(l),a(o),a(s),f(()=>$(d,`${e()??""} `)),h(i,s),_(c)}customElements.define("m-linear-progressbar-percentage",g(P,{value:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=LinearProgressbarPercentage.js.map

package/dist/components/link/Link.js

@@ -1,4 +1,4 @@
-import{c as E,p as L,a as S,b as i,s as b,f as h,g as q,h as _,i as A,d as c,j as a,r as s}from"../../custom-element.js";import{i as y}from"../../if.js";import{s as x}from"../../slot.js";import{a as F}from"../../attributes.js";import"../../branches.js";var G=_('<span class="mc-link__icon svelte-5kacnx"><!></span>'),H=_('<span class="mc-link__icon svelte-5kacnx"><!></span>'),I=_('<a><!> <span class="mc-link__label svelte-5kacnx"><!></span> <!></a>');const J={hash:"svelte-5kacnx",code:`/**
+import{c as E,e as L,a as S,p as i,s as b,b as h,d as q,f as p,n as A,h as c,m as a,r as s}from"../../custom-element.js";import{i as y}from"../../if.js";import{s as x}from"../../slot.js";import{a as F}from"../../attributes.js";import"../../branches.js";var G=p('<span class="mc-link__icon svelte-5kacnx"><!></span>'),H=p('<span class="mc-link__icon svelte-5kacnx"><!></span>'),I=p('<a><!> <span class="mc-link__label svelte-5kacnx"><!></span> <!></a>');const J={hash:"svelte-5kacnx",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-link.svelte-5kacnx {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-5kacnx {line-height:1.3;}.mc-link__icon.svelte-5kacnx {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-5kacnx:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-5kacnx) {text-decoration:underline;}.mc-link.svelte-5kacnx: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-link--m.svelte-5kacnx {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-5kacnx {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-5kacnx {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-5kacnx {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-5kacnx {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {border-bottom:var(--border-width-s, 0.0625rem) solid currentColor;}.mc-link--stand-alone.svelte-5kacnx:hover .mc-link__label:where(.svelte-5kacnx) {border-color:transparent;}.mc-link--inline.svelte-5kacnx {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {line-height:1;}.mc-link--inline.svelte-5kacnx:hover {text-decoration:none;}.mc-link__icon.svelte-5kacnx:empty {display:none;}`};function K(p,n){L(n,!0),S(p,J);let m=i(n,"href",7),f=i(n,"target",7),l=i(n,"inline",7),k=i(n,"appearance",7,"standard"),v=i(n,"size",7,"s"),r=i(n,"iconposition",7,"left"),w=A(n,["$$slots","$$events","$$legacy","$$host","href","target","inline","appearance","size","iconposition"]);var z={get href(){return m()},set href(e){m(e),a()},get target(){return f()},set target(e){f(e),a()},get inline(){return l()},set inline(e){l(e),a()},get appearance(){return k()},set appearance(e="standard"){k(e),a()},get size(){return v()},set size(e="s"){v(e),a()},get iconposition(){return r()},set iconposition(e="left"){r(e),a()}},o=I();F(o,()=>({class:["mc-link",`mc-link--${k()}`,`mc-link--${v()}`,l()&&"mc-link--inline",!l()&&"mc-link--stand-alone"],href:m(),target:f(),...w}),void 0,void 0,void 0,"svelte-5kacnx");var g=c(o);{var j=e=>{var t=G(),u=c(t);x(u,n,"icon",{},null),s(t),h(e,t)};y(g,e=>{r()==="left"&&e(j)})}var d=b(g,2),B=c(d);x(B,n,"default",{},null),s(d);var C=b(d,2);{var D=e=>{var t=H(),u=c(t);x(u,n,"icon",{},null),s(t),h(e,t)};y(C,e=>{r()==="right"&&e(D)})}return s(o),h(p,o),q(z)}customElements.define("m-link",E(K,{inline:{attribute:"inline",reflect:!0,type:"Boolean"},href:{},target:{},appearance:{},size:{},iconposition:{}},["icon","default"],[],!0));
+ */.mc-link.svelte-5kacnx {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-5kacnx {line-height:1.3;}.mc-link__icon.svelte-5kacnx {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-5kacnx:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-5kacnx) {text-decoration:underline;}.mc-link.svelte-5kacnx: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-link--m.svelte-5kacnx {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-5kacnx {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-5kacnx {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-5kacnx {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-5kacnx {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {border-bottom:var(--border-width-s, 0.0625rem) solid currentColor;}.mc-link--stand-alone.svelte-5kacnx:hover .mc-link__label:where(.svelte-5kacnx) {border-color:transparent;}.mc-link--inline.svelte-5kacnx {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {line-height:1;}.mc-link--inline.svelte-5kacnx:hover {text-decoration:none;}.mc-link__icon.svelte-5kacnx:empty {display:none;}`};function K(_,n){L(n,!0),S(_,J);let m=i(n,"href",7),f=i(n,"target",7),l=i(n,"inline",7),k=i(n,"appearance",7,"standard"),v=i(n,"size",7,"s"),o=i(n,"iconposition",7,"left"),w=A(n,["$$slots","$$events","$$legacy","$$host","href","target","inline","appearance","size","iconposition"]);var z={get href(){return m()},set href(e){m(e),a()},get target(){return f()},set target(e){f(e),a()},get inline(){return l()},set inline(e){l(e),a()},get appearance(){return k()},set appearance(e="standard"){k(e),a()},get size(){return v()},set size(e="s"){v(e),a()},get iconposition(){return o()},set iconposition(e="left"){o(e),a()}},r=I();F(r,()=>({class:["mc-link",`mc-link--${k()}`,`mc-link--${v()}`,l()&&"mc-link--inline",!l()&&"mc-link--stand-alone"],href:m(),target:f(),...w}),void 0,void 0,void 0,"svelte-5kacnx");var g=c(r);{var j=e=>{var t=G(),u=c(t);x(u,n,"icon",{},null),s(t),h(e,t)};y(g,e=>{o()==="left"&&e(j)})}var d=b(g,2),B=c(d);x(B,n,"default",{},null),s(d);var C=b(d,2);{var D=e=>{var t=H(),u=c(t);x(u,n,"icon",{},null),s(t),h(e,t)};y(C,e=>{o()==="right"&&e(D)})}return s(r),h(_,r),q(z)}customElements.define("m-link",E(K,{inline:{attribute:"inline",reflect:!0,type:"Boolean"},href:{},target:{},appearance:{},size:{},iconposition:{}},["icon","default"],[],{mode:"open"}));
 //# sourceMappingURL=Link.js.map

package/dist/components/link/Link.stories.js

@@ -64,13 +64,13 @@ export const Inline = {
 };
 export const IconLeft = {
     args: {
-        iconPosition: 'left',
+        iconposition: 'left',
         icon: '<chevron-left-24 slot="icon"></chevron-left-24>',
     },
 };
 export const IconRight = {
     args: {
-        iconPosition: 'right',
+        iconposition: 'right',
         icon: '<chevron-right-24 slot="icon"></chevron-right-24>',
     },
 };

package/dist/components/loader/Loader.js

@@ -1,4 +1,4 @@
-import{c as C,p as $,a as B,b as d,s as L,t as g,f as h,g as R,h as _,i as D,d as o,j as m,r as l,e as E}from"../../custom-element.js";import{i as S}from"../../if.js";import{a as V,s as p}from"../../attributes.js";import"../../branches.js";var q=_('<span class="mc-loader__text svelte-g7kvnj"> </span>'),A=_('<div><span class="mc-loader__spinner svelte-g7kvnj"><svg class="mc-loader__icon svelte-g7kvnj" xmlns="http://www.w3.org/2000/svg"><circle class="mc-loader__path svelte-g7kvnj" cx="50%" cy="50%"></circle></svg></span> <!></div>');const F={hash:"svelte-g7kvnj",code:`/**
+import{c as C,e as $,a as B,p as d,s as L,t as h,b as g,d as R,f as _,n as D,h as o,m,r as l,k as E}from"../../custom-element.js";import{i as S}from"../../if.js";import{a as V,s as p}from"../../attributes.js";import"../../branches.js";var q=_('<span class="mc-loader__text svelte-g7kvnj"> </span>'),A=_('<div><span class="mc-loader__spinner svelte-g7kvnj"><svg class="mc-loader__icon svelte-g7kvnj" xmlns="http://www.w3.org/2000/svg"><circle class="mc-loader__path svelte-g7kvnj" cx="50%" cy="50%"></circle></svg></span> <!></div>');const F={hash:"svelte-g7kvnj",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-loader.svelte-g7kvnj .mc-loader__spinner:where(.svelte-g7kvnj) {height:2rem;width:2rem;}.mc-loader.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke-width:4;}.mc-loader.svelte-g7kvnj {color:var(--loader-color-standard, #464e63);}.mc-loader.svelte-g7kvnj .mc-loader__path:where(.svelte-g7kvnj) {stroke:currentColor;}.mc-loader.svelte-g7kvnj {align-items:center;display:inline-flex;flex-direction:column;}.mc-loader__spinner.svelte-g7kvnj:not(:only-child) {margin-bottom:1rem;}.mc-loader__icon.svelte-g7kvnj {
   animation: svelte-g7kvnj-rotate-loader 2s linear infinite;transform-origin:center;}.mc-loader__path.svelte-g7kvnj {fill:none;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;
@@ -25,5 +25,5 @@ import{c as C,p as $,a as B,b as d,s as L,t as g,f as h,g as R,h as _,i as D,d a
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-}`};function G(k,t){$(t,!0),B(k,F);let r=d(t,"size",7,"m"),v=d(t,"appearance",7,"standard"),a=d(t,"text",7),f=D(t,["$$slots","$$events","$$legacy","$$host","size","appearance","text"]);const j=()=>{let e;switch(r()){case"xs":e="0 0 20 20";break;case"s":e="0 0 24 24";break;case"l":e="0 0 64 64";break;default:e="0 0 32 32"}return e},w=()=>{let e;switch(r()){case"xs":e=6;break;case"s":e=6;break;case"l":e=19;break;default:e=9}return e};var x={get size(){return r()},set size(e="m"){r(e),m()},get appearance(){return v()},set appearance(e="standard"){v(e),m()},get text(){return a()},set text(e){a(e),m()}},n=A();V(n,()=>({class:["mc-loader",`mc-loader--${r()}`,`mc-loader--${v()}`,a()&&"mc-loader--text-visible"],...f}),void 0,void 0,void 0,"svelte-g7kvnj");var c=o(n),i=o(c),u=o(i);l(i),l(c);var b=L(c,2);{var y=e=>{var s=q(),z=o(s,!0);l(s),g(()=>E(z,a())),h(e,s)};S(b,e=>{a()&&e(y)})}return l(n),g((e,s)=>{p(i,"viewBox",e),p(u,"r",s)},[j,w]),h(k,n),R(x)}customElements.define("m-loader",C(G,{size:{},appearance:{},text:{}},[],[],!0));export{G as L};
+}`};function G(k,t){$(t,!0),B(k,F);let r=d(t,"size",7,"m"),v=d(t,"appearance",7,"standard"),a=d(t,"text",7),f=D(t,["$$slots","$$events","$$legacy","$$host","size","appearance","text"]);const j=()=>{let e;switch(r()){case"xs":e="0 0 20 20";break;case"s":e="0 0 24 24";break;case"l":e="0 0 64 64";break;default:e="0 0 32 32"}return e},w=()=>{let e;switch(r()){case"xs":e=6;break;case"s":e=6;break;case"l":e=19;break;default:e=9}return e};var x={get size(){return r()},set size(e="m"){r(e),m()},get appearance(){return v()},set appearance(e="standard"){v(e),m()},get text(){return a()},set text(e){a(e),m()}},n=A();V(n,()=>({class:["mc-loader",`mc-loader--${r()}`,`mc-loader--${v()}`,a()&&"mc-loader--text-visible"],...f}),void 0,void 0,void 0,"svelte-g7kvnj");var c=o(n),i=o(c),u=o(i);l(i),l(c);var b=L(c,2);{var y=e=>{var s=q(),z=o(s,!0);l(s),h(()=>E(z,a())),g(e,s)};S(b,e=>{a()&&e(y)})}return l(n),h((e,s)=>{p(i,"viewBox",e),p(u,"r",s)},[j,w]),g(k,n),R(x)}customElements.define("m-loader",C(G,{size:{},appearance:{},text:{}},[],[],{mode:"open"}));export{G as L};
 //# sourceMappingURL=Loader.js.map

package/dist/components/loadingoverlay/LoadingOverlay.js

@@ -1,4 +1,4 @@
-import{c as b,p as u,a as y,b as r,t as f,f as g,g as x,h as z,i as _,d as n,j as v,r as c,l as h,m as $}from"../../custom-element.js";import{a as L}from"../../attributes.js";import{L as j}from"../loader/Loader.js";import"../../if.js";import"../../branches.js";var k=z("<div><div><!></div></div>");const w={hash:"svelte-111c1z1",code:`/**
+import{c as b,e as y,a as f,p as r,t as u,b as g,d as x,f as z,n as _,h as n,m as v,r as d,j as h,l as $}from"../../custom-element.js";import{a as L}from"../../attributes.js";import{L as j}from"../loader/Loader.js";import"../../if.js";import"../../branches.js";var k=z("<div><div><!></div></div>");const w={hash:"svelte-111c1z1",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-loading-loader.svelte-111c1z1 {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);}.mc-loading-loader.is-visible.svelte-111c1z1 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}.mc-loading-loader.svelte-111c1z1 {align-items:center;display:flex;justify-content:center;}`};function B(o,e){u(e,!0),y(o,w);let s=r(e,"isvisible",7),t=r(e,"text",7),d=_(e,["$$slots","$$events","$$legacy","$$host","isvisible","text"]);var m={get isvisible(){return s()},set isvisible(l){s(l),v()},get text(){return t()},set text(l){t(l),v()}},i=k(),a=n(i);L(a,()=>({role:"dialog",tabindex:"-1","aria-label":t(),...d}),void 0,void 0,void 0,"svelte-111c1z1");var p=n(a);return j(p,{size:"l",appearance:"inverse",get text(){return t()}}),c(a),c(i),f(()=>h(i,1,$(["mc-loading-loader",s()&&"is-visible"]),"svelte-111c1z1")),g(o,i),x(m)}customElements.define("m-loading-overlay",b(B,{isvisible:{attribute:"isvisible",reflect:!0,type:"Boolean"},text:{}},[],[],!0));
+ */.mc-loading-loader.svelte-111c1z1 {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 4);}.mc-loading-loader.is-visible.svelte-111c1z1 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}.mc-loading-loader.svelte-111c1z1 {align-items:center;display:flex;justify-content:center;}`};function B(l,e){y(e,!0),f(l,w);let s=r(e,"isvisible",7),t=r(e,"text",7),c=_(e,["$$slots","$$events","$$legacy","$$host","isvisible","text"]);var m={get isvisible(){return s()},set isvisible(o){s(o),v()},get text(){return t()},set text(o){t(o),v()}},i=k(),a=n(i);L(a,()=>({role:"dialog",tabindex:"-1","aria-label":t(),...c}),void 0,void 0,void 0,"svelte-111c1z1");var p=n(a);return j(p,{size:"l",appearance:"inverse",get text(){return t()}}),d(a),d(i),u(()=>h(i,1,$(["mc-loading-loader",s()&&"is-visible"]),"svelte-111c1z1")),g(l,i),x(m)}customElements.define("m-loading-overlay",b(B,{isvisible:{attribute:"isvisible",reflect:!0,type:"Boolean"},text:{}},[],[],{mode:"open"}));
 //# sourceMappingURL=LoadingOverlay.js.map

package/dist/components/loadingoverlay/LoadingOverlay.svelte

@@ -43,7 +43,7 @@
   position: fixed;
   pointer-events: none;
   transition: opacity 0.4s ease, visibility 0ms 0.4s;
-  z-index: var(--overlay-z-index, 2);
+  z-index: var(--overlay-z-index, 4);
 }
 .mc-loading-loader.is-visible {
   opacity: 1;

package/dist/components/modal/Modal.js

@@ -1,16 +1,16 @@
-import{o as J,c as K,p as L,a as P,b,s as d,t as E,f as x,g as Q,h as y,i as R,d as e,j as u,r,e as B}from"../../custom-element.js";import{i as O}from"../../if.js";import{s}from"../../slot.js";import{a as U}from"../../attributes.js";import{b as V}from"../../this.js";import{n as W}from"../../Condition20.js";import{O as X}from"../overlay/Overlay.js";import"../../branches.js";var Z=y('<button type="button" class="mc-modal__close mc-button mc-button--icon-button mc-button--ghost svelte-1tduk3b" aria-label="Close"><!></button>'),$=y('<p class="svelte-1tduk3b"> </p>'),oo=y('<section><div class="mc-modal__dialog svelte-1tduk3b" role="document"><header class="mc-modal__header svelte-1tduk3b"><span class="mc-modal__icon svelte-1tduk3b"><!></span> <h2 class="mc-modal__title svelte-1tduk3b" id="modalTitle"> </h2> <!></header> <main class="mc-modal__body svelte-1tduk3b"><!> <!></main> <footer class="mc-modal__footer svelte-1tduk3b"><span class="mc-modal__link svelte-1tduk3b"><!></span> <!></footer></div> <!></section>');const to={hash:"svelte-1tduk3b",code:`/**
+import{o as J,c as K,e as L,a as P,p as c,s as d,t as j,b as y,d as Q,f as z,n as R,h as e,m as b,r,u as V,k as E}from"../../custom-element.js";import{i as B}from"../../if.js";import{s}from"../../slot.js";import{a as W}from"../../attributes.js";import{b as X}from"../../this.js";import{q as Z}from"../../Condition20.js";import{O as $}from"../overlay/Overlay.js";import"../../branches.js";var oo=z('<button type="button" class="mc-modal__close mc-button mc-button--icon-button mc-button--ghost svelte-1tduk3b" aria-label="Close"><!></button>'),to=z('<p class="svelte-1tduk3b"> </p>'),eo=z('<section><div class="mc-modal__dialog svelte-1tduk3b" role="document"><header class="mc-modal__header svelte-1tduk3b"><span class="mc-modal__icon svelte-1tduk3b"><!></span> <h2 class="mc-modal__title svelte-1tduk3b" id="modalTitle"> </h2> <!></header> <main class="mc-modal__body svelte-1tduk3b"><!> <!></main> <footer class="mc-modal__footer svelte-1tduk3b"><span class="mc-modal__link svelte-1tduk3b"><!></span> <!></footer></div> <!></section>');const ro={hash:"svelte-1tduk3b",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-modal.svelte-1tduk3b {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 3);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto;}
+ */.mc-modal.svelte-1tduk3b {box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:var(--modal-z-index, 5);display:flex;justify-content:center;align-items:flex-end;overflow:hidden auto;}
 @media (width >= 680px) {.mc-modal.svelte-1tduk3b {align-items:center;}
-}.mc-modal__dialog.svelte-1tduk3b {background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:3;}
+}.mc-modal__dialog.svelte-1tduk3b {background:var(--modal-color-background, #ffffff);display:flex;flex-direction:column;opacity:0;position:relative;transform:translateY(-25%);transition:visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;visibility:hidden;width:100%;border-radius:var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;z-index:var(--modal-z-index, 5);}
 @media (width >= 680px) {.mc-modal__dialog.svelte-1tduk3b {width:38rem;border-radius:var(--border-radius-l, 1rem);}
 }.mc-modal.is-open.svelte-1tduk3b .mc-modal__dialog:where(.svelte-1tduk3b) {opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s, transform 0.4s ease, opacity 0.4s ease;visibility:visible;}.mc-modal__header.svelte-1tduk3b {align-items:center;display:flex;gap:0.5rem;min-height:3rem;padding:1rem;position:relative;}
 @media (width >= 680px) {.mc-modal__header.svelte-1tduk3b {padding:1.5rem 1.5rem 1rem 1.5rem;}
-}.mc-modal__icon.svelte-1tduk3b {width:2rem;height:2rem;}.mc-modal__title.svelte-1tduk3b {font-size:var(--font-title-m, 1.5rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--modal-color-title, #000000);margin-bottom:0.5rem;margin-top:0.5rem;padding-right:3rem;}.mc-modal__close.svelte-1tduk3b {position:absolute;top:0.75rem;right:0.75rem;}.mc-modal__body.svelte-1tduk3b {font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem;}
+}.mc-modal__icon.svelte-1tduk3b {width:2rem;height:2rem;color:var(--modal-color-title, #000000);}.mc-modal__title.svelte-1tduk3b {font-size:var(--font-title-m, 1.5rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--modal-color-title, #000000);margin-bottom:0.5rem;margin-top:0.5rem;padding-right:3rem;}.mc-modal__close.svelte-1tduk3b {position:absolute;top:0.75rem;right:0.75rem;}.mc-modal__body.svelte-1tduk3b {font-size:var(--font-size-150, 1rem);color:var(--modal-color-paragraph, #404040);padding:0 1rem;margin-bottom:1rem;}
 @media (width >= 680px) {.mc-modal__body.svelte-1tduk3b {padding:0 1.5rem;}
 }.mc-modal__body.svelte-1tduk3b p:where(.svelte-1tduk3b) {margin:0;line-height:var(--line-height-s, 1.3);}.mc-modal__footer.svelte-1tduk3b {align-items:stretch;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1rem;padding:0.5rem 1rem 1rem 1rem;}
 @media (width >= 680px) {.mc-modal__footer.svelte-1tduk3b {flex-direction:row;padding:0.5rem 1.5rem 1.5rem 1.5rem;}
 }.mc-modal__link.svelte-1tduk3b {order:1;}
 @media (width >= 680px) {.mc-modal__link.svelte-1tduk3b {margin-right:auto;order:0;}
-}.mc-modal-open.svelte-1tduk3b {overflow:hidden;}.mc-button.svelte-1tduk3b {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1tduk3b:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1tduk3b:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1tduk3b: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-1tduk3b {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-1tduk3b {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-1tduk3b {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1tduk3b {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1tduk3b: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-1tduk3b: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-1tduk3b {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-1tduk3b {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1tduk3b {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-1tduk3b {padding:0.25rem;}.mc-button--outlined.svelte-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1tduk3b:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1tduk3b: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-1tduk3b {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1tduk3b:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1tduk3b: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-1tduk3b {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1tduk3b:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1tduk3b: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-1tduk3b {--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-1tduk3b:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1tduk3b: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-1tduk3b {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-1tduk3b {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1tduk3b:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-modal__icon.svelte-1tduk3b:empty {display:none;}`};function eo(z,t){L(t,!0),P(z,to);let n=b(t,"open",7),i=b(t,"title",7),c=b(t,"description",7),v=b(t,"closable",7,!0),T=R(t,["$$slots","$$events","$$legacy","$$host","open","title","description","closable"]),m;function Y(){n(!1);const o=new CustomEvent("update:open",{detail:n(),bubbles:!0,composed:!0});m.dispatchEvent(o)}var D={get open(){return n()},set open(o){n(o),u()},get title(){return i()},set title(o){i(o),u()},get description(){return c()},set description(o){c(o),u()},get closable(){return v()},set closable(o=!0){v(o),u()}},l=oo();U(l,()=>({class:["mc-modal",n()&&"is-open"],tabindex:"-1","aria-labelledby":"modalTitle","aria-hidden":!n(),...T}),void 0,void 0,void 0,"svelte-1tduk3b");var g=e(l),k=e(g),f=e(k),M=e(f);s(M,t,"icon",{},null),r(f);var h=d(f,2),N=e(h,!0);r(h);var S=d(h,2);{var q=o=>{var a=Z();a.__click=Y;var w=e(a);W(w,{className:"mc-modal__close"}),r(a),x(o,a)};O(S,o=>{v()&&o(q)})}r(k);var p=d(k,2),j=e(p);{var A=o=>{var a=$(),w=e(a,!0);r(a),E(()=>B(w,c())),x(o,a)};O(j,o=>{c()&&o(A)})}var F=d(j,2);s(F,t,"default",{},null),r(p);var C=d(p,2),_=e(C),G=e(_);s(G,t,"link",{},null),r(_);var H=d(_,2);s(H,t,"footer",{},null),r(C),r(g);var I=d(g,2);return X(I,{get isvisible(){return n()},dialoglabel:"modal"}),r(l),V(l,o=>m=o,()=>m),E(()=>B(N,i())),x(z,l),Q(D)}J(["click"]);customElements.define("m-modal",K(eo,{open:{attribute:"open",reflect:!0,type:"Boolean"},closable:{attribute:"closable",reflect:!0,type:"Boolean"},title:{},description:{}},["icon","default","link","footer"],[],!0));
+}.mc-modal-open.svelte-1tduk3b {overflow:hidden;}.mc-button.svelte-1tduk3b {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-1tduk3b:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1tduk3b:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1tduk3b: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-1tduk3b {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, 0.25rem);}.mc-button.svelte-1tduk3b {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-1tduk3b {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-1tduk3b {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1tduk3b: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-1tduk3b: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-1tduk3b {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;border-radius:var(--button-border-radius-s, 0.25rem);}.mc-button--m.svelte-1tduk3b {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;border-radius:var(--button-border-radius-m, 0.25rem);}.mc-button--l.svelte-1tduk3b {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;border-radius:var(--button-border-radius-l, 0.25rem);}.mc-button--icon-only.svelte-1tduk3b {padding:0.25rem;}.mc-button--outlined.svelte-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1tduk3b:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1tduk3b: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-1tduk3b {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1tduk3b:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1tduk3b: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-1tduk3b {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1tduk3b:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1tduk3b: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-1tduk3b {--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-1tduk3b:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1tduk3b: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-1tduk3b {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--loading.svelte-1tduk3b {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1tduk3b:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1tduk3b:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1tduk3b:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1tduk3b:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1tduk3b: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-1tduk3b {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-1tduk3b:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1tduk3b:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1tduk3b:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-modal__icon.svelte-1tduk3b:empty {display:none;}`};function ao(O,t){L(t,!0),P(O,ro);let a=c(t,"open",7),i=c(t,"title",7),u=c(t,"description",7),v=c(t,"closable",7,!0),m=c(t,"onUpdateOpen",7),T=R(t,["$$slots","$$events","$$legacy","$$host","open","title","description","closable","onUpdateOpen"]),g;function Y(){a(!1),m()?.(a());const o=new CustomEvent("update:open",{detail:a(),bubbles:!0,composed:!0});g.dispatchEvent(o)}var q={get open(){return a()},set open(o){a(o),b()},get title(){return i()},set title(o){i(o),b()},get description(){return u()},set description(o){u(o),b()},get closable(){return v()},set closable(o=!0){v(o),b()},get onUpdateOpen(){return m()},set onUpdateOpen(o){m(o),b()}},l=eo();W(l,()=>({class:["mc-modal",a()&&"is-open"],tabindex:"-1","aria-labelledby":"modalTitle","aria-hidden":!a(),...T}),void 0,void 0,void 0,"svelte-1tduk3b");var k=e(l),f=e(k),h=e(f),D=e(h);s(D,t,"icon",{},null),r(h);var p=d(h,2),M=e(p,!0);r(p);var N=d(p,2);{var S=o=>{var n=oo(),x=e(n);Z(x,{className:"mc-modal__close"}),r(n),V("click",n,Y),y(o,n)};B(N,o=>{v()&&o(S)})}r(f);var _=d(f,2),U=e(_);{var A=o=>{var n=to(),x=e(n,!0);r(n),j(()=>E(x,u())),y(o,n)};B(U,o=>{u()&&o(A)})}var F=d(U,2);s(F,t,"default",{},null),r(_);var C=d(_,2),w=e(C),G=e(w);s(G,t,"link",{},null),r(w);var H=d(w,2);s(H,t,"footer",{},null),r(C),r(k);var I=d(k,2);return $(I,{get isvisible(){return a()},dialoglabel:"modal"}),r(l),X(l,o=>g=o,()=>g),j(()=>E(M,i())),y(O,l),Q(q)}J(["click"]);customElements.define("m-modal",K(ao,{open:{attribute:"open",reflect:!0,type:"Boolean"},closable:{attribute:"closable",reflect:!0,type:"Boolean"},title:{},description:{},onUpdateOpen:{}},["icon","default","link","footer"],[],{mode:"open"}));
 //# sourceMappingURL=Modal.js.map

package/dist/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-modal',\n    props: {\n      open: { reflect: true, type: 'Boolean', attribute: 'open' },\n      closable: { reflect: true, type: 'Boolean', attribute: 'closable' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { Cross24 } from '@mozaic-ds/icons-svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.\n   *\n   * @slot icon - Use this slot to insert an icon next to the title of the modal.\n   * @slot default - Use this slot to insert the content of the modal.\n   * @slot link - Use this slot to insert a link in the footer.\n   * @slot footer - Use this slot to insert buttons in the footer.\n   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * if `true`, display the modal.\n     */\n    open?: boolean;\n    /**\n     * Title of the modal.\n     */\n    title: string;\n    /**\n     * Description of the modal.\n     */\n    description?: string;\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }\n\n  let { open, title, description, closable = true, ...attrs }: Props = $props();\n  let element: HTMLElement;\n\n  function onClose() {\n    open = false;\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  }\n</script>\n\n<section\n  class={['mc-modal', open && 'is-open']}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n  bind:this={element}\n  {...attrs}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      <span class=\"mc-modal__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n      {#if closable}\n        <button\n          type=\"button\"\n          class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Close\"\n          onclick={onClose}\n        >\n          <Cross24 className=\"mc-modal__close\" />\n        </button>\n      {/if}\n    </header>\n\n    <main class=\"mc-modal__body\">\n      {#if description}\n        <p>{description}</p>\n      {/if}\n      <slot />\n    </main>\n\n    <footer class=\"mc-modal__footer\">\n      <span class=\"mc-modal__link\">\n        <slot name=\"link\" />\n      </span>\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n\n  <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/modal';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-modal__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["open","$.prop","$$props","title","description","closable","attrs","$.rest_props","element","onClose","event","section","root","div","$.child","header","span","h2","button","root_1","node_2","Cross24","$.reset","$.append","$$anchor","$$render","consequent","main","p","root_2","consequent_1","footer","span_1","MOverlay","node_7","$$value"],"mappings":";;;;;;;;;;;;;;o2WAUA,qBAgCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EAAEG,mBAAW,EAAI,EAAKC,EAAKC,EAAAL,EAAA,oFACrDM,EAEK,SAAAC,GAAU,CACjBT,EAAO,EAAK,EAEN,MAAAU,EAAK,IAAO,YAAY,eAC5B,OAAQV,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBQ,EAAQ,cAAcE,CAAK,CAC7B,yMAZ2C,GAAI,YAehDC,EAAAC,GAAA,IAAAD,eACS,WAAYX,EAAI,GAAI,SAAS,8DAGvBA,EAAI,KAEdM,2CAEH,IAAAO,EAAGC,EARLH,CAAA,EASII,IADFF,CAAG,EAECG,IADFD,CAAM,MACJC,CAAI,0BAAJA,CAAI,EAGJ,IAAAC,IAHAD,EAAI,CAAA,MAGJC,EAAE,EAAA,IAAFA,CAAE,UAAFA,EAAE,CAAA,aAEA,IAAAC,EAAAC,EAAA,EAAAD,EAIC,QAAST,EAJV,IAAAW,EAAAN,EAAAI,CAAA,EAMEG,EAAOD,EAAA,CAAA,UAAA,iBAAA,CAAA,EANTE,EAAAJ,CAAA,EAAAK,EAAAC,EAAAN,CAAA,WADEb,EAAQ,GAAAoB,EAAAC,CAAA,MALdX,CAAM,EAiBN,IAAAY,IAjBAZ,EAAM,CAAA,MAiBNY,CAAI,iBAEAC,EAACC,EAAA,MAADD,EAAC,EAAA,IAADA,CAAC,YAAExB,EAAW,CAAA,CAAA,MAAdwB,CAAC,WADCxB,EAAW,GAAAqB,EAAAK,CAAA,4CADjBH,CAAI,EAOJ,IAAAI,IAPAJ,EAAI,CAAA,EAQFK,IADFD,CAAM,MACJC,CAAI,0BAAJA,CAAI,UAAJA,EAAI,CAAA,4BADND,CAAM,IAzBRlB,CAAG,UAAHA,EAAG,CAAA,EAiCHoB,OAAAA,EAAQC,EAAA,wBAAYlC,EAAI,yBAzC1BsB,EAAAX,CAAA,IAAAA,EAAAwB,GAKY3B,QAAAA,CAAO,YAQ+BL,EAAK,CAAA,CAAA,EAbvDoB,EAAAC,EAAAb,CAAA,MAFO"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modal/Modal.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-modal',\n    props: {\n      open: { reflect: true, type: 'Boolean', attribute: 'open' },\n      closable: { reflect: true, type: 'Boolean', attribute: 'closable' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import { Cross24 } from '@mozaic-ds/icons-svelte';\n  import MOverlay from '../overlay/Overlay.svelte';\n  /**\n   * A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.\n   *\n   * @slot icon - Use this slot to insert an icon next to the title of the modal.\n   * @slot default - Use this slot to insert the content of the modal.\n   * @slot link - Use this slot to insert a link in the footer.\n   * @slot footer - Use this slot to insert buttons in the footer.\n   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * if `true`, display the modal.\n     */\n    open?: boolean;\n    /**\n     * Title of the modal.\n     */\n    title: string;\n    /**\n     * Description of the modal.\n     */\n    description?: string;\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n    /**\n     * Callback fired when the modal open state changes.\n     */\n    onUpdateOpen?: (open: boolean) => void;\n  }\n\n  let { open, title, description, closable = true, onUpdateOpen, ...attrs }: Props = $props();\n  let element: HTMLElement;\n\n  function onClose() {\n    open = false;\n\n    onUpdateOpen?.(open);\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  }\n</script>\n\n<section\n  class={['mc-modal', open && 'is-open']}\n  tabindex=\"-1\"\n  aria-labelledby=\"modalTitle\"\n  aria-hidden={!open}\n  bind:this={element}\n  {...attrs}\n>\n  <div class=\"mc-modal__dialog\" role=\"document\">\n    <header class=\"mc-modal__header\">\n      <span class=\"mc-modal__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <h2 class=\"mc-modal__title\" id=\"modalTitle\">{title}</h2>\n      {#if closable}\n        <button\n          type=\"button\"\n          class=\"mc-modal__close mc-button mc-button--icon-button mc-button--ghost\"\n          aria-label=\"Close\"\n          onclick={onClose}\n        >\n          <Cross24 className=\"mc-modal__close\" />\n        </button>\n      {/if}\n    </header>\n\n    <main class=\"mc-modal__body\">\n      {#if description}\n        <p>{description}</p>\n      {/if}\n      <slot />\n    </main>\n\n    <footer class=\"mc-modal__footer\">\n      <span class=\"mc-modal__link\">\n        <slot name=\"link\" />\n      </span>\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n\n  <MOverlay isvisible={open} dialoglabel=\"modal\" />\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/modal';\n  @use '@mozaic-ds/styles/components/button';\n\n  .mc-modal__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["open","$.prop","$$props","title","description","closable","onUpdateOpen","attrs","$.rest_props","element","onClose","event","section","root","div","$.child","header","span","h2","button","root_1","node_2","Cross24","$.reset","$.delegated","$.append","$$anchor","$$render","consequent","main","p","root_2","consequent_1","footer","span_1","MOverlay","node_7","$$value"],"mappings":";;;;;;;;;;;;;;mgXAUA,qBAoCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EAAEG,mBAAW,EAAI,EAAEC,EAAYL,EAAAC,EAAA,eAAA,CAAA,EAAKK,EAAKC,EAAAN,EAAA,mGACnEO,EAEK,SAAAC,GAAU,CACjBV,EAAO,EAAK,EAEZM,EAAY,IAAGN,GAAI,EAEb,MAAAW,EAAK,IAAO,YAAY,eAC5B,OAAQX,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBS,EAAQ,cAAcE,CAAK,CAC7B,yMAd2C,GAAI,yEAiBhDC,EAAAC,GAAA,IAAAD,eACS,WAAYZ,EAAI,GAAI,SAAS,8DAGvBA,EAAI,KAEdO,2CAEH,IAAAO,EAAGC,EARLH,CAAA,EASII,IADFF,CAAG,EAECG,IADFD,CAAM,MACJC,CAAI,0BAAJA,CAAI,EAGJ,IAAAC,IAHAD,EAAI,CAAA,MAGJC,EAAE,EAAA,IAAFA,CAAE,UAAFA,EAAE,CAAA,aAEA,IAAAC,EAAAC,GAAA,EAAAC,EAAAN,EAAAI,CAAA,EAMEG,EAAOD,EAAA,CAAA,UAAA,iBAAA,CAAA,EANTE,EAAAJ,CAAA,EAAAK,EAAA,QAAAL,EAIUT,CAAO,EAJjBe,EAAAC,EAAAP,CAAA,WADEd,EAAQ,GAAAsB,EAAAC,CAAA,MALdZ,CAAM,EAiBN,IAAAa,IAjBAb,EAAM,CAAA,MAiBNa,CAAI,iBAEAC,EAACC,GAAA,MAADD,EAAC,EAAA,IAADA,CAAC,YAAE1B,EAAW,CAAA,CAAA,MAAd0B,CAAC,WADC1B,EAAW,GAAAuB,EAAAK,CAAA,4CADjBH,CAAI,EAOJ,IAAAI,IAPAJ,EAAI,CAAA,EAQFK,IADFD,CAAM,MACJC,CAAI,0BAAJA,CAAI,UAAJA,EAAI,CAAA,4BADND,CAAM,IAzBRnB,CAAG,UAAHA,EAAG,CAAA,EAiCHqB,OAAAA,EAAQC,EAAA,wBAAYpC,EAAI,yBAzC1BuB,EAAAX,CAAA,IAAAA,EAAAyB,GAKY5B,QAAAA,CAAO,YAQ+BN,EAAK,CAAA,CAAA,EAbvDsB,EAAAC,EAAAd,CAAA,MAFO"}

package/dist/components/modal/Modal.spec.js

@@ -28,13 +28,15 @@ describe('m-modal component', () => {
         expect(queryByRole('button', { name: 'Close' })).toBeNull();
     });
     it('emits update:open event with false when close button is clicked', async () => {
+        const onUpdateOpen = vi.fn();
         const { container } = render(Modal, {
-            props: { open: true, title },
+            props: { open: true, title, onUpdateOpen },
         });
         const closeButton = container.querySelector('button[aria-label="Close"]');
         const handler = vi.fn();
         container.addEventListener('update:open', handler);
         await fireEvent.click(closeButton);
+        expect(onUpdateOpen).toHaveBeenCalledTimes(1);
         expect(handler).toHaveBeenCalledTimes(1);
         expect(handler.mock.calls[0][0].detail).toBe(false);
     });

package/dist/components/modal/Modal.svelte

@@ -38,14 +38,20 @@
      * if `true`, display the close button.
      */
     closable?: boolean;
+    /**
+     * Callback fired when the modal open state changes.
+     */
+    onUpdateOpen?: (open: boolean) => void;
   }
 
-  let { open, title, description, closable = true, ...attrs }: Props = $props();
+  let { open, title, description, closable = true, onUpdateOpen, ...attrs }: Props = $props();
   let element: HTMLElement;
 
   function onClose() {
     open = false;
 
+    onUpdateOpen?.(open);
+
     const event = new CustomEvent('update:open', {
       detail: open,
       bubbles: true,
@@ -108,7 +114,7 @@
   outline: 0;
   pointer-events: none;
   position: fixed;
-  z-index: var(--modal-z-index, 3);
+  z-index: var(--modal-z-index, 5);
   display: flex;
   justify-content: center;
   align-items: flex-end;
@@ -130,7 +136,7 @@
   visibility: hidden;
   width: 100%;
   border-radius: var(--border-radius-l, 1rem) var(--border-radius-l, 1rem) 0 0;
-  z-index: 3;
+  z-index: var(--modal-z-index, 5);
 }
 @media (width >= 680px) {
   .mc-modal__dialog {
@@ -161,6 +167,7 @@
 .mc-modal__icon {
   width: 2rem;
   height: 2rem;
+  color: var(--modal-color-title, #000000);
 }
 .mc-modal__title {
   font-size: var(--font-title-m, 1.5rem);
@@ -238,6 +245,7 @@
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+  border-radius: var(--button-border-radius-m, 0.25rem);
 }
 .mc-button .mc-button__label {
   font-size: var(--font-size-150, 1rem);
@@ -248,7 +256,6 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -281,6 +288,7 @@
   padding: 0 calc(0.75rem - 0.125rem);
   min-height: 2rem;
   min-width: 2rem;
+  border-radius: var(--button-border-radius-s, 0.25rem);
 }
 .mc-button--s .mc-button__label {
   font-size: var(--font-size-100, 0.875rem);
@@ -297,6 +305,7 @@
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+  border-radius: var(--button-border-radius-m, 0.25rem);
 }
 .mc-button--m .mc-button__label {
   font-size: var(--font-size-150, 1rem);
@@ -313,6 +322,7 @@
   padding: 0 calc(1.25rem - 0.125rem);
   min-height: 4rem;
   min-width: 4rem;
+  border-radius: var(--button-border-radius-l, 0.25rem);
 }
 .mc-button--l .mc-button__label {
   font-size: var(--font-size-200, 1.125rem);

package/dist/components/modal/Modal.svelte.d.ts

@@ -25,6 +25,10 @@ interface Props {
      * if `true`, display the close button.
      */
     closable?: boolean;
+    /**
+     * Callback fired when the modal open state changes.
+     */
+    onUpdateOpen?: (open: boolean) => void;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/components/modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.svelte.ts"],"names":[],"mappings":"AAME;;;;;;;;GAQG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiEH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.svelte.ts"],"names":[],"mappings":"AAME;;;;;;;;GAQG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAmEH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;;;;;;;UAAqF,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/components/modal/README.md

@@ -10,6 +10,7 @@ A modal is a dialog window that appears on top of the main content, requiring us
 | `title*` | Title of the modal. | `string` |   |
 | `description` | Description of the modal. | `string` |   |
 | `closable` | if `true`, display the close button. | `boolean` | `true` |
+| `onUpdateOpen` | Callback fired when the modal open state changes. | `(open: boolean) => void` |   |
 
 ## Slots
 

package/dist/components/navigationindicator/NavigationIndicator.js

@@ -0,0 +1,4 @@
+import{c as G,e as H,a as J,p as r,s as L,b as s,d as M,f as W,h as S,m as c,r as P,y as B,x as E,i as j,aW as O,aZ as Q,t as R,k as T,w as U}from"../../custom-element.js";import{i as D}from"../../if.js";import{e as V,i as X}from"../../each.js";import{c as K}from"../../svelte-component.js";import{a as Y}from"../../attributes.js";import{b as tt}from"../../this.js";import{B as et}from"../button/Button.js";import{I as ot}from"../iconbutton/IconButton.js";import{P as at,x as it}from"../../Condition20.js";import"../../branches.js";import"../../slot.js";import"../loader/Loader.js";var nt=W('<li class="mc-navigation-indicator__item svelte-1u324yb"><button></button></li>'),rt=W('<div class="mc-navigation-indicator svelte-1u324yb" role="navigation" aria-label="Navigations steps"><ul class="mc-navigation-indicator__list svelte-1u324yb"></ul> <!></div>');const st={hash:"svelte-1u324yb",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-navigation-indicator.svelte-1u324yb {display:flex;align-items:center;gap:0.5rem;max-width:42rem;overflow:scroll;}.mc-navigation-indicator__list.svelte-1u324yb {display:flex;align-items:center;gap:0.25rem;list-style:none;margin:0;padding:0;}.mc-navigation-indicator__item.svelte-1u324yb {display:flex;align-items:center;justify-content:center;}.mc-navigation-indicator__button.svelte-1u324yb {transition:box-shadow 200ms ease;width:1.5rem;height:0.5rem;border:none;border-radius:var(--border-radius-l, 1rem);background-color:var(--navigation-indicator-color-background-default, #c9d0de);cursor:pointer;transition:height 0.2s ease, height 0.2s ease, background-color 0.2s ease;}.mc-navigation-indicator__button.svelte-1u324yb: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-navigation-indicator__button--active.svelte-1u324yb {width:3rem;height:0.75rem;background-color:var(--navigation-indicator-color-background-active, #464e63);}`};function ct(I,a){H(a,!0),J(I,st);let g=r(a,"steps",7),l=r(a,"selected",15),b=r(a,"action",7,"resume"),d=r(a,"label",7),p=r(a,"player",7,!0),_=r(a,"onAction",7),y;const C=U(()=>b()==="pause"?at:it);function N(t){l(t)}function Z(t,u){t.key==="Enter"&&N(u)}function z(){_()?.(),y.dispatchEvent(new CustomEvent("action",{bubbles:!0,composed:!0}))}var $={get steps(){return g()},set steps(t){g(t),c()},get selected(){return l()},set selected(t){l(t),c()},get action(){return b()},set action(t="resume"){b(t),c()},get label(){return d()},set label(t){d(t),c()},get player(){return p()},set player(t=!0){p(t),c()},get onAction(){return _()},set onAction(t){_(t),c()}},v=rt(),h=S(v);V(h,21,()=>Array.from({length:g()}),X,(t,u,n)=>{var m=nt(),k=S(m),e=()=>N(n),i=f=>Z(f,n);Y(k,()=>({class:{"mc-navigation-indicator__button":!0,"mc-navigation-indicator__button--active":l()==n},"aria-label":"Navigation step button",...l()==n?{"aria-current":"step"}:{},onclick:e,onkeydown:i}),void 0,void 0,void 0,"svelte-1u324yb"),P(m),s(t,m)}),P(h);var q=L(h,2);{var F=t=>{var u=B(),n=E(u);{var m=e=>{et(e,{size:"s",iconposition:"left",ghost:!0,onclick:z,children:(i,f)=>{O();var o=Q();R(()=>T(o,d())),s(i,o)},$$slots:{default:!0,icon:(i,f)=>{var o=B(),w=E(o);K(w,()=>j(C),(x,A)=>{A(x,{slot:"icon"})}),s(i,o)}}})},k=e=>{ot(e,{size:"s",ghost:!0,onclick:z,$$slots:{icon:(i,f)=>{var o=B(),w=E(o);K(w,()=>j(C),(x,A)=>{A(x,{slot:"icon"})}),s(i,o)}}})};D(n,e=>{d()?e(m):e(k,-1)})}s(t,u)};D(q,t=>{p()&&t(F)})}return P(v),tt(v,t=>y=t,()=>y),s(I,v),M($)}customElements.define("m-navigation-indicator",G(ct,{player:{attribute:"player",reflect:!0,type:"Boolean"},steps:{},selected:{},action:{},label:{},onAction:{}},[],[],{mode:"open"}));
+//# sourceMappingURL=NavigationIndicator.js.map

package/dist/components/navigationindicator/NavigationIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationIndicator.js","sources":["../../../src/components/navigationindicator/NavigationIndicator.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-navigation-indicator',\n    props: {\n      player: { reflect: true, type: 'Boolean', attribute: 'player' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import Button from '../button/Button.svelte';\n  import IconButton from '../iconbutton/IconButton.svelte';\n  import { PauseCircle24, PlayCircle24 } from '@mozaic-ds/icons-svelte';\n\n  /**\n   * A navigation indicator visually represents the current position within a sequence or step-based process, helping users track progress or navigate through a series of items. It is commonly used in carousels, onboarding flows, or media players. Navigation indicators can be interactive, allowing users to jump between steps, or passive, simply showing progress.\n   * @event action {CustomEvent<void} - Emits when the action button is clicked.\n   */\n\n  interface Props {\n    /**\n     * The total number of steps to display.\n     */\n    steps: number;\n    /**\n     * The index of the currently active step (zero-based).\n     */\n    selected: number;\n    /**\n     * The current action state of the button. Can be \"pause\" to show the pause icon or \"resume\" to show the play icon.\n     */\n    action?: 'pause' | 'resume';\n    /**\n     * The text label displayed in the Resume or Pause button.\n     */\n    label?: string;\n    /**\n     * If `true`, hides the Resume or Pause button next to the steps.\n     */\n    player?: boolean;\n    /**\n     * Callback triggered on action button click.\n     */\n    onAction?: () => void;\n  }\n\n  let {\n    steps,\n    selected = $bindable(),\n    action = 'resume',\n    label,\n    player = true,\n    onAction,\n  }: Props = $props();\n\n  let element: HTMLElement;\n\n  const ActionIcon = $derived(action === 'pause' ? PauseCircle24 : PlayCircle24);\n\n  function setActiveStep(step: number) {\n    selected = step;\n  }\n\n  function onKeydown(event: KeyboardEvent, step: number) {\n    if (event.key === 'Enter') {\n      setActiveStep(step);\n    }\n  }\n\n  function handleAction() {\n    onAction?.();\n    element.dispatchEvent(new CustomEvent('action', { bubbles: true, composed: true }));\n  }\n</script>\n\n<div\n  bind:this={element}\n  class=\"mc-navigation-indicator\"\n  role=\"navigation\"\n  aria-label=\"Navigations steps\"\n>\n  <ul class=\"mc-navigation-indicator__list\">\n    {#each Array.from({ length: steps }), index (index)}\n      <li class=\"mc-navigation-indicator__item\">\n        <button\n          class={{\n            'mc-navigation-indicator__button': true,\n            'mc-navigation-indicator__button--active': selected == index,\n          }}\n          aria-label=\"Navigation step button\"\n          {...selected == index ? { 'aria-current': 'step' } : {}}\n          onclick={() => setActiveStep(index)}\n          onkeydown={(event) => onKeydown(event, index)}\n        ></button>\n      </li>\n    {/each}\n  </ul>\n\n  {#if player}\n    {#if label}\n      <Button size=\"s\" iconposition=\"left\" ghost onclick={handleAction}>\n        {label}\n\n        <ActionIcon slot=\"icon\" />\n      </Button>\n    {:else}\n      <IconButton size=\"s\" ghost onclick={handleAction}>\n        <ActionIcon slot=\"icon\" />\n      </IconButton>\n    {/if}\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/navigation-indicator';\n</style>\n"],"names":["steps","$.prop","$$props","selected","action","label","player","onAction","element","ActionIcon","PauseCircle24","PlayCircle24","setActiveStep","step","onKeydown","event","handleAction","div","root","ul","$.child","$.each","$.index","$$anchor","$$item","index","li","root_1","button","event_handler","event_handler_1","Button","ActionIcon_1","IconButton","ActionIcon_2","$$render","consequent","alternate","consequent_1","$.reset","$$value","$.append"],"mappings":";;woCASA,qBAsCIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAQF,EAAAC,EAAA,WAAA,EAAA,EACRE,iBAAS,QAAQ,EACjBC,EAAKJ,EAAAC,EAAA,QAAA,CAAA,EACLI,iBAAS,EAAI,EACbC,EAAQN,EAAAC,EAAA,WAAA,CAAA,EAGNM,EAEE,MAAAC,QAAsBL,EAAM,IAAK,QAAUM,GAAgBC,EAAY,WAEpEC,EAAcC,EAAc,CACnCV,EAAWU,CAAI,CACjB,CAES,SAAAC,EAAUC,EAAsBF,EAAc,CACjDE,EAAM,MAAQ,SAChBH,EAAcC,CAAI,CAEtB,CAES,SAAAG,GAAe,CACtBT,MAAQ,EACRC,EAAQ,cAAa,IAAK,YAAY,SAAQ,CAAI,QAAS,GAAM,SAAU,EAAI,CAAA,CAAA,CACjF,kJAvBW,SAAQ,gGAER,GAAI,iEAwBhBS,EAAAC,GAAA,EAMEC,EAAEC,EANJH,CAAA,EAMEI,EAAAF,SACQ,MAAM,KAAI,CAAG,OAAQnB,EAAK,CAAA,CAAA,EAAAsB,EAAA,CAAAC,EAAAC,EAAAC,IAAA,KAC9BC,EAAEC,GAAA,EACAC,EAAAR,EADFM,CAAE,EAQgBG,EAAA,IAAAjB,EAAca,CAAK,EACtBK,EAAAf,GAAUD,EAAUC,EAAOU,CAAK,IAR7CG,eAEG,kCAAmC,GACnC,0CAA2CzB,EAAQ,GAAIsB,yCAGrD,GAAAtB,EAAQ,GAAIsB,EAAK,CAAK,eAAgB,MAAM,EAAA,CAAA,mEAPnDC,CAAE,MAAFA,CAAE,MAFNP,CAAE,UAAFA,EAAE,CAAA,yCAmBEY,GAAMR,EAAA,+CAA6CP,2CACjDX,EAAK,CAAA,CAAA,iFAEL2B,EAAUT,EAAA,CAAA,KAAA,MAAA,CAAA,sBAGZU,GAAUV,EAAA,2BAAyBP,8DACjCkB,EAAUX,EAAA,CAAA,KAAA,MAAA,CAAA,wBARVlB,EAAK,EAAA8B,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,oBADP/B,EAAM,GAAA6B,EAAAG,CAAA,IAvBZC,OAAAA,EAAAtB,CAAA,KAAAA,EAAAuB,GACYhC,QAAAA,CAAO,EADnBiC,EAAAlB,EAAAN,CAAA,MAFO"}

package/dist/components/navigationindicator/NavigationIndicator.spec.js

@@ -0,0 +1,130 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect, vi } from 'vitest';
+import NavigationIndicator from './NavigationIndicator.svelte';
+import { tick } from 'svelte';
+describe('NavigationIndicator (Svelte 5)', () => {
+    it('renders the correct number of steps', () => {
+        const { getAllByRole } = render(NavigationIndicator, {
+            props: {
+                steps: 5,
+                selected: 0,
+            },
+        });
+        const buttons = getAllByRole('button', {
+            name: 'Navigation step button',
+        });
+        expect(buttons).toHaveLength(5);
+    });
+    it('sets aria-current on the selected step', () => {
+        const { getAllByRole } = render(NavigationIndicator, {
+            props: {
+                steps: 3,
+                selected: 1,
+            },
+        });
+        const buttons = getAllByRole('button', {
+            name: 'Navigation step button',
+        });
+        expect(buttons[1].getAttribute('aria-current')).toBe('step');
+        expect(buttons[0].getAttribute('aria-current')).toBeNull();
+    });
+    it('updates selected step on click', async () => {
+        const { getAllByRole, component } = render(NavigationIndicator, {
+            props: {
+                steps: 3,
+                selected: 0,
+            },
+        });
+        const buttons = getAllByRole('button', {
+            name: 'Navigation step button',
+        });
+        await fireEvent.click(buttons[2]);
+        expect(component.selected).toBe(2);
+    });
+    it('updates selected step when pressing Enter', async () => {
+        const { getAllByRole, component } = render(NavigationIndicator, {
+            props: {
+                steps: 3,
+                selected: 0,
+            },
+        });
+        const buttons = getAllByRole('button', {
+            name: 'Navigation step button',
+        });
+        await fireEvent.keyDown(buttons[1], {
+            key: 'Enter',
+            code: 'Enter',
+            charCode: 13,
+        });
+        expect(component.selected).toBe(1);
+    });
+    it('renders action button with label when label is provided', () => {
+        const { getByRole } = render(NavigationIndicator, {
+            props: {
+                steps: 3,
+                selected: 0,
+                label: 'Play',
+                action: 'resume',
+            },
+        });
+        expect(getByRole('button', { name: 'Play' })).not.toBeNull();
+    });
+    it('renders icon-only action button when no label is provided', () => {
+        const { container } = render(NavigationIndicator, {
+            props: {
+                steps: 3,
+                selected: 0,
+                action: 'pause',
+            },
+        });
+        // On vérifie simplement qu’un bouton d’action existe
+        const buttons = container.querySelectorAll('button');
+        expect(buttons.length).toBeGreaterThan(0);
+    });
+    it('does not render action button when player is false', () => {
+        const { container } = render(NavigationIndicator, {
+            props: {
+                steps: 3,
+                selected: 0,
+                player: false,
+            },
+        });
+        const buttons = container.querySelectorAll('button');
+        // uniquement les boutons de navigation
+        expect(buttons).toHaveLength(3);
+    });
+    it('calls onAction callback when action button is clicked', async () => {
+        const onAction = vi.fn();
+        const { getByRole } = render(NavigationIndicator, {
+            props: {
+                steps: 3,
+                selected: 0,
+                label: 'Play',
+                onAction,
+            },
+        });
+        await fireEvent.click(getByRole('button', { name: 'Play' }));
+        expect(onAction).toHaveBeenCalledOnce();
+    });
+    it('dispatches "action" event when action button is clicked', async () => {
+        const { container, getByRole } = render(NavigationIndicator, {
+            props: { steps: 3, selected: 0, label: 'Play' },
+        });
+        const button = getByRole('button', { name: 'Play' });
+        const handler = vi.fn();
+        container.addEventListener('action', handler);
+        if (button)
+            await fireEvent.click(button);
+        await tick();
+        expect(handler).toHaveBeenCalledTimes(1);
+    });
+    it('has correct navigation role and aria-label', () => {
+        const { getByRole } = render(NavigationIndicator, {
+            props: {
+                steps: 2,
+                selected: 0,
+            },
+        });
+        expect(getByRole('navigation', { name: 'Navigations steps' })).not.toBeNull();
+    });
+});

package/dist/components/navigationindicator/NavigationIndicator.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import './NavigationIndicator.svelte';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Standalone: Story;
+//# sourceMappingURL=NavigationIndicator.stories.d.ts.map

package/dist/components/navigationindicator/NavigationIndicator.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationIndicator.stories.d.ts","sourceRoot":"","sources":["../../../src/components/navigationindicator/NavigationIndicator.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,8BAA8B,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IA4BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC"}