@mozaic-ds/web-components 1.5.1 → 1.6.0

package/dist/components/modal/Modal.js

@@ -1,4 +1,4 @@
-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 b,k as n,t as E,b as x,d as Q,f as y,n as R,j as e,i as u,r,u as U,m as B}from"../../custom-element.js";import{i as O}from"../../if.js";import{s}from"../../slot.js";import{a as V}from"../../attributes.js";import{b as W}from"../../this.js";import{q as X}from"../../Condition20.js";import{O as Z}from"../overlay/Overlay.js";import"../../branches.js";var $=y('<button type="button" class="mc-modal__close mc-button mc-button--icon-button mc-button--ghost svelte-1tduk3b" aria-label="Close"><!></button>'),oo=y('<p class="svelte-1tduk3b"> </p>'),to=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 eo={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;}
 @media (width >= 680px) {.mc-modal.svelte-1tduk3b {align-items:center;}
@@ -6,11 +6,11 @@ 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
 @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 ro(z,t){L(t,!0),P(z,eo);let d=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(){d(!1);const o=new CustomEvent("update:open",{detail:d(),bubbles:!0,composed:!0});m.dispatchEvent(o)}var q={get open(){return d()},set open(o){d(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=to();V(l,()=>({class:["mc-modal",d()&&"is-open"],tabindex:"-1","aria-labelledby":"modalTitle","aria-hidden":!d(),...T}),void 0,void 0,void 0,"svelte-1tduk3b");var g=e(l),k=e(g),f=e(k),D=e(f);s(D,t,"icon",{},null),r(f);var h=n(f,2),M=e(h,!0);r(h);var N=n(h,2);{var S=o=>{var a=$(),w=e(a);X(w,{className:"mc-modal__close"}),r(a),U("click",a,Y),x(o,a)};O(N,o=>{v()&&o(S)})}r(k);var p=n(k,2),j=e(p);{var A=o=>{var a=oo(),w=e(a,!0);r(a),E(()=>B(w,c())),x(o,a)};O(j,o=>{c()&&o(A)})}var F=n(j,2);s(F,t,"default",{},null),r(p);var C=n(p,2),_=e(C),G=e(_);s(G,t,"link",{},null),r(_);var H=n(_,2);s(H,t,"footer",{},null),r(C),r(g);var I=n(g,2);return Z(I,{get isvisible(){return d()},dialoglabel:"modal"}),r(l),W(l,o=>m=o,()=>m),E(()=>B(M,i())),x(z,l),Q(q)}J(["click"]);customElements.define("m-modal",K(ro,{open:{attribute:"open",reflect:!0,type:"Boolean"},closable:{attribute:"closable",reflect:!0,type:"Boolean"},title:{},description:{}},["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\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","$.delegated","$.append","$$anchor","$$render","consequent","main","p","root_2","consequent_1","footer","span_1","MOverlay","node_7","$$value"],"mappings":";;;;;;;;;;;;;;mgXAUA,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,EAAAC,EAAAN,EAAAI,CAAA,EAMEG,EAAOD,EAAA,CAAA,UAAA,iBAAA,CAAA,EANTE,EAAAJ,CAAA,EAAAK,EAAA,QAAAL,EAIUT,CAAO,EAJjBe,EAAAC,EAAAP,CAAA,WADEb,EAAQ,GAAAqB,EAAAC,CAAA,MALdZ,CAAM,EAiBN,IAAAa,IAjBAb,EAAM,CAAA,MAiBNa,CAAI,iBAEAC,EAACC,GAAA,MAADD,EAAC,EAAA,IAADA,CAAC,YAAEzB,EAAW,CAAA,CAAA,MAAdyB,CAAC,WADCzB,EAAW,GAAAsB,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,wBAAYnC,EAAI,yBAzC1BsB,EAAAX,CAAA,IAAAA,EAAAyB,GAKY5B,QAAAA,CAAO,YAQ+BL,EAAK,CAAA,CAAA,EAbvDqB,EAAAC,EAAAd,CAAA,MAFO"}

package/dist/components/modal/Modal.svelte

@@ -161,6 +161,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 +239,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 +250,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 +282,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 +299,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 +316,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/navigationindicator/NavigationIndicator.js

@@ -0,0 +1,4 @@
+import{c as G,e as H,a as J,p as r,k as L,b as s,d as M,f as V,j as z,i as c,r as P,y as B,x as E,l as S,aV as O,aW as Q,t as R,m as T,w as U}from"../../custom-element.js";import{i as D}from"../../if.js";import{e as X,i as Y}from"../../each.js";import{c as K}from"../../svelte-component.js";import{a as Z}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,u as it}from"../../Condition20.js";import"../../branches.js";import"../../slot.js";import"../loader/Loader.js";var nt=V('<li class="mc-navigation-indicator__item svelte-1u324yb"><button></button></li>'),rt=V('<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 W(t,u){t.key==="Enter"&&N(u)}function j(){_()?.(),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=z(v);X(h,21,()=>Array.from({length:g()}),Y,(t,u,n)=>{var m=nt(),k=z(m),e=()=>N(n),i=f=>W(f,n);Z(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:j,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,()=>S(C),(x,A)=>{A(x,{slot:"icon"})}),s(i,o)}}})},k=e=>{ot(e,{size:"s",ghost:!0,onclick:j,$$slots:{icon:(i,f)=>{var o=B(),w=E(o);K(w,()=>S(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"}

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

@@ -0,0 +1,40 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { action } from 'storybook/actions';
+import './NavigationIndicator.svelte';
+const meta = {
+    title: 'Indicators/Navigation indicator',
+    component: 'm-navigation-indicator',
+    argTypes: {
+        action: {
+            control: 'radio',
+            options: ['pause', 'resume'],
+            table: {
+                defaultValue: {
+                    summary: 'resume',
+                },
+            },
+        },
+    },
+    args: {
+        steps: 6,
+        selected: 1,
+    },
+    render: (args) => html `
+    <m-navigation-indicator
+      steps="${args.steps}"
+      selected="${args.selected}"
+      action="${ifDefined(args.action)}"
+      label="${ifDefined(args.label)}"
+      ?player="${args.player}"
+      @action="${action('action')}"
+    ></m-navigation-indicator>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Standalone = {
+    args: {
+        player: false,
+    },
+};

package/dist/components/navigationindicator/NavigationIndicator.svelte

@@ -0,0 +1,156 @@
+<svelte:options
+  customElement={{
+    tag: 'm-navigation-indicator',
+    props: {
+      player: { reflect: true, type: 'Boolean', attribute: 'player' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  import Button from '../button/Button.svelte';
+  import IconButton from '../iconbutton/IconButton.svelte';
+  import { PauseCircle24, PlayCircle24 } from '@mozaic-ds/icons-svelte';
+
+  /**
+   * 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.
+   * @event action {CustomEvent<void} - Emits when the action button is clicked.
+   */
+
+  interface Props {
+    /**
+     * The total number of steps to display.
+     */
+    steps: number;
+    /**
+     * The index of the currently active step (zero-based).
+     */
+    selected: number;
+    /**
+     * The current action state of the button. Can be "pause" to show the pause icon or "resume" to show the play icon.
+     */
+    action?: 'pause' | 'resume';
+    /**
+     * The text label displayed in the Resume or Pause button.
+     */
+    label?: string;
+    /**
+     * If `true`, hides the Resume or Pause button next to the steps.
+     */
+    player?: boolean;
+    /**
+     * Callback triggered on action button click.
+     */
+    onAction?: () => void;
+  }
+
+  let {
+    steps,
+    selected = $bindable(),
+    action = 'resume',
+    label,
+    player = true,
+    onAction,
+  }: Props = $props();
+
+  let element: HTMLElement;
+
+  const ActionIcon = $derived(action === 'pause' ? PauseCircle24 : PlayCircle24);
+
+  function setActiveStep(step: number) {
+    selected = step;
+  }
+
+  function onKeydown(event: KeyboardEvent, step: number) {
+    if (event.key === 'Enter') {
+      setActiveStep(step);
+    }
+  }
+
+  function handleAction() {
+    onAction?.();
+    element.dispatchEvent(new CustomEvent('action', { bubbles: true, composed: true }));
+  }
+</script>
+
+<div
+  bind:this={element}
+  class="mc-navigation-indicator"
+  role="navigation"
+  aria-label="Navigations steps"
+>
+  <ul class="mc-navigation-indicator__list">
+    {#each Array.from({ length: steps }), index (index)}
+      <li class="mc-navigation-indicator__item">
+        <button
+          class={{
+            'mc-navigation-indicator__button': true,
+            'mc-navigation-indicator__button--active': selected == index,
+          }}
+          aria-label="Navigation step button"
+          {...selected == index ? { 'aria-current': 'step' } : {}}
+          onclick={() => setActiveStep(index)}
+          onkeydown={(event) => onKeydown(event, index)}
+        ></button>
+      </li>
+    {/each}
+  </ul>
+
+  {#if player}
+    {#if label}
+      <Button size="s" iconposition="left" ghost onclick={handleAction}>
+        {label}
+
+        <ActionIcon slot="icon" />
+      </Button>
+    {:else}
+      <IconButton size="s" ghost onclick={handleAction}>
+        <ActionIcon slot="icon" />
+      </IconButton>
+    {/if}
+  {/if}
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-navigation-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: 42rem;
+  overflow: scroll;
+}
+.mc-navigation-indicator__list {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.mc-navigation-indicator__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.mc-navigation-indicator__button {
+  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: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 {
+  width: 3rem;
+  height: 0.75rem;
+  background-color: var(--navigation-indicator-color-background-active, #464e63);
+}</style>

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

@@ -0,0 +1,34 @@
+/**
+ * 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.
+ * @event action {CustomEvent<void} - Emits when the action button is clicked.
+ */
+interface Props {
+    /**
+     * The total number of steps to display.
+     */
+    steps: number;
+    /**
+     * The index of the currently active step (zero-based).
+     */
+    selected: number;
+    /**
+     * The current action state of the button. Can be "pause" to show the pause icon or "resume" to show the play icon.
+     */
+    action?: 'pause' | 'resume';
+    /**
+     * The text label displayed in the Resume or Pause button.
+     */
+    label?: string;
+    /**
+     * If `true`, hides the Resume or Pause button next to the steps.
+     */
+    player?: boolean;
+    /**
+     * Callback triggered on action button click.
+     */
+    onAction?: () => void;
+}
+declare const NavigationIndicator: import("svelte").Component<Props, {}, "selected">;
+type NavigationIndicator = ReturnType<typeof NavigationIndicator>;
+export default NavigationIndicator;
+//# sourceMappingURL=NavigationIndicator.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/navigationindicator/NavigationIndicator.svelte.ts"],"names":[],"mappings":"AAQE;;;GAGG;AAEH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA0EH,QAAA,MAAM,mBAAmB,mDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/navigationindicator/README.md

@@ -0,0 +1,21 @@
+# `m-navigation-indicator`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `steps*` | The total number of steps to display. | `number` |   |
+| `selected*` | The index of the currently active step (zero-based). | `number` | `$bindable()` |
+| `action` | The current action state of the button. Can be "pause" to show the pause icon or "resume" to show the play icon. | `'pause'` `'resume'` | `resume` |
+| `label` | The text label displayed in the Resume or Pause button. | `string` |   |
+| `player` | If `true`, hides the Resume or Pause button next to the steps. | `boolean` | `true` |
+| `onAction` | Callback triggered on action button click. | `() => void` |   |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `action` | Emits when the action button is clicked. | `CustomEvent<void` |
+

package/dist/components/numberbadge/NumberBadge.js

@@ -1,4 +1,4 @@
-import{c as m,p as f,a as g,b as o,t as u,f as v,g as p,h,i as x,j as d,d as z,r as k,e as _}from"../../custom-element.js";import{a as y}from"../../attributes.js";var w=h("<div> </div>");const $={hash:"svelte-sb883",code:`/**
+import{c as m,e as f,a as g,p as o,t as u,b as v,d as p,f as h,n as x,i as d,j as z,r as k,m as _}from"../../custom-element.js";import{a as y}from"../../attributes.js";var w=h("<div> </div>");const $={hash:"svelte-sb883",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-number-badge.svelte-sb883 {color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:0.125rem;font-size:var(--font-size-25, 0.625rem);border-radius:var(--border-radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1;}.mc-number-badge--m.svelte-sb883 {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:var(--font-size-50, 0.75rem);}.mc-number-badge--accent.svelte-sb883 {color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03);}.mc-number-badge--danger.svelte-sb883 {color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112);}.mc-number-badge--inverse.svelte-sb883 {color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff);}`};function j(b,e){f(e,!0),g(b,$);let t=o(e,"label",7),n=o(e,"appearance",7,"standard"),s=o(e,"size",7,"s"),c=x(e,["$$slots","$$events","$$legacy","$$host","label","appearance","size"]);var i={get label(){return t()},set label(r){t(r),d()},get appearance(){return n()},set appearance(r="standard"){n(r),d()},get size(){return s()},set size(r="s"){s(r),d()}},a=w();y(a,()=>({class:["mc-number-badge",`mc-number-badge--${n()}`,`mc-number-badge--${s()}`],...c}),void 0,void 0,void 0,"svelte-sb883");var l=z(a,!0);return k(a),u(()=>_(l,t())),v(b,a),p(i)}customElements.define("m-number-badge",m(j,{label:{},appearance:{},size:{}},[],[],!0));export{j as N};
+ */.mc-number-badge.svelte-sb883 {color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:0.125rem;font-size:var(--font-size-25, 0.625rem);border-radius:var(--border-radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1;}.mc-number-badge--m.svelte-sb883 {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:var(--font-size-50, 0.75rem);}.mc-number-badge--accent.svelte-sb883 {color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03);}.mc-number-badge--danger.svelte-sb883 {color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112);}.mc-number-badge--inverse.svelte-sb883 {color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff);}`};function j(b,e){f(e,!0),g(b,$);let t=o(e,"label",7),n=o(e,"appearance",7,"standard"),s=o(e,"size",7,"s"),c=x(e,["$$slots","$$events","$$legacy","$$host","label","appearance","size"]);var i={get label(){return t()},set label(r){t(r),d()},get appearance(){return n()},set appearance(r="standard"){n(r),d()},get size(){return s()},set size(r="s"){s(r),d()}},a=w();y(a,()=>({class:["mc-number-badge",`mc-number-badge--${n()}`,`mc-number-badge--${s()}`],...c}),void 0,void 0,void 0,"svelte-sb883");var l=z(a,!0);return k(a),u(()=>_(l,t())),v(b,a),p(i)}customElements.define("m-number-badge",m(j,{label:{},appearance:{},size:{}},[],[],{mode:"open"}));export{j as N};
 //# sourceMappingURL=NumberBadge.js.map

package/dist/components/overlay/Overlay.js

@@ -1,4 +1,4 @@
-import{c as m,p,a as u,b as r,t as y,f,g,h as _,d as v,j as n,r as d,l as h,m as x}from"../../custom-element.js";import{s as k}from"../../slot.js";import{s as z}from"../../attributes.js";var O=_('<div><div role="dialog" tabindex="-1"><!></div></div>');const j={hash:"svelte-smp867",code:`/**
+import{c as m,e as p,a as y,p as r,t as u,b as f,d as g,f as _,j as v,i as n,r as d,s as h,h as x}from"../../custom-element.js";import{s as k}from"../../slot.js";import{s as z}from"../../attributes.js";var O=_('<div><div role="dialog" tabindex="-1"><!></div></div>');const j={hash:"svelte-smp867",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-overlay.svelte-smp867 {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-overlay.is-visible.svelte-smp867 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function w(o,e){p(e,!0),u(o,j);let s=r(e,"isvisible",7),t=r(e,"dialoglabel",7);var b={get isvisible(){return s()},set isvisible(l){s(l),n()},get dialoglabel(){return t()},set dialoglabel(l){t(l),n()}},i=O(),a=v(i),c=v(a);return k(c,e,"default",{},null),d(a),d(i),y(()=>{h(i,1,x(["mc-overlay",s()&&"is-visible"]),"svelte-smp867"),z(a,"aria-labelledby",t())}),f(o,i),g(b)}customElements.define("m-overlay",m(w,{isvisible:{attribute:"isvisible",reflect:!0,type:"Boolean"},dialoglabel:{}},["default"],[],!0));export{w as O};
+ */.mc-overlay.svelte-smp867 {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-overlay.is-visible.svelte-smp867 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function w(o,e){p(e,!0),y(o,j);let s=r(e,"isvisible",7),a=r(e,"dialoglabel",7);var b={get isvisible(){return s()},set isvisible(l){s(l),n()},get dialoglabel(){return a()},set dialoglabel(l){a(l),n()}},i=O(),t=v(i),c=v(t);return k(c,e,"default",{},null),d(t),d(i),u(()=>{h(i,1,x(["mc-overlay",s()&&"is-visible"]),"svelte-smp867"),z(t,"aria-labelledby",a())}),f(o,i),g(b)}customElements.define("m-overlay",m(w,{isvisible:{attribute:"isvisible",reflect:!0,type:"Boolean"},dialoglabel:{}},["default"],[],{mode:"open"}));export{w as O};
 //# sourceMappingURL=Overlay.js.map