npm - @mozaic-ds/web-components - Versions diffs - 1.0.0 → 1.2.0 - Mend

@mozaic-ds/web-components 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (326) hide show

package/dist/components/toaster/Toaster.svelte CHANGED Viewed

@@ -42,6 +42,10 @@
      * Duration of the toaster
      */
     timeout?: number;
+    /**
+     * Callback fired when the toaster open state changes.
+     */
+    onUpdateOpen?: (open: boolean) => void;
   }
   let {
@@ -52,6 +56,7 @@
     closable = true,
     progress,
     timeout,
+    onUpdateOpen,
   }: Props = $props();
   let element: HTMLElement;
@@ -75,6 +80,8 @@
   const onClose = () => {
     open = false;
+    onUpdateOpen?.(open);
     const event = new CustomEvent('update:open', {
       detail: open,
       bubbles: true,
@@ -113,12 +120,7 @@
 </script>
 <section
-  class={[
-    'mc-toaster',
-    open && 'is-open',
-    `mc-toaster--${status}`,
-    `mc-toaster--${position}`,
-  ]}
+  class={['mc-toaster', open && 'is-open', `mc-toaster--${status}`, `mc-toaster--${position}`]}
   role="status"
   tabindex="-1"
   aria-hidden={!open}
@@ -148,9 +150,7 @@
   {/if}
   {#if progress}
-    <div
-      class="mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m"
-    >
+    <div class="mc-toaster__indicator mc-linear-progressbar-buffer mc-linear-progressbar-buffer--m">
       <div
         class="mc-linear-progressbar-buffer__indicator"
         role="progressbar"
@@ -197,7 +197,7 @@
   vertical-align: middle;
   text-align: center;
   border: 2px solid transparent;
-  border-radius: var(--button-radius, 0.25rem);
+  border-radius: var(--button-border-radius-s, 0.25rem);
   transition: all ease 200ms;
   transition: box-shadow 200ms ease;
   align-items: center;
@@ -361,7 +361,7 @@
   cursor: not-allowed;
 }
 .mc-button--icon-button {
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   padding: 0;
 }
 .mc-button--loading .mc-button__loader {
@@ -511,14 +511,14 @@
   height: 0.25rem;
   position: relative;
   min-width: 6rem;
-  border-radius: var(--radius-l, 1rem);
+  border-radius: var(--border-radius-l, 1rem);
 }
 .mc-linear-progressbar-buffer__indicator {
   background-color: var(--progressbar-color-indicator, #464e63);
   height: 100%;
   transition: width 0.4s ease;
   overflow: hidden;
-  border-radius: var(--radius-l, 1rem);
+  border-radius: var(--border-radius-l, 1rem);
   box-sizing: border-box;
   width: calc(var(--progress-value) * 1%);
 }
@@ -529,15 +529,12 @@
   height: 0.5rem;
 }
-/* create columns */
-/* create columns */
-/* create custom named columns with custom content */
 .mc-toaster {
-  border-radius: var(--radius-m, 0.5rem);
+  border-radius: var(--border-radius-m, 0.5rem);
+  background: var(--toaster-color-background-info, #002a41);
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;
-  background: var(--toaster-color-background-information, #002a41);
   min-height: 3.5rem;
   min-width: 18rem;
   position: absolute;
@@ -561,7 +558,7 @@
   width: 2rem;
   height: 2rem;
   margin: 0.75rem;
-  fill: var(--toaster-color-icon-information, #3facd7);
+  fill: var(--toaster-color-icon-info, #3facd7);
 }
 .mc-toaster__content {
   flex: 1 1 0;
@@ -585,13 +582,13 @@
   line-height: var(--line-height-s, 1.3);
 }
 .mc-toaster--information {
-  background: var(--toaster-color-background-information, #002a41);
+  background: var(--toaster-color-background-info, #002a41);
 }
 .mc-toaster--information .mc-toaster__icon {
-  fill: var(--toaster-color-icon-information, #3facd7);
+  fill: var(--toaster-color-icon-info, #3facd7);
 }
 .mc-toaster--information .mc-toaster__indicator {
-  --progressbar-color-indicator: var(--toaster-color-icon-information, #3facd7);
+  --progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);
 }
 .mc-toaster--success {
   background: var(--toaster-color-background-success, #023618);
@@ -639,7 +636,7 @@
 .mc-toaster__indicator {
   width: 100%;
   margin: 0.5rem;
-  --progressbar-color-indicator: var(--toaster-color-icon-information, #3facd7);
+  --progressbar-color-indicator: var(--toaster-color-icon-info, #3facd7);
   --progressbar-color-background: var(--color-background-primary, #ffffff);
 }
 .mc-toaster__close {

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

@@ -33,6 +33,10 @@ interface Props {
      * Duration of the toaster
      */
     timeout?: number;
+    /**
+     * Callback fired when the toaster open state changes.
+     */
+    onUpdateOpen?: (open: boolean) => void;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

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

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAiHH,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/Toggle.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{c as z,p as L,a as M,b as l,f as C,t as p,i as E,j as P,d as f,k as r,s as B,r as v,e as H,g as y,h as j}from"../../custom-element.js";import{i as D}from"../../if.js";import{r as F,s as w}from"../../attributes.js";import{a as S}from"../../input.js";import{c as T}from"../../custom-element-forward-events.js";var Y=C('<span class="mc-toggle__label svelte-26wadt"> </span>'),q=C('<div><label class="mc-toggle__container svelte-26wadt"><input type="checkbox" class="mc-toggle__input svelte-26wadt"/> <!></label></div>');const A={hash:"svelte-26wadt",code:`/**
+import{c as z,p as L,a as M,b as l,f as b,t as p,i as E,j as P,d as f,k as r,s as B,r as v,e as H,g as y,h as j}from"../../custom-element.js";import{i as D}from"../../if.js";import{r as F,s as w}from"../../attributes.js";import{a as S}from"../../input.js";import{c as T}from"../../custom-element-forward-events.js";var Y=b('<span class="mc-toggle__label svelte-26wadt"> </span>'),q=b('<div><label class="mc-toggle__container svelte-26wadt"><input type="checkbox" class="mc-toggle__input svelte-26wadt"/> <!></label></div>');const A={hash:"svelte-26wadt",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-toggle.svelte-26wadt {width:fit-content;}.mc-toggle__container.svelte-26wadt {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-26wadt::before, .mc-toggle__container.svelte-26wadt::after {content:"";}.mc-toggle__container.svelte-26wadt::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-26wadt::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-26wadt {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-26wadt {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt) {cursor:not-allowed;}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::after {background-color:var(--forms-color-icon-disabled, #737373);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__label:where(.svelte-26wadt) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled:checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):focus-visible) .mc-toggle__container:where(.svelte-26wadt)::before {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-toggle--m.svelte-26wadt .mc-toggle__container:where(.svelte-26wadt)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-26wadt .mc-toggle__container:where(.svelte-26wadt)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):disabled:checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-26wadt .mc-toggle__label:where(.svelte-26wadt) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function G(u,t){L(t,!0),M(u,A);let d=l(t,"id",7),i=l(t,"name",7),o=l(t,"label",7),g=l(t,"checked",15,!1),c=l(t,"disabled",7),h=l(t,"size",7,"s");var b={get id(){return d()},set id(e){d(e),r()},get name(){return i()},set name(e){i(e),r()},get label(){return o()},set label(e){o(e),r()},get checked(){return g()},set checked(e=!1){g(e),r()},get disabled(){return c()},set disabled(e){c(e),r()},get size(){return h()},set size(e="s"){h(e),r()}},s=q(),n=f(s),a=f(n);F(a);var _=B(a,2);{var k=e=>{var m=Y(),x=f(m,!0);v(m),p(()=>j(x,o())),E(e,m)};D(_,e=>{o()&&e(k)})}return v(n),v(s),p(()=>{H(s,1,y(["mc-toggle",`mc-toggle--${h()}`]),"svelte-26wadt"),w(n,"for",d()),w(a,"id",d()),w(a,"name",i()),a.disabled=c()}),S(a,g),E(u,s),P(b)}customElements.define("m-toggle",z(G,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},id:{},name:{},label:{},disabled:{},size:{}},[],[],!0,T));
+ */.mc-toggle.svelte-26wadt {width:fit-content;}.mc-toggle__container.svelte-26wadt {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-26wadt::before, .mc-toggle__container.svelte-26wadt::after {content:"";}.mc-toggle__container.svelte-26wadt::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--border-radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-26wadt::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--border-radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-26wadt {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-26wadt {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt) {cursor:not-allowed;}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::after {background-color:var(--forms-color-icon-disabled, #737373);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__label:where(.svelte-26wadt) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):disabled:checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-26wadt:has(:where(.svelte-26wadt):focus-visible) .mc-toggle__container:where(.svelte-26wadt)::before {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-toggle--m.svelte-26wadt .mc-toggle__container:where(.svelte-26wadt)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-26wadt .mc-toggle__container:where(.svelte-26wadt)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):disabled) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-26wadt:has(:where(.svelte-26wadt):disabled:checked) .mc-toggle__container:where(.svelte-26wadt)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-26wadt .mc-toggle__label:where(.svelte-26wadt) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function G(u,t){L(t,!0),M(u,A);let d=l(t,"id",7),i=l(t,"name",7),o=l(t,"label",7),g=l(t,"checked",15,!1),c=l(t,"disabled",7),h=l(t,"size",7,"s");var C={get id(){return d()},set id(e){d(e),r()},get name(){return i()},set name(e){i(e),r()},get label(){return o()},set label(e){o(e),r()},get checked(){return g()},set checked(e=!1){g(e),r()},get disabled(){return c()},set disabled(e){c(e),r()},get size(){return h()},set size(e="s"){h(e),r()}},s=q(),n=f(s),a=f(n);F(a);var _=B(a,2);{var k=e=>{var m=Y(),x=f(m,!0);v(m),p(()=>j(x,o())),E(e,m)};D(_,e=>{o()&&e(k)})}return v(n),v(s),p(()=>{H(s,1,y(["mc-toggle",`mc-toggle--${h()}`]),"svelte-26wadt"),w(n,"for",d()),w(a,"id",d()),w(a,"name",i()),a.disabled=c()}),S(a,g),E(u,s),P(C)}customElements.define("m-toggle",z(G,{checked:{attribute:"checked",reflect:!0,type:"Boolean"},id:{},name:{},label:{},disabled:{},size:{}},[],[],!0,T));
 //# sourceMappingURL=Toggle.js.map

package/dist/components/toggle/Toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toggle.js","sources":["../../../src/components/toggle/Toggle.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-toggle',\n props: {\n checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\n },\n extend: customElementForwardEvents,\n }}\n/>\n\n<script lang=\"ts\">\n import { customElementForwardEvents } from '../../utils';\n /*\n 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.\n /\n interface Props {\n /\n A unique identifier for the toggle, used to associate the label with the form element.\n /\n id: string;\n /\n The name attribute for the toggle element, typically used for form submission.\n /\n name?: string;\n /\n The text label displayed next to the toggle.\n /\n label?: string;\n /\n The toggle's checked state.\n /\n checked?: boolean;\n /\n Determines the size of the toggle.\n /\n size?: 's' \| 'm';\n /\n If `true`, disables the toggle, making it non-interactive.\n */\n disabled?: boolean;\n }\n\n let {\n id~~,\n~~ name~~,\n~~ label~~,\n~~ checked = $bindable(false)~~,\n~~ disabled~~,\n~~ size = 's'~~,\n~~ }: Props = $props();\n</script>\n\n<div class={['mc-toggle', `mc-toggle--${size}`]}>\n <label class=\"mc-toggle__container\" for={id}>\n <input\n {id}\n type=\"checkbox\"\n class=\"mc-toggle__input\"\n {name}\n {disabled}\n bind:checked\n />\n {#if label}\n <span class=\"mc-toggle__label\">{label}</span>\n {/if}\n </label>\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/toggle';\n</style>\n"],"names":["id","$.prop","$$props","name","label","checked","disabled","size","$$render","consequent","$.set_class","div","$.clsx","customElementForwardEvents"],"mappings":";;~~srPAAA~~,~~oBA2CIA~~,EAAEC,EAAAC,EAAA,KAAA,CAAA,~~EACFC~~,EAAIF,EAAAC,EAAA,OAAA,CAAA,~~EACJE~~,EAAKH,EAAAC,EAAA,QAAA,CAAA,~~EACLG~~,mBAAoB,EAAK,~~EACzBC~~,EAAQL,EAAAC,EAAA,WAAA,CAAA,~~EACRK~~,eAAO,GAAG,~~sLAFU~~,GAAK,~~kGAElB~~,IAAG,~~gGAewBH~~,EAAK,CAAA,CAAA,kBADlCA,EAAK,GAAAI,EAAAC,CAAA,~~4BAVDC~~,EAAAC,EAAA,EAAAC,EAAA,CAAA,0BAA2BL,EAAI,CAAA,EAAA,CAAA,EAAA,eAAA,YACDP,GAAE,mEAH7C,~~oJA5CYa~~"}
1	+ {"version":3,"file":"Toggle.js","sources":["../../../src/components/toggle/Toggle.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-toggle',\n props: {\n checked: { reflect: true, type: 'Boolean', attribute: 'checked' },\n },\n extend: customElementForwardEvents,\n }}\n/>\n\n<script lang=\"ts\">\n import { customElementForwardEvents } from '../../utils';\n /*\n 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.\n /\n interface Props {\n /\n A unique identifier for the toggle, used to associate the label with the form element.\n /\n id: string;\n /\n The name attribute for the toggle element, typically used for form submission.\n /\n name?: string;\n /\n The text label displayed next to the toggle.\n /\n label?: string;\n /\n The toggle's checked state.\n /\n checked?: boolean;\n /\n Determines the size of the toggle.\n /\n size?: 's' \| 'm';\n /\n If `true`, disables the toggle, making it non-interactive.\n */\n disabled?: boolean;\n }\n\n let { id, name, label, checked = $bindable(false), disabled, size = 's' }: Props = $props();\n</script>\n\n<div class={['mc-toggle', `mc-toggle--${size}`]}>\n <label class=\"mc-toggle__container\" for={id}>\n <input {id} type=\"checkbox\" class=\"mc-toggle__input\" {name} {disabled} bind:checked />\n {#if label}\n <span class=\"mc-toggle__label\">{label}</span>\n {/if}\n </label>\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/toggle';\n</style>\n"],"names":["id","$.prop","$$props","name","label","checked","disabled","size","$$render","consequent","$.set_class","div","$.clsx","customElementForwardEvents"],"mappings":";;osPAAA,oBA0CQA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EAAEG,mBAAoB,EAAK,EAAGC,EAAQL,EAAAC,EAAA,WAAA,CAAA,EAAEK,eAAO,GAAG,sLAA5B,GAAK,kGAAoB,IAAG,gGAOnCH,EAAK,CAAA,CAAA,kBADlCA,EAAK,GAAAI,EAAAC,CAAA,4BAHDC,EAAAC,EAAA,EAAAC,EAAA,CAAA,0BAA2BL,EAAI,CAAA,EAAA,CAAA,EAAA,eAAA,YACDP,GAAE,mEAH7C,oJArCYa"}

package/dist/components/toggle/Toggle.svelte CHANGED Viewed

@@ -40,26 +40,12 @@
     disabled?: boolean;
   }
-  let {
-    id,
-    name,
-    label,
-    checked = $bindable(false),
-    disabled,
-    size = 's',
-  }: Props = $props();
+  let { id, name, label, checked = $bindable(false), disabled, size = 's' }: Props = $props();
 </script>
 <div class={['mc-toggle', `mc-toggle--${size}`]}>
   <label class="mc-toggle__container" for={id}>
-    <input
-      {id}
-      type="checkbox"
-      class="mc-toggle__input"
-      {name}
-      {disabled}
-      bind:checked
-    />
+    <input {id} type="checkbox" class="mc-toggle__input" {name} {disabled} bind:checked />
     {#if label}
       <span class="mc-toggle__label">{label}</span>
     {/if}
@@ -88,7 +74,7 @@
   height: 1.5rem;
   width: 2.5rem;
   background-color: var(--forms-color-background-unchecked, #666666);
-  border-radius: var(--radius-l, 1rem);
+  border-radius: var(--border-radius-l, 1rem);
   flex-shrink: 0;
 }
 .mc-toggle__container::after {
@@ -96,7 +82,7 @@
   width: 1.25rem;
   background-color: var(--forms-color-icon-inverse, #ffffff);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   background-position: center;
   left: 0.375rem;
   position: absolute;

package/dist/components/toggle/Toggle.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;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,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;~~AAoCH~~,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;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,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BH,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/togglegroup/ToggleGroup.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import{c as B,a as H,b as h,f as E,t as v,i as u,j,p as A,l as D,r as d,e as z,g as F,k as g,d as w,s as G,m as t,h as S}from"../../custom-element.js";import{i as T}from"../../if.js";import{e as Y,i as q}from"../../each.js";import{r as I,s as x}from"../../attributes.js";import{b as J}from"../../input.js";import{c as K}from"../../custom-element-forward-events.js";var N=E('<span class="mc-toggle__label svelte-1p7hz9f"> </span>'),O=E('<div><label class="mc-toggle__container svelte-1p7hz9f"><input class="mc-toggle__input svelte-1p7hz9f" type="checkbox"/> <!></label></div>'),Q=E("<div></div>");const R={hash:"svelte-1p7hz9f",code:`/**
+import{c as B,a as H,b as h,f as E,t as v,i as u,j,p as A,l as D,r as d,e as z,g as F,k as g,d as w,s as G,m as t,h as S}from"../../custom-element.js";import{i as T}from"../../if.js";import{e as Y}from"../../each.js";import{r as q,s as x}from"../../attributes.js";import{b as I}from"../../input.js";import{c as J}from"../../custom-element-forward-events.js";var K=E('<span class="mc-toggle__label svelte-1p7hz9f"> </span>'),N=E('<div><label class="mc-toggle__container svelte-1p7hz9f"><input class="mc-toggle__input svelte-1p7hz9f" type="checkbox"/> <!></label></div>'),O=E("<div></div>");const Q={hash:"svelte-1p7hz9f",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-field__content.svelte-1p7hz9f {margin-top:0.5rem;}
-/* stylelint-enable string-no-newline */.mc-toggle.svelte-1p7hz9f {width:fit-content;}.mc-toggle__container.svelte-1p7hz9f {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-1p7hz9f::before, .mc-toggle__container.svelte-1p7hz9f::after {content:"";}.mc-toggle__container.svelte-1p7hz9f::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-1p7hz9f::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-1p7hz9f {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-1p7hz9f {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f) {cursor:not-allowed;}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-color:var(--forms-color-icon-disabled, #737373);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__label:where(.svelte-1p7hz9f) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled:checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):focus-visible) .mc-toggle__container:where(.svelte-1p7hz9f)::before {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-toggle--m.svelte-1p7hz9f .mc-toggle__container:where(.svelte-1p7hz9f)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-1p7hz9f .mc-toggle__container:where(.svelte-1p7hz9f)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled:checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-1p7hz9f .mc-toggle__label:where(.svelte-1p7hz9f) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-field__content.svelte-1p7hz9f:where(.mc-field__content--inline:where(.svelte-1p7hz9f)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function U(C,r){A(r,!0),H(C,R);const k=[];let f=h(r,"name",7),i=h(r,"value",31,()=>D([])),n=h(r,"options",7),c=h(r,"inline",7);var L={get name(){return f()},set name(e){f(e),g()},get value(){return i()},set value(e=[]){i(e),g()},get options(){return n()},set options(e){n(e),g()},get inline(){return c()},set inline(e){c(e),g()}},o=Q();return Y(o,21,n,q,(e,l)=>{var s=O(),_=w(s),a=w(_);I(a);var b,M=G(a,2);{var P=m=>{var p=N(),y=w(p,!0);d(p),v(()=>S(y,t(l).label)),u(m,p)};T(M,m=>{t(l).label&&m(P)})}d(_),d(s),v(()=>{z(s,1,`mc-toggle mc-field__item ${t(l).label?"":" mc-toggle--hide-label"} ${t(l).size==="m"?" mc-toggle--m":""}`,"svelte-1p7hz9f"),x(a,"id",t(l).id),x(a,"name",f()),a.disabled=t(l).disabled,b!==(b=t(l).value)&&(a.value=(a.__value=t(l).value)??"")}),J(k,[],a,()=>(t(l).value,i()),i),u(e,s)}),d(o),v(()=>z(o,1,F(["mc-field__content",c()&&"mc-field__content--inline"]),"svelte-1p7hz9f")),u(C,o),j(L)}customElements.define("m-toggle-group",B(U,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},value:{},inline:{}},[],[],!0,K));
+/* stylelint-enable string-no-newline */.mc-toggle.svelte-1p7hz9f {width:fit-content;}.mc-toggle__container.svelte-1p7hz9f {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-1p7hz9f::before, .mc-toggle__container.svelte-1p7hz9f::after {content:"";}.mc-toggle__container.svelte-1p7hz9f::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--border-radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-1p7hz9f::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--border-radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-1p7hz9f {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-1p7hz9f {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f) {cursor:not-allowed;}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-color:var(--forms-color-icon-disabled, #737373);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__label:where(.svelte-1p7hz9f) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled:checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):focus-visible) .mc-toggle__container:where(.svelte-1p7hz9f)::before {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-toggle--m.svelte-1p7hz9f .mc-toggle__container:where(.svelte-1p7hz9f)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-1p7hz9f .mc-toggle__container:where(.svelte-1p7hz9f)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-1p7hz9f:has(:where(.svelte-1p7hz9f):disabled:checked) .mc-toggle__container:where(.svelte-1p7hz9f)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-1p7hz9f .mc-toggle__label:where(.svelte-1p7hz9f) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-field__content.svelte-1p7hz9f:where(.mc-field__content--inline:where(.svelte-1p7hz9f)) {display:flex;flex-flow:row wrap;gap:0.25rem 1rem;}`};function R(b,r){A(r,!0),H(b,Q);const k=[];let f=h(r,"name",7),i=h(r,"value",31,()=>D([])),c=h(r,"options",7),n=h(r,"inline",7);var L={get name(){return f()},set name(e){f(e),g()},get value(){return i()},set value(e=[]){i(e),g()},get options(){return c()},set options(e){c(e),g()},get inline(){return n()},set inline(e){n(e),g()}},o=O();return Y(o,21,c,e=>e.id,(e,l)=>{var s=N(),C=w(s),a=w(C);q(a);var _,M=G(a,2);{var P=m=>{var p=K(),y=w(p,!0);d(p),v(()=>S(y,t(l).label)),u(m,p)};T(M,m=>{t(l).label&&m(P)})}d(C),d(s),v(()=>{z(s,1,`mc-toggle mc-field__item ${t(l).label?"":" mc-toggle--hide-label"} ${t(l).size==="m"?" mc-toggle--m":""}`,"svelte-1p7hz9f"),x(a,"id",t(l).id),x(a,"name",f()),a.disabled=t(l).disabled,_!==(_=t(l).value)&&(a.value=(a.__value=t(l).value)??"")}),I(k,[],a,()=>(t(l).value,i()),i),u(e,s)}),d(o),v(()=>z(o,1,F(["mc-field__content",n()&&"mc-field__content--inline"]),"svelte-1p7hz9f")),u(b,o),j(L)}customElements.define("m-toggle-group",B(R,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},value:{},inline:{}},[],[],!0,J));
 //# sourceMappingURL=ToggleGroup.js.map

package/dist/components/togglegroup/ToggleGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleGroup.js","sources":["../../../src/components/togglegroup/ToggleGroup.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-toggle-group',\n props: {\n options: { reflect: true, type: 'Array', attribute: 'options' },\n },\n extend: customElementForwardEvents,\n }}\n/>\n\n<script lang=\"ts\">\n import { customElementForwardEvents } from '../../utils';\n /*\n 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.\n /\n interface Props {\n /\n The name attribute for the toggle element, typically used for form submission.\n /\n name: string;\n /\n The current value of the toggle group.\n /\n value?: Array<string>;\n /\n List of properties of each toggle of the toggle group.\n /\n options: Array<{\n id: string;\n label: string;\n value: string;\n disabled?: boolean;\n size?: 's' \| 'm';\n }>;\n /\n If `true`, make the form element of the group inline.\n */\n inline?: boolean;\n }\n\n let { name, value = $bindable([]), options, inline }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n {#each options as option}\n <div\n class=\"mc-toggle mc-field__item {!option.label\n ? ' mc-toggle--hide-label'\n : ''} {option.size === 'm' ? ' mc-toggle--m' : ''}\"\n >\n <label class=\"mc-toggle__container\">\n <input\n class=\"mc-toggle__input\"\n id={option.id}\n {name}\n type=\"checkbox\"\n bind:group={value}\n value={option.value}\n disabled={option.disabled}\n />\n {#if option.label}\n <span class=\"mc-toggle__label\">{option.label}</span>\n {/if}\n </label>\n </div>\n {/each}\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/field';\n @use '@mozaic-ds/styles/components/toggle';\n\n .mc-field__content:where(.mc-field__content--inline) {\n display: flex;\n flex-flow: row wrap;\n gap: 0.25rem 1rem;\n }\n</style>\n"],"names":["name","$.prop","$$props","value","$.proxy","options","inline","$.each","div","option","$.template_effect","$.set_text","text","$.get","$$render","consequent","$.set_class","div_1","$.set_attribute","input","input_value","customElementForwardEvents"],"mappings":";;;;;~~w5PAAA~~,+BAwCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,GAAA,IAAAE,EAAA,CAAA,CAAA,CAAA,EAAkBC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EAAEI,EAAML,EAAAC,EAAA,SAAA,CAAA,mNAI3CK,OAAAA,EAAAC,EAAA,GAAAH,~~OAAWI~~,IAAM,iFAiBgBC,EAAA,IAAAC,EAAAC,EAAAC,EAAAJ,CAAM,EAAC,KAAK,CAAA,kBADzCI,EAAAJ,CAAM,EAAC,OAAKK,EAAAC,CAAA,qBAdeC,EAAAC,EAAA,EAAA,4BAAAJ,EAAAJ,CAAM,EAAC,MAErC,GADA,wBACE,IAAAI,EAAGJ,CAAM,EAAC,OAAS,IAAM,gBAAkB,EAAE,GAAA,gBAAA,EAK3CS,EAAAC,EAAA,KAAAN,EAAAJ,CAAM,EAAC,EAAE,kBAKHU,EAAA,SAAAN,EAAAJ,CAAM,EAAC,SADVW,KAAAA,EAAAP,EAAAJ,CAAM,EAAC,SAAPU,EAAA,OAAAA,EAAA,QAAAN,EAAAJ,CAAM,EAAC,QAAK,oBAAZI,EAAAJ,CAAM,EAAC,MADFN,EAAK,GAALA,gCAbT,oBAAqBG,EAAM,GAAI,2BAA2B,CAAA,EAAA,gBAAA,CAAA,aAFvE,wIAnCYe"}
1	+ {"version":3,"file":"ToggleGroup.js","sources":["../../../src/components/togglegroup/ToggleGroup.svelte"],"sourcesContent":["<svelte:options\n customElement={{\n tag: 'm-toggle-group',\n props: {\n options: { reflect: true, type: 'Array', attribute: 'options' },\n },\n extend: customElementForwardEvents,\n }}\n/>\n\n<script lang=\"ts\">\n import { customElementForwardEvents } from '../../utils';\n /*\n 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.\n /\n interface Props {\n /\n The name attribute for the toggle element, typically used for form submission.\n /\n name: string;\n /\n The current value of the toggle group.\n /\n value?: Array<string>;\n /\n List of properties of each toggle of the toggle group.\n /\n options: Array<{\n id: string;\n label: string;\n value: string;\n disabled?: boolean;\n size?: 's' \| 'm';\n }>;\n /\n If `true`, make the form element of the group inline.\n */\n inline?: boolean;\n }\n\n let { name, value = $bindable([]), options, inline }: Props = $props();\n</script>\n\n<div class={['mc-field__content', inline && 'mc-field__content--inline']}>\n {#each options as option (option.id)}\n <div\n class=\"mc-toggle mc-field__item {!option.label\n ? ' mc-toggle--hide-label'\n : ''} {option.size === 'm' ? ' mc-toggle--m' : ''}\"\n >\n <label class=\"mc-toggle__container\">\n <input\n class=\"mc-toggle__input\"\n id={option.id}\n {name}\n type=\"checkbox\"\n bind:group={value}\n value={option.value}\n disabled={option.disabled}\n />\n {#if option.label}\n <span class=\"mc-toggle__label\">{option.label}</span>\n {/if}\n </label>\n </div>\n {/each}\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/field';\n @use '@mozaic-ds/styles/components/toggle';\n\n .mc-field__content:where(.mc-field__content--inline) {\n display: flex;\n flex-flow: row wrap;\n gap: 0.25rem 1rem;\n }\n</style>\n"],"names":["name","$.prop","$$props","value","$.proxy","options","inline","$.each","div","option","$.template_effect","$.set_text","text","$.get","$$render","consequent","$.set_class","div_1","$.set_attribute","input","input_value","customElementForwardEvents"],"mappings":";;;;;s6PAAA,+BAwCQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAKF,EAAAC,EAAA,QAAA,GAAA,IAAAE,EAAA,CAAA,CAAA,CAAA,EAAkBC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EAAEI,EAAML,EAAAC,EAAA,SAAA,CAAA,mNAI3CK,OAAAA,EAAAC,EAAA,GAAAH,EAAWI,GAAQA,EAAO,MAAfA,IAAM,iFAiBgBC,EAAA,IAAAC,EAAAC,EAAAC,EAAAJ,CAAM,EAAC,KAAK,CAAA,kBADzCI,EAAAJ,CAAM,EAAC,OAAKK,EAAAC,CAAA,qBAdeC,EAAAC,EAAA,EAAA,4BAAAJ,EAAAJ,CAAM,EAAC,MAErC,GADA,wBACE,IAAAI,EAAGJ,CAAM,EAAC,OAAS,IAAM,gBAAkB,EAAE,GAAA,gBAAA,EAK3CS,EAAAC,EAAA,KAAAN,EAAAJ,CAAM,EAAC,EAAE,kBAKHU,EAAA,SAAAN,EAAAJ,CAAM,EAAC,SADVW,KAAAA,EAAAP,EAAAJ,CAAM,EAAC,SAAPU,EAAA,OAAAA,EAAA,QAAAN,EAAAJ,CAAM,EAAC,QAAK,oBAAZI,EAAAJ,CAAM,EAAC,MADFN,EAAK,GAALA,gCAbT,oBAAqBG,EAAM,GAAI,2BAA2B,CAAA,EAAA,gBAAA,CAAA,aAFvE,wIAnCYe"}

package/dist/components/togglegroup/ToggleGroup.spec.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
+import { render } from '@testing-library/svelte';
 import ToggleGroup from './ToggleGroup.svelte';
 const options = [
     { id: 'opt-1', label: 'Option 1', value: 'opt1' },

package/dist/components/togglegroup/ToggleGroup.svelte CHANGED Viewed

@@ -42,7 +42,7 @@
 </script>
 <div class={['mc-field__content', inline && 'mc-field__content--inline']}>
-  {#each options as option}
+  {#each options as option (option.id)}
     <div
       class="mc-toggle mc-field__item {!option.label
         ? ' mc-toggle--hide-label'
@@ -156,7 +156,7 @@
   height: 1.5rem;
   width: 2.5rem;
   background-color: var(--forms-color-background-unchecked, #666666);
-  border-radius: var(--radius-l, 1rem);
+  border-radius: var(--border-radius-l, 1rem);
   flex-shrink: 0;
 }
 .mc-toggle__container::after {
@@ -164,7 +164,7 @@
   width: 1.25rem;
   background-color: var(--forms-color-icon-inverse, #ffffff);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   background-position: center;
   left: 0.375rem;
   position: absolute;

package/dist/components/tooltip/Tooltip.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import{c as z,p as _,a as b,b as s,f as g,d as m,s as u,r as d,t as w,e as x,g as k,h as E,i as C,j as B,k as l}from"../../custom-element.js";import{s as M}from"../../slot.js";import{s as h}from"../../attributes.js";var j=g('<div><!> <span class="mc-tooltip__content svelte-11vyzsr" role="tooltip"> </span></div>');const D={hash:"svelte-11vyzsr",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-tooltip.svelte-11vyzsr {display:inline-flex;position:relative;}.mc-tooltip.svelte-11vyzsr:focus, .mc-tooltip.svelte-11vyzsr:hover {cursor:help;}.mc-tooltip.svelte-11vyzsr:focus .mc-tooltip__content:where(.svelte-11vyzsr), .mc-tooltip.svelte-11vyzsr:hover .mc-tooltip__content:where(.svelte-11vyzsr) {visibility:visible;}.mc-tooltip__content.svelte-11vyzsr {font-size:var(--font-size-100, 0.875rem);border-radius:var(--radius-s, 0.25rem);line-height:var(--line-height-s, 1.3);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;align-items:center;max-width:16rem;min-width:4rem;background-color:var(--tooltip-color-background, #242938);box-sizing:border-box;color:var(--tooltip-color-text, #ffffff);position:absolute;text-align:center;visibility:hidden;z-index:var(--tooltip-z-index, 1);border:var(--border-s, 1px) solid var(--tooltip-color-border, #636d88);word-break:break-all;padding:0.375rem 0.5rem;}
+ */.mc-tooltip.svelte-11vyzsr {display:inline-flex;position:relative;}.mc-tooltip.svelte-11vyzsr:focus, .mc-tooltip.svelte-11vyzsr:hover {cursor:help;}.mc-tooltip.svelte-11vyzsr:focus .mc-tooltip__content:where(.svelte-11vyzsr), .mc-tooltip.svelte-11vyzsr:hover .mc-tooltip__content:where(.svelte-11vyzsr) {visibility:visible;}.mc-tooltip__content.svelte-11vyzsr {font-size:var(--font-size-100, 0.875rem);border-radius:var(--border-radius-s, 0.25rem);line-height:var(--line-height-s, 1.3);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;align-items:center;max-width:16rem;min-width:4rem;background-color:var(--tooltip-color-background, #242938);box-sizing:border-box;color:var(--tooltip-color-text, #ffffff);position:absolute;text-align:center;visibility:hidden;z-index:var(--tooltip-z-index, 1);border:var(--border-width-s, 0.0625rem) solid var(--tooltip-color-border, #636d88);word-break:break-all;padding:0.375rem 0.5rem;}
 @supports (width: max-content) {.mc-tooltip__content.svelte-11vyzsr {width:max-content;}
 }.mc-tooltip__content.svelte-11vyzsr::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath fill='var(--tooltip-color-border, %23636d88)' d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E");background-color:transparent;background-repeat:no-repeat;background-size:0.625rem;content:"";height:0.625rem;position:absolute;width:0.625rem;}.mc-tooltip__content.svelte-11vyzsr::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath fill='var(--tooltip-color-background, %23242938)' d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E");background-color:transparent;background-repeat:no-repeat;background-size:0.5rem;content:"";height:0.5rem;position:absolute;width:0.5rem;}.mc-tooltip--top.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr) {top:0;left:50%;transform:translate(-50%, calc(-100% - 1rem));}.mc-tooltip--top.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr)::after, .mc-tooltip--top.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr)::before {bottom:0;left:50%;transform:translate(-50%, 100%) rotate(-90deg);}.mc-tooltip--top.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr)::before {bottom:-1px;}.mc-tooltip--right.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr) {top:50%;right:0;transform:translate(calc(100% + 1rem), -50%);}.mc-tooltip--right.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr)::after, .mc-tooltip--right.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr)::before {top:50%;left:0;transform:translate(-99%, -50%);}.mc-tooltip--right.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr)::before {left:-1px;}.mc-tooltip--left.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr) {left:0;top:50%;transform:translate(calc(-100% - 1rem), -50%);}.mc-tooltip--left.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr)::after, .mc-tooltip--left.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr)::before {top:50%;right:0;transform:translate(99%, -50%) rotate(180deg);}.mc-tooltip--left.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr)::before {right:-1px;}.mc-tooltip--bottom.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr) {bottom:0;left:50%;transform:translate(-50%, calc(100% + 1rem));}.mc-tooltip--bottom.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr)::after, .mc-tooltip--bottom.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr)::before {top:0;left:50%;transform:translate(-50%, -100%) rotate(90deg);}.mc-tooltip--bottom.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr)::before {top:-1px;}.mc-tooltip--no-pointer.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr)::after, .mc-tooltip--no-pointer.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr)::before {background:none;}.mc-tooltip--standalone.svelte-11vyzsr {cursor:help;}.mc-tooltip--standalone.svelte-11vyzsr .mc-tooltip__content:where(.svelte-11vyzsr) {visibility:visible;position:relative;transform:none;top:0;left:0;}`};function S(c,e){_(e,!0),b(c,D);let r=s(e,"id",7),i=s(e,"text",7),n=s(e,"position",7,"top"),a=s(e,"pointer",7,!0);var f={get id(){return r()},set id(t){r(t),l()},get text(){return i()},set text(t){i(t),l()},get position(){return n()},set position(t="top"){n(t),l()},get pointer(){return a()},set pointer(t=!0){a(t),l()}},o=j(),p=m(o);M(p,e,"default",{});var v=u(p,2),y=m(v,!0);return d(v),d(o),w(()=>{x(o,1,k(["mc-tooltip",!a()&&"mc-tooltip--no-pointer",`mc-tooltip--${n()}`]),"svelte-11vyzsr"),h(o,"aria-describedby",r()),h(v,"id",r()),E(y,i())}),C(c,o),B(f)}customElements.define("m-tooltip",z(S,{id:{},text:{},position:{},pointer:{}},["default"],[],!0));
 //# sourceMappingURL=Tooltip.js.map

package/dist/components/tooltip/Tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.js","sources":["../../../src/components/tooltip/Tooltip.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-tooltip' }} />\n\n<script lang=\"ts\">\n /*\n A tooltip is a small, contextual message that appears when users hover over, focus on, or tap an element, providing additional information or guidance without cluttering the interface. Tooltips are commonly used to explain icons, abbreviations, or complex actions. They typically disappear automatically when the user moves away from the trigger element.\n \n @slot default - The tooltip will point to the content of the slot.\n /\n interface Props {\n /\n A unique identifier for the tooltip, used to describe the tooltip.\n /\n id: string;\n /\n Content of the tooltip.\n /\n text: string;\n /\n Determines the position of the tooltip.\n /\n position?: 'top' \| 'bottom' \| 'left' \| 'right';\n /\n If `true`, the tooltip display a pointer.\n */\n pointer?: boolean;\n }\n\n let { id, text, position = 'top', pointer = true }: Props = $props();\n</script>\n\n<div\n class={[\n 'mc-tooltip'~~,\n~~ !pointer && 'mc-tooltip--no-pointer'~~,\n~~ `mc-tooltip--${position}~~`,\n~~ ]}\n aria-describedby={id}\n>\n <slot />\n <span {id} class=\"mc-tooltip__content\" role=\"tooltip\">\n {text}\n </span>\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/tooltip';\n</style>\n"],"names":["id","$.prop","$$props","text","position","pointer"],"mappings":";;;;6sGAAA,oBA2BQA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,mBAAW,KAAK,EAAEC,kBAAU,EAAI,yIAArB,MAAK,mDAAY,GAAI,~~qGAK9C~~,~~aACC~~,CAAAA,EAAO,GAAI,~~wCACGD~~,GAAQ,~~8CAEPJ~~,GAAE,oBAIjBG,GAAI,~~eAZT~~"}
1	+ {"version":3,"file":"Tooltip.js","sources":["../../../src/components/tooltip/Tooltip.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-tooltip' }} />\n\n<script lang=\"ts\">\n /*\n A tooltip is a small, contextual message that appears when users hover over, focus on, or tap an element, providing additional information or guidance without cluttering the interface. Tooltips are commonly used to explain icons, abbreviations, or complex actions. They typically disappear automatically when the user moves away from the trigger element.\n \n @slot default - The tooltip will point to the content of the slot.\n /\n interface Props {\n /\n A unique identifier for the tooltip, used to describe the tooltip.\n /\n id: string;\n /\n Content of the tooltip.\n /\n text: string;\n /\n Determines the position of the tooltip.\n /\n position?: 'top' \| 'bottom' \| 'left' \| 'right';\n /\n If `true`, the tooltip display a pointer.\n */\n pointer?: boolean;\n }\n\n let { id, text, position = 'top', pointer = true }: Props = $props();\n</script>\n\n<div\n class={['mc-tooltip', !pointer && 'mc-tooltip--no-pointer', `mc-tooltip--${position}`]}\n aria-describedby={id}\n>\n <slot />\n <span {id} class=\"mc-tooltip__content\" role=\"tooltip\">\n {text}\n </span>\n</div>\n\n<style lang=\"scss\">\n @use '@mozaic-ds/styles/components/tooltip';\n</style>\n"],"names":["id","$.prop","$$props","text","position","pointer"],"mappings":";;;;6sGAAA,oBA2BQA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,mBAAW,KAAK,EAAEC,kBAAU,EAAI,yIAArB,MAAK,mDAAY,GAAI,qGAIxC,aAAe,CAAAA,EAAO,GAAI,wCAAyCD,GAAQ,8CACjEJ,GAAE,oBAIjBG,GAAI,eART"}

package/dist/components/tooltip/Tooltip.spec.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { render } from '@testing-library/svelte';
 import Tooltip from './Tooltip.svelte';
 describe('m-tooltip component', () => {
     it('renders with default props and displays text', () => {
-        const { container, getByRole } = render(Tooltip, {
+        const { container } = render(Tooltip, {
             props: {
                 id: 'tooltip-id',
                 text: 'This is a tooltip',

package/dist/components/tooltip/Tooltip.svelte CHANGED Viewed

@@ -29,11 +29,7 @@
 </script>
 <div
-  class={[
-    'mc-tooltip',
-    !pointer && 'mc-tooltip--no-pointer',
-    `mc-tooltip--${position}`,
-  ]}
+  class={['mc-tooltip', !pointer && 'mc-tooltip--no-pointer', `mc-tooltip--${position}`]}
   aria-describedby={id}
 >
   <slot />
@@ -57,7 +53,7 @@
 }
 .mc-tooltip__content {
   font-size: var(--font-size-100, 0.875rem);
-  border-radius: var(--radius-s, 0.25rem);
+  border-radius: var(--border-radius-s, 0.25rem);
   line-height: var(--line-height-s, 1.3);
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -73,7 +69,7 @@
   text-align: center;
   visibility: hidden;
   z-index: var(--tooltip-z-index, 1);
-  border: var(--border-s, 1px) solid var(--tooltip-color-border, #636d88);
+  border: var(--border-width-s, 0.0625rem) solid var(--tooltip-color-border, #636d88);
   word-break: break-all;
   padding: 0.375rem 0.5rem;
 }

package/dist/components/tooltip/Tooltip.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;~~AAwBH~~,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,OAAO;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoBH,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,OAAO;;;;;;UAAqF,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/custom-element-forward-events.js CHANGED Viewed

@@ -1,2 +1,2 @@
-function o(n){return class extends n{constructor(){var s;super(),(s=this.shadowRoot)==null||s.addEventListener("change",t=>{const e=new t.constructor(t.type,t);this.dispatchEvent(e)})}}}export{o as c};
+function e(s){return class extends s{constructor(){super(),this.shadowRoot?.addEventListener("change",t=>{const n=new t.constructor(t.type,t);this.dispatchEvent(n)})}}}export{e as c};
 //# sourceMappingURL=custom-element-forward-events.js.map

package/dist/custom-element-forward-events.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"custom-element-forward-events.js","sources":["../src/utils/custom-element-forward-events.ts"],"sourcesContent":["type EventConstructor = new (type: string, eventInitDict?: EventInit) => Event;\n\nexport function customElementForwardEvents(\n svelteCustomElementClass: new () => HTMLElement,\n): new () => HTMLElement \| undefined {\n return class extends svelteCustomElementClass {\n constructor() {\n super();\n this.shadowRoot?.addEventListener('change', (event) => {\n const clonedEvent = new (event.constructor as EventConstructor)(\n event.type~~,\n~~ event~~,\n~~ );\n this.dispatchEvent(clonedEvent);\n });\n }\n };\n}\n"],"names":["customElementForwardEvents","svelteCustomElementClass","~~_a","~~event","clonedEvent"],"mappings":"AAEO,SAASA,EACdC,EACmC,CACnC,OAAO,cAAcA,CAAyB,CAC5C,aAAc,~~CAJX~~,~~IAAAC,EAKD,~~MAAA,~~GACAA~~,~~EAAA,~~KAAK,~~aAAL~~,~~MAAAA,EAAiB,~~iBAAiB,SAAWC,GAAU,CACrD,MAAMC,EAAc,IAAKD,EAAM,~~YAC7BA~~,EAAM,~~KACNA~~,~~CAAA~~,~~EAEF~~,KAAK,cAAcC,CAAW,CAChC,~~EACF~~,CAAA,CAEJ"}
1	+ {"version":3,"file":"custom-element-forward-events.js","sources":["../src/utils/custom-element-forward-events.ts"],"sourcesContent":["type EventConstructor = new (type: string, eventInitDict?: EventInit) => Event;\n\nexport function customElementForwardEvents(\n svelteCustomElementClass: new () => HTMLElement,\n): new () => HTMLElement \| undefined {\n return class extends svelteCustomElementClass {\n constructor() {\n super();\n this.shadowRoot?.addEventListener('change', (event) => {\n const clonedEvent = new (event.constructor as EventConstructor)(event.type, event);\n this.dispatchEvent(clonedEvent);\n });\n }\n };\n}\n"],"names":["customElementForwardEvents","svelteCustomElementClass","event","clonedEvent"],"mappings":"AAEO,SAASA,EACdC,EACmC,CACnC,OAAO,cAAcA,CAAyB,CAC5C,aAAc,CACZ,MAAA,EACA,KAAK,YAAY,iBAAiB,SAAWC,GAAU,CACrD,MAAMC,EAAc,IAAKD,EAAM,YAAiCA,EAAM,KAAMA,CAAK,EACjF,KAAK,cAAcC,CAAW,CAChC,CAAC,CACH,CAAA,CAEJ"}