@mozaic-ds/web-components 1.3.0 → 1.4.0

package/dist/components/statusmessage/StatusMessage.svelte

@@ -1,15 +1,18 @@
 <svelte:options customElement={{ tag: 'm-status-message' }} />
 
 <script lang="ts">
-  import InfoCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled24/InfoCircleFilled24.svelte';
-  import WarningCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled24/WarningCircleFilled24.svelte';
-  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';
-  import CheckCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled24/CheckCircleFilled24.svelte';
+  import {
+    InfoCircleFilled24,
+    WarningCircleFilled24,
+    CrossCircleFilled24,
+    CheckCircleFilled24,
+  } from '@mozaic-ds/icons-svelte';
   import Loader from '../loader/Loader.svelte';
   /**
    * A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.
    */
   interface Props {
+    [key: string]: any;
     /**
      * Allows to define the status message style.
      */
@@ -34,13 +37,13 @@
     return iconMap.find((icon) => icon.status === status) || iconMap[0];
   }
 
-  let selected = $state(getSelected(status));
+  const selected = $derived(getSelected(status));
 </script>
 
 <div class={['mc-status-message', `mc-status-message--${status}`]} {...attrs}>
   {#if status !== 'inprogress'}
     <span class="mc-status-message__icon">
-      <selected.component aria-hidden="true" />
+      <selected.component />
     </span>
   {:else}
     <Loader size="s" />
@@ -68,7 +71,7 @@
   font-size: var(--font-size-100, 0.875rem);
   line-height: var(--line-height-s, 1.3);
   font-weight: var(--font-weight-regular, 400);
-  color: var(--action-bottom-bar-color-status-item-text, #404040);
+  color: var(--status-message-color-text, #404040);
 }
 .mc-status-message--success .mc-status-message__icon {
   fill: var(--status-message-color-icon-success, #3f9e10);

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

@@ -2,6 +2,7 @@
  * A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Allows to define the status message style.
      */

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

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

package/dist/components/statusnotification/README.md

@@ -10,6 +10,7 @@ A Status Notification is used to draw the user’s attention to important inform
 | `description*` | Description of the status notification. | `string` |   |
 | `status` | Allows to define the status notification type. | `'info'` `'success'` `'warning'` `'error'` | `info` |
 | `closable` | if `true`, display the close button. | `boolean` |   |
+| `footer` | Use this snippet to insert a button or a link in the footer | `Snippet` |   |
 
 ## Slots
 

package/dist/components/statusnotification/StatusNotification.js

@@ -1,4 +1,4 @@
-import{w as A,c as B,p as G,a as H,b as s,x as J,k as K,f as w,r as L,n as O,d as e,s as l,t as P,h as p,i as Q,j as b,e as n,g as _}from"../../custom-element.js";import{i as R}from"../../if.js";import{s as T}from"../../slot.js";import{c as U}from"../../svelte-component.js";import{a as V}from"../../attributes.js";import{b as X}from"../../this.js";import{I as Y,C as Z,W as $,a as oo,b as to}from"../../Cross20.js";import"../../legacy.js";var ro=w('<button class="mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost svelte-18b6syz" aria-label="Close"><!></button>'),eo=w('<section><span class="mc-status-notification__icon svelte-18b6syz" aria-hidden="true"><!></span> <div class="mc-status-notification__content svelte-18b6syz"><h2 class="mc-status-notification__title svelte-18b6syz"> </h2> <p class="mc-status-notification__message svelte-18b6syz"> </p> <div class="mc-status-notification__footer svelte-18b6syz"><!></div></div> <!></section>');const no={hash:"svelte-18b6syz",code:`/**
+import{u as L,c as O,p as P,a as Q,b as s,q as R,s as i,t as T,f as u,g as U,h as N,i as V,x as X,d as e,j as l,r as n,k as x,l as C,e as F}from"../../custom-element.js";import{s as Y}from"../../snippet.js";import{i as E}from"../../if.js";import{s as Z}from"../../slot.js";import{c as $}from"../../svelte-component.js";import{a as oo}from"../../attributes.js";import{b as to}from"../../this.js";import{I as ro,a as eo,W as no,b as ao,C as co}from"../../Condition20.js";var so=N('<button class="mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost svelte-18b6syz" aria-label="Close"><!></button>'),lo=N('<section><span class="mc-status-notification__icon svelte-18b6syz" aria-hidden="true"><!></span> <div class="mc-status-notification__content svelte-18b6syz"><h2 class="mc-status-notification__title svelte-18b6syz"> </h2> <p class="mc-status-notification__message svelte-18b6syz"> </p> <div class="mc-status-notification__footer svelte-18b6syz"><!></div></div> <!></section>');const bo={hash:"svelte-18b6syz",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-18b6syz {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-18b6syz:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-18b6syz:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-18b6syz {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-18b6syz {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-18b6syz {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-18b6syz:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--s.svelte-18b6syz {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-18b6syz {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-18b6syz {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-18b6syz {padding:0.25rem;}.mc-button--outlined.svelte-18b6syz {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-18b6syz {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-18b6syz {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-18b6syz {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-18b6syz {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-18b6syz:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-18b6syz {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-18b6syz {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-18b6syz {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-18b6syz {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-18b6syz {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-18b6syz {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-18b6syz {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-18b6syz {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-18b6syz {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-status-notification.svelte-18b6syz {border-radius:var(--border-radius-m, 0.5rem);background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000);}.mc-status-notification__icon.svelte-18b6syz {width:2rem;height:2rem;margin:0.75rem;fill:var(--status-notification-color-icon-info, #0b96cc);}.mc-status-notification__content.svelte-18b6syz {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-status-notification__title.svelte-18b6syz, .mc-status-notification__message.svelte-18b6syz {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-status-notification__title.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-status-notification__message.svelte-18b6syz {font-size:var(--font-size-100, 0.875rem);}.mc-status-notification__footer.svelte-18b6syz {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-status-notification--information.svelte-18b6syz {background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);}.mc-status-notification--information.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-info, #0b96cc);}.mc-status-notification--success.svelte-18b6syz {background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-success, #78be20);}.mc-status-notification--success.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-success, #3f9e10);}.mc-status-notification--warning.svelte-18b6syz {background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-warning, #ef934a);}.mc-status-notification--warning.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-warning, #ea7315);}.mc-status-notification--error.svelte-18b6syz {background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-error, #ef5f5c);}.mc-status-notification--error.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-error, #ea302d);}.mc-status-notification-closable__close.svelte-18b6syz {margin:0.25rem;}.mc-status-notification__footer.svelte-18b6syz:empty {display:none;}`};function ao(h,r){G(r,!0),H(h,no);let d=s(r,"title",7),i=s(r,"description",7),c=s(r,"status",7,"info"),u=s(r,"closable",7),x=L(r,["$$slots","$$events","$$legacy","$$host","title","description","status","closable"]),v;const y=[{status:"info",component:Y},{status:"success",component:Z},{status:"warning",component:$},{status:"error",component:oo}];function C(o){return y.find(t=>t.status===o)||y[0]}let F=J(K(C(c())));const E=()=>{const o=new CustomEvent("close",{bubbles:!0,composed:!0});v.dispatchEvent(o)};var S={get title(){return d()},set title(o){d(o),b()},get description(){return i()},set description(o){i(o),b()},get status(){return c()},set status(o="info"){c(o),b()},get closable(){return u()},set closable(o){u(o),b()}},a=eo();V(a,()=>({class:["mc-status-notification",`mc-status-notification--${c()}`],role:"status",...x}),void 0,void 0,void 0,"svelte-18b6syz");var f=e(a),j=e(f);U(j,()=>O(F).component,(o,t)=>{t(o,{class:"mc-status-notification__icon","aria-hidden":"true"})}),n(f);var g=l(f,2),m=e(g),I=e(m,!0);n(m);var k=l(m,2),W=e(k,!0);n(k);var z=l(k,2),D=e(z);T(D,r,"footer",{}),n(z),n(g);var M=l(g,2);{var N=o=>{var t=ro();t.__click=E;var q=e(t);to(q,{class:"mc-status-notification-closable__icon","aria-hidden":"true"}),n(t),p(o,t)};R(M,o=>{u()&&o(N)})}return n(a),X(a,o=>v=o,()=>v),P(()=>{_(I,d()),_(W,i())}),p(h,a),Q(S)}A(["click"]);customElements.define("m-status-notification",B(ao,{title:{},description:{},status:{},closable:{}},["footer"],[],!0));
+ */.mc-button.svelte-18b6syz {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-18b6syz:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-18b6syz:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-18b6syz {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-18b6syz {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-18b6syz {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-18b6syz:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--s.svelte-18b6syz {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-18b6syz {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-18b6syz {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-18b6syz {padding:0.25rem;}.mc-button--outlined.svelte-18b6syz {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-18b6syz {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-18b6syz {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-18b6syz {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-18b6syz {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-18b6syz:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-18b6syz {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-18b6syz {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-18b6syz {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-18b6syz {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-18b6syz {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-18b6syz {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-18b6syz {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-18b6syz {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-18b6syz {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-status-notification.svelte-18b6syz {border-radius:var(--border-radius-m, 0.5rem);background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000);}.mc-status-notification__icon.svelte-18b6syz {width:2rem;height:2rem;margin:0.75rem;fill:var(--status-notification-color-icon-info, #0b96cc);}.mc-status-notification__content.svelte-18b6syz {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-status-notification__title.svelte-18b6syz, .mc-status-notification__message.svelte-18b6syz {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-status-notification__title.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-status-notification__message.svelte-18b6syz {font-size:var(--font-size-100, 0.875rem);}.mc-status-notification__footer.svelte-18b6syz {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-status-notification--information.svelte-18b6syz {background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);}.mc-status-notification--information.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-info, #0b96cc);}.mc-status-notification--success.svelte-18b6syz {background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-success, #78be20);}.mc-status-notification--success.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-success, #3f9e10);}.mc-status-notification--warning.svelte-18b6syz {background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-warning, #ef934a);}.mc-status-notification--warning.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-warning, #ea7315);}.mc-status-notification--error.svelte-18b6syz {background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-error, #ef5f5c);}.mc-status-notification--error.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-error, #ea302d);}.mc-status-notification-closable__close.svelte-18b6syz {margin:0.25rem;}.mc-status-notification__footer.svelte-18b6syz:empty {display:none;}`};function io(p,r){P(r,!0),Q(p,bo);let v=s(r,"title",7),f=s(r,"description",7),b=s(r,"status",7,"info"),g=s(r,"closable",7),d=s(r,"footer",7),S=V(r,["$$slots","$$events","$$legacy","$$host","title","description","status","closable","footer"]),m;const _=[{status:"info",component:ro},{status:"success",component:eo},{status:"warning",component:no},{status:"error",component:ao}];function j(o){return _.find(t=>t.status===o)||_[0]}const I=X(()=>j(b())),W=()=>{const o=new CustomEvent("close",{bubbles:!0,composed:!0});m.dispatchEvent(o)};var q={get title(){return v()},set title(o){v(o),l()},get description(){return f()},set description(o){f(o),l()},get status(){return b()},set status(o="info"){b(o),l()},get closable(){return g()},set closable(o){g(o),l()},get footer(){return d()},set footer(o){d(o),l()}},a=lo();oo(a,()=>({class:["mc-status-notification",`mc-status-notification--${b()}`],role:"status",...S}),void 0,void 0,void 0,"svelte-18b6syz");var k=e(a),B=e(k);$(B,()=>R(I).component,(o,t)=>{t(o,{className:"mc-status-notification__icon"})}),n(k);var h=i(k,2),y=e(h),D=e(y,!0);n(y);var z=i(y,2),M=e(z,!0);n(z);var w=i(z,2),A=e(w);{var G=o=>{var t=x(),c=C(t);Y(c,d),u(o,t)},H=o=>{var t=x(),c=C(t);Z(c,r,"footer",{},null),u(o,t)};E(A,o=>{d()?o(G):o(H,!1)})}n(w),n(h);var J=i(h,2);{var K=o=>{var t=so();t.__click=W;var c=e(t);co(c,{className:"mc-status-notification-closable__icon"}),n(t),u(o,t)};E(J,o=>{g()&&o(K)})}return n(a),to(a,o=>m=o,()=>m),T(()=>{F(D,v()),F(M,f())}),u(p,a),U(q)}L(["click"]);customElements.define("m-status-notification",O(io,{closable:{attribute:"closable",reflect:!0,type:"Boolean"},title:{},description:{},status:{},footer:{}},["footer"],[],!0));
 //# sourceMappingURL=StatusNotification.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatusNotification.js","sources":["../../../src/components/statusnotification/StatusNotification.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-notification' }} />\n\n<script lang=\"ts\">\n  import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';\n  import InfoCircle32 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled32/InfoCircleFilled32.svelte';\n  import WarningCircle32 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled32/WarningCircleFilled32.svelte';\n  import CrossCircle32 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled32/CrossCircleFilled32.svelte';\n  import CheckCircle32 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled32/CheckCircleFilled32.svelte';\n  /**\n   * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.\n   *\n   * @slot footer - Use this slot to insert a button or a link in the footer\n   * @event close {CustomEvent<void>} - Emits when closing the notification.\n   */\n  interface Props {\n    /**\n     * Title of the status notification.\n     */\n    title: string;\n    /**\n     * Description of the status notification.\n     */\n    description: string;\n    /**\n     * Allows to define the status notification type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error';\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n  }\n\n  let { title, description, status = 'info', closable, ...attrs }: Props = $props();\n  let element: HTMLElement;\n\n  const iconMap = [\n    { status: 'info', component: InfoCircle32 },\n    { status: 'success', component: CheckCircle32 },\n    { status: 'warning', component: WarningCircle32 },\n    { status: 'error', component: CrossCircle32 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  let selected = $state(getSelected(status));\n\n  const onClose = () => {\n    const event = new CustomEvent('close', {\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n<section\n  class={['mc-status-notification', `mc-status-notification--${status}`]}\n  role=\"status\"\n  bind:this={element}\n  {...attrs}\n>\n  <span class=\"mc-status-notification__icon\" aria-hidden=\"true\">\n    <selected.component class=\"mc-status-notification__icon\" aria-hidden=\"true\" />\n  </span>\n\n  <div class=\"mc-status-notification__content\">\n    <h2 class=\"mc-status-notification__title\">{title}</h2>\n    <p class=\"mc-status-notification__message\">\n      {description}\n    </p>\n\n    <div class=\"mc-status-notification__footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n\n  {#if closable}\n    <button\n      class=\"mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost\"\n      aria-label=\"Close\"\n      onclick={onClose}\n    >\n      <Cross20 class=\"mc-status-notification-closable__icon\" aria-hidden=\"true\" />\n    </button>\n  {/if}\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/status-notification';\n\n  .mc-status-notification__footer:empty {\n    display: none;\n  }\n</style>\n"],"names":["title","$.prop","$$props","description","status","closable","attrs","$.rest_props","element","iconMap","InfoCircle32","CheckCircle32","WarningCircle32","CrossCircle32","getSelected","icon","selected","$.state","$.proxy","onClose","event","$$render","consequent","$.bind_this","section","$$value"],"mappings":";;ijcAAA,qBAiCQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAAEE,iBAAS,MAAM,EAAEC,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAAKI,EAAKC,EAAAL,EAAA,sFACzDM,QAEEC,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,CAAY,EACvC,CAAA,OAAQ,UAAW,UAAWC,CAAa,EAC3C,CAAA,OAAQ,UAAW,UAAWC,CAAe,EAC7C,CAAA,OAAQ,QAAS,UAAWC,EAAa,YAGpCC,EAAYV,EAAgB,CAC5B,OAAAK,EAAQ,KAAMM,GAASA,EAAK,SAAWX,CAAM,GAAKK,EAAQ,CAAC,CACpE,KAEIO,EAAQC,EAAAC,EAAUJ,EAAYV,EAAM,CAAA,CAAA,CAAA,EAElC,MAAAe,EAAO,IAAS,OACdC,EAAK,IAAO,YAAY,QAAO,CACnC,QAAS,GACT,SAAU,GAAI,EAEhBZ,EAAQ,cAAcY,CAAK,CAC7B,yJAtBmC,OAAM,yFA0BjC,oDAAqDhB,GAAM,qBAG/DE,iUAqBSa,6GAJRd,EAAQ,GAAAgB,EAAAC,CAAA,gBAlBFC,EAAAC,EAAAC,GAAAjB,QAAAA,CAAO,aAQ2BR,GAAK,MAE7CG,GAAW,eAflB"}
+{"version":3,"file":"StatusNotification.js","sources":["../../../src/components/statusnotification/StatusNotification.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-status-notification',\n    props: {\n      closable: { reflect: true, type: 'Boolean', attribute: 'closable' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { Snippet } from 'svelte';\n  import {\n    Cross20,\n    InfoCircleFilled32,\n    WarningCircleFilled32,\n    CrossCircleFilled32,\n    CheckCircleFilled32,\n  } from '@mozaic-ds/icons-svelte';\n  /**\n   * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.\n   *\n   * @slot footer - Use this slot to insert a button or a link in the footer\n   * @event close {CustomEvent<void>} - Emits when closing the notification.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Title of the status notification.\n     */\n    title: string;\n    /**\n     * Description of the status notification.\n     */\n    description: string;\n    /**\n     * Allows to define the status notification type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error';\n    /**\n     * if `true`, display the close button.\n     */\n    closable?: boolean;\n    /**\n     * Use this snippet to insert a button or a link in the footer\n     */\n    footer?: Snippet;\n  }\n\n  let { title, description, status = 'info', closable, footer, ...attrs }: Props = $props();\n  let element: HTMLElement;\n\n  const iconMap = [\n    { status: 'info', component: InfoCircleFilled32 },\n    { status: 'success', component: CheckCircleFilled32 },\n    { status: 'warning', component: WarningCircleFilled32 },\n    { status: 'error', component: CrossCircleFilled32 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  const selected = $derived(getSelected(status));\n\n  const onClose = () => {\n    const event = new CustomEvent('close', {\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n<section\n  class={['mc-status-notification', `mc-status-notification--${status}`]}\n  role=\"status\"\n  bind:this={element}\n  {...attrs}\n>\n  <span class=\"mc-status-notification__icon\" aria-hidden=\"true\">\n    <selected.component className=\"mc-status-notification__icon\" />\n  </span>\n\n  <div class=\"mc-status-notification__content\">\n    <h2 class=\"mc-status-notification__title\">{title}</h2>\n    <p class=\"mc-status-notification__message\">\n      {description}\n    </p>\n\n    <div class=\"mc-status-notification__footer\">\n      {#if footer}\n        {@render footer()}\n      {:else}\n        <slot name=\"footer\" />\n      {/if}\n    </div>\n  </div>\n\n  {#if closable}\n    <button\n      class=\"mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost\"\n      aria-label=\"Close\"\n      onclick={onClose}\n    >\n      <Cross20 className=\"mc-status-notification-closable__icon\" />\n    </button>\n  {/if}\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/status-notification';\n\n  .mc-status-notification__footer:empty {\n    display: none;\n  }\n</style>\n"],"names":["title","$.prop","$$props","description","status","closable","footer","attrs","$.rest_props","element","iconMap","InfoCircleFilled32","CheckCircleFilled32","WarningCircleFilled32","CrossCircleFilled32","getSelected","icon","selected","$.derived","onClose","event","section","root","span","$.child","selected_component","$$anchor","div","h2","p","div_1","$$render","consequent","alternate","button","root_3","node_5","Cross20","$.reset","$.append","consequent_1","$$value"],"mappings":";;ijcASA,qBAuCQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAAEE,iBAAS,MAAM,EAAEC,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAAEI,EAAML,EAAAC,EAAA,SAAA,CAAA,EAAKK,EAAKC,EAAAN,EAAA,+FACjEO,QAEEC,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,EAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,EAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,EAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,EAAmB,YAG1CC,EAAYX,EAAgB,CAC5B,OAAAM,EAAQ,KAAMM,GAASA,EAAK,SAAWZ,CAAM,GAAKM,EAAQ,CAAC,CACpE,OAEMO,EAAQC,EAAA,IAAYH,EAAYX,EAAM,CAAA,CAAA,EAEtCe,EAAO,IAAS,OACdC,EAAK,IAAO,YAAY,QAAO,CACnC,QAAS,GACT,SAAU,GAAI,EAEhBX,EAAQ,cAAcW,CAAK,CAC7B,yJAtBmC,OAAM,kHAyB1CC,EAAAC,GAAA,KAAAD,eACS,oDAAqDjB,GAAM,qBAG/DG,2CAEH,IAAAgB,EAAIC,EANNH,CAAA,MAMEE,CAAI,iCACFE,EAAkBC,EAAA,CAAA,UAAA,8BAAA,CAAA,MADpBH,CAAI,EAIJ,IAAAI,IAJAJ,EAAI,CAAA,EAKFK,IADFD,CAAG,MACDC,EAAE,EAAA,IAAFA,CAAE,EACF,IAAAC,IADAD,EAAE,CAAA,MACFC,EAAC,EAAA,IAADA,CAAC,EAID,IAAAC,IAJAD,EAAC,CAAA,MAIDC,CAAG,kCAESxB,CAAM,yEADZA,EAAM,EAAAyB,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,MADZH,CAAG,IANLH,CAAG,UAAHA,EAAG,CAAA,aAgBD,IAAAO,EAAAC,GAAA,EAAAD,EAGC,QAASf,EAHV,IAAAiB,EAAAZ,EAAAU,CAAA,EAKEG,GAAOD,EAAA,CAAA,UAAA,uCAAA,CAAA,EALTE,EAAAJ,CAAA,EAAAK,EAAAb,EAAAQ,CAAA,WADE7B,EAAQ,GAAA0B,EAAAS,CAAA,IAzBdF,OAAAA,EAAAjB,CAAA,KAAAA,EAAAoB,GAGYhC,QAAAA,CAAO,aAQ2BT,GAAK,MAE7CG,GAAW,IAbjBoC,EAAAb,EAAAL,CAAA,MAFO"}

package/dist/components/statusnotification/StatusNotification.stories.d.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import './StatusNotification.svelte';
 import '../button/Button.svelte';
 import '../link/Link.svelte';
-import '@mozaic-ds/icons-svelte/svelte/ArrowNext20/ArrowNext20.svelte';
+import '@mozaic-ds/icons-svelte/components/ArrowNext20/ArrowNext20.svelte';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj;

package/dist/components/statusnotification/StatusNotification.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusNotification.stories.d.ts","sourceRoot":"","sources":["../../../src/components/statusnotification/StatusNotification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,+DAA+D,CAAC;AAEvE,QAAA,MAAM,IAAI,EAAE,IA0BX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,KAAU,CAAC;AAE9B,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAUpB,CAAC"}
+{"version":3,"file":"StatusNotification.stories.d.ts","sourceRoot":"","sources":["../../../src/components/statusnotification/StatusNotification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,mEAAmE,CAAC;AAE3E,QAAA,MAAM,IAAI,EAAE,IA0BX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,KAAU,CAAC;AAE9B,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAUpB,CAAC"}

package/dist/components/statusnotification/StatusNotification.stories.js

@@ -5,7 +5,7 @@ import { action } from 'storybook/actions';
 import './StatusNotification.svelte';
 import '../button/Button.svelte';
 import '../link/Link.svelte';
-import '@mozaic-ds/icons-svelte/svelte/ArrowNext20/ArrowNext20.svelte';
+import '@mozaic-ds/icons-svelte/components/ArrowNext20/ArrowNext20.svelte';
 const meta = {
     title: 'Status/Status Notification',
     component: 'm-status-notification',
@@ -26,7 +26,7 @@ const meta = {
       title=${ifDefined(args.title)}
       description=${ifDefined(args.description)}
       status=${ifDefined(args.status)}
-      closable=${ifDefined(args.closable)}
+      ?closable=${args.closable}
       @close=${action('close')}
     >
       ${unsafeHTML(ifDefined(args.footer))}

package/dist/components/statusnotification/StatusNotification.svelte

@@ -1,11 +1,21 @@
-<svelte:options customElement={{ tag: 'm-status-notification' }} />
+<svelte:options
+  customElement={{
+    tag: 'm-status-notification',
+    props: {
+      closable: { reflect: true, type: 'Boolean', attribute: 'closable' },
+    },
+  }}
+/>
 
 <script lang="ts">
-  import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';
-  import InfoCircle32 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled32/InfoCircleFilled32.svelte';
-  import WarningCircle32 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled32/WarningCircleFilled32.svelte';
-  import CrossCircle32 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled32/CrossCircleFilled32.svelte';
-  import CheckCircle32 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled32/CheckCircleFilled32.svelte';
+  import type { Snippet } from 'svelte';
+  import {
+    Cross20,
+    InfoCircleFilled32,
+    WarningCircleFilled32,
+    CrossCircleFilled32,
+    CheckCircleFilled32,
+  } from '@mozaic-ds/icons-svelte';
   /**
    * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
    *
@@ -13,6 +23,7 @@
    * @event close {CustomEvent<void>} - Emits when closing the notification.
    */
   interface Props {
+    [key: string]: any;
     /**
      * Title of the status notification.
      */
@@ -29,23 +40,27 @@
      * if `true`, display the close button.
      */
     closable?: boolean;
+    /**
+     * Use this snippet to insert a button or a link in the footer
+     */
+    footer?: Snippet;
   }
 
-  let { title, description, status = 'info', closable, ...attrs }: Props = $props();
+  let { title, description, status = 'info', closable, footer, ...attrs }: Props = $props();
   let element: HTMLElement;
 
   const iconMap = [
-    { status: 'info', component: InfoCircle32 },
-    { status: 'success', component: CheckCircle32 },
-    { status: 'warning', component: WarningCircle32 },
-    { status: 'error', component: CrossCircle32 },
+    { status: 'info', component: InfoCircleFilled32 },
+    { status: 'success', component: CheckCircleFilled32 },
+    { status: 'warning', component: WarningCircleFilled32 },
+    { status: 'error', component: CrossCircleFilled32 },
   ];
 
   function getSelected(status: string) {
     return iconMap.find((icon) => icon.status === status) || iconMap[0];
   }
 
-  let selected = $state(getSelected(status));
+  const selected = $derived(getSelected(status));
 
   const onClose = () => {
     const event = new CustomEvent('close', {
@@ -63,7 +78,7 @@
   {...attrs}
 >
   <span class="mc-status-notification__icon" aria-hidden="true">
-    <selected.component class="mc-status-notification__icon" aria-hidden="true" />
+    <selected.component className="mc-status-notification__icon" />
   </span>
 
   <div class="mc-status-notification__content">
@@ -73,7 +88,11 @@
     </p>
 
     <div class="mc-status-notification__footer">
-      <slot name="footer" />
+      {#if footer}
+        {@render footer()}
+      {:else}
+        <slot name="footer" />
+      {/if}
     </div>
   </div>
 
@@ -83,7 +102,7 @@
       aria-label="Close"
       onclick={onClose}
     >
-      <Cross20 class="mc-status-notification-closable__icon" aria-hidden="true" />
+      <Cross20 className="mc-status-notification-closable__icon" />
     </button>
   {/if}
 </section>

package/dist/components/statusnotification/StatusNotification.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 /**
  * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged. It often provides feedback on a process, highlights a status update, or alerts users about an issue. Notifications are typically triggered by user actions or system events and are designed to be easily noticeable while maintaining a non-intrusive experience.
  *
@@ -5,6 +6,7 @@
  * @event close {CustomEvent<void>} - Emits when closing the notification.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Title of the status notification.
      */
@@ -21,6 +23,10 @@ interface Props {
      * if `true`, display the close button.
      */
     closable?: boolean;
+    /**
+     * Use this snippet to insert a button or a link in the footer
+     */
+    footer?: Snippet;
 }
 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/statusnotification/StatusNotification.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusNotification.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusnotification/StatusNotification.svelte.ts"],"names":[],"mappings":"AASE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+DH,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;AAUD,QAAA,MAAM,kBAAkB;;;;UAAqF,CAAC;AAC5F,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACpE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"StatusNotification.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusnotification/StatusNotification.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AASpC;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAqEH,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;AAUD,QAAA,MAAM,kBAAkB;;;;UAAqF,CAAC;AAC5F,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACpE,eAAe,kBAAkB,CAAC"}

package/dist/components/stepperbottombar/README.md

@@ -0,0 +1,24 @@
+# `m-stepper-bottom-bar`
+
+A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `step` | Current step of the stepper bottom bar. | `number` | `$bindable(0)` |
+| `steps` | Total number of steps of the stepper bottom bar. | `number` | `$bindable(0)` |
+| `cancel` | If `true`, display the cancel button. | `boolean` | `true` |
+| `cancellabel` | Label for the cancel button. | `string` | `Cancel` |
+| `previouslabel` | Label for the previous button. | `string` | `Previous` |
+| `nextlabel` | Label for the next button. | `string` | `Next` |
+| `validatelabel` | Label for the validate button. | `string` | `Validate` |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `cancel` | Emits when the cancel button is clicked. | `CustomEvent<void>` |
+| `change` | Emits when the step change. | `CustomEvent<number>` |
+| `validate` | Emits when the validate button is clicked. | `CustomEvent<void>` |
+

package/dist/components/stepperbottombar/StepperBottomBar.js

@@ -0,0 +1,12 @@
+import{c as M,p as O,a as Q,b as i,s as E,t as y,f as b,g as R,h as m,d as a,z as S,j as c,r as s,e as z}from"../../custom-element.js";import{i as V}from"../../if.js";import{b as T}from"../../this.js";import{B as C}from"../button/Button.js";import{D as U}from"../divider/Divider.js";import"../../snippet.js";import"../../slot.js";import"../../attributes.js";import"../loader/Loader.js";var W=m('<span class="mc-button__label svelte-nje7f7"> </span>'),X=m('<span class="mc-stepper-bottom-bar__button--text"><!></span>'),Y=m('<span class="mc-button__label svelte-nje7f7"> </span>'),Z=m('<span class="mc-stepper-bottom-bar__button"><!></span>'),$=m('<span class="mc-button__label svelte-nje7f7"> </span>'),ee=m('<div class="mc-stepper-bottom-bar svelte-nje7f7"><!> <div class="mc-stepper-bottom-bar__left svelte-nje7f7"><!></div> <div class="mc-stepper-bottom-bar__right svelte-nje7f7"><!> <span class="mc-stepper-bottom-bar__button"><!></span></div></div>');const te={hash:"svelte-nje7f7",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-stepper-bottom-bar.svelte-nje7f7 {position:fixed;box-sizing:border-box;bottom:0;left:0;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background-color:var(--action-bottom-bar-color-background, #ffffff);z-index:var(--stepper-bottom-bar-z-index, 3);}
+@media screen and (min-width: 679px) {
+}
+@media screen and (min-width: 679px) {
+}.mc-stepper-bottom-bar__left.svelte-nje7f7 {padding-left:1.25rem;}
+@media screen and (min-width: 679px) {.mc-stepper-bottom-bar__left.svelte-nje7f7 {padding-left:0.5rem;}
+}.mc-stepper-bottom-bar__right.svelte-nje7f7 {margin-left:auto;padding:0.25rem 0.5rem 0.25rem 0;display:flex;gap:0.5rem;}
+@media screen and (min-width: 679px) {.mc-stepper-bottom-bar__right.svelte-nje7f7 {padding:0.5rem 1rem 0.5rem 0;}
+}.mc-button__label.svelte-nje7f7 {font-size:var(--font-size-150, 1rem);}.mc-divider {width:100%;}`};function ae(k,r){O(r,!0),Q(k,te);let t=i(r,"step",15,0),v=i(r,"steps",15,0),f=i(r,"cancel",7,!0),_=i(r,"cancellabel",7,"Cancel"),h=i(r,"previouslabel",7,"Previous"),g=i(r,"nextlabel",7,"Next"),x=i(r,"validatelabel",7,"Validate"),p;function q(){const e=new CustomEvent("cancel",{bubbles:!0,composed:!0});p.dispatchEvent(e)}function A(){if(t()>0){S(t,-1);const e=new CustomEvent("change",{detail:t(),bubbles:!0,composed:!0});p.dispatchEvent(e)}}function F(){if(t()<v()){S(t);const e=new CustomEvent("change",{detail:t(),bubbles:!0,composed:!0});p.dispatchEvent(e)}else{const e=new CustomEvent("validate",{bubbles:!0,composed:!0});p.dispatchEvent(e)}}var G={get step(){return t()},set step(e=0){t(e),c()},get steps(){return v()},set steps(e=0){v(e),c()},get cancel(){return f()},set cancel(e=!0){f(e),c()},get cancellabel(){return _()},set cancellabel(e="Cancel"){_(e),c()},get previouslabel(){return h()},set previouslabel(e="Previous"){h(e),c()},get nextlabel(){return g()},set nextlabel(e="Next"){g(e),c()},get validatelabel(){return x()},set validatelabel(e="Validate"){x(e),c()}},u=ee(),P=a(u);U(P,{});var j=E(P,2),H=a(j);{var I=e=>{var n=X(),l=a(n);C(l,{ghost:!0,size:"s",onclick:q,children:(d,L)=>{var o=W(),w=a(o,!0);s(o),y(()=>z(w,_())),b(d,o)},$$slots:{default:!0}}),s(n),b(e,n)};V(H,e=>{f()&&e(I)})}s(j);var B=E(j,2),N=a(B);{var J=e=>{var n=Z(),l=a(n);C(l,{outlined:!0,size:"s",onclick:A,children:(d,L)=>{var o=Y(),w=a(o,!0);s(o),y(()=>z(w,h())),b(d,o)},$$slots:{default:!0}}),s(n),b(e,n)};V(N,e=>{t()>0&&e(J)})}var D=E(N,2),K=a(D);return C(K,{appearance:"accent",size:"s",onclick:F,children:(e,n)=>{var l=$(),d=a(l,!0);s(l),y(()=>z(d,t()<v()?g():x())),b(e,l)},$$slots:{default:!0}}),s(D),s(B),s(u),T(u,e=>p=e,()=>p),b(k,u),R(G)}customElements.define("m-stepper-bottom-bar",M(ae,{step:{attribute:"step",reflect:!0,type:"Number"},steps:{attribute:"steps",reflect:!0,type:"Number"},cancel:{attribute:"cancel",reflect:!0,type:"Boolean"},cancellabel:{},previouslabel:{},nextlabel:{},validatelabel:{}},[],[],!0));
+//# sourceMappingURL=StepperBottomBar.js.map

package/dist/components/stepperbottombar/StepperBottomBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperBottomBar.js","sources":["../../../src/components/stepperbottombar/StepperBottomBar.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-stepper-bottom-bar',\n    props: {\n      step: { reflect: true, type: 'Number', attribute: 'step' },\n      steps: { reflect: true, type: 'Number', attribute: 'steps' },\n      cancel: { reflect: true, type: 'Boolean', attribute: 'cancel' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  import Button from '../button/Button.svelte';\n  import Divider from '../divider/Divider.svelte';\n  /**\n   * A stepper bottom bar is a persistent navigation component used to guide users through a multi-step process. It typically includes “Previous” and “Next” buttons, along with optional actions such as “Cancel” or “Validate”, ensuring a structured flow. This component is commonly used in forms, onboarding sequences, and checkout processes, improving usability by keeping navigation actions always accessible.\n   *\n   * @event cancel {CustomEvent<void>} - Emits when the cancel button is clicked.\n   * @event change {CustomEvent<number>} - Emits when the step change.\n   * @event validate {CustomEvent<void>} - Emits when the validate button is clicked.\n   */\n  interface Props {\n    /**\n     * Current step of the stepper bottom bar.\n     */\n    step?: number;\n    /**\n     * Total number of steps of the stepper bottom bar.\n     */\n    steps?: number;\n    /**\n     * If `true`, display the cancel button.\n     */\n    cancel?: boolean;\n    /**\n     * Label for the cancel button.\n     */\n    cancellabel?: string;\n    /**\n     * Label for the previous button.\n     */\n    previouslabel?: string;\n    /**\n     * Label for the next button.\n     */\n    nextlabel?: string;\n    /**\n     * Label for the validate button.\n     */\n    validatelabel?: string;\n  }\n\n  let {\n    step = $bindable(0),\n    steps = $bindable(0),\n    cancel = true,\n    cancellabel = 'Cancel',\n    previouslabel = 'Previous',\n    nextlabel = 'Next',\n    validatelabel = 'Validate',\n  }: Props = $props();\n\n  let element: HTMLElement;\n\n  function onCancel(): void {\n    const cencenEvent = new CustomEvent('cancel', {\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(cencenEvent);\n  }\n\n  function onPrevious(): void {\n    if (step > 0) {\n      step--;\n      const event = new CustomEvent('change', {\n        detail: step,\n        bubbles: true,\n        composed: true,\n      });\n      element.dispatchEvent(event);\n    }\n  }\n\n  function onNext(): void {\n    if (step < steps) {\n      step++;\n      const event = new CustomEvent('change', {\n        detail: step,\n        bubbles: true,\n        composed: true,\n      });\n      element.dispatchEvent(event);\n    } else {\n      const event = new CustomEvent('validate', {\n        bubbles: true,\n        composed: true,\n      });\n      element.dispatchEvent(event);\n    }\n  }\n</script>\n\n<div class=\"mc-stepper-bottom-bar\" bind:this={element}>\n  <Divider />\n  <div class=\"mc-stepper-bottom-bar__left\">\n    {#if cancel}\n      <span class=\"mc-stepper-bottom-bar__button--text\">\n        <Button ghost size=\"s\" onclick={onCancel}>\n          <span class=\"mc-button__label\">{cancellabel}</span>\n        </Button>\n      </span>\n    {/if}\n  </div>\n\n  <div class=\"mc-stepper-bottom-bar__right\">\n    {#if step > 0}\n      <span class=\"mc-stepper-bottom-bar__button\">\n        <Button outlined size=\"s\" onclick={onPrevious}>\n          <span class=\"mc-button__label\">{previouslabel}</span>\n        </Button>\n      </span>\n    {/if}\n\n    <span class=\"mc-stepper-bottom-bar__button\">\n      <Button appearance=\"accent\" size=\"s\" onclick={onNext}>\n        <span class=\"mc-button__label\">\n          {step < steps ? nextlabel : validatelabel}\n        </span>\n      </Button>\n    </span>\n  </div>\n</div>\n\n<style lang=\"scss\" scoped>\n  @use '@mozaic-ds/styles/components/stepper-bottom-bar';\n  @use '@mozaic-ds/styles/components/button';\n\n  :global(.mc-divider) {\n    width: 100%;\n  }\n</style>\n"],"names":["step","steps","cancel","cancellabel","previouslabel","nextlabel","validatelabel","element","onCancel","cencenEvent","onPrevious","event","onNext","div","root","Divider","node","div_1","$.sibling","span","root_1","Button","node_2","span_1","root_2","$$render","consequent","div_2","span_2","root_3","node_4","span_3","root_4","consequent_1","span_4","node_3","node_5","span_5","root_5","$.template_effect","$.set_text","text_2","$$value"],"mappings":";;;;;;;;;;oHAWA,iBA0CI,IAAAA,gBAAiB,CAAC,EAClBC,iBAAkB,CAAC,EACnBC,iBAAS,EAAI,EACbC,sBAAc,QAAQ,EACtBC,wBAAgB,UAAU,EAC1BC,oBAAY,MAAM,EAClBC,wBAAgB,UAAU,EAGxBC,EAEK,SAAAC,GAAiB,OAClBC,EAAW,IAAO,YAAY,SAAQ,CAC1C,QAAS,GACT,SAAU,GAAI,EAEhBF,EAAQ,cAAcE,CAAW,CACnC,CAES,SAAAC,GAAmB,IACtBV,EAAI,EAAG,EAAG,GACZA,EAAI,EAAA,EACE,MAAAW,EAAK,IAAO,YAAY,UAC5B,OAAQX,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBO,EAAQ,cAAcI,CAAK,CAC7B,CACF,CAES,SAAAC,GAAe,IAClBZ,EAAI,EAAGC,IAAO,GAChBD,CAAI,EACE,MAAAW,EAAK,IAAO,YAAY,UAC5B,OAAQX,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBO,EAAQ,cAAcI,CAAK,CAC7B,KAAO,OACCA,EAAK,IAAO,YAAY,WAAU,CACtC,QAAS,GACT,SAAU,GAAI,EAEhBJ,EAAQ,cAAcI,CAAK,CAC7B,CACF,0CA/CmB,EAAC,+CACA,EAAC,iDACV,GAAI,2DACC,SAAQ,+DACN,WAAU,uDACd,OAAM,+DACF,WAAU,YA4C7BE,EAAGC,GAAA,MAAHD,CAAG,EACDE,EAAOC,EAAA,EAAA,MACPC,EAAGC,EAAAF,EAAA,CAAA,MAAHC,CAAG,iBAECE,EAAIC,EAAA,MAAJD,CAAI,EACFE,EAAMC,EAAA,2BAAyBd,uBAC7Be,EAAIC,EAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YAA2BpB,EAAW,CAAA,CAAA,MAA1CoB,CAAI,4BAFRJ,CAAI,MAAJA,CAAI,WADFjB,EAAM,GAAAuB,EAAAC,CAAA,MADZT,CAAG,EAUH,IAAAU,IAVAV,EAAG,CAAA,MAUHU,CAAG,iBAECC,EAAIC,EAAA,MAAJD,CAAI,EACFP,EAAMS,EAAA,8BAA4BpB,uBAChCqB,EAAIC,EAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,YAA2B3B,EAAa,CAAA,CAAA,MAA5C2B,CAAI,4BAFRH,CAAI,MAAJA,CAAI,WADF5B,EAAI,EAAG,GAACyB,EAAAQ,CAAA,QAQZC,EAAIhB,EAAAiB,EAAA,CAAA,MAAJD,CAAI,EACF,OAAAb,EAAMe,EAAA,sCAAuCxB,uBAC3CyB,EAAIC,EAAA,MAAJD,EAAI,EAAA,IAAJA,CAAI,EACFE,EAAA,IAAAC,EAAAC,EAAAzC,EAAI,EAAGC,EAAK,EAAGI,EAAS,EAAGC,EAAa,CAAA,CAAA,MAD1C+B,CAAI,4BAFRH,CAAI,IATNP,CAAG,IAZLd,CAAG,IAAHA,EAAG6B,GAA0CnC,EAAOmC,EAAA,IAAPnC,CAAO,MAApDM,CAAG,MAFI"}

package/dist/components/stepperbottombar/StepperBottomBar.spec.js

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import StepperBottomBar from './StepperBottomBar.svelte';
+describe('m-stepper-bottom-bar component', () => {
+    it('renders the component root', () => {
+        const { container } = render(StepperBottomBar, {
+            props: {
+                steps: 3,
+                step: 0,
+            },
+        });
+        const root = container.querySelector('.mc-stepper-bottom-bar');
+        expect(root).toBeTruthy();
+    });
+    it('renders cancel button when cancel=true', () => {
+        const { getByText } = render(StepperBottomBar, {
+            props: { cancel: true },
+        });
+        expect(getByText('Cancel')).toBeTruthy();
+    });
+    it('does not render cancel button when cancel=false', () => {
+        const { queryByText } = render(StepperBottomBar, {
+            props: { cancel: false },
+        });
+        expect(queryByText('Cancel')).toBeNull();
+    });
+    it('does not render previous button on first step', () => {
+        const { queryByText } = render(StepperBottomBar, {
+            props: {
+                step: 0,
+                steps: 3,
+            },
+        });
+        expect(queryByText('Previous')).toBeNull();
+    });
+    it('renders previous button when step > 0', () => {
+        const { getByText } = render(StepperBottomBar, {
+            props: {
+                step: 1,
+                steps: 3,
+            },
+        });
+        expect(getByText('Previous')).toBeTruthy();
+    });
+    it('emits cancel event when cancel button is clicked', async () => {
+        const { container, getByText } = render(StepperBottomBar, {
+            props: { cancel: true },
+        });
+        const element = container.querySelector('.mc-stepper-bottom-bar');
+        const handler = vi.fn();
+        element.addEventListener('cancel', handler);
+        await fireEvent.click(getByText('Cancel'));
+        expect(handler).toHaveBeenCalledOnce();
+    });
+    it('emits change event with decremented step on previous click', async () => {
+        const { container, getByText } = render(StepperBottomBar, {
+            props: {
+                step: 2,
+                steps: 4,
+            },
+        });
+        const element = container.querySelector('.mc-stepper-bottom-bar');
+        const handler = vi.fn();
+        element.addEventListener('change', handler);
+        await fireEvent.click(getByText('Previous'));
+        expect(handler).toHaveBeenCalledOnce();
+        expect(handler.mock.calls[0][0].detail).toBe(1);
+    });
+    it('emits change event with incremented step on next click', async () => {
+        const { container, getByText } = render(StepperBottomBar, {
+            props: {
+                step: 0,
+                steps: 3,
+            },
+        });
+        const element = container.querySelector('.mc-stepper-bottom-bar');
+        const handler = vi.fn();
+        element.addEventListener('change', handler);
+        await fireEvent.click(getByText('Next'));
+        expect(handler).toHaveBeenCalledOnce();
+        expect(handler.mock.calls[0][0].detail).toBe(1);
+    });
+    it('emits validate event when clicking next on last step', async () => {
+        const { container, getByText } = render(StepperBottomBar, {
+            props: {
+                step: 3,
+                steps: 3,
+            },
+        });
+        const element = container.querySelector('.mc-stepper-bottom-bar');
+        const handler = vi.fn();
+        element.addEventListener('validate', handler);
+        await fireEvent.click(getByText('Validate'));
+        expect(handler).toHaveBeenCalledOnce();
+    });
+    it('renders validate label on last step', () => {
+        const { getByText } = render(StepperBottomBar, {
+            props: {
+                step: 3,
+                steps: 3,
+                validatelabel: 'Confirm',
+            },
+        });
+        expect(getByText('Confirm')).toBeTruthy();
+    });
+});

package/dist/components/stepperbottombar/StepperBottomBar.stories.d.ts

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

package/dist/components/stepperbottombar/StepperBottomBar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperBottomBar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stepperbottombar/StepperBottomBar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,2BAA2B,CAAC;AAEnC,QAAA,MAAM,IAAI,EAAE,IA0DX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,KAAK,EAAE,KAAU,CAAC;AAE/B,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC"}

package/dist/components/stepperbottombar/StepperBottomBar.stories.js

@@ -0,0 +1,74 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { action } from 'storybook/actions';
+import './StepperBottomBar.svelte';
+const meta = {
+    title: 'Structure/Stepper Bottom Bar',
+    component: 'm-stepper-bottom-bar',
+    tags: ['v2'],
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            story: { height: '200px' },
+        },
+    },
+    args: {
+        step: 0,
+        steps: 3,
+    },
+    argTypes: {
+        cancel: {
+            control: false,
+        },
+        change: {
+            control: false,
+        },
+        validate: {
+            control: false,
+        },
+        '--stepper-bottom-bar-z-index': {
+            description: 'Customise the z-index of the stepper bottom bar',
+            control: false,
+            table: {
+                category: 'Custom Properties',
+                type: { summary: 'number' },
+                defaultValue: { summary: '3' },
+            },
+        },
+    },
+    render: (args) => {
+        const onCancel = action('cancel');
+        const onChange = action('change');
+        const onValidate = action('validate');
+        return html ` <m-stepper-bottom-bar
+      step="${ifDefined(args.step)}"
+      steps="${ifDefined(args.steps)}"
+      ?cancel="${args.cancel}"
+      cancellabel="${ifDefined(args.cancellabel)}"
+      previouslabel="${ifDefined(args.previouslabel)}"
+      nextlabel="${ifDefined(args.nextlabel)}"
+      validatelabel="${ifDefined(args.validatelabel)}"
+      @cancel=${(event) => {
+            onCancel(event);
+        }}
+      @change=${(event) => {
+            onChange(event.detail);
+        }}
+      @validate=${(event) => {
+            onValidate(event);
+        }}
+    ></m-stepper-bottom-bar>`;
+    },
+};
+export default meta;
+export const First = {};
+export const Middle = {
+    args: {
+        step: 2,
+    },
+};
+export const Last = {
+    args: {
+        step: 3,
+    },
+};