@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0

package/dist/components/toaster/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/InfoCircleFilled32/InfoCircleFilled32.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/WarningCircleFilled32/WarningCircleFilled32.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CrossCircleFilled32/CrossCircleFilled32.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/CheckCircleFilled32/CheckCircleFilled32.svelte","../../../src/components/toaster/Toaster.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'info-circle-filled-32', 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 = \"2rem\";\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 32 32\" width=\"32px\" height=\"32px\"><path fill-rule=\"evenodd\" d=\"M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m0 9a1.333 1.333 0 1 0 0-2.667A1.333 1.333 0 0 0 16 12m1 2.667a1 1 0 1 0-2 0v6.666a1 1 0 1 0 2 0z\"/></svg>","<svelte:options customElement={{ tag: 'warning-circle-filled-32', 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 = \"2rem\";\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 32 32\" width=\"32px\" height=\"32px\"><path fill-rule=\"evenodd\" d=\"M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m1 7.667a1 1 0 1 0-2 0v6.666a1 1 0 1 0 2 0zm-1 12A1.333 1.333 0 1 0 16 20a1.333 1.333 0 0 0 0 2.667\"/></svg>","<svelte:options customElement={{ tag: 'cross-circle-filled-32', 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 = \"2rem\";\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 32 32\" width=\"32px\" height=\"32px\"><path fill-rule=\"evenodd\" d=\"M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m-4.707 8.293a1 1 0 0 1 1.414 0L16 14.586l3.293-3.293a1 1 0 0 1 1.414 1.414L17.414 16l3.293 3.293a1 1 0 0 1-1.414 1.414L16 17.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L14.586 16l-3.293-3.293a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options customElement={{ tag: 'check-circle-filled-32', 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 = \"2rem\";\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 32 32\" width=\"32px\" height=\"32px\"><path fill-rule=\"evenodd\" d=\"M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m6.707 8.96a1 1 0 0 1 0 1.414l-7.333 7.333a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414l3.293 3.293 6.626-6.626a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'm-toaster' }} />\n\n<script lang=\"ts\">\n  import { onMount, onDestroy } from 'svelte';\n  import InfoCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled32/InfoCircleFilled32.svelte';\n  import WarningCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled32/WarningCircleFilled32.svelte';\n  import CrossCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled32/CrossCircleFilled32.svelte';\n  import CheckCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled32/CheckCircleFilled32.svelte';\n  import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';\n  /**\n   * A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.\n   */\n  interface Props {\n    /**\n     * If `true`, display the Toaster.\n     */\n    open?: boolean;\n    /**\n     * Position of the toaster.\n     */\n    position?: 'top' | 'bottom' | 'top-center' | 'bottom-center';\n    /**\n     * Description of the toaster.\n     */\n    description: string;\n    /**\n     * Allows to define the toaster style.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error';\n    /**\n     * If `true`, display the close button.\n     */\n    closable?: boolean;\n    /**\n     * If `true`, display the progress bar of the duration.\n     */\n    progress?: boolean;\n    /**\n     * Duration of the toaster\n     */\n    timeout?: number;\n  }\n\n  let {\n    open,\n    position = 'top',\n    description,\n    status = 'info',\n    closable = true,\n    progress,\n    timeout,\n  }: Props = $props();\n\n  const iconMap = [\n    { status: 'info', component: InfoCircleFilled32 },\n    { status: 'success', component: CheckCircleFilled32 },\n    { status: 'warning', component: WarningCircleFilled32 },\n    { status: 'error', component: CrossCircleFilled32 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  let selected = $state(getSelected(status));\n\n  let progressValue = $state(0);\n  let intervalId: ReturnType<typeof setInterval> | null = null;\n  let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n  const onClose = () => {\n    open = false;\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    // @ts-ignore: `this` is the custom element instance\n    this.dispatchEvent(event);\n  };\n\n  onMount(() => {\n    if (timeout) {\n      if (progress) {\n        const intervalDuration = 100;\n        const steps = timeout / intervalDuration;\n        const increment = 100 / steps;\n\n        intervalId = setInterval(() => {\n          progressValue += increment;\n          if (progressValue >= 100) {\n            progressValue = 100;\n            clearInterval(intervalId!);\n            onClose();\n          }\n        }, intervalDuration);\n      } else {\n        timeoutId = setTimeout(() => {\n          onClose();\n        }, timeout);\n      }\n    }\n  });\n\n  onDestroy(() => {\n    if (intervalId) clearInterval(intervalId);\n    if (timeoutId) clearTimeout(timeoutId);\n  });\n</script>\n\n<section \n  class={[\"mc-toaster\", open && 'is-open', `mc-toaster--${status}`, `mc-toaster--${position}`]} \n  role=\"status\"\n  tabindex=\"-1\"\n  aria-hidden={!open}\n>\n  <span class=\"mc-toaster__icon\" aria-hidden=\"true\">\n    <selected.component/>\n  </span>\n\n  <div class=\"mc-toaster__content\">\n    <p class=\"mc-toaster__message\">{description}</p>\n\n    <div class=\"mc-toaster__action\">\n      <slot name=\"action\" />\n    </div>\n  </div>\n\n  {#if closable}\n    <button class=\"mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost\" \n      type=\"button\" \n      aria-label=\"Close\"\n      onclick={onClose}\n    >\n      <Cross20 class=\"mc-button__icon\" slot=\"icon\" aria-hidden=\"true\" />\n    </button>\n  {/if}\n\n  {#if progress}\n    <div\n      class=\"mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m\"\n    >\n      <div\n        class=\"mc-linear-progressbar-buffer__indicator\"\n        role=\"progressbar\"\n        style={`--progress-value: ${progressValue};`}\n        aria-valuenow={progressValue}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n      ></div>\n    </div>\n  {/if}\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/linear-progressbar-buffer';\n  @use '@mozaic-ds/styles/components/toaster';\n\n  .mc-toaster__action:empty {\n    display: none;\n  }\n</style>\n"],"names":["id","style","className","fill","size","open","$.prop","$$props","position","description","status","closable","progress","timeout","iconMap","InfoCircleFilled32","CheckCircleFilled32","WarningCircleFilled32","CrossCircleFilled32","getSelected","icon","selected","$.state","$.proxy","progressValue","intervalId","timeoutId","onClose","event","onMount","increment","$.get","$.set","onDestroy","$$render","consequent","consequent_1"],"mappings":"2vBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,oCAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,kcCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,oCAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,+iBCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,oCAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,ieCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,MAAM,oCAGEJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E;;;;;;;;;;;urDCPA,sBA4CIE,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,mBAAW,KAAK,EAChBC,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,iBAAS,MAAM,EACfC,mBAAW,EAAI,EACfC,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAOP,EAAAC,EAAA,UAAA,CAAA,QAGHO,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,CAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,CAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,CAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,CAAmB,YAG1CC,EAAYT,EAAgB,CAC5B,OAAAI,EAAQ,KAAMM,GAASA,EAAK,SAAWV,CAAM,GAAKI,EAAQ,CAAC,CACpE,KAEIO,EAAQC,EAAAC,GAAUJ,EAAYT,EAAM,CAAA,CAAA,CAAA,EAEpCc,IAAuB,CAAC,EACxBC,EAAoD,KACpDC,EAAkD,KAEhD,MAAAC,EAAgB,IAAA,CACpBtB,EAAO,EAAK,EAEN,MAAAuB,EAAY,IAAA,YAAY,eAC5B,OAAQvB,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAGhB,KAAK,cAAcuB,CAAK,CACzB,EAEDC,GAAc,IAAA,CACR,GAAAhB,EAAO,EACL,GAAAD,EAAQ,EAAE,OAGNkB,EAAY,KADJjB,EAAO,EAAG,KAGxBY,EAAa,YAAkB,IAAA,GAC7BD,EAAaO,EAAbP,CAAa,EAAIM,CAAS,IACtBN,CAAa,GAAI,MACnBQ,EAAAR,EAAgB,GAAG,EACnB,cAAcC,CAAU,EACxBE,EAAO,EAEV,EAAE,IACL,MACED,EAAY,WAAiB,IAAA,CAC3BC,EAAO,CACR,EAAEd,EAAO,GAGf,EAEDoB,GAAgB,IAAA,CACVR,GAAY,cAAcA,CAAU,EACpCC,GAAW,aAAaA,CAAS,EACtC,4MAyBYC,mGAJRhB,EAAQ,GAAAuB,EAAAC,CAAA,sFAiBqBX,CAAa,CAAA,GAAA,wBAC1BA,CAAa,CAAA,oBAR7BZ,EAAQ,GAAAsB,EAAAE,EAAA,gCA3BL,aAAc/B,KAAQ,yBAA0BK,EAAM,CAAA,kBAAmBF,GAAQ,yCAG3EH,EAAI,CAAA,OAOgBI,GAAW,qGA7EhC,MAAK,4GAEP,OAAM,qDACJ,GAAI,oHA6DnB","x_google_ignoreList":[0,1,2,3]}
+{"version":3,"file":"Toaster.js","sources":["../../../node_modules/svelte/src/internal/shared/errors.js","../../../node_modules/svelte/src/index-client.js","../../../src/components/toaster/Toaster.svelte"],"sourcesContent":["/* This file is generated by scripts/process-messages/index.js. Do not edit! */\n\nimport { DEV } from 'esm-env';\n\n/**\n * Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead\n * @returns {never}\n */\nexport function invalid_default_snippet() {\n\tif (DEV) {\n\t\tconst error = new Error(`invalid_default_snippet\\nCannot use \\`{@render children(...)}\\` if the parent component uses \\`let:\\` directives. Consider using a named snippet instead\\nhttps://svelte.dev/e/invalid_default_snippet`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/invalid_default_snippet`);\n\t}\n}\n\n/**\n * A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`\n * @returns {never}\n */\nexport function invalid_snippet_arguments() {\n\tif (DEV) {\n\t\tconst error = new Error(`invalid_snippet_arguments\\nA snippet function was passed invalid arguments. Snippets should only be instantiated via \\`{@render ...}\\`\\nhttps://svelte.dev/e/invalid_snippet_arguments`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/invalid_snippet_arguments`);\n\t}\n}\n\n/**\n * `%name%(...)` can only be used during component initialisation\n * @param {string} name\n * @returns {never}\n */\nexport function lifecycle_outside_component(name) {\n\tif (DEV) {\n\t\tconst error = new Error(`lifecycle_outside_component\\n\\`${name}(...)\\` can only be used during component initialisation\\nhttps://svelte.dev/e/lifecycle_outside_component`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/lifecycle_outside_component`);\n\t}\n}\n\n/**\n * Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.\n * @returns {never}\n */\nexport function snippet_without_render_tag() {\n\tif (DEV) {\n\t\tconst error = new Error(`snippet_without_render_tag\\nAttempted to render a snippet without a \\`{@render}\\` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change \\`{snippet}\\` to \\`{@render snippet()}\\`.\\nhttps://svelte.dev/e/snippet_without_render_tag`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/snippet_without_render_tag`);\n\t}\n}\n\n/**\n * `%name%` is not a store with a `subscribe` method\n * @param {string} name\n * @returns {never}\n */\nexport function store_invalid_shape(name) {\n\tif (DEV) {\n\t\tconst error = new Error(`store_invalid_shape\\n\\`${name}\\` is not a store with a \\`subscribe\\` method\\nhttps://svelte.dev/e/store_invalid_shape`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/store_invalid_shape`);\n\t}\n}\n\n/**\n * The `this` prop on `<svelte:element>` must be a string, if defined\n * @returns {never}\n */\nexport function svelte_element_invalid_this_value() {\n\tif (DEV) {\n\t\tconst error = new Error(`svelte_element_invalid_this_value\\nThe \\`this\\` prop on \\`<svelte:element>\\` must be a string, if defined\\nhttps://svelte.dev/e/svelte_element_invalid_this_value`);\n\n\t\terror.name = 'Svelte error';\n\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/svelte_element_invalid_this_value`);\n\t}\n}","/** @import { ComponentContext, ComponentContextLegacy } from '#client' */\n/** @import { EventDispatcher } from './index.js' */\n/** @import { NotFunction } from './internal/types.js' */\nimport { active_reaction, untrack } from './internal/client/runtime.js';\nimport { is_array } from './internal/shared/utils.js';\nimport { user_effect } from './internal/client/index.js';\nimport * as e from './internal/client/errors.js';\nimport { legacy_mode_flag } from './internal/flags/index.js';\nimport { component_context } from './internal/client/context.js';\nimport { DEV } from 'esm-env';\n\nif (DEV) {\n\t/**\n\t * @param {string} rune\n\t */\n\tfunction throw_rune_error(rune) {\n\t\tif (!(rune in globalThis)) {\n\t\t\t// TODO if people start adjusting the \"this can contain runes\" config through v-p-s more, adjust this message\n\t\t\t/** @type {any} */\n\t\t\tlet value; // let's hope noone modifies this global, but belts and braces\n\t\t\tObject.defineProperty(globalThis, rune, {\n\t\t\t\tconfigurable: true,\n\t\t\t\t// eslint-disable-next-line getter-return\n\t\t\t\tget: () => {\n\t\t\t\t\tif (value !== undefined) {\n\t\t\t\t\t\treturn value;\n\t\t\t\t\t}\n\n\t\t\t\t\te.rune_outside_svelte(rune);\n\t\t\t\t},\n\t\t\t\tset: (v) => {\n\t\t\t\t\tvalue = v;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tthrow_rune_error('$state');\n\tthrow_rune_error('$effect');\n\tthrow_rune_error('$derived');\n\tthrow_rune_error('$inspect');\n\tthrow_rune_error('$props');\n\tthrow_rune_error('$bindable');\n}\n\n/**\n * Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.\n *\n * Must be called while a derived or effect is running.\n *\n * ```svelte\n * <script>\n * \timport { getAbortSignal } from 'svelte';\n *\n * \tlet { id } = $props();\n *\n * \tasync function getData(id) {\n * \t\tconst response = await fetch(`/items/${id}`, {\n * \t\t\tsignal: getAbortSignal()\n * \t\t});\n *\n * \t\treturn await response.json();\n * \t}\n *\n * \tconst data = $derived(await getData(id));\n * </script>\n * ```\n */\nexport function getAbortSignal() {\n\tif (active_reaction === null) {\n\t\te.get_abort_signal_outside_reaction();\n\t}\n\n\treturn (active_reaction.ac ??= new AbortController()).signal;\n}\n\n/**\n * `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.\n * Unlike `$effect`, the provided function only runs once.\n *\n * It must be called during the component's initialisation (but doesn't need to live _inside_ the component;\n * it can be called from an external module). If a function is returned _synchronously_ from `onMount`,\n * it will be called when the component is unmounted.\n *\n * `onMount` functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).\n *\n * @template T\n * @param {() => NotFunction<T> | Promise<NotFunction<T>> | (() => any)} fn\n * @returns {void}\n */\nexport function onMount(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onMount');\n\t}\n\n\tif (legacy_mode_flag && component_context.l !== null) {\n\t\tinit_update_callbacks(component_context).m.push(fn);\n\t} else {\n\t\tuser_effect(() => {\n\t\t\tconst cleanup = untrack(fn);\n\t\t\tif (typeof cleanup === 'function') return /** @type {() => void} */ (cleanup);\n\t\t});\n\t}\n}\n\n/**\n * Schedules a callback to run immediately before the component is unmounted.\n *\n * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the\n * only one that runs inside a server-side component.\n *\n * @param {() => any} fn\n * @returns {void}\n */\nexport function onDestroy(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onDestroy');\n\t}\n\n\tonMount(() => () => untrack(fn));\n}\n\n/**\n * @template [T=any]\n * @param {string} type\n * @param {T} [detail]\n * @param {any}params_0\n * @returns {CustomEvent<T>}\n */\nfunction create_custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {\n\treturn new CustomEvent(type, { detail, bubbles, cancelable });\n}\n\n/**\n * Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events).\n * Event dispatchers are functions that can take two arguments: `name` and `detail`.\n *\n * Component events created with `createEventDispatcher` create a\n * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).\n * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).\n * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)\n * property and can contain any type of data.\n *\n * The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:\n * ```ts\n * const dispatch = createEventDispatcher<{\n *  loaded: null; // does not take a detail argument\n *  change: string; // takes a detail argument of type string, which is required\n *  optional: number | null; // takes an optional detail argument of type number\n * }>();\n * ```\n *\n * @deprecated Use callback props and/or the `$host()` rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)\n * @template {Record<string, any>} [EventMap = any]\n * @returns {EventDispatcher<EventMap>}\n */\nexport function createEventDispatcher() {\n\tconst active_component_context = component_context;\n\tif (active_component_context === null) {\n\t\te.lifecycle_outside_component('createEventDispatcher');\n\t}\n\n\t/**\n\t * @param [detail]\n\t * @param [options]\n\t */\n\treturn (type, detail, options) => {\n\t\tconst events = /** @type {Record<string, Function | Function[]>} */ (\n\t\t\tactive_component_context.s.$$events\n\t\t)?.[/** @type {string} */ (type)];\n\n\t\tif (events) {\n\t\t\tconst callbacks = is_array(events) ? events.slice() : [events];\n\t\t\t// TODO are there situations where events could be dispatched\n\t\t\t// in a server (non-DOM) environment?\n\t\t\tconst event = create_custom_event(/** @type {string} */ (type), detail, options);\n\t\t\tfor (const fn of callbacks) {\n\t\t\t\tfn.call(active_component_context.x, event);\n\t\t\t}\n\t\t\treturn !event.defaultPrevented;\n\t\t}\n\n\t\treturn true;\n\t};\n}\n\n// TODO mark beforeUpdate and afterUpdate as deprecated in Svelte 6\n\n/**\n * Schedules a callback to run immediately before the component is updated after any state change.\n *\n * The first time the callback runs will be before the initial `onMount`.\n *\n * In runes mode use `$effect.pre` instead.\n *\n * @deprecated Use [`$effect.pre`](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function beforeUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('beforeUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('beforeUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).b.push(fn);\n}\n\n/**\n * Schedules a callback to run immediately after the component has been updated.\n *\n * The first time the callback runs will be after the initial `onMount`.\n *\n * In runes mode use `$effect` instead.\n *\n * @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function afterUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('afterUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('afterUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).a.push(fn);\n}\n\n/**\n * Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate\n * @param {ComponentContext} context\n */\nfunction init_update_callbacks(context) {\n\tvar l = /** @type {ComponentContextLegacy} */ (context).l;\n\treturn (l.u ??= { a: [], b: [], m: [] });\n}\n\nexport { flushSync } from './internal/client/reactivity/batch.js';\nexport { getContext, getAllContexts, hasContext, setContext } from './internal/client/context.js';\nexport { hydrate, mount, unmount } from './internal/client/render.js';\nexport { tick, untrack, settled } from './internal/client/runtime.js';\nexport { createRawSnippet } from './internal/client/dom/blocks/snippet.js';\n","<svelte:options customElement={{ tag: 'm-toaster' }} />\n\n<script lang=\"ts\">\n  import { onMount, onDestroy } from 'svelte';\n  import InfoCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/InfoCircleFilled32/InfoCircleFilled32.svelte';\n  import WarningCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/WarningCircleFilled32/WarningCircleFilled32.svelte';\n  import CrossCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled32/CrossCircleFilled32.svelte';\n  import CheckCircleFilled32 from '@mozaic-ds/icons-svelte/svelte/CheckCircleFilled32/CheckCircleFilled32.svelte';\n  import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';\n  /**\n   * A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.\n   *\n   * @slot action - Use this slot to insert a button or a link in the toaster\n   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.\n   */\n  interface Props {\n    /**\n     * If `true`, display the Toaster.\n     */\n    open?: boolean;\n    /**\n     * Position of the toaster.\n     */\n    position?: 'top' | 'bottom' | 'top-center' | 'bottom-center';\n    /**\n     * Description of the toaster.\n     */\n    description: string;\n    /**\n     * Allows to define the toaster style.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error';\n    /**\n     * If `true`, display the close button.\n     */\n    closable?: boolean;\n    /**\n     * If `true`, display the progress bar of the duration.\n     */\n    progress?: boolean;\n    /**\n     * Duration of the toaster\n     */\n    timeout?: number;\n  }\n\n  let {\n    open,\n    position = 'top',\n    description,\n    status = 'info',\n    closable = true,\n    progress,\n    timeout,\n  }: Props = $props();\n  let element: HTMLElement;\n\n  const iconMap = [\n    { status: 'info', component: InfoCircleFilled32 },\n    { status: 'success', component: CheckCircleFilled32 },\n    { status: 'warning', component: WarningCircleFilled32 },\n    { status: 'error', component: CrossCircleFilled32 },\n  ];\n\n  function getSelected(status: string) {\n    return iconMap.find((icon) => icon.status === status) || iconMap[0];\n  }\n\n  let selected = $state(getSelected(status));\n\n  let progressValue = $state(0);\n  let intervalId: ReturnType<typeof setInterval> | null = null;\n  let timeoutId: ReturnType<typeof setTimeout> | null = null;\n\n  const onClose = () => {\n    open = false;\n\n    const event = new CustomEvent('update:open', {\n      detail: open,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n\n  onMount(() => {\n    if (timeout) {\n      if (progress) {\n        const intervalDuration = 100;\n        const steps = timeout / intervalDuration;\n        const increment = 100 / steps;\n\n        intervalId = setInterval(() => {\n          progressValue += increment;\n          if (progressValue >= 100) {\n            progressValue = 100;\n            clearInterval(intervalId!);\n            onClose();\n          }\n        }, intervalDuration);\n      } else {\n        timeoutId = setTimeout(() => {\n          onClose();\n        }, timeout);\n      }\n    }\n  });\n\n  onDestroy(() => {\n    if (intervalId) clearInterval(intervalId);\n    if (timeoutId) clearTimeout(timeoutId);\n  });\n</script>\n\n<section\n  class={[\n    'mc-toaster',\n    open && 'is-open',\n    `mc-toaster--${status}`,\n    `mc-toaster--${position}`,\n  ]}\n  role=\"status\"\n  tabindex=\"-1\"\n  aria-hidden={!open}\n  bind:this={element}\n>\n  <span class=\"mc-toaster__icon\" aria-hidden=\"true\">\n    <selected.component />\n  </span>\n\n  <div class=\"mc-toaster__content\">\n    <p class=\"mc-toaster__message\">{description}</p>\n\n    <div class=\"mc-toaster__action\">\n      <slot name=\"action\" />\n    </div>\n  </div>\n\n  {#if closable}\n    <button\n      class=\"mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost\"\n      type=\"button\"\n      aria-label=\"Close\"\n      onclick={onClose}\n    >\n      <Cross20 class=\"mc-button__icon\" slot=\"icon\" aria-hidden=\"true\" />\n    </button>\n  {/if}\n\n  {#if progress}\n    <div\n      class=\"mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m\"\n    >\n      <div\n        class=\"mc-linear-progressbar-buffer__indicator\"\n        role=\"progressbar\"\n        style={`--progress-value: ${progressValue};`}\n        aria-valuenow={progressValue}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n      ></div>\n    </div>\n  {/if}\n</section>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n  @use '@mozaic-ds/styles/components/linear-progressbar-buffer';\n  @use '@mozaic-ds/styles/components/toaster';\n\n  .mc-toaster__action:empty {\n    display: none;\n  }\n</style>\n"],"names":["lifecycle_outside_component","name","onMount","fn","component_context","e.lifecycle_outside_component","legacy_mode_flag","init_update_callbacks","user_effect","cleanup","untrack","onDestroy","context","l","open","$.prop","$$props","position","description","status","closable","progress","timeout","element","iconMap","InfoCircleFilled32","CheckCircleFilled32","WarningCircleFilled32","CrossCircleFilled32","getSelected","icon","selected","$.state","$.proxy","progressValue","intervalId","timeoutId","onClose","event","increment","$.get","$.set","$$render","consequent","consequent_1","$.bind_this","section","$$value"],"mappings":"gdAyCO,SAASA,EAA4BC,EAAM,CAQhD,MAAM,IAAI,MAAM,kDAAkD,CAEpE,CCuCO,SAASC,EAAQC,EAAI,CACvBC,IAAsB,MACzBC,EAAuC,EAGpCC,GAAoBF,EAAkB,IAAM,KAC/CG,GAAsBH,CAAiB,EAAE,EAAE,KAAKD,CAAE,EAElDK,EAAY,IAAM,CACjB,MAAMC,EAAUC,EAAQP,CAAE,EAC1B,GAAI,OAAOM,GAAY,WAAY,OAAkCA,CACtE,CAAC,CAEH,CAWO,SAASE,GAAUR,EAAI,CACzBC,IAAsB,MACzBC,EAAyC,EAG1CH,EAAQ,IAAM,IAAMQ,EAAQP,CAAE,CAAC,CAChC,CAsHA,SAASI,GAAsBK,EAAS,CACvC,IAAIC,EAA2CD,EAAS,EACxD,OAAQC,EAAE,IAAFA,EAAE,EAAM,CAAE,EAAG,CAAA,EAAI,EAAG,CAAA,EAAI,EAAG,EAAE,EACtC;;;;;;;;6uECjPA,uBA+CIC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,mBAAW,KAAK,EAChBC,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,iBAAS,MAAM,EACfC,mBAAW,EAAI,EACfC,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EAELO,QAEEC,EAAO,CACT,CAAA,OAAQ,OAAQ,UAAWC,EAAkB,EAC7C,CAAA,OAAQ,UAAW,UAAWC,EAAmB,EACjD,CAAA,OAAQ,UAAW,UAAWC,EAAqB,EACnD,CAAA,OAAQ,QAAS,UAAWC,EAAmB,YAG1CC,EAAYV,EAAgB,CAC5B,OAAAK,EAAQ,KAAMM,GAASA,EAAK,SAAWX,CAAM,GAAKK,EAAQ,CAAC,CACpE,KAEIO,EAAQC,EAAAC,GAAUJ,EAAYV,EAAM,CAAA,CAAA,CAAA,EAEpCe,IAAuB,CAAC,EACxBC,EAAoD,KACpDC,EAAkD,KAEhD,MAAAC,EAAO,IAAS,CACpBvB,EAAO,EAAK,EAEN,MAAAwB,EAAK,IAAO,YAAY,eAC5B,OAAQxB,EAAI,EACZ,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBS,EAAQ,cAAce,CAAK,CAC7B,EAEApC,EAAO,IAAO,CACR,GAAAoB,EAAO,EACL,GAAAD,EAAQ,EAAE,OAGNkB,EAAY,KADJjB,EAAO,EAAG,KAGxBa,EAAa,YAAkB,IAAA,GAC7BD,EAAaM,EAAbN,CAAa,EAAIK,CAAS,IACtBL,CAAa,GAAI,MACnBO,EAAAP,EAAgB,GAAG,EACnB,cAAcC,CAAU,EACxBE,EAAO,EAEX,EAAG,IACL,MACED,EAAY,WAAiB,IAAA,CAC3BC,EAAO,CACT,EAAGf,EAAO,EAGhB,CAAC,EAEDX,GAAS,IAAO,CACVwB,GAAY,cAAcA,CAAU,EACpCC,GAAW,aAAaA,CAAS,CACvC,CAAC,gGA/DY,MAAK,4GAEP,OAAM,qDACJ,GAAI,0TA4FJC,mGALRjB,EAAQ,GAAAsB,EAAAC,CAAA,sFAkBqBT,CAAa,CAAA,GAAA,wBAC1BA,CAAa,CAAA,oBAR7Bb,EAAQ,GAAAqB,EAAAE,CAAA,gBAzBFC,GAAAC,EAAAC,GAAAxB,QAAAA,CAAO,oBARhB,aACAT,EAAI,GAAI,yBACOK,EAAM,CAAA,kBACNF,GAAQ,yCAIXH,EAAI,CAAA,OAQgBI,GAAW,gBAnB/C","x_google_ignoreList":[0,1]}

package/dist/components/toaster/Toaster.spec.js

@@ -0,0 +1,100 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent, waitFor } from '@testing-library/svelte';
+import Toaster from './Toaster.svelte';
+describe('m-toaster component', () => {
+    it('renders with description and proper classes', () => {
+        const { container } = render(Toaster, {
+            props: {
+                open: true,
+                description: 'This is a toaster message',
+                status: 'success',
+                position: 'top',
+            },
+        });
+        const toaster = container.querySelector('.mc-toaster');
+        expect(toaster).toBeTruthy();
+        expect(toaster.textContent).toContain('This is a toaster message');
+        expect(toaster.classList.contains('is-open')).toBe(true);
+        expect(toaster.classList.contains('mc-toaster--success')).toBe(true);
+        expect(toaster.classList.contains('mc-toaster--top')).toBe(true);
+    });
+    it('emits "update:open" when closed via close button', async () => {
+        const { container } = render(Toaster, {
+            props: {
+                open: true,
+                description: 'Closable toaster',
+                closable: true,
+            },
+        });
+        const toaster = container.querySelector('section');
+        const mockHandler = vi.fn();
+        toaster?.addEventListener('update:open', mockHandler);
+        const closeButton = container.querySelector('button');
+        expect(closeButton).toBeTruthy();
+        await fireEvent.click(closeButton);
+        expect(mockHandler).toHaveBeenCalledTimes(1);
+        expect(mockHandler.mock.calls[0][0].detail).toBe(false);
+    });
+    it('automatically closes after timeout', async () => {
+        vi.useFakeTimers();
+        const { container } = render(Toaster, {
+            props: {
+                open: true,
+                description: 'Timeout toaster',
+                timeout: 2000,
+            },
+        });
+        const toaster = container.querySelector('section');
+        const mockHandler = vi.fn();
+        toaster?.addEventListener('update:open', mockHandler);
+        vi.advanceTimersByTime(2000);
+        await waitFor(() => {
+            expect(mockHandler).toHaveBeenCalled();
+            expect(mockHandler.mock.calls[0][0].detail).toBe(false);
+        });
+        vi.useRealTimers();
+    });
+    it('shows progress bar when enabled', async () => {
+        vi.useFakeTimers();
+        const { container } = render(Toaster, {
+            props: {
+                open: true,
+                description: 'Progress toaster',
+                timeout: 3000,
+                progress: true,
+            },
+        });
+        const progressBar = container.querySelector('.mc-linear-progressbar-buffer__indicator');
+        expect(progressBar).toBeTruthy();
+        vi.advanceTimersByTime(1500);
+        await waitFor(() => {
+            const now = parseFloat(progressBar.getAttribute('aria-valuenow') || '0');
+            expect(now).toBeGreaterThan(0);
+            expect(now).toBeLessThanOrEqual(100);
+        });
+        vi.useRealTimers();
+    });
+    it('does not render close button when closable is false', () => {
+        const { container } = render(Toaster, {
+            props: {
+                open: true,
+                description: 'Non-closable toaster',
+                closable: false,
+            },
+        });
+        const closeButton = container.querySelector('button');
+        expect(closeButton).toBeNull();
+    });
+    it('does not show progress bar if progress is false', () => {
+        const { container } = render(Toaster, {
+            props: {
+                open: true,
+                description: 'No progress bar',
+                progress: false,
+                timeout: 3000,
+            },
+        });
+        const progressBar = container.querySelector('.mc-linear-progressbar-buffer');
+        expect(progressBar).toBeNull();
+    });
+});

package/dist/components/toaster/Toaster.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toaster/Toaster.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAMrE,QAAA,MAAM,IAAI,EAAE,IA4HX,CAAC;AACF,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,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAQpB,CAAC"}
+{"version":3,"file":"Toaster.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toaster/Toaster.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAMrE,QAAA,MAAM,IAAI,EAAE,IAsDX,CAAC;AACF,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,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;CAMtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAQpB,CAAC"}

package/dist/components/toaster/Toaster.stories.js

@@ -5,92 +5,24 @@ import { action } from 'storybook/actions';
 const meta = {
     title: 'Overlay/Toaster',
     component: 'm-toaster',
+    tags: ['v2'],
     parameters: {
         layout: 'fullscreen',
         docs: {
             story: { height: '300px' },
-            description: {
-                component: 'A toaster is a temporary notification that appears briefly on the screen to provide feedback or updates without interrupting the user’s workflow. It is commonly used for success messages, warnings, errors, or informational updates. Toasters can disappear automatically after a few seconds, be dismissed manually via a close button, or be removed when the user performs a relevant action. They typically include an icon, a short message, and an optional close button for better usability.',
-            },
         },
     },
     argTypes: {
-        open: {
-            control: 'boolean',
-            description: 'If true, displays the toaster.',
-            table: {
-                type: { summary: 'boolean' },
-                category: 'attributes',
-            },
-        },
         position: {
-            description: 'Position of the toaster.',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['top', 'bottom', 'top-center', 'bottom-center'],
-            table: {
-                type: { summary: `'top' | 'bottom' | 'top-center' | 'bottom-center'` },
-                defaultValue: { summary: "'top'" },
-                category: 'attributes',
-            },
-        },
-        description: {
-            control: 'text',
-            description: 'Description/message of the toaster.',
-            table: {
-                type: { summary: 'string' },
-                category: 'attributes',
-            },
         },
         status: {
-            control: { type: 'radio' },
-            options: ['warning', 'error', 'success', 'info'],
-            description: 'Status (determines icon and style).',
-            table: {
-                type: { summary: `'info' | 'success' | 'warning' | 'error'` },
-                defaultValue: { summary: "'info'" },
-                category: 'attributes',
-            },
-        },
-        closable: {
-            control: 'boolean',
-            description: 'If true, shows a close button.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: 'true' },
-                category: 'attributes',
-            },
-        },
-        progress: {
-            control: 'boolean',
-            description: 'If true, shows the progress indicator.',
-            table: {
-                type: { summary: 'boolean' },
-                category: 'attributes',
-            },
-        },
-        timeout: {
-            control: 'number',
-            description: 'Auto-dismiss timeout in milliseconds.',
-            table: {
-                type: { summary: 'number' },
-                category: 'attributes',
-            },
-        },
-        action: {
-            control: 'text',
-            description: 'Use this slot to insert a button or a link in the toaster',
-            table: {
-                type: { summary: 'any' },
-                category: 'slots',
-            },
+            control: 'radio',
+            options: ['info', 'success', 'warning', 'error'],
         },
         'update:open': {
-            control: 'text',
-            description: 'Emits when the checkbox value changes, updating the modelValue prop.',
-            table: {
-                type: { summary: 'boolean' },
-                category: 'events',
-            },
+            control: false,
         },
         '--toaster-z-index': {
             description: 'Customise the z-index of the toaster',