@mozaic-ds/web-components 1.3.0 → 1.5.0

package/dist/components/statusmessage/StatusMessage.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"StatusMessage.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/InfoCircleFilled24/InfoCircleFilled24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/WarningCircleFilled24/WarningCircleFilled24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CheckCircleFilled24/CheckCircleFilled24.svelte","../../../src/components/statusmessage/StatusMessage.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'info-circle-filled-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m0 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m1 2a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0z\"/></svg>","<svelte:options customElement={{ tag: 'warning-circle-filled-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m1 6a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0zm-1 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2\"/></svg>","<svelte:options customElement={{ tag: 'check-circle-filled-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m5.207 6.793a1 1 0 0 1 0 1.414l-5.5 5.5a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L11 13.586l4.793-4.793a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'm-status-message' }} />\n\n<script lang=\"ts\">\n  import InfoCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled24/InfoCircleFilled24.svelte';\n  import WarningCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled24/WarningCircleFilled24.svelte';\n  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n  import CheckCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled24/CheckCircleFilled24.svelte';\n  import Loader from '../loader/Loader.svelte';\n  /**\n   * A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.\n   */\n  interface Props {\n    /**\n     * Allows to define the status message style.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral' | 'inprogress';\n    /**\n     * Label of the status message.\n     */\n    label: string;\n  }\n\n  let { label, status = 'info', ...attrs }: Props = $props();\n\n  const iconMap = [\n    { status: 'info', component: InfoCircleFilled24 },\n    { status: 'success', component: CheckCircleFilled24 },\n    { status: 'warning', component: WarningCircleFilled24 },\n    { status: 'error', component: CrossCircleFilled24 },\n    { status: 'neutral', component: InfoCircleFilled24 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  let selected = $state(getSelected(status));\n</script>\n\n<div class={['mc-status-message', `mc-status-message--${status}`]} {...attrs}>\n  {#if status !== 'inprogress'}\n    <span class=\"mc-status-message__icon\">\n      <selected.component aria-hidden=\"true\" />\n    </span>\n  {:else}\n    <Loader size=\"s\" />\n  {/if}\n  <p class=\"mc-status-message__description\">{label}</p>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-message';\n</style>\n"],"names":["id","style","className","fill","size","label","$.prop","$$props","status","attrs","$.rest_props","iconMap","InfoCircleFilled24","CheckCircleFilled24","WarningCircleFilled24","CrossCircleFilled24","getSelected","icon","selected","$.state","$.proxy","$$render","consequent","alternate"],"mappings":"guBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,uaCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,keCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,gRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E;;6mCCPA,qBAsBQE,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,iBAAS,MAAM,EAAKC,EAAKC,EAAAH,EAAA,mEAEhCI,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,CAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,CAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,CAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,CAAmB,EAC/C,CAAA,OAAQ,UAAW,UAAWH,CAAkB,YAG3CI,EAAYR,EAAgB,CAC5B,OAAAG,EAAQ,KAAMM,GAASA,EAAK,SAAWT,CAAM,GAAKG,EAAQ,CAAC,CACpE,KAEIO,EAAQC,EAAAC,EAAUJ,EAAYR,EAAM,CAAA,CAAA,CAAA,8FAdlB,OAAM,6BAiBjB,MAAA,CAAA,0CAA2CA,EAAM,CAAA,EAAA,KAASC,0LAChED,EAAM,IAAK,aAAYa,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,sDAOelB,EAAK,CAAA,CAAA,aAVlD","x_google_ignoreList":[0,1,2]}
+{"version":3,"file":"StatusMessage.js","sources":["../../../src/components/statusmessage/StatusMessage.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-message' }} />\n\n<script lang=\"ts\">\n  import {\n    InfoCircleFilled24,\n    WarningCircleFilled24,\n    CrossCircleFilled24,\n    CheckCircleFilled24,\n  } from '@mozaic-ds/icons-svelte';\n  import Loader from '../loader/Loader.svelte';\n  /**\n   * A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * Allows to define the status message style.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral' | 'inprogress';\n    /**\n     * Label of the status message.\n     */\n    label: string;\n  }\n\n  let { label, status = 'info', ...attrs }: Props = $props();\n\n  const iconMap = [\n    { status: 'info', component: InfoCircleFilled24 },\n    { status: 'success', component: CheckCircleFilled24 },\n    { status: 'warning', component: WarningCircleFilled24 },\n    { status: 'error', component: CrossCircleFilled24 },\n    { status: 'neutral', component: InfoCircleFilled24 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  const selected = $derived(getSelected(status));\n</script>\n\n<div class={['mc-status-message', `mc-status-message--${status}`]} {...attrs}>\n  {#if status !== 'inprogress'}\n    <span class=\"mc-status-message__icon\">\n      <selected.component />\n    </span>\n  {:else}\n    <Loader size=\"s\" />\n  {/if}\n  <p class=\"mc-status-message__description\">{label}</p>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-message';\n</style>\n"],"names":["label","$.prop","$$props","status","attrs","$.rest_props","iconMap","InfoCircleFilled24","CheckCircleFilled24","WarningCircleFilled24","CrossCircleFilled24","getSelected","icon","selected","$.derived","div","root","span","root_1","selected_component","$$anchor","Loader","$$render","consequent","alternate","p","$.sibling","node"],"mappings":";;6lCAEA,oBAuBQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,iBAAS,MAAM,EAAKC,EAAKC,EAAAH,EAAA,mEAEhCI,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,CAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,CAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,CAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,CAAmB,EAC/C,CAAA,OAAQ,UAAW,UAAWH,CAAkB,YAG3CI,EAAYR,EAAgB,CAC5B,OAAAG,EAAQ,KAAMM,GAASA,EAAK,SAAWT,CAAM,GAAKG,EAAQ,CAAC,CACpE,OAEMO,EAAQC,EAAA,IAAYH,EAAYR,EAAM,CAAA,CAAA,8FAdtB,OAAM,YAiB7BY,EAAGC,EAAA,IAAHD,QAAY,MAAA,CAAA,0CAA2CZ,EAAM,CAAA,EAAA,KAASC,kDAAtEW,CAAG,iBAECE,EAAIC,EAAA,MAAJD,CAAI,iCACFE,EAAkBC,EAAA,EAAA,MADpBH,CAAI,MAAJA,CAAI,SAIJI,EAAMD,EAAA,CAAA,KAAA,GAAA,CAAA,WALJjB,EAAM,IAAK,aAAYmB,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,QAO3BC,EAACC,EAAAC,EAAA,CAAA,MAADF,EAAC,EAAA,WAADA,CAAC,IARHV,CAAG,YAQyCf,EAAK,CAAA,CAAA,MARjDe,CAAG,MAFI"}

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/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{o as q,c as A,p as G,a as H,b as s,n as J,s as l,t as K,f as p,g as L,h as w,i as O,v as P,d as e,j as b,r as n,e as _}from"../../custom-element.js";import{i as Q}from"../../if.js";import{s as R}from"../../slot.js";import{c as T}from"../../svelte-component.js";import{a as U}from"../../attributes.js";import{b as V}from"../../this.js";import{I as X,a as Y,W as Z,b as $,C as oo}from"../../Condition20.js";import"../../branches.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><span class="mc-status-notification__icon svelte-18b6syz" aria-hidden="true"><!></span> <div class="mc-status-notification__content svelte-18b6syz"><h2 class="mc-status-notification__title svelte-18b6syz"> </h2> <p class="mc-status-notification__message svelte-18b6syz"> </p> <div class="mc-status-notification__footer svelte-18b6syz"><!></div></div> <!></section>');const eo={hash:"svelte-18b6syz",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-18b6syz {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);}.mc-button.svelte-18b6syz:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-18b6syz:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button.svelte-18b6syz {display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-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--loading.svelte-18b6syz {pointer-events:none;}.mc-button--outlined.mc-button--standard.svelte-18b6syz {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-18b6syz {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-18b6syz {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-18b6syz {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-18b6syz {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-18b6syz {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-18b6syz {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-18b6syz {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-18b6syz:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-status-notification.svelte-18b6syz {border-radius:var(--border-radius-m, 0.5rem);background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);display:flex;flex-flow:row wrap;align-items:flex-start;position:relative;box-sizing:border-box;color:var(--status-notification-color-text, #000000);}.mc-status-notification__icon.svelte-18b6syz {width:2rem;height:2rem;margin:0.75rem;fill:var(--status-notification-color-icon-info, #0b96cc);}.mc-status-notification__content.svelte-18b6syz {flex:1 1 0;padding:0.75rem 1rem 0.75rem 0;}.mc-status-notification__title.svelte-18b6syz, .mc-status-notification__message.svelte-18b6syz {line-height:var(--line-height-s, 1.3);margin-block:0;}.mc-status-notification__title.svelte-18b6syz {font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-150, 1rem);margin-block-end:0.25rem;}.mc-status-notification__message.svelte-18b6syz {font-size:var(--font-size-100, 0.875rem);}.mc-status-notification__footer.svelte-18b6syz {align-items:flex-start;display:flex;flex-flow:row wrap;gap:0.5rem;margin-top:0.75rem;margin-bottom:0.5rem;}.mc-status-notification--information.svelte-18b6syz {background:var(--status-notification-color-background-info, #e1f3f9);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-info, #3facd7);}.mc-status-notification--information.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-info, #0b96cc);}.mc-status-notification--success.svelte-18b6syz {background:var(--status-notification-color-background-success, #ebf5de);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-success, #78be20);}.mc-status-notification--success.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-success, #3f9e10);}.mc-status-notification--warning.svelte-18b6syz {background:var(--status-notification-color-background-warning, #fdf1e8);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-warning, #ef934a);}.mc-status-notification--warning.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-warning, #ea7315);}.mc-status-notification--error.svelte-18b6syz {background:var(--status-notification-color-background-error, #fdeaea);box-shadow:inset 0 0 0 var(--border-width-s, 0.0625rem) var(--status-notification-color-border-error, #ef5f5c);}.mc-status-notification--error.svelte-18b6syz .mc-status-notification__icon:where(.svelte-18b6syz) {fill:var(--status-notification-color-icon-error, #ea302d);}.mc-status-notification-closable__close.svelte-18b6syz {margin:0.25rem;}.mc-status-notification__footer.svelte-18b6syz:empty {display:none;}`};function no(h,r){G(r,!0),H(h,eo);let d=s(r,"title",7),i=s(r,"description",7),c=s(r,"status",7,"info"),u=s(r,"closable",7),x=O(r,["$$slots","$$events","$$legacy","$$host","title","description","status","closable"]),v;const y=[{status:"info",component:X},{status:"success",component:Y},{status:"warning",component:Z},{status:"error",component:$}];function C(o){return y.find(t=>t.status===o)||y[0]}const F=P(()=>C(c())),E=()=>{const o=new CustomEvent("close",{bubbles:!0,composed:!0});v.dispatchEvent(o)};var N={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();U(a,()=>({class:["mc-status-notification",`mc-status-notification--${c()}`],role:"status",...x}),void 0,void 0,void 0,"svelte-18b6syz");var f=e(a),S=e(f);T(S,()=>J(F).component,(o,t)=>{t(o,{className:"mc-status-notification__icon"})}),n(f);var g=l(f,2),m=e(g),j=e(m,!0);n(m);var k=l(m,2),I=e(k,!0);n(k);var z=l(k,2),W=e(z);R(W,r,"footer",{},null),n(z),n(g);var B=l(g,2);{var D=o=>{var t=to();t.__click=E;var M=e(t);oo(M,{className:"mc-status-notification-closable__icon"}),n(t),p(o,t)};Q(B,o=>{u()&&o(D)})}return n(a),V(a,o=>v=o,()=>v),K(()=>{_(j,d()),_(I,i())}),p(h,a),L(N)}q(["click"]);customElements.define("m-status-notification",A(no,{closable:{attribute:"closable",reflect:!0,type:"Boolean"},title:{},description:{},status:{}},["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 {\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\n  let { title, description, status = 'info', closable, ...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      <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 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","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","button","root_1","node_3","Cross20","$.reset","$.append","$$render","consequent","$$value"],"mappings":";;0mcASA,qBAkCQA,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,CAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,CAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,CAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,CAAmB,YAG1CC,EAAYV,EAAgB,CAC5B,OAAAK,EAAQ,KAAMM,GAASA,EAAK,SAAWX,CAAM,GAAKK,EAAQ,CAAC,CACpE,OAEMO,EAAQC,EAAA,IAAYH,EAAYV,EAAM,CAAA,CAAA,EAEtCc,EAAO,IAAS,OACdC,EAAK,IAAO,YAAY,QAAO,CACnC,QAAS,GACT,SAAU,GAAI,EAEhBX,EAAQ,cAAcW,CAAK,CAC7B,yJAtBmC,OAAM,iEAyB1CC,EAAAC,GAAA,IAAAD,eACS,oDAAqDhB,GAAM,qBAG/DE,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,4BAAHA,CAAG,IANLH,CAAG,UAAHA,EAAG,CAAA,aAYD,IAAAI,EAAAC,GAAA,EAAAD,EAGC,QAASZ,EAHV,IAAAc,EAAAT,EAAAO,CAAA,EAKEG,GAAOD,EAAA,CAAA,UAAA,uCAAA,CAAA,EALTE,EAAAJ,CAAA,EAAAK,EAAAV,EAAAK,CAAA,WADEzB,EAAQ,GAAA+B,EAAAC,CAAA,IArBdH,OAAAA,EAAAd,CAAA,IAAAA,EAAAkB,GAGY9B,QAAAA,CAAO,aAQ2BR,GAAK,MAE7CG,GAAW,IAbjBgC,EAAAV,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,20 @@
-<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 {
+    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 +22,7 @@
    * @event close {CustomEvent<void>} - Emits when closing the notification.
    */
   interface Props {
+    [key: string]: any;
     /**
      * Title of the status notification.
      */
@@ -35,17 +45,17 @@
   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 +73,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">
@@ -83,7 +93,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>
@@ -289,6 +299,9 @@
   border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
+.mc-button--loading {
+  pointer-events: none;
+}
 .mc-button--loading .mc-button__loader {
   position: absolute;
   color: currentcolor;

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

@@ -5,6 +5,7 @@
  * @event close {CustomEvent<void>} - Emits when closing the notification.
  */
 interface Props {
+    [key: string]: any;
     /**
      * Title of the status notification.
      */

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":"AAWE;;;;;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;CACpB;AAgEH,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"../../branches.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"}