@mozaic-ds/web-components 1.0.0 → 1.1.0

package/dist/components/statusdot/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../../../src/components/statusdot/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-dot' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.\n   */\n  interface Props {\n    /**\n     * Allows to define the status dot type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n    /**\n     * Determines the size of the status dot.\n     */\n    size?: 's' | 'm' | 'l';\n  }\n\n  let { size = 'm', status = 'info' }: Props = $props();\n</script>\n\n<div\n  class={[\n    'mc-status-dot',\n    `mc-status-dot--${size}`,\n    `mc-status-dot--${status}`,\n  ]}\n></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["size","status"],"mappings":";;mwBAAA,gBAiBQ,IAAAA,eAAO,GAAG,EAAEC,iBAAS,MAAM,2CAApB,IAAG,iDAAW,OAAM,wCAK/B,kCACkBD,EAAI,CAAA,qBACJC,GAAM,mCAN5B"}
+{"version":3,"file":"StatusDot.js","sources":["../../../src/components/statusdot/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-dot' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.\n   */\n  interface Props {\n    /**\n     * Allows to define the status dot type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n    /**\n     * Determines the size of the status dot.\n     */\n    size?: 's' | 'm' | 'l';\n  }\n\n  let { size = 'm', status = 'info' }: Props = $props();\n</script>\n\n<div class={['mc-status-dot', `mc-status-dot--${size}`, `mc-status-dot--${status}`]}></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["size","status"],"mappings":";;mwBAAA,gBAiBQ,IAAAA,eAAO,GAAG,EAAEC,iBAAS,MAAM,2CAApB,IAAG,iDAAW,OAAM,wCAGtB,kCAAmCD,EAAI,CAAA,qBAAsBC,GAAM,mCAFhF"}

package/dist/components/statusdot/StatusDot.spec.js

@@ -18,13 +18,7 @@ describe('m-status-dot component', () => {
         });
     });
     it('applies correct status class', () => {
-        const statuses = [
-            'info',
-            'success',
-            'warning',
-            'error',
-            'neutral',
-        ];
+        const statuses = ['info', 'success', 'warning', 'error', 'neutral'];
         statuses.forEach((status) => {
             const { container } = render(StatusDot, { props: { status } });
             const dot = container.querySelector('.mc-status-dot');

package/dist/components/statusdot/StatusDot.svelte

@@ -18,13 +18,7 @@
   let { size = 'm', status = 'info' }: Props = $props();
 </script>
 
-<div
-  class={[
-    'mc-status-dot',
-    `mc-status-dot--${size}`,
-    `mc-status-dot--${status}`,
-  ]}
-></div>
+<div class={['mc-status-dot', `mc-status-dot--${size}`, `mc-status-dot--${status}`]}></div>
 
 <style>/**
  * Do not edit directly, this file was auto-generated.

package/dist/components/statusdot/StatusDot.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusdot/StatusDot.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAmBH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"StatusDot.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusdot/StatusDot.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAeH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/statusnotification/StatusNotification.js

@@ -1,8 +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:`/**
  * 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;}
-
-/* create columns */
-/* create columns */
-/* create custom named columns with custom content */.mc-status-notification.svelte-18b6syz {border-radius:var(--radius-m, 0.5rem);display:flex;flex-flow:row wrap;align-items:flex-start;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);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-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));
 //# 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\n      class=\"mc-status-notification__icon\"\n      aria-hidden=\"true\"\n    />\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\n        class=\"mc-status-notification-closable__icon\"\n        aria-hidden=\"true\"\n      />\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":";;;;;;u5FAAA,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,0VAoD5BD,4GAJRZ,EAAQ,GAAAc,EAAAC,CAAA,gBApBFC,GAAAC,EAAAC,GAAAjB,QAAAA,CAAO,kBAFV,oDAAqDF,GAAM,2BAYtBJ,GAAK,MAE7CG,GAAW,eAjBlB"}
+{"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"}

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,IA2BX,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;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"}

package/dist/components/statusnotification/StatusNotification.svelte

@@ -62,10 +62,7 @@
   bind:this={element}
 >
   <span class="mc-status-notification__icon" aria-hidden="true">
-    <selected.component
-      class="mc-status-notification__icon"
-      aria-hidden="true"
-    />
+    <selected.component class="mc-status-notification__icon" aria-hidden="true" />
   </span>
 
   <div class="mc-status-notification__content">
@@ -85,10 +82,7 @@
       aria-label="Close"
       onclick={onClose}
     >
-      <Cross20
-        class="mc-status-notification-closable__icon"
-        aria-hidden="true"
-      />
+      <Cross20 class="mc-status-notification-closable__icon" aria-hidden="true" />
     </button>
   {/if}
 </section>
@@ -435,16 +429,13 @@
   cursor: not-allowed;
 }
 
-/* create columns */
-/* create columns */
-/* create custom named columns with custom content */
 .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);
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;
-  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);
   position: relative;
   box-sizing: border-box;
   color: var(--status-notification-color-text, #000000);

package/dist/components/tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../src/components/tab/Tab.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-tab' }} />\n\n<script lang=\"ts\">\n  /**\n   * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.\n   *\n   * @slot default - The content displayed in the tab.\n   * @slot icon - Use this slot to insert an icon for the tab.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * The HTML tag used for the tab.\n     */\n    tag?: 'a' | 'button';\n    /**\n     * If `true`, the tab will be selected.\n     */\n    selected?: boolean;\n    /**\n     * URL for the tab link.\n     */\n    href?: string;\n    /**\n     * If `true`, the tab will be disabled.\n     */\n    disabled?: boolean;\n  }\n\n  let {\n    tag = 'button',\n    selected = false,\n    href,\n    disabled,\n    ...attrs\n  }: Props = $props();\n</script>\n\n<li class=\"mc-tabs__item\" role=\"presentation\">\n  {#if tag === 'button'}\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={selected}\n      class={[\n        'mc-tabs__tab',\n        selected && 'mc-tabs__tab--selected',\n        disabled && 'mc-tabs__tab--disabled',\n      ]}\n      {...attrs}\n    >\n      <span class=\"mc-tabs__icon\">\n        <slot name=\"icon\" />\n      </span>\n\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </button>\n  {:else}\n    <a\n      {href}\n      role=\"tab\"\n      aria-selected={selected}\n      class={[\n        'mc-tabs__tab',\n        selected && 'mc-tabs__tab--selected',\n        disabled && 'mc-tabs__tab--disabled',\n      ]}\n      {...attrs}\n    >\n      <span class=\"mc-tabs__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </a>\n  {/if}\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n\n  .mc-tabs__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["tag","selected","href","$.prop","$$props","disabled","attrs","$.rest_props","$$render","consequent","alternate"],"mappings":";;4qDAAA,gBA8BI,IAAAA,cAAM,QAAQ,EACdC,mBAAW,EAAK,EAChBC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EACLE,EAAAC,EAAAH,EAAA,sHAJG,SAAQ,qDACH,GAAK,mMAYCH,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,mMAcWL,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,6IA9BHN,EAAG,IAAK,SAAQQ,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,2BAHvB"}
+{"version":3,"file":"Tab.js","sources":["../../../src/components/tab/Tab.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-tab' }} />\n\n<script lang=\"ts\">\n  /**\n   * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.\n   *\n   * @slot default - The content displayed in the tab.\n   * @slot icon - Use this slot to insert an icon for the tab.\n   */\n  interface Props {\n    [key: string]: any;\n    /**\n     * The HTML tag used for the tab.\n     */\n    tag?: 'a' | 'button';\n    /**\n     * If `true`, the tab will be selected.\n     */\n    selected?: boolean;\n    /**\n     * URL for the tab link.\n     */\n    href?: string;\n    /**\n     * If `true`, the tab will be disabled.\n     */\n    disabled?: boolean;\n  }\n\n  let { tag = 'button', selected = false, href, disabled, ...attrs }: Props = $props();\n</script>\n\n<li class=\"mc-tabs__item\" role=\"presentation\">\n  {#if tag === 'button'}\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={selected}\n      class={[\n        'mc-tabs__tab',\n        selected && 'mc-tabs__tab--selected',\n        disabled && 'mc-tabs__tab--disabled',\n      ]}\n      {...attrs}\n    >\n      <span class=\"mc-tabs__icon\">\n        <slot name=\"icon\" />\n      </span>\n\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </button>\n  {:else}\n    <a\n      {href}\n      role=\"tab\"\n      aria-selected={selected}\n      class={[\n        'mc-tabs__tab',\n        selected && 'mc-tabs__tab--selected',\n        disabled && 'mc-tabs__tab--disabled',\n      ]}\n      {...attrs}\n    >\n      <span class=\"mc-tabs__icon\">\n        <slot name=\"icon\" />\n      </span>\n      <span class=\"mc-tabs__label\">\n        <slot />\n      </span>\n    </a>\n  {/if}\n</li>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tabs';\n\n  .mc-tabs__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["tag","selected","href","$.prop","$$props","disabled","attrs","$.rest_props","$$render","consequent","alternate"],"mappings":";;4qDAAA,gBA6BQ,IAAAA,cAAM,QAAQ,EAAEC,mBAAW,EAAK,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAQF,EAAAC,EAAA,WAAA,CAAA,EAAKE,EAAKC,EAAAH,EAAA,sHAApD,SAAQ,qDAAa,GAAK,mMAQnBH,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,mMAcWL,EAAQ,SAErB,eACAA,EAAQ,GAAI,yBACZI,KAAY,6BAEVC,6IA9BHN,EAAG,IAAK,SAAQQ,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,2BAHvB"}

package/dist/components/tab/Tab.svelte

@@ -27,13 +27,7 @@
     disabled?: boolean;
   }
 
-  let {
-    tag = 'button',
-    selected = false,
-    href,
-    disabled,
-    ...attrs
-  }: Props = $props();
+  let { tag = 'button', selected = false, href, disabled, ...attrs }: Props = $props();
 </script>
 
 <li class="mc-tabs__item" role="presentation">

package/dist/components/tab/Tab.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tab/Tab.svelte.ts"],"names":[],"mappings":"AAGE;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,GAAG;;;;;;;;UAAqF,CAAC;AAC7E,KAAK,GAAG,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;AACtC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tab/Tab.svelte.ts"],"names":[],"mappings":"AAGE;;;;;GAKG;AACH,UAAU,KAAK;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4CH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,GAAG;;;;;;;;UAAqF,CAAC;AAC7E,KAAK,GAAG,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;AACtC,eAAe,GAAG,CAAC"}

package/dist/components/tags/TagContextualised.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagContextualised.js","sources":["../../../src/components/tags/TagContextualised.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-contextualised' }} />\n\n<script lang=\"ts\">\n  import NumberBadge from '../numberbadge/NumberBadge.svelte';\n\n  interface Props {\n    label: string;\n    contextualisedNumber?: string;\n    size?: 's' | 'm' | 'l' | undefined;\n    disabled?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    label,\n    contextualisedNumber = '99',\n    size = 'm',\n    disabled = false,\n    ...attrs\n  }: Props = $props();\n\n  const badgeSize = size === 'l' ? 'm' : 's';\n</script>\n\n<button\n  class={`mc-tag mc-tag-contextualised ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {disabled}\n  {...attrs}\n>\n  <NumberBadge\n    appearance=\"inverse\"\n    label={contextualisedNumber}\n    size={badgeSize}\n  />\n  <span class=\"mc-tag__label\">{label}</span>\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n</style>\n"],"names":["label","$.prop","$$props","contextualisedNumber","size","disabled","attrs","$.rest_props","badgeSize"],"mappings":";;oiMAAA,oBAcIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,+BAAuB,IAAI,EAC3BC,eAAO,GAAG,EACVC,mBAAW,EAAK,EACbC,EAAAC,EAAAL,EAAA,6FAGC,MAAAM,EAAYJ,EAAI,IAAK,IAAM,IAAM,4HANd,KAAI,6CACpB,IAAG,qDACC,GAAK,4BAQqB,MAAA,gCAAAA,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,mBAExEE,2FAIKH,EAAoB,qBACrBK,uDAEqBR,EAAK,CAAA,CAAA,aAZpC"}
+{"version":3,"file":"TagContextualised.js","sources":["../../../src/components/tags/TagContextualised.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-contextualised' }} />\n\n<script lang=\"ts\">\n  import NumberBadge from '../numberbadge/NumberBadge.svelte';\n\n  interface Props {\n    label: string;\n    contextualisedNumber?: string;\n    size?: 's' | 'm' | 'l' | undefined;\n    disabled?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    label,\n    contextualisedNumber = '99',\n    size = 'm',\n    disabled = false,\n    ...attrs\n  }: Props = $props();\n\n  const badgeSize = size === 'l' ? 'm' : 's';\n</script>\n\n<button\n  class={`mc-tag mc-tag-contextualised ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {disabled}\n  {...attrs}\n>\n  <NumberBadge appearance=\"inverse\" label={contextualisedNumber} size={badgeSize} />\n  <span class=\"mc-tag__label\">{label}</span>\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n</style>\n"],"names":["label","$.prop","$$props","contextualisedNumber","size","disabled","attrs","$.rest_props","badgeSize"],"mappings":";;oiMAAA,oBAcIA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,+BAAuB,IAAI,EAC3BC,eAAO,GAAG,EACVC,mBAAW,EAAK,EACbC,EAAAC,EAAAL,EAAA,6FAGC,MAAAM,EAAYJ,EAAI,IAAK,IAAM,IAAM,4HANd,KAAI,6CACpB,IAAG,qDACC,GAAK,4BAQqB,MAAA,gCAAAA,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,mBAExEE,2FAEqCH,EAAoB,qBAAQK,uDACxCR,EAAK,CAAA,CAAA,aARpC"}

package/dist/components/tags/TagContextualised.svelte

@@ -27,11 +27,7 @@
   {disabled}
   {...attrs}
 >
-  <NumberBadge
-    appearance="inverse"
-    label={contextualisedNumber}
-    size={badgeSize}
-  />
+  <NumberBadge appearance="inverse" label={contextualisedNumber} size={badgeSize} />
   <span class="mc-tag__label">{label}</span>
 </button>
 

package/dist/components/tags/TagRemovable.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagRemovable.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CrossCircleFilled20/CrossCircleFilled20.svelte","../../../src/components/tags/TagRemovable.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'cross-circle-filled-20', 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.25rem\";\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 20 20\" width=\"20px\" height=\"20px\"><path fill-rule=\"evenodd\" d=\"M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06\"/></svg>","<svelte:options customElement={{ tag: 'mc-tag-removable' }} />\n\n<script lang=\"ts\">\n  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n  import CrossCircleFilled20 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled20/CrossCircleFilled20.svelte';\n\n  interface Props {\n    id: string;\n    label: string;\n    removableLabel?: string;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    label,\n    removableLabel = 'Remove',\n    size = 'm',\n    ...attrs\n  }: Props = $props();\n\n  function handleRemove() {\n    dispatchEvent(new CustomEvent('remove-tag', { detail: id }));\n  }\n</script>\n\n<span\n  class={`mc-tag mc-tag-removable  ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {id}\n  {...attrs}\n>\n  <span class=\"mc-tag__label\">{label}</span>\n  <button class=\"mc-tag-removable__remove\" type=\"button\" onclick={handleRemove}>\n    <span class=\"mc-tag-removable__icon\">\n      {#if size === 's'}\n        <CrossCircleFilled20 aria-hidden=\"true\" />\n      {:else}\n        <CrossCircleFilled24 aria-hidden=\"true\" />\n      {/if}\n    </span>\n    <span class=\"mc-tag-removable__text\">{removableLabel}</span>\n  </button>\n</span>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-removable';\n</style>\n"],"names":["id","style","className","fill","size","handleRemove","_","$.prop","$$props","label","removableLabel","attrs","$.rest_props","$$render","consequent","alternate"],"mappings":"2uBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,SAAS,gRAGDJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,6GCeW,SAAAE,EAAYC,EAAAN,EAAG,CACtB,kBAAkB,YAAY,aAAY,CAAI,OAAQA,EAAE,CAAA,CAAA,CAAA,CAC1D;;wjNAxBF,oBAeIA,EAAEO,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,yBAAiB,QAAQ,EACzBN,eAAO,GAAG,EACPO,EAAAC,EAAAJ,EAAA,sOAFc,SAAQ,6CAClB,IAAG,4BAUuB,MAAA,4BAAAJ,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,aAEpEO,sFAG4DN,EAAYL,CAAA,uGAEnEI,EAAI,IAAK,IAAGS,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,iEAHQN,GAAK,MASMC,GAAc,eAhBxD","x_google_ignoreList":[0]}
+{"version":3,"file":"TagRemovable.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CrossCircleFilled20/CrossCircleFilled20.svelte","../../../src/components/tags/TagRemovable.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'cross-circle-filled-20', 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.25rem\";\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 20 20\" width=\"20px\" height=\"20px\"><path fill-rule=\"evenodd\" d=\"M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M6.97 6.97a.75.75 0 0 1 1.06 0L10 8.94l1.97-1.97a.75.75 0 1 1 1.06 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 0-1.06\"/></svg>","<svelte:options customElement={{ tag: 'mc-tag-removable' }} />\n\n<script lang=\"ts\">\n  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n  import CrossCircleFilled20 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled20/CrossCircleFilled20.svelte';\n\n  interface Props {\n    id: string;\n    label: string;\n    removableLabel?: string;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let { id, label, removableLabel = 'Remove', size = 'm', ...attrs }: Props = $props();\n\n  function handleRemove() {\n    dispatchEvent(new CustomEvent('remove-tag', { detail: id }));\n  }\n</script>\n\n<span class={`mc-tag mc-tag-removable  ${size !== 'm' ? `mc-tag--${size}` : ''}`} {id} {...attrs}>\n  <span class=\"mc-tag__label\">{label}</span>\n  <button class=\"mc-tag-removable__remove\" type=\"button\" onclick={handleRemove}>\n    <span class=\"mc-tag-removable__icon\">\n      {#if size === 's'}\n        <CrossCircleFilled20 aria-hidden=\"true\" />\n      {:else}\n        <CrossCircleFilled24 aria-hidden=\"true\" />\n      {/if}\n    </span>\n    <span class=\"mc-tag-removable__text\">{removableLabel}</span>\n  </button>\n</span>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-removable';\n</style>\n"],"names":["id","style","className","fill","size","handleRemove","_","$.prop","$$props","label","removableLabel","attrs","$.rest_props","$$render","consequent","alternate"],"mappings":"2uBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,SAAS,gRAGDJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,6GCSW,SAAAE,EAAYC,EAAAN,EAAG,CACtB,kBAAkB,YAAY,aAAY,CAAI,OAAQA,EAAE,CAAA,CAAA,CAAA,CAC1D;;wjNAlBF,oBAcQA,EAAEO,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,yBAAiB,QAAQ,EAAEN,eAAO,GAAG,EAAKO,EAAKC,EAAAJ,EAAA,sOAA9B,SAAQ,6CAAS,IAAG,4BAOf,MAAA,4BAAAJ,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,aAAaO,sFAEzBN,EAAYL,CAAA,uGAEnEI,EAAI,IAAK,IAAGS,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,iEAHQN,GAAK,MASMC,GAAc,eAZxD","x_google_ignoreList":[0]}

package/dist/components/tags/TagRemovable.svelte

@@ -12,24 +12,14 @@
     [key: string]: any;
   }
 
-  let {
-    id,
-    label,
-    removableLabel = 'Remove',
-    size = 'm',
-    ...attrs
-  }: Props = $props();
+  let { id, label, removableLabel = 'Remove', size = 'm', ...attrs }: Props = $props();
 
   function handleRemove() {
     dispatchEvent(new CustomEvent('remove-tag', { detail: id }));
   }
 </script>
 
-<span
-  class={`mc-tag mc-tag-removable  ${size !== 'm' ? `mc-tag--${size}` : ''}`}
-  {id}
-  {...attrs}
->
+<span class={`mc-tag mc-tag-removable  ${size !== 'm' ? `mc-tag--${size}` : ''}`} {id} {...attrs}>
   <span class="mc-tag__label">{label}</span>
   <button class="mc-tag-removable__remove" type="button" onclick={handleRemove}>
     <span class="mc-tag-removable__icon">

package/dist/components/tags/TagRemovable.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagRemovable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagRemovable.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAuCH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"TagRemovable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagRemovable.svelte.ts"],"names":[],"mappings":"AAOE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAiCH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/tags/TagSelectable.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagSelectable.js","sources":["../../../src/components/tags/TagSelectable.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-selectable' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    id: string;\n    name?: string;\n    label: string;\n    checked?: boolean;\n    disabled?: boolean;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    name,\n    label,\n    checked = $bindable(false),\n    disabled = false,\n    size = 'm',\n    ...attrs\n  }: Props = $props();\n\n  function handleChange(e: Event) {\n    checked = (e.target as HTMLInputElement).checked;\n  }\n</script>\n\n<label\n  class={`mc-tag mc-tag-selectable ${size !== 'm' ? `mc-tag--${size}` : ''}`}\n  {id}\n  {...attrs}\n>\n  <input\n    type=\"checkbox\"\n    class=\"mc-tag__input\"\n    {id}\n    {name}\n    {checked}\n    {disabled}\n    onchange={handleChange}\n  />\n  <span class=\"mc-tag__label\">{label}</span>\n</label>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-selectable';\n</style>\n"],"names":["handleChange","e","checked","id","$.prop","$$props","name","label","disabled","size","attrs","$.rest_props"],"mappings":"oNAuBWA,EAAaC,EAAQC,EAAE,CAC9BA,EAAWD,EAAE,OAA4B,OAAO,CAClD;;2xMAzBF,oBAcIE,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLH,mBAAoB,EAAK,EACzBM,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACPC,EAAAC,EAAAN,EAAA,gRAHiB,GAAK,qDACd,GAAK,6CACT,IAAG,4BAUuB,MAAA,4BAAAI,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,aAEpEC,gEASQV,EAAYE,CAAA,2GAEKK,GAAK,eAhBpC"}
+{"version":3,"file":"TagSelectable.js","sources":["../../../src/components/tags/TagSelectable.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag-selectable' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    id: string;\n    name?: string;\n    label: string;\n    checked?: boolean;\n    disabled?: boolean;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    name,\n    label,\n    checked = $bindable(false),\n    disabled = false,\n    size = 'm',\n    ...attrs\n  }: Props = $props();\n\n  function handleChange(e: Event) {\n    checked = (e.target as HTMLInputElement).checked;\n  }\n</script>\n\n<label class={`mc-tag mc-tag-selectable ${size !== 'm' ? `mc-tag--${size}` : ''}`} {id} {...attrs}>\n  <input\n    type=\"checkbox\"\n    class=\"mc-tag__input\"\n    {id}\n    {name}\n    {checked}\n    {disabled}\n    onchange={handleChange}\n  />\n  <span class=\"mc-tag__label\">{label}</span>\n</label>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-selectable';\n</style>\n"],"names":["handleChange","e","checked","id","$.prop","$$props","name","label","disabled","size","attrs","$.rest_props"],"mappings":"oNAuBWA,EAAaC,EAAQC,EAAE,CAC9BA,EAAWD,EAAE,OAA4B,OAAO,CAClD;;2xMAzBF,oBAcIE,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLH,mBAAoB,EAAK,EACzBM,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACPC,EAAAC,EAAAN,EAAA,gRAHiB,GAAK,qDACd,GAAK,6CACT,IAAG,4BAS4B,MAAA,4BAAAI,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,aAAaC,gEAQ9EV,EAAYE,CAAA,2GAEKK,GAAK,eAZpC"}

package/dist/components/tags/TagSelectable.svelte

@@ -26,11 +26,7 @@
   }
 </script>
 
-<label
-  class={`mc-tag mc-tag-selectable ${size !== 'm' ? `mc-tag--${size}` : ''}`}
-  {id}
-  {...attrs}
->
+<label class={`mc-tag mc-tag-selectable ${size !== 'm' ? `mc-tag--${size}` : ''}`} {id} {...attrs}>
   <input
     type="checkbox"
     class="mc-tag__input"

package/dist/components/tags/TagsContextualised.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsContextualised.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsContextualised.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAgCrD,IAAI;AA7BT,wBA6BU;AAiBV,eAAO,MAAM,cAAc,EAAE,OAAiD,CAAC"}
+{"version":3,"file":"TagsContextualised.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsContextualised.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAgCrD,IAAI;AA7BT,wBA6BU;AAcV,eAAO,MAAM,cAAc,EAAE,OAAiD,CAAC"}

package/dist/components/tags/TagsRemovable.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagsRemovable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsRemovable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAqCrD,IAAI;AAjCT,wBAiCU;AAgBV,eAAO,MAAM,SAAS,EAAE,OAA4C,CAAC"}
+{"version":3,"file":"TagsRemovable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagsRemovable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAqCrD,IAAI;AAjCT,wBAiCU;AAeV,eAAO,MAAM,SAAS,EAAE,OAA4C,CAAC"}

package/dist/components/tags/TagsRemovable.stories.js

@@ -54,9 +54,7 @@ Removable.args = {
     size: 'm',
 };
 Removable.play = async ({ canvasElement }) => {
-    const btn = canvasElement
-        .querySelector('mc-tag-removable')
-        ?.shadowRoot?.querySelector('button');
+    const btn = canvasElement.querySelector('mc-tag-removable')?.shadowRoot?.querySelector('button');
     expect(btn).not.toBeNull();
     await userEvent.click(btn);
 };

package/dist/components/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options\n  customElement={{ tag: 'm-textarea', extend: customElementForwardEvents }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the textarea, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the textarea element, used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the textarea field.\n     */\n    value?: string | number;\n    /**\n     * Text displayed when the textarea is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the textarea is marked as invalid.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, the textarea is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * The number of visible text lines in the textarea.\n     */\n    rows?: number;\n    /**\n     * Minimum number of characters required for the textarea.\n     */\n    minlength?: number;\n    /**\n     * Maximum number of characters allowed in the textarea.\n     */\n    maxlength?: number;\n    /**\n     * If `true`, the textarea is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    value,\n    placeholder,\n    isinvalid,\n    disabled,\n    rows = 2,\n    minlength,\n    maxlength,\n    readonly,\n  }: Props = $props();\n</script>\n\n<textarea\n  bind:value\n  class={['mc-textarea', isinvalid && 'is-invalid']}\n  aria-invalid={isinvalid}\n  {name}\n  {id}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {readonly}\n></textarea>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","isinvalid","disabled","rows","minlength","maxlength","readonly","customElementForwardEvents"],"mappings":";;ysDAAA,oBAqDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,eAAO,CAAC,EACRC,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAST,EAAAC,EAAA,YAAA,CAAA,EACTS,EAAQV,EAAAC,EAAA,WAAA,CAAA,uVAHD,EAAC,iNASF,cAAeI,KAAa,YAAY,CAAA,EAAA,gBAAA,qBAClCA,GAAS,mKALzB,gKA/D8CM"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-textarea', extend: customElementForwardEvents }} />\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text area is an input designed for multi-line text entry, allowing users to input longer content compared to a standard text input. It is commonly used for comments, feedback, descriptions, and messaging. Text areas can be resizable or fixed in height, depending on the context, and often include placeholder text, character limits, and validation messages to guide users.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the textarea, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the textarea element, used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the textarea field.\n     */\n    value?: string | number;\n    /**\n     * Text displayed when the textarea is empty.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the textarea is marked as invalid.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, the textarea is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * The number of visible text lines in the textarea.\n     */\n    rows?: number;\n    /**\n     * Minimum number of characters required for the textarea.\n     */\n    minlength?: number;\n    /**\n     * Maximum number of characters allowed in the textarea.\n     */\n    maxlength?: number;\n    /**\n     * If `true`, the textarea is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    value,\n    placeholder,\n    isinvalid,\n    disabled,\n    rows = 2,\n    minlength,\n    maxlength,\n    readonly,\n  }: Props = $props();\n</script>\n\n<textarea\n  bind:value\n  class={['mc-textarea', isinvalid && 'is-invalid']}\n  aria-invalid={isinvalid}\n  {name}\n  {id}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {readonly}\n></textarea>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","isinvalid","disabled","rows","minlength","maxlength","readonly","customElementForwardEvents"],"mappings":";;ysDAAA,oBAmDIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,eAAO,CAAC,EACRC,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAST,EAAAC,EAAA,YAAA,CAAA,EACTS,EAAQV,EAAAC,EAAA,WAAA,CAAA,uVAHD,EAAC,iNASF,cAAeI,KAAa,YAAY,CAAA,EAAA,gBAAA,qBAClCA,GAAS,mKALzB,gKA9D4DM"}

package/dist/components/textarea/Textarea.svelte

@@ -1,6 +1,4 @@
-<svelte:options
-  customElement={{ tag: 'm-textarea', extend: customElementForwardEvents }}
-/>
+<svelte:options customElement={{ tag: 'm-textarea', extend: customElementForwardEvents }} />
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';

package/dist/components/textinput/README.md

@@ -8,7 +8,7 @@ A text input is a single-line input that allows users to enter and edit short te
 |------|-------------|------|---------|
 | `id*` | A unique identifier for the input element, used to associate the label with the form element. | `string` |   |
 | `name` | The name attribute for the input element, typically used for form submission. | `string` |   |
-| `value` | The current value of the input field. | `string` `number` |   |
+| `value` | The current value of the input field. | `string` `number` | `$bindable()` |
 | `placeholder` | A placeholder text to show in the input when it is empty. | `string` |   |
 | `inputtype` | Defines the type of input. | `'date'` `'email'` `'number'` `'password'` `'search'` `'tel'` `'text'` | `text` |
 | `isinvalid` | If `true`, applies an invalid state to the input. | `boolean` |   |

package/dist/components/textinput/Textinput.js

@@ -5,5 +5,5 @@ import{v as G,c as O,p as T,a as V,b as n,f as j,d as l,s as z,t as C,i as E,j a
 /* stylelint-disable string-no-newline */.mc-text-input.svelte-5c9enb {transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-5c9enb {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control[type=number].svelte-5c9enb::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-5c9enb::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=number].svelte-5c9enb {
   /* For Gecko rendering engine */appearance:textfield;}.mc-text-input__control[type=search].svelte-5c9enb::-webkit-search-decoration, .mc-text-input__control[type=search].svelte-5c9enb::-webkit-search-cancel-button {appearance:none;}.mc-text-input__control.svelte-5c9enb {padding:0.75rem 0.6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1;}.mc-text-input__control.svelte-5c9enb::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-5c9enb {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-5c9enb:focus-within {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-text-input.svelte-5c9enb:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-text-input.svelte-5c9enb:has(input:where(.svelte-5c9enb):disabled) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none;}.mc-text-input.svelte-5c9enb:has(input[readonly]:where(.svelte-5c9enb)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) .mc-text-input__control:where(.svelte-5c9enb) {padding-inline-start:0;}.mc-text-input.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) .mc-text-input__control:where(.svelte-5c9enb) {padding-inline-end:0;}.mc-text-input--s.svelte-5c9enb {height:2rem;}.mc-text-input--s.svelte-5c9enb .mc-text-input__control:where(.svelte-5c9enb) {padding:0.375rem 0.6875rem;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-text-input--s.svelte-5c9enb:has(.mc-text-input__icon:where(.svelte-5c9enb)) {padding-inline-start:0.4375rem;}.mc-text-input--s.svelte-5c9enb:has(.mc-controls-options:where(.svelte-5c9enb)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-5c9enb {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-5c9enb:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}.mc-text-input.svelte-5c9enb :where(.svelte-5c9enb) {box-sizing:border-box;}
 
-/* stylelint-enable string-no-newline */.mc-text-input__icon.svelte-5c9enb:empty {display:none;}`};function X(v,t){T(t,!0),V(v,W);let b=n(t,"id",7),m=n(t,"name",7),i=n(t,"value",7),u=n(t,"placeholder",7),p=n(t,"inputtype",7,"text"),a=n(t,"isinvalid",7),f=n(t,"disabled",7),h=n(t,"readonly",7),_=n(t,"size",7,"m"),x=n(t,"clearlabel",7,"Clear content"),g=n(t,"isclearable",7);var F={get id(){return b()},set id(e){b(e),o()},get name(){return m()},set name(e){m(e),o()},get value(){return i()},set value(e){i(e),o()},get placeholder(){return u()},set placeholder(e){u(e),o()},get inputtype(){return p()},set inputtype(e="text"){p(e),o()},get isinvalid(){return a()},set isinvalid(e){a(e),o()},get disabled(){return f()},set disabled(e){f(e),o()},get readonly(){return h()},set readonly(e){h(e),o()},get size(){return _()},set size(e="m"){_(e),o()},get clearlabel(){return x()},set clearlabel(e="Clear content"){x(e),o()},get isclearable(){return g()},set isclearable(e){g(e),o()}},d=U(),w=l(d),M=l(w);J(M,t,"icon",{}),s(w);var r=z(w,2);K(r);var S=z(r,2);{var Z=e=>{var y=R(),k=l(y);k.__click=[Q,i];var L=z(l(k),2),D=l(L,!0);s(L),s(k),s(y),C(()=>A(D,x())),E(e,y)};I(S,e=>{g()&&i()&&e(Z)})}return s(d),C(()=>{B(d,1,H(["mc-text-input",`mc-text-input--${_()}`,a()&&"is-invalid"]),"svelte-5c9enb"),c(r,"aria-invalid",a()),c(r,"name",m()),c(r,"id",b()),c(r,"type",p()),c(r,"placeholder",u()),r.disabled=f(),r.readOnly=h()}),N(r,i),E(v,d),q(F)}G(["click"]);customElements.define("m-textinput",O(X,{id:{},name:{},value:{},placeholder:{},inputtype:{},isinvalid:{},disabled:{},readonly:{},size:{},clearlabel:{},isclearable:{}},["icon"],[],!0,P));
+/* stylelint-enable string-no-newline */.mc-text-input__icon.svelte-5c9enb:empty {display:none;}`};function X(v,t){T(t,!0),V(v,W);let b=n(t,"id",7),m=n(t,"name",7),i=n(t,"value",15),u=n(t,"placeholder",7),p=n(t,"inputtype",7,"text"),a=n(t,"isinvalid",7),f=n(t,"disabled",7),h=n(t,"readonly",7),_=n(t,"size",7,"m"),x=n(t,"clearlabel",7,"Clear content"),g=n(t,"isclearable",7);var F={get id(){return b()},set id(e){b(e),o()},get name(){return m()},set name(e){m(e),o()},get value(){return i()},set value(e){i(e),o()},get placeholder(){return u()},set placeholder(e){u(e),o()},get inputtype(){return p()},set inputtype(e="text"){p(e),o()},get isinvalid(){return a()},set isinvalid(e){a(e),o()},get disabled(){return f()},set disabled(e){f(e),o()},get readonly(){return h()},set readonly(e){h(e),o()},get size(){return _()},set size(e="m"){_(e),o()},get clearlabel(){return x()},set clearlabel(e="Clear content"){x(e),o()},get isclearable(){return g()},set isclearable(e){g(e),o()}},d=U(),w=l(d),M=l(w);J(M,t,"icon",{}),s(w);var r=z(w,2);K(r);var S=z(r,2);{var Z=e=>{var y=R(),k=l(y);k.__click=[Q,i];var L=z(l(k),2),D=l(L,!0);s(L),s(k),s(y),C(()=>A(D,x())),E(e,y)};I(S,e=>{g()&&i()&&e(Z)})}return s(d),C(()=>{B(d,1,H(["mc-text-input",`mc-text-input--${_()}`,a()&&"is-invalid"]),"svelte-5c9enb"),c(r,"aria-invalid",a()),c(r,"name",m()),c(r,"id",b()),c(r,"type",p()),c(r,"placeholder",u()),r.disabled=f(),r.readOnly=h()}),N(r,i),E(v,d),q(F)}G(["click"]);customElements.define("m-textinput",O(X,{id:{},name:{},value:{},placeholder:{},inputtype:{},isinvalid:{},disabled:{},readonly:{},size:{},clearlabel:{},isclearable:{}},["icon"],[],!0,P));
 //# sourceMappingURL=Textinput.js.map

package/dist/components/textinput/Textinput.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["<svelte:options\n  customElement={{ tag: 'm-textinput', extend: customElementForwardEvents }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.\n   *\n   * @slot icon - Use this slot to insert an icon in the input.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * Defines the type of input.\n     */\n    inputtype?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';\n    /**\n     * If `true`, applies an invalid state to the input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the input.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n  }\n\n  let {\n    id,\n    name,\n    value,\n    placeholder,\n    inputtype = 'text',\n    isinvalid,\n    disabled,\n    readonly,\n    size = 'm',\n    clearlabel = 'Clear content',\n    isclearable,\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div\n  class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}\n>\n  <span class=\"mc-text-input__icon\">\n    <slot name=\"icon\" />\n  </span>\n\n  <input\n    bind:value\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    {id}\n    type={inputtype}\n    {placeholder}\n    {disabled}\n    {readonly}\n  />\n\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button\n        type=\"button\"\n        class=\"mc-controls-options__button\"\n        onclick={resetValue}\n      >\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .mc-text-input__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["resetValue","_","value","id","$.prop","$$props","name","placeholder","inputtype","isinvalid","disabled","readonly","size","clearlabel","isclearable","$$render","consequent","customElementForwardEvents"],"mappings":"0WAwEQA,EAAU,CAAAC,EAAAC,IAAUA,EAAQ,EAAE;;;;;;;kHAxEtC,oBA2DIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJH,EAAKE,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,oBAAY,MAAM,EAClBC,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,eAAO,GAAG,EACVC,qBAAa,eAAe,EAC5BC,EAAWV,EAAAC,EAAA,cAAA,CAAA,qPANC,OAAM,8MAIX,IAAG,yDACG,gBAAe,uLA+BfL,EAAUE,CAAA,qDAQuBW,EAAU,CAAA,CAAA,kBAbrDC,EAAW,GAAIZ,KAAKa,EAAAC,CAAA,gCAlBjB,kCAAmCJ,EAAI,CAAA,GAAIH,KAAa,mDAShDA,GAAS,2CAGjBD,GAAS,2EAfnB,oMAxE+CS"}
+{"version":3,"file":"Textinput.js","sources":["../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-textinput', extend: customElementForwardEvents }} />\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.\n   *\n   * @slot icon - Use this slot to insert an icon in the input.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the input element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the input element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the input field.\n     */\n    value?: string | number;\n    /**\n     * A placeholder text to show in the input when it is empty.\n     */\n    placeholder?: string;\n    /**\n     * Defines the type of input.\n     */\n    inputtype?: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';\n    /**\n     * If `true`, applies an invalid state to the input.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the input, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the input.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the input is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the input has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    placeholder,\n    inputtype = 'text',\n    isinvalid,\n    disabled,\n    readonly,\n    size = 'm',\n    clearlabel = 'Clear content',\n    isclearable,\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}>\n  <span class=\"mc-text-input__icon\">\n    <slot name=\"icon\" />\n  </span>\n\n  <input\n    bind:value\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    {id}\n    type={inputtype}\n    {placeholder}\n    {disabled}\n    {readonly}\n  />\n\n  {#if isclearable && value}\n    <div class=\"mc-controls-options\">\n      <button type=\"button\" class=\"mc-controls-options__button\" onclick={resetValue}>\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .mc-text-input__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["resetValue","_","value","id","$.prop","$$props","name","placeholder","inputtype","isinvalid","disabled","readonly","size","clearlabel","isclearable","$$render","consequent","customElementForwardEvents"],"mappings":"0WAsEQA,EAAU,CAAAC,EAAAC,IAAUA,EAAQ,EAAE;;;;;;;kHAtEtC,oBAyDIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJH,EAAKE,EAAAC,EAAA,QAAA,EAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,oBAAY,MAAM,EAClBC,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,eAAO,GAAG,EACVC,qBAAa,eAAe,EAC5BC,EAAWV,EAAAC,EAAA,cAAA,CAAA,qPANC,OAAM,8MAIX,IAAG,yDACG,gBAAe,uLA0ByCL,EAAUE,CAAA,qDAOjCW,EAAU,CAAA,CAAA,kBATrDC,EAAW,GAAIZ,KAAKa,EAAAC,CAAA,gCAjBd,kCAAmCJ,EAAI,CAAA,GAAIH,KAAa,mDAQnDA,GAAS,2CAGjBD,GAAS,2EAbnB,oMAvE6DS"}

package/dist/components/textinput/Textinput.stories.d.ts

@@ -5,7 +5,7 @@ type Story = StoryObj;
 export declare const WithValue: Story;
 export declare const Default: Story;
 export declare const Small: Story;
-export declare const minValue: Story;
+export declare const MinValue: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Invalid: Story;

package/dist/components/textinput/Textinput.stories.js

@@ -67,7 +67,7 @@ export const Small = {
         size: 's',
     },
 };
-export const minValue = {
+export const MinValue = {
     args: {
         id: 'minValueId',
         inputtype: 'number',

package/dist/components/textinput/Textinput.svelte

@@ -1,6 +1,4 @@
-<svelte:options
-  customElement={{ tag: 'm-textinput', extend: customElementForwardEvents }}
-/>
+<svelte:options customElement={{ tag: 'm-textinput', extend: customElementForwardEvents }} />
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
@@ -59,7 +57,7 @@
   let {
     id,
     name,
-    value,
+    value = $bindable(),
     placeholder,
     inputtype = 'text',
     isinvalid,
@@ -73,9 +71,7 @@
   const resetValue = () => (value = '');
 </script>
 
-<div
-  class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}
->
+<div class={['mc-text-input', `mc-text-input--${size}`, isinvalid && 'is-invalid']}>
   <span class="mc-text-input__icon">
     <slot name="icon" />
   </span>
@@ -94,11 +90,7 @@
 
   {#if isclearable && value}
     <div class="mc-controls-options">
-      <button
-        type="button"
-        class="mc-controls-options__button"
-        onclick={resetValue}
-      >
+      <button type="button" class="mc-controls-options__button" onclick={resetValue}>
         <svg class="mc-controls-options__icon" aria-hidden="true">
           <path
             fill-rule="evenodd"

package/dist/components/textinput/Textinput.svelte.d.ts

@@ -66,7 +66,7 @@ declare const Textinput: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {
     icon: {};
-}, {}, "">;
+}, {}, "value">;
 type Textinput = InstanceType<typeof Textinput>;
 export default Textinput;
 //# sourceMappingURL=Textinput.svelte.d.ts.map

package/dist/components/textinput/Textinput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAKE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IACjF;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA+CH,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,SAAS;;;;UAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAKE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IACjF;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA+CH,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,SAAS;;;;eAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/components/toaster/README.md

@@ -13,6 +13,7 @@ A toaster is a temporary notification that appears briefly on the screen to prov
 | `closable` | If `true`, display the close button. | `boolean` | `true` |
 | `progress` | If `true`, display the progress bar of the duration. | `boolean` |   |
 | `timeout` | Duration of the toaster | `number` |   |
+| `onUpdateOpen` | Callback fired when the toaster open state changes. | `(open: boolean) => void` |   |
 
 ## Slots