@mozaic-ds/web-components 1.1.0 → 1.3.0

package/dist/components/statusmessage/StatusMessage.svelte

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

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

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

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

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

package/dist/components/statusnotification/StatusNotification.js

@@ -1,4 +1,4 @@
-import{v as q,c as A,p as B,a as G,b as s,w as H,l as J,f as w,m as K,d as r,s as l,t as L,i as p,j as O,k as b,r as e,e as P,g as Q,h as _}from"../../custom-element.js";import{i as R}from"../../if.js";import{s as T}from"../../slot.js";import{c as U,I as V,C as X,W as Y,a as Z,b as $}from"../../Cross20.js";import{b as oo}from"../../this.js";import"../../legacy.js";import"../../attributes.js";var to=w('<button class="mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost svelte-18b6syz" aria-label="Close"><!></button>'),ro=w('<section role="status"><span class="mc-status-notification__icon svelte-18b6syz" aria-hidden="true"><!></span> <div class="mc-status-notification__content svelte-18b6syz"><h2 class="mc-status-notification__title svelte-18b6syz"> </h2> <p class="mc-status-notification__message svelte-18b6syz"> </p> <div class="mc-status-notification__footer svelte-18b6syz"><!></div></div> <!></section>');const eo={hash:"svelte-18b6syz",code:`/**
+import{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:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-18b6syz {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-18b6syz:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-18b6syz:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-18b6syz {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-radius, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-18b6syz {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-18b6syz {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-18b6syz:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--s.svelte-18b6syz {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-18b6syz {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-18b6syz {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-18b6syz {padding:0.25rem;}.mc-button--outlined.svelte-18b6syz {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-18b6syz {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-18b6syz {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-18b6syz {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-18b6syz {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-18b6syz:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-18b6syz {border-radius:var(--radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-18b6syz {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-18b6syz {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-18b6syz {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-18b6syz {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-18b6syz {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-18b6syz {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-18b6syz {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-18b6syz {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-status-notification.svelte-18b6syz {border-radius:var(--radius-m, 0.5rem);background:var(--status-notification-color-background-information, #e1f3f9);box-shadow:inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000);}.mc-status-notification__icon.svelte-18b6syz {width:2rem;height:2rem;margin:0.75rem;fill:var(--status-notification-color-icon-information, #0b96cc);}.mc-status-notification__content.svelte-18b6syz {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-status-notification__title.svelte-18b6syz, .mc-status-notification__message.svelte-18b6syz {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-status-notification__title.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-status-notification__message.svelte-18b6syz {font-size:var(--font-size-100, 0.875rem);}.mc-status-notification__footer.svelte-18b6syz {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-status-notification--information.svelte-18b6syz {background:var(--status-notification-color-background-information, #e1f3f9);box-shadow:inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);}.mc-status-notification--information.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-information, #0b96cc);}.mc-status-notification--success.svelte-18b6syz {background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-success, #78be20);}.mc-status-notification--success.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-success, #3f9e10);}.mc-status-notification--warning.svelte-18b6syz {background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-warning, #ef934a);}.mc-status-notification--warning.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-warning, #ea7315);}.mc-status-notification--error.svelte-18b6syz {background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-error, #ef5f5c);}.mc-status-notification--error.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-error, #ea302d);}.mc-status-notification-closable__close.svelte-18b6syz {margin:0.25rem;}.mc-status-notification__footer.svelte-18b6syz:empty {display:none;}`};function no(h,n){B(n,!0),G(h,eo);let d=s(n,"title",7),i=s(n,"description",7),c=s(n,"status",7,"info"),u=s(n,"closable",7),v;const y=[{status:"info",component:V},{status:"success",component:X},{status:"warning",component:Y},{status:"error",component:Z}];function x(o){return y.find(t=>t.status===o)||y[0]}let C=H(J(x(c())));const F=()=>{const o=new CustomEvent("close",{bubbles:!0,composed:!0});v.dispatchEvent(o)};var E={get title(){return d()},set title(o){d(o),b()},get description(){return i()},set description(o){i(o),b()},get status(){return c()},set status(o="info"){c(o),b()},get closable(){return u()},set closable(o){u(o),b()}},a=ro(),f=r(a),S=r(f);U(S,()=>K(C).component,(o,t)=>{t(o,{class:"mc-status-notification__icon","aria-hidden":"true"})}),e(f);var g=l(f,2),m=r(g),j=r(m,!0);e(m);var k=l(m,2),I=r(k,!0);e(k);var z=l(k,2),W=r(z);T(W,n,"footer",{}),e(z),e(g);var D=l(g,2);{var M=o=>{var t=to();t.__click=F;var N=r(t);$(N,{class:"mc-status-notification-closable__icon","aria-hidden":"true"}),e(t),p(o,t)};R(D,o=>{u()&&o(M)})}return e(a),oo(a,o=>v=o,()=>v),L(()=>{P(a,1,Q(["mc-status-notification",`mc-status-notification--${c()}`]),"svelte-18b6syz"),_(j,d()),_(I,i())}),p(h,a),O(E)}q(["click"]);customElements.define("m-status-notification",A(no,{title:{},description:{},status:{},closable:{}},["footer"],[],!0));
+ */.mc-button.svelte-18b6syz {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-18b6syz:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-18b6syz:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-18b6syz {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, 0.25rem);transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button__label.svelte-18b6syz {font-size:var(--font-size-150, 1rem);}.mc-button__icon.svelte-18b6syz {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-18b6syz:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-button--s.svelte-18b6syz {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-18b6syz {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-18b6syz {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-18b6syz {padding:0.25rem;}.mc-button--outlined.svelte-18b6syz {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-18b6syz {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-18b6syz {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-18b6syz {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-18b6syz {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-18b6syz:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-18b6syz {border-radius:var(--border-radius-full, 100%);padding:0;}.mc-button--outlined.mc-button--standard.svelte-18b6syz {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-18b6syz {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-18b6syz {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-18b6syz {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-18b6syz {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-18b6syz {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-18b6syz {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-18b6syz {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-status-notification.svelte-18b6syz {border-radius:var(--border-radius-m, 0.5rem);background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000);}.mc-status-notification__icon.svelte-18b6syz {width:2rem;height:2rem;margin:0.75rem;fill:var(--status-notification-color-icon-info, #0b96cc);}.mc-status-notification__content.svelte-18b6syz {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-status-notification__title.svelte-18b6syz, .mc-status-notification__message.svelte-18b6syz {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-status-notification__title.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-status-notification__message.svelte-18b6syz {font-size:var(--font-size-100, 0.875rem);}.mc-status-notification__footer.svelte-18b6syz {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-status-notification--information.svelte-18b6syz {background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);}.mc-status-notification--information.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-info, #0b96cc);}.mc-status-notification--success.svelte-18b6syz {background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-success, #78be20);}.mc-status-notification--success.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-success, #3f9e10);}.mc-status-notification--warning.svelte-18b6syz {background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-warning, #ef934a);}.mc-status-notification--warning.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-warning, #ea7315);}.mc-status-notification--error.svelte-18b6syz {background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-error, #ef5f5c);}.mc-status-notification--error.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-error, #ea302d);}.mc-status-notification-closable__close.svelte-18b6syz {margin:0.25rem;}.mc-status-notification__footer.svelte-18b6syz:empty {display:none;}`};function 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));
 //# 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 }: Props = $props();\n  let element: HTMLElement;\n\n  const iconMap = [\n    { status: 'info', component: InfoCircle32 },\n    { status: 'success', component: CheckCircle32 },\n    { status: 'warning', component: WarningCircle32 },\n    { status: 'error', component: CrossCircle32 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  let selected = $state(getSelected(status));\n\n  const onClose = () => {\n    const event = new CustomEvent('close', {\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n<section\n  class={['mc-status-notification', `mc-status-notification--${status}`]}\n  role=\"status\"\n  bind:this={element}\n>\n  <span class=\"mc-status-notification__icon\" aria-hidden=\"true\">\n    <selected.component class=\"mc-status-notification__icon\" aria-hidden=\"true\" />\n  </span>\n\n  <div class=\"mc-status-notification__content\">\n    <h2 class=\"mc-status-notification__title\">{title}</h2>\n    <p class=\"mc-status-notification__message\">\n      {description}\n    </p>\n\n    <div class=\"mc-status-notification__footer\">\n      <slot name=\"footer\" />\n    </div>\n  </div>\n\n  {#if closable}\n    <button\n      class=\"mc-status-notification-closable__close mc-button mc-button--s mc-button--icon-button mc-button--ghost\"\n      aria-label=\"Close\"\n      onclick={onClose}\n    >\n      <Cross20 class=\"mc-status-notification-closable__icon\" aria-hidden=\"true\" />\n    </button>\n  {/if}\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/status-notification';\n\n  .mc-status-notification__footer:empty {\n    display: none;\n  }\n</style>\n"],"names":["title","$.prop","$$props","description","status","closable","element","iconMap","InfoCircle32","CheckCircle32","WarningCircle32","CrossCircle32","getSelected","icon","selected","$.state","$.proxy","onClose","event","$$render","consequent","$.bind_this","section","$$value"],"mappings":";;wgcAAA,qBAiCQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAAEE,iBAAS,MAAM,EAAEC,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAC/CI,QAEEC,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,CAAY,EACvC,CAAA,OAAQ,UAAW,UAAWC,CAAa,EAC3C,CAAA,OAAQ,UAAW,UAAWC,CAAe,EAC7C,CAAA,OAAQ,QAAS,UAAWC,CAAa,YAGpCC,EAAYR,EAAgB,CAC5B,OAAAG,EAAQ,KAAMM,GAASA,EAAK,SAAWT,CAAM,GAAKG,EAAQ,CAAC,CACpE,KAEIO,EAAQC,EAAAC,EAAUJ,EAAYR,EAAM,CAAA,CAAA,CAAA,EAElC,MAAAa,EAAO,IAAS,OACdC,EAAK,IAAO,YAAY,QAAO,CACnC,QAAS,GACT,SAAU,GAAI,EAEhBZ,EAAQ,cAAcY,CAAK,CAC7B,yJAtBmC,OAAM,0VAiD5BD,4GAJRZ,EAAQ,GAAAc,EAAAC,CAAA,gBAjBFC,GAAAC,EAAAC,GAAAjB,QAAAA,CAAO,kBAFV,oDAAqDF,GAAM,2BAStBJ,GAAK,MAE7CG,GAAW,eAdlB"}
+{"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"}

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

@@ -1,4 +1,8 @@
 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';
 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;AAMrE,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,+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"}

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

@@ -2,6 +2,10 @@ import { html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 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';
 const meta = {
     title: 'Status/Status Notification',
     component: 'm-status-notification',

package/dist/components/statusnotification/StatusNotification.svelte

@@ -31,7 +31,7 @@
     closable?: boolean;
   }
 
-  let { title, description, status = 'info', closable }: Props = $props();
+  let { title, description, status = 'info', closable, ...attrs }: Props = $props();
   let element: HTMLElement;
 
   const iconMap = [
@@ -60,6 +60,7 @@
   class={['mc-status-notification', `mc-status-notification--${status}`]}
   role="status"
   bind:this={element}
+  {...attrs}
 >
   <span class="mc-status-notification__icon" aria-hidden="true">
     <selected.component class="mc-status-notification__icon" aria-hidden="true" />
@@ -121,7 +122,7 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-radius, 0.25rem);
+  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -285,7 +286,7 @@
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {
@@ -430,9 +431,9 @@
 }
 
 .mc-status-notification {
-  border-radius: var(--radius-m, 0.5rem);
-  background: var(--status-notification-color-background-information, #e1f3f9);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);
+  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;
@@ -444,7 +445,7 @@
   width: 2rem;
   height: 2rem;
   margin: 0.75rem;
-  fill: var(--status-notification-color-icon-information, #0b96cc);
+  fill: var(--status-notification-color-icon-info, #0b96cc);
 }
 .mc-status-notification__content {
   flex: 1 1 0;
@@ -471,29 +472,29 @@
   margin-bottom: 0.5rem;
 }
 .mc-status-notification--information {
-  background: var(--status-notification-color-background-information, #e1f3f9);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-information, #3facd7);
+  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 .mc-status-notification__icon {
-  fill: var(--status-notification-color-icon-information, #0b96cc);
+  fill: var(--status-notification-color-icon-info, #0b96cc);
 }
 .mc-status-notification--success {
   background: var(--status-notification-color-background-success, #ebf5de);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-success, #78be20);
+  box-shadow: inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-success, #78be20);
 }
 .mc-status-notification--success .mc-status-notification__icon {
   fill: var(--status-notification-color-icon-success, #3f9e10);
 }
 .mc-status-notification--warning {
   background: var(--status-notification-color-background-warning, #fdf1e8);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-warning, #ef934a);
+  box-shadow: inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-warning, #ef934a);
 }
 .mc-status-notification--warning .mc-status-notification__icon {
   fill: var(--status-notification-color-icon-warning, #ea7315);
 }
 .mc-status-notification--error {
   background: var(--status-notification-color-background-error, #fdeaea);
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--status-notification-color-border-error, #ef5f5c);
+  box-shadow: inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-error, #ef5f5c);
 }
 .mc-status-notification--error .mc-status-notification__icon {
   fill: var(--status-notification-color-icon-error, #ea302d);

package/dist/components/steppercompact/README.md

@@ -0,0 +1,13 @@
+# `m-stepper-compact`
+
+A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `value` | Current step of the stepper compact. | `number` | `$bindable(1)` |
+| `maxsteps` | Maximum number of steps for the stepper compact. | `number` | `$bindable(4)` |
+| `label*` | Label of the stepper compact. | `string` |   |
+| `description` | Description displayed below the label of the stepper compact. | `string` |   |
+

package/dist/components/steppercompact/StepperCompact.js

@@ -0,0 +1,4 @@
+import{c as E,p as M,a as q,b as p,f as w,n as l,D as m,d as s,s as b,t as f,h as x,i as A,j as n,e as a,g as y}from"../../custom-element.js";import{i as B}from"../../if.js";import{C as F}from"../circularprogressbar/CircularProgressbar.js";import"../../attributes.js";var G=w('<p class="mc-stepper-compact__description svelte-1o3m5eh"> </p>'),H=w('<div class="mc-stepper-compact svelte-1o3m5eh"><div class="mc-circular-progressbar mc-stepper-compact__progress svelte-1o3m5eh"><!></div> <div class="mc-stepper-compact__label-container"><p class="mc-stepper-compact__label svelte-1o3m5eh"> </p> <!></div></div>');const I={hash:"svelte-1o3m5eh",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-stepper-compact.svelte-1o3m5eh {display:inline-flex;justify-content:start;align-items:center;}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__label.svelte-1o3m5eh, .mc-stepper-compact__description.svelte-1o3m5eh {padding-left:0.5rem;}.mc-stepper-compact__label.svelte-1o3m5eh {margin:0;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, 0.875rem);color:var(--progressbar-color-text, #000000);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__description.svelte-1o3m5eh {margin:0.25rem 0 0;font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, 0.75rem);color:var(--stepper-color-information, #666666);line-height:var(--line-height-s, 1.3);}.mc-stepper-compact__progress.svelte-1o3m5eh {width:3rem;height:3rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__content {display:block !important;visibility:visible;font-weight:600;font-size:0.875rem;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__number {display:block;visibility:visible;opacity:1;color:inherit;font-size:inherit;line-height:inherit;}.mc-stepper-compact__progress.svelte-1o3m5eh .mc-circular-progressbar__indicator {stroke-width:calc(4 / (48 / 100));stroke:var(--stepper-color-progress-bar-indicator, #117f03);fill:none;stroke-linecap:round;}`};function J(g,r){M(r,!0),q(g,I);let o=p(r,"value",15,1),c=p(r,"maxsteps",15,4),v=p(r,"label",7),i=p(r,"description",7);const z=m(()=>()=>{const e=o()??0,t=c()??1;return Math.round(e/t*100)}),k=m(()=>()=>`${o()} / ${c()}`);var C={get value(){return o()},set value(e=1){o(e),n()},get maxsteps(){return c()},set maxsteps(e=4){c(e),n()},get label(){return v()},set label(e){v(e),n()},get description(){return i()},set description(e){i(e),n()}},_=H(),h=s(_),j=s(h);{let e=m(()=>l(k)()),t=m(()=>l(z)());F(j,{"aria-label":"Progress bar",type:"content",size:"m",get contentvalue(){return l(e)},get value(){return l(t)},class:"mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number"})}a(h);var u=b(h,2),d=s(u),D=s(d,!0);a(d);var P=b(d,2);{var S=e=>{var t=G(),V=s(t,!0);a(t),f(()=>y(V,i())),x(e,t)};B(P,e=>{i()&&e(S)})}return a(u),a(_),f(()=>y(D,v())),x(g,_),A(C)}customElements.define("m-stepper-compact",E(J,{value:{},maxsteps:{},label:{},description:{}},[],[],!0));
+//# sourceMappingURL=StepperCompact.js.map

package/dist/components/steppercompact/StepperCompact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperCompact.js","sources":["../../../src/components/steppercompact/StepperCompact.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-stepper-compact' }} />\n\n<script lang=\"ts\">\n  import CircularProgressbar from '../circularprogressbar/CircularProgressbar.svelte';\n  /**\n   * A stepper is a navigation component that guides users through a sequence of steps in a structured process. It visually represents progress, completed steps, and upcoming steps, helping users understand their position within a workflow. Steppers are commonly used in multi-step forms, onboarding flows, checkout processes, and task completion sequences to improve clarity and reduce cognitive load.\n   */\n  interface Props {\n    /**\n     * Current step of the stepper compact.\n     */\n    value?: number;\n    /**\n     * Maximum number of steps for the stepper compact.\n     */\n    maxsteps?: number;\n    /**\n     * Label of the stepper compact.\n     */\n    label: string;\n    /**\n     * Description displayed below the label of the stepper compact.\n     */\n    description?: string;\n  }\n\n  let { value = $bindable(1), maxsteps = $bindable(4), label, description }: Props = $props();\n\n  const progressValue = $derived(() => {\n    const v = value ?? 0;\n    const m = maxsteps ?? 1;\n    return Math.round((v / m) * 100);\n  });\n\n  const contentValue = $derived(() => {\n    return `${value} / ${maxsteps}`;\n  });\n</script>\n\n<div class=\"mc-stepper-compact\">\n  <div class=\"mc-circular-progressbar mc-stepper-compact__progress\">\n    <CircularProgressbar\n      aria-label=\"Progress bar\"\n      type=\"content\"\n      size=\"m\"\n      contentvalue={contentValue()}\n      value={progressValue()}\n      class=\"mc-circular-progressbar mc-circular-progressbar--m mc-stepper-compact__indicator mc-stepper-compact__number\"\n    />\n  </div>\n  <div class=\"mc-stepper-compact__label-container\">\n    <p class=\"mc-stepper-compact__label\">{label}</p>\n    {#if description}\n      <p class=\"mc-stepper-compact__description\">{description}</p>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/stepper-compact';\n  @use '@mozaic-ds/styles/components/circular-progressbar/_t.circular-progressbar' as *;\n\n  .mc-stepper-compact__progress {\n    width: $spacing-600;\n    height: $spacing-600;\n\n    :global(.mc-circular-progressbar__content) {\n      display: block !important;\n      visibility: visible;\n      font-weight: 600;\n      font-size: 0.875rem;\n    }\n\n    :global(.mc-circular-progressbar__number) {\n      display: block;\n      visibility: visible;\n      opacity: 1;\n      color: inherit;\n      font-size: inherit;\n      line-height: inherit;\n    }\n\n    :global(.mc-circular-progressbar__indicator) {\n      @include calculate-border-width(4, 48, 100);\n      stroke: $stepper-color-progress-bar-indicator;\n      fill: none;\n      stroke-linecap: round;\n    }\n  }\n</style>\n"],"names":["value","maxsteps","label","$.prop","$$props","description","progressValue","$.derived","v","m","contentValue","$$render","consequent"],"mappings":";;g2CAAA,gBA0BQ,IAAAA,iBAAkB,CAAC,EAAGC,oBAAqB,CAAC,EAAGC,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EAEjE,MAAAE,EAAaC,EAAA,IAAA,IAAkB,OAC7BC,EAAIR,EAAK,GAAI,EACbS,EAAIR,EAAQ,GAAI,EACf,OAAA,KAAK,MAAOO,EAAIC,EAAK,GAAG,CACjC,CAAC,EAEKC,EAAYH,EAAA,IAAA,IACN,GAAAP,EAAK,OAAMC,EAAQ,CAAA,EAC9B,6CAVuB,EAAC,qDAAwB,EAAC,yJAmBhCS,CAAY,EAAA,CAAA,YACnBJ,CAAa,EAAA,CAAA,6UAOwBD,EAAW,CAAA,CAAA,kBADpDA,EAAW,GAAAM,EAAAC,CAAA,+BADsBV,EAAK,CAAA,CAAA,aAd/C"}

package/dist/components/steppercompact/StepperCompact.spec.js

@@ -0,0 +1,119 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import StepperCompact from './StepperCompact.svelte';
+describe('StepperCompact component', () => {
+    it('renders with a label by default', () => {
+        const { container } = render(StepperCompact, { props: { label: 'My label' } });
+        expect(container.querySelector('.mc-stepper-compact')).toBeTruthy();
+        expect(container.querySelector('.mc-stepper-compact__label')?.textContent).toBe('My label');
+        expect(container.querySelector('.mc-stepper-compact__description')).toBeFalsy();
+    });
+    it('calculates progress value correctly', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Étape 2',
+                value: 2,
+                maxsteps: 5,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+    });
+    it('displays current step and max steps in progress bar', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Step 3',
+                value: 3,
+                maxsteps: 7,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+    });
+    it('renders with custom size', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Taille m',
+                size: 'm',
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+    });
+    it('handles edge cases for progress calculation with value 0', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Zero',
+                value: 0,
+                maxsteps: 1,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+    });
+    it('handles maximum progress correctly', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Maximum',
+                value: 5,
+                maxsteps: 5,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+    });
+    it('shows description when additionalInfo is true and description is provided', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Test step',
+                description: 'Description visible',
+                additionalInfo: true,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__description')?.textContent).toBe('Description visible');
+    });
+    it('hides description when additionalInfo is true and description is empty', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Test step',
+                description: '',
+                additionalInfo: true,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__description')).toBeFalsy();
+    });
+    it('renders with custom label', () => {
+        const customLabel = 'Step 2 of 5';
+        const { container } = render(StepperCompact, {
+            props: {
+                label: customLabel,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__label')?.textContent).toBe(customLabel);
+    });
+    it('handles null/undefined values gracefully', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Undefined steps',
+                value: undefined,
+                maxsteps: undefined,
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+    });
+    it('has proper ARIA label on progress bar', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'ARIA',
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+    });
+    it('applies correct CSS classes', () => {
+        const { container } = render(StepperCompact, {
+            props: {
+                label: 'Classes',
+            },
+        });
+        expect(container.querySelector('.mc-stepper-compact')).toBeTruthy();
+        expect(container.querySelector('.mc-circular-progressbar')).toBeTruthy();
+        expect(container.querySelector('.mc-stepper-compact__progress')).toBeTruthy();
+        expect(container.querySelector('.mc-stepper-compact__label-container')).toBeTruthy();
+        expect(container.querySelector('.mc-stepper-compact__label')).toBeTruthy();
+    });
+});

package/dist/components/steppercompact/StepperCompact.stories.d.ts

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

package/dist/components/steppercompact/StepperCompact.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperCompact.stories.d.ts","sourceRoot":"","sources":["../../../src/components/steppercompact/StepperCompact.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,yBAAyB,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAwBX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/components/steppercompact/StepperCompact.stories.js

@@ -0,0 +1,29 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import './StepperCompact.svelte';
+const meta = {
+    title: 'Indicators/Stepper Compact',
+    component: 'm-stepper-compact',
+    argTypes: {
+        value: {
+            control: { type: 'number', min: 1, max: 10 },
+        },
+        maxsteps: {
+            control: { type: 'number', min: 2, max: 10 },
+        },
+    },
+    args: {
+        value: 1,
+        maxsteps: 4,
+        label: 'Current Step',
+        description: 'Next: Step label',
+    },
+    render: (args) => html `<m-stepper-compact
+      value="${ifDefined(args.value)}"
+      maxsteps="${ifDefined(args.maxsteps)}"
+      label="${ifDefined(args.label)}"
+      description="${ifDefined(args.description)}"
+    ></m-stepper-compact>`,
+};
+export default meta;
+export const Default = {};