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

package/dist/components/toaster/Toaster.svelte

@@ -9,6 +9,9 @@
   import Cross20 from '@mozaic-ds/icons-svelte/svelte/Cross20/Cross20.svelte';
   /**
    * 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.
+   *
+   * @slot action - Use this slot to insert a button or a link in the toaster
+   * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.
    */
   interface Props {
     /**
@@ -50,6 +53,7 @@
     progress,
     timeout,
   }: Props = $props();
+  let element: HTMLElement;
 
   const iconMap = [
     { status: 'info', component: InfoCircleFilled32 },
@@ -76,8 +80,7 @@
       bubbles: true,
       composed: true,
     });
-    // @ts-ignore: `this` is the custom element instance
-    this.dispatchEvent(event);
+    element.dispatchEvent(event);
   };
 
   onMount(() => {
@@ -109,14 +112,20 @@
   });
 </script>
 
-<section 
-  class={["mc-toaster", open && 'is-open', `mc-toaster--${status}`, `mc-toaster--${position}`]} 
+<section
+  class={[
+    'mc-toaster',
+    open && 'is-open',
+    `mc-toaster--${status}`,
+    `mc-toaster--${position}`,
+  ]}
   role="status"
   tabindex="-1"
   aria-hidden={!open}
+  bind:this={element}
 >
   <span class="mc-toaster__icon" aria-hidden="true">
-    <selected.component/>
+    <selected.component />
   </span>
 
   <div class="mc-toaster__content">
@@ -128,8 +137,9 @@
   </div>
 
   {#if closable}
-    <button class="mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost" 
-      type="button" 
+    <button
+      class="mc-toaster__close mc-button mc-button--icon-button mc-button--inverse mc-button--s mc-button--ghost"
+      type="button"
       aria-label="Close"
       onclick={onClose}
     >
@@ -156,22 +166,38 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-button {
-  color: #ffffff;
-  background-color: #464e63;
-  font-weight: 600;
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+}
+.mc-button:hover {
+  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
+}
+.mc-button:active {
+  background-color: var(--button-color-filled-standard-active-background, #242938);
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button {
+  font-weight: var(--font-weight-semi-bold, 600);
   padding: 0 calc(1rem - 0.125rem);
   min-height: 3rem;
   min-width: 3rem;
+}
+.mc-button .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button {
   display: inline-flex;
   justify-content: center;
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: 0.25rem;
+  border-radius: var(--button-radius, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -181,23 +207,8 @@
   gap: 0.25rem;
   cursor: pointer;
 }
-.mc-button:hover {
-  background-color: #343b4c;
-}
-.mc-button:active {
-  background-color: #242938;
-}
-.mc-button:disabled {
-  background-color: #d9d9d9;
-  border-color: transparent;
-  color: #737373;
-  cursor: not-allowed;
-}
-.mc-button .mc-button__label {
-  font-size: 1rem;
-}
 .mc-button__label {
-  font-size: 1rem;
+  font-size: var(--font-size-150, 1rem);
 }
 .mc-button__icon {
   flex-shrink: 0;
@@ -205,13 +216,13 @@
   height: 1.5rem;
 }
 .mc-button:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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;
 }
@@ -221,7 +232,7 @@
   min-width: 2rem;
 }
 .mc-button--s .mc-button__label {
-  font-size: 0.875rem;
+  font-size: var(--font-size-100, 0.875rem);
 }
 .mc-button--s .mc-button__icon {
   width: 1.25rem;
@@ -237,7 +248,7 @@
   min-width: 3rem;
 }
 .mc-button--m .mc-button__label {
-  font-size: 1rem;
+  font-size: var(--font-size-150, 1rem);
 }
 .mc-button--m .mc-button__icon {
   width: 1.5rem;
@@ -253,7 +264,7 @@
   min-width: 4rem;
 }
 .mc-button--l .mc-button__label {
-  font-size: 1.125rem;
+  font-size: var(--font-size-200, 1.125rem);
 }
 .mc-button--l .mc-button__icon {
   width: 2rem;
@@ -267,90 +278,90 @@
   padding: 0.25rem;
 }
 .mc-button--outlined {
-  color: #242938;
-  border-color: #8891aa;
-  background-color: #ffffff;
+  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:hover {
-  background-color: #eff1f6;
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
 }
 .mc-button--outlined:active {
-  background-color: #c9d0de;
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
 }
 .mc-button--outlined:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost {
-  color: #242938;
-  background-color: rgba(255, 255, 255, 0.01);
+  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:hover {
-  background-color: rgba(70, 78, 99, 0.1);
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
 }
 .mc-button--ghost:active {
-  background-color: rgba(70, 78, 99, 0.2);
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
 }
 .mc-button--ghost:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--accent {
-  color: #ffffff;
-  background-color: #117f03;
+  color: var(--button-color-filled-accent-font, #ffffff);
+  background-color: var(--button-color-filled-accent-background, #117f03);
 }
 .mc-button--accent:hover {
-  background-color: #006902;
+  background-color: var(--button-color-filled-accent-hover-background, #006902);
 }
 .mc-button--accent:active {
-  background-color: #035010;
+  background-color: var(--button-color-filled-accent-active-background, #035010);
 }
 .mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--danger {
-  color: #ffffff;
-  background-color: #c61112;
+  color: var(--button-color-filled-danger-font, #ffffff);
+  background-color: var(--button-color-filled-danger-background, #c61112);
 }
 .mc-button--danger:hover {
-  background-color: #8c0003;
+  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
 }
 .mc-button--danger:active {
-  background-color: #530000;
+  background-color: var(--button-color-filled-danger-active-background, #530000);
 }
 .mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--inverse {
-  --focus-color-mid: #000000;
-  --focus-color-outer: #ffffff;
-  color: #242938;
-  background-color: #ffffff;
+  --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:hover {
-  background-color: #e6e6e6;
+  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
 }
 .mc-button--inverse:active {
-  background-color: #cccccc;
+  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
 }
 .mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {
@@ -362,152 +373,152 @@
   visibility: hidden;
 }
 .mc-button--outlined.mc-button--standard {
-  color: #242938;
-  border-color: #8891aa;
-  background-color: #ffffff;
+  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:hover {
-  background-color: #eff1f6;
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
 }
 .mc-button--outlined.mc-button--standard:active {
-  background-color: #c9d0de;
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
 }
 .mc-button--outlined.mc-button--standard:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--accent {
-  color: #117f03;
-  border-color: #78be20;
-  background-color: #ffffff;
+  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:hover {
-  background-color: #ebf5de;
+  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
 }
 .mc-button--outlined.mc-button--accent:active {
-  background-color: #c5e39e;
+  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
 }
 .mc-button--outlined.mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--danger {
-  color: #c61112;
-  border-color: #ef5f5c;
-  background-color: #ffffff;
+  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:hover {
-  background-color: #fdeaea;
+  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
 }
 .mc-button--outlined.mc-button--danger:active {
-  background-color: #f8bcbb;
+  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
 }
 .mc-button--outlined.mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--outlined.mc-button--inverse {
-  color: #ffffff;
-  border-color: #ffffff;
-  background-color: rgba(255, 255, 255, 0.01);
+  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:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
 }
 .mc-button--outlined.mc-button--inverse:active {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
 }
 .mc-button--outlined.mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--standard {
-  color: #242938;
-  background-color: rgba(255, 255, 255, 0.01);
+  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:hover {
-  background-color: rgba(70, 78, 99, 0.1);
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
 }
 .mc-button--ghost.mc-button--standard:active {
-  background-color: rgba(70, 78, 99, 0.2);
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
 }
 .mc-button--ghost.mc-button--standard:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--accent {
-  color: #117f03;
-  background-color: rgba(255, 255, 255, 0.01);
+  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:hover {
-  background-color: rgba(17, 127, 3, 0.1);
+  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
 }
 .mc-button--ghost.mc-button--accent:active {
-  background-color: rgba(17, 127, 3, 0.2);
+  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
 }
 .mc-button--ghost.mc-button--accent:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--danger {
-  color: #c61112;
-  background-color: rgba(255, 255, 255, 0.01);
+  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:hover {
-  background-color: rgba(198, 17, 18, 0.1);
+  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
 }
 .mc-button--ghost.mc-button--danger:active {
-  background-color: rgba(198, 17, 18, 0.2);
+  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
 }
 .mc-button--ghost.mc-button--danger:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 .mc-button--ghost.mc-button--inverse {
-  color: #ffffff;
-  background-color: rgba(255, 255, 255, 0.01);
+  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:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
 }
 .mc-button--ghost.mc-button--inverse:active {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
 }
 .mc-button--ghost.mc-button--inverse:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--button-state-disabled-background, #d9d9d9);
   border-color: transparent;
-  color: #737373;
+  color: var(--button-state-disabled-color, #737373);
   cursor: not-allowed;
 }
 
 .mc-linear-progressbar-buffer {
   --progress-value: 40;
-  background-color: #c9d0de;
+  background-color: var(--progressbar-color-background, #c9d0de);
   height: 0.25rem;
   position: relative;
   min-width: 6rem;
-  border-radius: 1rem;
+  border-radius: var(--radius-l, 1rem);
 }
 .mc-linear-progressbar-buffer__indicator {
-  background-color: #464e63;
+  background-color: var(--progressbar-color-indicator, #464e63);
   height: 100%;
   transition: width 0.4s ease;
   overflow: hidden;
-  border-radius: 1rem;
+  border-radius: var(--radius-l, 1rem);
   box-sizing: border-box;
   width: calc(var(--progress-value) * 1%);
 }
@@ -522,11 +533,11 @@
 /* create columns */
 /* create custom named columns with custom content */
 .mc-toaster {
-  border-radius: 0.5rem;
+  border-radius: var(--radius-m, 0.5rem);
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;
-  background: #002a41;
+  background: var(--toaster-color-background-information, #002a41);
   min-height: 3.5rem;
   min-width: 18rem;
   position: absolute;
@@ -534,7 +545,7 @@
   right: 1.5rem;
   margin-left: 1.5rem;
   box-sizing: border-box;
-  color: #ffffff;
+  color: var(--toaster-color-text, #ffffff);
   z-index: var(--toaster-z-index, 4);
   opacity: 0;
   visibility: hidden;
@@ -550,7 +561,7 @@
   width: 2rem;
   height: 2rem;
   margin: 0.75rem;
-  fill: #3facd7;
+  fill: var(--toaster-color-icon-information, #3facd7);
 }
 .mc-toaster__content {
   flex: 1 1 0;
@@ -570,44 +581,44 @@
 .mc-toaster__message {
   flex: 1 1 0;
   margin: 0;
-  font-size: 1rem;
-  line-height: 1.3;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-s, 1.3);
 }
 .mc-toaster--information {
-  background: #002a41;
+  background: var(--toaster-color-background-information, #002a41);
 }
 .mc-toaster--information .mc-toaster__icon {
-  fill: #3facd7;
+  fill: var(--toaster-color-icon-information, #3facd7);
 }
 .mc-toaster--information .mc-toaster__indicator {
-  --progressbar-color-indicator: #3facd7;
+  --progressbar-color-indicator: var(--toaster-color-icon-information, #3facd7);
 }
 .mc-toaster--success {
-  background: #023618;
+  background: var(--toaster-color-background-success, #023618);
 }
 .mc-toaster--success .mc-toaster__icon {
-  fill: #78be20;
+  fill: var(--toaster-color-icon-success, #78be20);
 }
 .mc-toaster--success .mc-toaster__indicator {
-  --progressbar-color-indicator: #78be20;
+  --progressbar-color-indicator: var(--toaster-color-icon-success, #78be20);
 }
 .mc-toaster--warning {
-  background: #360e00;
+  background: var(--toaster-color-background-warning, #360e00);
 }
 .mc-toaster--warning .mc-toaster__icon {
-  fill: #ef934a;
+  fill: var(--toaster-color-icon-warning, #ef934a);
 }
 .mc-toaster--warning .mc-toaster__indicator {
-  --progressbar-color-indicator: #ef934a;
+  --progressbar-color-indicator: var(--toaster-color-icon-warning, #ef934a);
 }
 .mc-toaster--error {
-  background: #2d0000;
+  background: var(--toaster-color-background-error, #2d0000);
 }
 .mc-toaster--error .mc-toaster__icon {
-  fill: #ef5f5c;
+  fill: var(--toaster-color-icon-error, #ef5f5c);
 }
 .mc-toaster--error .mc-toaster__indicator {
-  --progressbar-color-indicator: #ef5f5c;
+  --progressbar-color-indicator: var(--toaster-color-icon-error, #ef5f5c);
 }
 .mc-toaster--bottom {
   top: inherit;
@@ -628,8 +639,8 @@
 .mc-toaster__indicator {
   width: 100%;
   margin: 0.5rem;
-  --progressbar-color-indicator: #3facd7;
-  --progressbar-color-background: #ffffff;
+  --progressbar-color-indicator: var(--toaster-color-icon-information, #3facd7);
+  --progressbar-color-background: var(--color-background-primary, #ffffff);
 }
 .mc-toaster__close {
   margin: 0.25rem;

package/dist/components/toaster/Toaster.svelte.d.ts

@@ -1,5 +1,8 @@
 /**
  * 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.
+ *
+ * @slot action - Use this slot to insert a button or a link in the toaster
+ * @event update:open {CustomEvent<boolean>} - Fired when the open state changes.
  */
 interface Props {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toaster/Toaster.svelte.ts"],"names":[],"mappings":"AAUE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,YAAY,GAAG,eAAe,CAAC;IAC7D;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA8GH,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,OAAO;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Toaster.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toaster/Toaster.svelte.ts"],"names":[],"mappings":"AAUE;;;;;GAKG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,YAAY,GAAG,eAAe,CAAC;IAC7D;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAmHH,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,OAAO;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/components/toggle/README.md

@@ -0,0 +1,15 @@
+# `m-toggle`
+
+A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the toggle, used to associate the label with the form element. | `string` |   |
+| `name` | The name attribute for the toggle element, typically used for form submission. | `string` |   |
+| `label` | The text label displayed next to the toggle. | `string` |   |
+| `checked` | The toggle's checked state. | `boolean` | `$bindable(false)` |
+| `size` | Determines the size of the toggle. | `'s'` `'m'` | `s` |
+| `disabled` | If `true`, disables the toggle, making it non-interactive. | `boolean` |   |
+