@mozaic-ds/web-components 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/components/textinput/Textinput.svelte

@@ -1,56 +1,44 @@
-<svelte:options customElement="m-textinput" />
+<svelte:options tag={null} />
 
 <script lang="ts">
+  import { afterUpdate } from 'svelte';
+  import { createEventForwarder } from '../../utilities/EventForward';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
+
   import type { TextInputSize, TextInputType } from './textinput.types';
 
-  interface Props {
-    name: string;
-    value: string;
-    placeholder: string;
-    inputtype?: TextInputType;
-    isvalid: boolean;
-    isinvalid: boolean;
-    disabled?: boolean;
-    size?: TextInputSize;
-    iconname: string;
-    rightalign: boolean;
-    min: string;
-    max: string;
-    minlength: number;
-    maxlength: number;
-    required?: boolean;
-    clearlabel?: string;
-    isclearable?: boolean;
-    hasicon?: boolean;
-    onclear?: (arg: string) => void;
+  export let name: string;
+  export let value: string;
+  export let placeholder: string;
+  export let inputtype: TextInputType = 'text';
+  export let isvalid: boolean;
+  export let isinvalid: boolean;
+  export let disabled = false;
+  export let size: TextInputSize = 'm';
+  export let iconname: string;
+  export let rightalign: boolean;
+  export let min: string;
+  export let max: string;
+  export let minlength: number;
+  export let maxlength: number;
+  export let required: boolean = false;
+  const forwardEvents = createEventForwarder(get_current_component());
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
+  $: inputType = inputtype;
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+  function generateIconName(iconName: string): string {
+    return `${iconName}`;
   }
 
-  let {
-    name,
-    value,
-    placeholder,
-    inputtype = 'text',
-    isvalid,
-    isinvalid,
-    disabled = false,
-    size = 'm',
-    iconname,
-    rightalign,
-    min,
-    max,
-    minlength,
-    maxlength,
-    required = false,
-    clearlabel = 'Clear content',
-    isclearable = false,
-    onclear,
-    hasicon = false,
-    ...events
-  }: Props = $props();
-
-  let inputType = $derived(inputtype);
-  let displayClear = $derived(isclearable && value ? true : false);
-
   function getClasses(
     isValid: boolean,
     isInvalid: boolean,
@@ -87,27 +75,40 @@
     node.type = inputType;
   };
 
-  function resetValue() {
-    value = '';
-    onclear('onclear');
+  function onInput(e: Event) {
+    let value = (e.target as HTMLInputElement).value;
+    if (maxlength && inputtype === 'number') {
+      (e.target as HTMLInputElement).value = value.slice(0, maxlength);
+    }
   }
+
+  let component: HTMLDivElement;
+
+  afterUpdate(() => {
+    const input = component.querySelector('.mc-text-input') as HTMLInputElement;
+    input.type = inputType;
+  });
 </script>
 
-{#snippet icon()}
-  <span class="mc-text-input__icon">
-    <slot name="icon" />
-  </span>
-{/snippet}
-<div class="{getClasses(isvalid, isinvalid, size, iconname)} ">
-  {#if hasicon}
-    <span class="mc-text-input__icon">
+<div
+  class="{iconname ? 'mc-left-icon-input' : ''} {userClass}"
+  bind:this={component}
+>
+  {#if iconname}
+    <span class="mc-left-icon-input__icon">
+      {@html `<${generateIconName(iconname)} />`}
+    </span>
+  {/if}
+  {#if $$slots.icon}
+    <span class="mc-left-icon-input__icon">
       <slot name="icon" />
     </span>
   {/if}
   <input
+    use:forwardEvents
     bind:value
     use:setType
-    class="mc-text-input__control"
+    class="{getClasses(isvalid, isinvalid, size, iconname)} {$$props.class}"
     aria-invalid={isinvalid}
     {name}
     id={name}
@@ -119,189 +120,23 @@
     {maxlength}
     spellcheck="false"
     {required}
-    {...events}
+    {...attributes}
+    on:input={onInput}
+    on:keydown={(event) => {
+      if (event?.key === 'Enter') {
+        eventHandler.dispatch('submit-search', value);
+      }
+    }}
   />
-  <!-- Control options -->
-  {#if displayClear}
-    <div class="mc-controls-options js-control-options">
-      <!-- Clear Button -->
-      <button
-        type="button"
-        class="mc-controls-options__button"
-        onclick={resetValue}
-      >
-        <svg class="mc-controls-options__icon" aria-hidden="true">
-          <path
-            fill-rule="evenodd"
-            d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z"
-          />
-        </svg>
-        <span class="mc-controls-options__label">{clearlabel}</span>
-      </button>
-    </div>
-  {/if}
 </div>
 
-<style>/**
- * Do not edit directly, this file was auto-generated.
- */
-.mc-controls-options {
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-  gap: 0.5rem;
-}
-.mc-controls-options__button {
-  background-color: transparent;
-  border-width: 0;
-  color: initial;
-  font-family: inherit;
-  outline: none;
-  appearance: none;
-  cursor: pointer;
-  padding: 0;
-  border-radius: 100%;
-}
-.mc-controls-options__button:hover .mc-controls-options__icon {
-  fill: var(--forms-color-icon-clear-hover, #4d4d4d);
-}
-.mc-controls-options__button:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
-  outline: 0.125rem solid transparent;
-  outline-offset: 0.125rem;
-}
-.mc-controls-options__icon {
-  fill: var(--forms-color-icon-clear, #666666);
-}
-.mc-controls-options__button, .mc-controls-options__icon {
-  height: 1.5rem;
-  width: 1.5rem;
-}
-.mc-controls-options__label {
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  padding: 0;
-  width: 1px;
-}
-.mc-controls-options__unit {
-  font-size: 1rem;
-  line-height: 1.3;
-  font-weight: 600;
-  color: var(--forms-color-text-default, #000000);
-}
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.text-input';
+  @import '@mozaic-ds/styles/components/c.left-icon-input';
+  @import '@mozaic-ds/styles/components/c.fields';
 
-/* stylelint-disable string-no-newline */
-.mc-text-input {
-  transition: box-shadow 200ms ease;
-  background-color: var(--forms-color-background-default, #ffffff);
-  border: 1px solid var(--forms-color-border-default, #666666);
-  border-radius: 0.25rem;
-  transition: all ease 200ms;
-  color: var(--forms-color-text-default, #000000);
-  display: block;
-  width: 100%;
-  height: 3rem;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.mc-text-input__control {
-  background-color: transparent;
-  border-width: 0;
-  font-family: inherit;
-  outline: none;
-  padding: 0.75rem 0.6875rem;
-  font-size: 1rem;
-  line-height: 1.3;
-  font-weight: 400;
-  flex-grow: 1;
-}
-.mc-text-input__control[type=number] {
-  /* For Blink & WebKit rendering engines */
-  /* For Gecko rendering engine */
-  appearance: textfield;
-}
-.mc-text-input__control[type=number]::-webkit-inner-spin-button, .mc-text-input__control[type=number]::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
-}
-.mc-text-input__control[type=search]::-webkit-search-decoration, .mc-text-input__control[type=search]::-webkit-search-cancel-button {
-  appearance: none;
-}
-.mc-text-input__control::placeholder {
-  color: var(--forms-color-placeholder, #666666);
-}
-.mc-text-input__icon {
-  fill: var(--forms-color-icon-default, #666666);
-  height: 1.5rem;
-  width: 1.5rem;
-  flex-shrink: 0;
-}
-.mc-text-input:focus-within {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
-  outline: 0.125rem solid transparent;
-  outline-offset: 0.125rem;
-}
-.mc-text-input:hover:not(:focus-within) {
-  border-color: var(--forms-color-border-hover, #4d4d4d);
-  box-shadow: 0 0 0 1px var(--forms-color-border-hover, #4d4d4d);
-}
-.mc-text-input:has(input:disabled) {
-  background-color: var(--forms-color-background-disabled, #d9d9d9);
-  cursor: not-allowed;
-  border-color: transparent;
-  box-shadow: none;
-  color: var(--forms-color-text-disabled, #737373);
-  pointer-events: none;
-}
-.mc-text-input:has(input[readonly]) {
-  border-color: var(--forms-color-border-read-only, #cccccc);
-  pointer-events: none;
-}
-.mc-text-input:has(.mc-text-input__icon) {
-  padding-inline-start: 0.6875rem;
-}
-.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control {
-  padding-inline-start: 0;
-}
-.mc-text-input:has(.mc-controls-options) {
-  padding-inline-end: 0.6875rem;
-}
-.mc-text-input:has(.mc-controls-options) .mc-text-input__control {
-  padding-inline-end: 0;
-}
-.mc-text-input--s {
-  height: 2rem;
-}
-.mc-text-input--s .mc-text-input__control {
-  padding: 0.375rem 0.6875rem;
-  font-size: 0.875rem;
-  line-height: 1.3;
-}
-.mc-text-input--s:has(.mc-text-input__icon) {
-  padding-inline-start: 0.4375rem;
-}
-.mc-text-input--s:has(.mc-controls-options) {
-  padding-inline-end: 0.4375rem;
-}
-.mc-text-input.is-invalid {
-  border-color: var(--forms-color-border-invalid, #ea302d);
-  box-shadow: 0 0 0 1px var(--forms-color-border-invalid, #ea302d);
-}
-.mc-text-input.is-invalid:hover:not(:focus-within) {
-  border-color: var(--forms-color-border-invalid-hover, #c61112);
-  box-shadow: 0 0 0 1px var(--forms-color-border-invalid-hover, #c61112);
-}
-.mc-text-input * {
-  box-sizing: border-box;
-}
-
-/* stylelint-enable string-no-newline */
-.right-align {
-  text-align: right;
-}</style>
+  .right-align {
+    text-align: right;
+  }
+</style>

package/dist/components/textinput/textinput.types.d.ts

@@ -1,3 +1,3 @@
 export type TextInputType = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text';
-export type TextInputSize = 's' | 'm';
+export type TextInputSize = 's' | 'm' | 'l';
 //# sourceMappingURL=textinput.types.d.ts.map

package/dist/components/textinput/textinput.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textinput.types.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/textinput.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,CAAC"}
+{"version":3,"file":"textinput.types.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/textinput.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC"}

package/dist/components/toggle/Toggle.js

@@ -1,4 +1,4 @@
-import{n as x,o as z,q as L,c as P,a as M,b as B,d,f as E,g as u,t as w,h as p,i as H,s as y,r as f,j as g,k as D,m as S}from"../../custom-element.js";import{i as j}from"../../if.js";import{r as q,s as k,a as T}from"../../attributes.js";function Y(l){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function A(l,e,{bubbles:a=!1,cancelable:r=!1}={}){return new CustomEvent(l,{detail:e,bubbles:a,cancelable:r})}function F(){const l=x;return l===null&&Y(),(e,a,r)=>{var c;const o=(c=l.s.$$events)==null?void 0:c[e];if(o){const s=z(o)?o.slice():[o],n=A(e,a,r);for(const h of s)h.call(l.x,n);return!n.defaultPrevented}return!0}}function G(l,e,a){e(!e()),a("change",e())}var I=E('<span class="mc-toggle__label svelte-hw9uk7"> </span>'),J=E('<div><label class="mc-toggle__container svelte-hw9uk7"><input class="mc-toggle__input svelte-hw9uk7" type="checkbox"/> <!></label></div>');const K={hash:"svelte-hw9uk7",code:`/**
+import{n as x,o as k,q as z,u as L,c as P,b as M,d as g,f as C,g as f,t as u,j as p,l as B,a as H,s as D,r as v,i as S,m as n,k as j}from"../../custom-element.js";import{i as q}from"../../if.js";import{r as T,s as E,a as Y}from"../../attributes.js";function A(a,e,{bubbles:l=!1,cancelable:r=!1}={}){return new CustomEvent(a,{detail:e,bubbles:l,cancelable:r})}function F(){const a=k;return a===null&&x(),(e,l,r)=>{var s;const i=(s=a.s.$$events)==null?void 0:s[e];if(i){const d=z(i)?i.slice():[i],h=A(e,l,r);for(const c of d)c.call(a.x,h);return!h.defaultPrevented}return!0}}function G(a,e,l){e(!e()),l("change",e())}var I=C('<span class="mc-toggle__label svelte-wiy2ed"> </span>'),J=C('<div><label class="mc-toggle__container svelte-wiy2ed"><input class="mc-toggle__input svelte-wiy2ed" type="checkbox"/> <!></label></div>');const K={hash:"svelte-wiy2ed",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-toggle.svelte-hw9uk7 {width:fit-content;}.mc-toggle__container.svelte-hw9uk7 {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-hw9uk7::before, .mc-toggle__container.svelte-hw9uk7::after {content:"";}.mc-toggle__container.svelte-hw9uk7::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:1rem;flex-shrink:0;}.mc-toggle__container.svelte-hw9uk7::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:100%;background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-hw9uk7 {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-hw9uk7 {color:var(--forms-color-text-default, #000000);font-size:1rem;font-weight:400;line-height:1.5;}.mc-toggle.svelte-hw9uk7:has(:where(.svelte-hw9uk7):checked) .mc-toggle__container:where(.svelte-hw9uk7)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-hw9uk7:has(:where(.svelte-hw9uk7):checked) .mc-toggle__container:where(.svelte-hw9uk7)::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-hw9uk7:has(:where(.svelte-hw9uk7):disabled) .mc-toggle__container:where(.svelte-hw9uk7) {cursor:not-allowed;}.mc-toggle.svelte-hw9uk7:has(:where(.svelte-hw9uk7):disabled) .mc-toggle__container:where(.svelte-hw9uk7)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-hw9uk7:has(:where(.svelte-hw9uk7):disabled) .mc-toggle__container:where(.svelte-hw9uk7)::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-hw9uk7:has(:where(.svelte-hw9uk7):disabled) .mc-toggle__label:where(.svelte-hw9uk7) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-hw9uk7:has(:where(.svelte-hw9uk7):disabled:checked) .mc-toggle__container:where(.svelte-hw9uk7)::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-hw9uk7:has(:where(.svelte-hw9uk7):focus-visible) .mc-toggle__container:where(.svelte-hw9uk7)::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-hw9uk7 .mc-toggle__container:where(.svelte-hw9uk7)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-hw9uk7 .mc-toggle__container:where(.svelte-hw9uk7)::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-hw9uk7:has(:where(.svelte-hw9uk7):checked) .mc-toggle__container:where(.svelte-hw9uk7)::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-hw9uk7:has(:where(.svelte-hw9uk7):disabled) .mc-toggle__container:where(.svelte-hw9uk7)::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-hw9uk7:has(:where(.svelte-hw9uk7):disabled:checked) .mc-toggle__container:where(.svelte-hw9uk7)::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-hw9uk7 .mc-toggle__label:where(.svelte-hw9uk7) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function N(l,e){M(e,!0),B(l,K);let a=d(e,"name",7),r=d(e,"checked",15),o=d(e,"disabled",7,!1),c=d(e,"size",7,"m"),s=d(e,"label",7),n=F();var h=J(),v=u(h),i=u(v);q(i),i.__click=[G,r,n];var C=y(i,2);{var b=t=>{var m=I(),_=u(m,!0);f(m),w(()=>D(_,s())),p(t,m)};j(C,t=>{s()&&t(b)})}return f(v),f(h),w(()=>{S(h,1,`mc-toggle ${s()?"":" mc-toggle--hide-label"} ${c()==="m"?" mc-toggle--m":""}`,"svelte-hw9uk7"),k(i,"id",a()),k(i,"name",a()),T(i,r()),i.disabled=o()}),p(l,h),H({get name(){return a()},set name(t){a(t),g()},get checked(){return r()},set checked(t){r(t),g()},get disabled(){return o()},set disabled(t=!1){o(t),g()},get size(){return c()},set size(t="m"){c(t),g()},get label(){return s()},set label(t){s(t),g()}})}L(["click"]);customElements.define("m-toggle",P(N,{name:{},checked:{},disabled:{},size:{},label:{}},[],[],!0));
+ */.mc-toggle.svelte-wiy2ed {width:fit-content;}.mc-toggle__container.svelte-wiy2ed {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-wiy2ed::before, .mc-toggle__container.svelte-wiy2ed::after {content:"";}.mc-toggle__container.svelte-wiy2ed::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-wiy2ed::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-wiy2ed {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-wiy2ed {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-wiy2ed:has(:where(.svelte-wiy2ed):checked) .mc-toggle__container:where(.svelte-wiy2ed)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):checked) .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed) {cursor:not-allowed;}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__label:where(.svelte-wiy2ed) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled:checked) .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed:has(:where(.svelte-wiy2ed):focus-visible) .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed .mc-toggle__container:where(.svelte-wiy2ed)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-wiy2ed .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed:has(:where(.svelte-wiy2ed):checked) .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed:has(:where(.svelte-wiy2ed):disabled:checked) .mc-toggle__container:where(.svelte-wiy2ed)::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-wiy2ed .mc-toggle__label:where(.svelte-wiy2ed) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function N(a,e){H(e,!0),M(a,K);let l=g(e,"name",7),r=g(e,"checked",15),i=g(e,"disabled",7,!1),s=g(e,"size",7,"m"),d=g(e,"label",7),h=F();var c=J(),w=f(c),o=f(w);T(o),o.__click=[G,r,h];var b=D(o,2);{var _=t=>{var m=I(),y=f(m,!0);v(m),u(()=>j(y,d())),p(t,m)};q(b,t=>{d()&&t(_)})}return v(w),v(c),u(()=>{S(c,1,`mc-toggle ${d()?"":" mc-toggle--hide-label"} ${s()==="m"?" mc-toggle--m":""}`,"svelte-wiy2ed"),E(o,"id",l()),E(o,"name",l()),Y(o,r()),o.disabled=i()}),p(a,c),B({get name(){return l()},set name(t){l(t),n()},get checked(){return r()},set checked(t){r(t),n()},get disabled(){return i()},set disabled(t=!1){i(t),n()},get size(){return s()},set size(t="m"){s(t),n()},get label(){return d()},set label(t){d(t),n()}})}L(["click"]);customElements.define("m-toggle",P(N,{name:{},checked:{},disabled:{},size:{},label:{}},[],[],!0));
 //# sourceMappingURL=Toggle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../node_modules/svelte/src/internal/shared/errors.js","../../../node_modules/svelte/src/index-client.js","../../../src/components/toggle/Toggle.svelte"],"sourcesContent":["/* This file is generated by scripts/process-messages/index.js. Do not edit! */\n\nimport { DEV } from 'esm-env';\n\n/**\n * Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead\n * @returns {never}\n */\nexport function invalid_default_snippet() {\n\tif (DEV) {\n\t\tconst error = new Error(`invalid_default_snippet\\nCannot use \\`{@render children(...)}\\` if the parent component uses \\`let:\\` directives. Consider using a named snippet instead\\nhttps://svelte.dev/e/invalid_default_snippet`);\n\n\t\terror.name = 'Svelte error';\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/invalid_default_snippet`);\n\t}\n}\n\n/**\n * A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`\n * @returns {never}\n */\nexport function invalid_snippet_arguments() {\n\tif (DEV) {\n\t\tconst error = new Error(`invalid_snippet_arguments\\nA snippet function was passed invalid arguments. Snippets should only be instantiated via \\`{@render ...}\\`\\nhttps://svelte.dev/e/invalid_snippet_arguments`);\n\n\t\terror.name = 'Svelte error';\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/invalid_snippet_arguments`);\n\t}\n}\n\n/**\n * `%name%(...)` can only be used during component initialisation\n * @param {string} name\n * @returns {never}\n */\nexport function lifecycle_outside_component(name) {\n\tif (DEV) {\n\t\tconst error = new Error(`lifecycle_outside_component\\n\\`${name}(...)\\` can only be used during component initialisation\\nhttps://svelte.dev/e/lifecycle_outside_component`);\n\n\t\terror.name = 'Svelte error';\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/lifecycle_outside_component`);\n\t}\n}\n\n/**\n * Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.\n * @returns {never}\n */\nexport function snippet_without_render_tag() {\n\tif (DEV) {\n\t\tconst error = new Error(`snippet_without_render_tag\\nAttempted to render a snippet without a \\`{@render}\\` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change \\`{snippet}\\` to \\`{@render snippet()}\\`.\\nhttps://svelte.dev/e/snippet_without_render_tag`);\n\n\t\terror.name = 'Svelte error';\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/snippet_without_render_tag`);\n\t}\n}\n\n/**\n * `%name%` is not a store with a `subscribe` method\n * @param {string} name\n * @returns {never}\n */\nexport function store_invalid_shape(name) {\n\tif (DEV) {\n\t\tconst error = new Error(`store_invalid_shape\\n\\`${name}\\` is not a store with a \\`subscribe\\` method\\nhttps://svelte.dev/e/store_invalid_shape`);\n\n\t\terror.name = 'Svelte error';\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/store_invalid_shape`);\n\t}\n}\n\n/**\n * The `this` prop on `<svelte:element>` must be a string, if defined\n * @returns {never}\n */\nexport function svelte_element_invalid_this_value() {\n\tif (DEV) {\n\t\tconst error = new Error(`svelte_element_invalid_this_value\\nThe \\`this\\` prop on \\`<svelte:element>\\` must be a string, if defined\\nhttps://svelte.dev/e/svelte_element_invalid_this_value`);\n\n\t\terror.name = 'Svelte error';\n\t\tthrow error;\n\t} else {\n\t\tthrow new Error(`https://svelte.dev/e/svelte_element_invalid_this_value`);\n\t}\n}","/** @import { ComponentContext, ComponentContextLegacy } from '#client' */\n/** @import { EventDispatcher } from './index.js' */\n/** @import { NotFunction } from './internal/types.js' */\nimport { untrack } from './internal/client/runtime.js';\nimport { is_array } from './internal/shared/utils.js';\nimport { user_effect } from './internal/client/index.js';\nimport * as e from './internal/client/errors.js';\nimport { lifecycle_outside_component } from './internal/shared/errors.js';\nimport { legacy_mode_flag } from './internal/flags/index.js';\nimport { component_context } from './internal/client/context.js';\nimport { DEV } from 'esm-env';\n\nif (DEV) {\n\t/**\n\t * @param {string} rune\n\t */\n\tfunction throw_rune_error(rune) {\n\t\tif (!(rune in globalThis)) {\n\t\t\t// TODO if people start adjusting the \"this can contain runes\" config through v-p-s more, adjust this message\n\t\t\t/** @type {any} */\n\t\t\tlet value; // let's hope noone modifies this global, but belts and braces\n\t\t\tObject.defineProperty(globalThis, rune, {\n\t\t\t\tconfigurable: true,\n\t\t\t\t// eslint-disable-next-line getter-return\n\t\t\t\tget: () => {\n\t\t\t\t\tif (value !== undefined) {\n\t\t\t\t\t\treturn value;\n\t\t\t\t\t}\n\n\t\t\t\t\te.rune_outside_svelte(rune);\n\t\t\t\t},\n\t\t\t\tset: (v) => {\n\t\t\t\t\tvalue = v;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tthrow_rune_error('$state');\n\tthrow_rune_error('$effect');\n\tthrow_rune_error('$derived');\n\tthrow_rune_error('$inspect');\n\tthrow_rune_error('$props');\n\tthrow_rune_error('$bindable');\n}\n\n/**\n * `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.\n * Unlike `$effect`, the provided function only runs once.\n *\n * It must be called during the component's initialisation (but doesn't need to live _inside_ the component;\n * it can be called from an external module). If a function is returned _synchronously_ from `onMount`,\n * it will be called when the component is unmounted.\n *\n * `onMount` functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).\n *\n * @template T\n * @param {() => NotFunction<T> | Promise<NotFunction<T>> | (() => any)} fn\n * @returns {void}\n */\nexport function onMount(fn) {\n\tif (component_context === null) {\n\t\tlifecycle_outside_component('onMount');\n\t}\n\n\tif (legacy_mode_flag && component_context.l !== null) {\n\t\tinit_update_callbacks(component_context).m.push(fn);\n\t} else {\n\t\tuser_effect(() => {\n\t\t\tconst cleanup = untrack(fn);\n\t\t\tif (typeof cleanup === 'function') return /** @type {() => void} */ (cleanup);\n\t\t});\n\t}\n}\n\n/**\n * Schedules a callback to run immediately before the component is unmounted.\n *\n * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the\n * only one that runs inside a server-side component.\n *\n * @param {() => any} fn\n * @returns {void}\n */\nexport function onDestroy(fn) {\n\tif (component_context === null) {\n\t\tlifecycle_outside_component('onDestroy');\n\t}\n\n\tonMount(() => () => untrack(fn));\n}\n\n/**\n * @template [T=any]\n * @param {string} type\n * @param {T} [detail]\n * @param {any}params_0\n * @returns {CustomEvent<T>}\n */\nfunction create_custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {\n\treturn new CustomEvent(type, { detail, bubbles, cancelable });\n}\n\n/**\n * Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events).\n * Event dispatchers are functions that can take two arguments: `name` and `detail`.\n *\n * Component events created with `createEventDispatcher` create a\n * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).\n * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).\n * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)\n * property and can contain any type of data.\n *\n * The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:\n * ```ts\n * const dispatch = createEventDispatcher<{\n *  loaded: null; // does not take a detail argument\n *  change: string; // takes a detail argument of type string, which is required\n *  optional: number | null; // takes an optional detail argument of type number\n * }>();\n * ```\n *\n * @deprecated Use callback props and/or the `$host()` rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)\n * @template {Record<string, any>} [EventMap = any]\n * @returns {EventDispatcher<EventMap>}\n */\nexport function createEventDispatcher() {\n\tconst active_component_context = component_context;\n\tif (active_component_context === null) {\n\t\tlifecycle_outside_component('createEventDispatcher');\n\t}\n\n\treturn (type, detail, options) => {\n\t\tconst events = /** @type {Record<string, Function | Function[]>} */ (\n\t\t\tactive_component_context.s.$$events\n\t\t)?.[/** @type {any} */ (type)];\n\n\t\tif (events) {\n\t\t\tconst callbacks = is_array(events) ? events.slice() : [events];\n\t\t\t// TODO are there situations where events could be dispatched\n\t\t\t// in a server (non-DOM) environment?\n\t\t\tconst event = create_custom_event(/** @type {string} */ (type), detail, options);\n\t\t\tfor (const fn of callbacks) {\n\t\t\t\tfn.call(active_component_context.x, event);\n\t\t\t}\n\t\t\treturn !event.defaultPrevented;\n\t\t}\n\n\t\treturn true;\n\t};\n}\n\n// TODO mark beforeUpdate and afterUpdate as deprecated in Svelte 6\n\n/**\n * Schedules a callback to run immediately before the component is updated after any state change.\n *\n * The first time the callback runs will be before the initial `onMount`.\n *\n * In runes mode use `$effect.pre` instead.\n *\n * @deprecated Use [`$effect.pre`](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function beforeUpdate(fn) {\n\tif (component_context === null) {\n\t\tlifecycle_outside_component('beforeUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('beforeUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).b.push(fn);\n}\n\n/**\n * Schedules a callback to run immediately after the component has been updated.\n *\n * The first time the callback runs will be after the initial `onMount`.\n *\n * In runes mode use `$effect` instead.\n *\n * @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function afterUpdate(fn) {\n\tif (component_context === null) {\n\t\tlifecycle_outside_component('afterUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('afterUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).a.push(fn);\n}\n\n/**\n * Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate\n * @param {ComponentContext} context\n */\nfunction init_update_callbacks(context) {\n\tvar l = /** @type {ComponentContextLegacy} */ (context).l;\n\treturn (l.u ??= { a: [], b: [], m: [] });\n}\n\nexport { flushSync } from './internal/client/runtime.js';\nexport { getContext, getAllContexts, hasContext, setContext } from './internal/client/context.js';\nexport { hydrate, mount, unmount } from './internal/client/render.js';\nexport { tick, untrack } from './internal/client/runtime.js';\nexport { createRawSnippet } from './internal/client/dom/blocks/snippet.js';\n","<svelte:options customElement=\"m-toggle\" />\n\n<script lang=\"ts\">\n  import type { ToggleSize } from './toggle.types';\n  import { createEventDispatcher } from 'svelte';\n\n  interface Props {\n    name: string;\n    checked: boolean;\n    disabled?: boolean;\n    size?: ToggleSize;\n    label: string;\n  }\n\n  let {\n    name,\n    checked = $bindable(),\n    disabled = false,\n    size = 'm',\n    label,\n  }: Props = $props();\n\n  let dispatch = createEventDispatcher();\n\n  function handleState(): void {\n    checked = !checked;\n    dispatch('change', checked);\n  }\n</script>\n\n<div\n  class=\"mc-toggle {!label ? ' mc-toggle--hide-label' : ''} {size === 'm'\n    ? ' mc-toggle--m'\n    : ''}\"\n>\n  <label class=\"mc-toggle__container\">\n    <input\n      class=\"mc-toggle__input\"\n      id={name}\n      {name}\n      type=\"checkbox\"\n      {checked}\n      {disabled}\n      onclick={handleState}\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":["lifecycle_outside_component","name","create_custom_event","type","detail","bubbles","cancelable","createEventDispatcher","active_component_context","component_context","options","events","_a","callbacks","is_array","event","fn","handleState","_","checked","dispatch","$.prop","$$props","disabled","size","label","$$render","consequent"],"mappings":"6OAuCO,SAASA,EAA4BC,EAAM,CAOhD,MAAM,IAAI,MAAM,kDAAkD,CAEpE,CCmDA,SAASC,EAAoBC,EAAMC,EAAQ,CAAE,QAAAC,EAAU,GAAO,WAAAC,EAAa,EAAO,EAAG,GAAI,CACxF,OAAO,IAAI,YAAYH,EAAM,CAAE,OAAAC,EAAQ,QAAAC,EAAS,WAAAC,EAAY,CAC7D,CAyBO,SAASC,GAAwB,CACvC,MAAMC,EAA2BC,EACjC,OAAID,IAA6B,MAChCR,EAAmD,EAG7C,CAACG,EAAMC,EAAQM,IAAY,OACjC,MAAMC,GACLC,EAAAJ,EAAyB,EAAE,WAA3B,YAAAI,EACuBT,GAExB,GAAIQ,EAAQ,CACX,MAAME,EAAYC,EAASH,CAAM,EAAIA,EAAO,MAAK,EAAK,CAACA,CAAM,EAGvDI,EAAQb,EAA2CC,EAAOC,EAAQM,CAAO,EAC/E,UAAWM,KAAMH,EAChBG,EAAG,KAAKR,EAAyB,EAAGO,CAAK,EAE1C,MAAO,CAACA,EAAM,gBACjB,CAEE,MAAO,EACP,CACF,CC9HW,SAAAE,EAAoBC,EAAAC,EAAAC,EAAA,CAC3BD,GAAWA,GAAO,EAClBC,EAAS,SAAUD,GAAO,CAC5B;;6lPAZElB,EAAIoB,EAAAC,EAAA,OAAA,CAAA,EACJH,EAAOE,EAAAC,EAAA,UAAA,EAAA,EACPC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,EAAKJ,EAAAC,EAAA,QAAA,CAAA,EAGHF,EAAWb,EAAqB,0CAqBvBU,EAAWE,EAAAC,CAAA,6DAGYK,EAAK,CAAA,CAAA,kBADlCA,EAAK,GAAAC,EAAAC,CAAA,+CAdOF,EAAK,EAA8B,GAA3B,wBAA6B,IAAGD,EAAI,IAAK,IAChE,gBACA,EAAE,GAAA,eAAA,WAKEvB,GAAI,gMArBC,GAAK,6CACT,IAAG","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Toggle.js","sources":["../../../node_modules/svelte/src/index-client.js","../../../src/components/toggle/Toggle.svelte"],"sourcesContent":["/** @import { ComponentContext, ComponentContextLegacy } from '#client' */\n/** @import { EventDispatcher } from './index.js' */\n/** @import { NotFunction } from './internal/types.js' */\nimport { active_reaction, untrack } from './internal/client/runtime.js';\nimport { is_array } from './internal/shared/utils.js';\nimport { user_effect } from './internal/client/index.js';\nimport * as e from './internal/client/errors.js';\nimport { legacy_mode_flag } from './internal/flags/index.js';\nimport { component_context } from './internal/client/context.js';\nimport { DEV } from 'esm-env';\n\nif (DEV) {\n\t/**\n\t * @param {string} rune\n\t */\n\tfunction throw_rune_error(rune) {\n\t\tif (!(rune in globalThis)) {\n\t\t\t// TODO if people start adjusting the \"this can contain runes\" config through v-p-s more, adjust this message\n\t\t\t/** @type {any} */\n\t\t\tlet value; // let's hope noone modifies this global, but belts and braces\n\t\t\tObject.defineProperty(globalThis, rune, {\n\t\t\t\tconfigurable: true,\n\t\t\t\t// eslint-disable-next-line getter-return\n\t\t\t\tget: () => {\n\t\t\t\t\tif (value !== undefined) {\n\t\t\t\t\t\treturn value;\n\t\t\t\t\t}\n\n\t\t\t\t\te.rune_outside_svelte(rune);\n\t\t\t\t},\n\t\t\t\tset: (v) => {\n\t\t\t\t\tvalue = v;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tthrow_rune_error('$state');\n\tthrow_rune_error('$effect');\n\tthrow_rune_error('$derived');\n\tthrow_rune_error('$inspect');\n\tthrow_rune_error('$props');\n\tthrow_rune_error('$bindable');\n}\n\n/**\n * Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.\n *\n * Must be called while a derived or effect is running.\n *\n * ```svelte\n * <script>\n * \timport { getAbortSignal } from 'svelte';\n *\n * \tlet { id } = $props();\n *\n * \tasync function getData(id) {\n * \t\tconst response = await fetch(`/items/${id}`, {\n * \t\t\tsignal: getAbortSignal()\n * \t\t});\n *\n * \t\treturn await response.json();\n * \t}\n *\n * \tconst data = $derived(await getData(id));\n * </script>\n * ```\n */\nexport function getAbortSignal() {\n\tif (active_reaction === null) {\n\t\te.get_abort_signal_outside_reaction();\n\t}\n\n\treturn (active_reaction.ac ??= new AbortController()).signal;\n}\n\n/**\n * `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.\n * Unlike `$effect`, the provided function only runs once.\n *\n * It must be called during the component's initialisation (but doesn't need to live _inside_ the component;\n * it can be called from an external module). If a function is returned _synchronously_ from `onMount`,\n * it will be called when the component is unmounted.\n *\n * `onMount` functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).\n *\n * @template T\n * @param {() => NotFunction<T> | Promise<NotFunction<T>> | (() => any)} fn\n * @returns {void}\n */\nexport function onMount(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onMount');\n\t}\n\n\tif (legacy_mode_flag && component_context.l !== null) {\n\t\tinit_update_callbacks(component_context).m.push(fn);\n\t} else {\n\t\tuser_effect(() => {\n\t\t\tconst cleanup = untrack(fn);\n\t\t\tif (typeof cleanup === 'function') return /** @type {() => void} */ (cleanup);\n\t\t});\n\t}\n}\n\n/**\n * Schedules a callback to run immediately before the component is unmounted.\n *\n * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the\n * only one that runs inside a server-side component.\n *\n * @param {() => any} fn\n * @returns {void}\n */\nexport function onDestroy(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onDestroy');\n\t}\n\n\tonMount(() => () => untrack(fn));\n}\n\n/**\n * @template [T=any]\n * @param {string} type\n * @param {T} [detail]\n * @param {any}params_0\n * @returns {CustomEvent<T>}\n */\nfunction create_custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {\n\treturn new CustomEvent(type, { detail, bubbles, cancelable });\n}\n\n/**\n * Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events).\n * Event dispatchers are functions that can take two arguments: `name` and `detail`.\n *\n * Component events created with `createEventDispatcher` create a\n * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).\n * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).\n * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)\n * property and can contain any type of data.\n *\n * The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:\n * ```ts\n * const dispatch = createEventDispatcher<{\n *  loaded: null; // does not take a detail argument\n *  change: string; // takes a detail argument of type string, which is required\n *  optional: number | null; // takes an optional detail argument of type number\n * }>();\n * ```\n *\n * @deprecated Use callback props and/or the `$host()` rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)\n * @template {Record<string, any>} [EventMap = any]\n * @returns {EventDispatcher<EventMap>}\n */\nexport function createEventDispatcher() {\n\tconst active_component_context = component_context;\n\tif (active_component_context === null) {\n\t\te.lifecycle_outside_component('createEventDispatcher');\n\t}\n\n\treturn (type, detail, options) => {\n\t\tconst events = /** @type {Record<string, Function | Function[]>} */ (\n\t\t\tactive_component_context.s.$$events\n\t\t)?.[/** @type {any} */ (type)];\n\n\t\tif (events) {\n\t\t\tconst callbacks = is_array(events) ? events.slice() : [events];\n\t\t\t// TODO are there situations where events could be dispatched\n\t\t\t// in a server (non-DOM) environment?\n\t\t\tconst event = create_custom_event(/** @type {string} */ (type), detail, options);\n\t\t\tfor (const fn of callbacks) {\n\t\t\t\tfn.call(active_component_context.x, event);\n\t\t\t}\n\t\t\treturn !event.defaultPrevented;\n\t\t}\n\n\t\treturn true;\n\t};\n}\n\n// TODO mark beforeUpdate and afterUpdate as deprecated in Svelte 6\n\n/**\n * Schedules a callback to run immediately before the component is updated after any state change.\n *\n * The first time the callback runs will be before the initial `onMount`.\n *\n * In runes mode use `$effect.pre` instead.\n *\n * @deprecated Use [`$effect.pre`](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function beforeUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('beforeUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('beforeUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).b.push(fn);\n}\n\n/**\n * Schedules a callback to run immediately after the component has been updated.\n *\n * The first time the callback runs will be after the initial `onMount`.\n *\n * In runes mode use `$effect` instead.\n *\n * @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function afterUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('afterUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('afterUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).a.push(fn);\n}\n\n/**\n * Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate\n * @param {ComponentContext} context\n */\nfunction init_update_callbacks(context) {\n\tvar l = /** @type {ComponentContextLegacy} */ (context).l;\n\treturn (l.u ??= { a: [], b: [], m: [] });\n}\n\nexport { flushSync } from './internal/client/reactivity/batch.js';\nexport { getContext, getAllContexts, hasContext, setContext } from './internal/client/context.js';\nexport { hydrate, mount, unmount } from './internal/client/render.js';\nexport { tick, untrack, settled } from './internal/client/runtime.js';\nexport { createRawSnippet } from './internal/client/dom/blocks/snippet.js';\n","<svelte:options customElement=\"m-toggle\" />\n\n<script lang=\"ts\">\n  import type { ToggleSize } from './toggle.types';\n  import { createEventDispatcher } from 'svelte';\n\n  interface Props {\n    name: string;\n    checked: boolean;\n    disabled?: boolean;\n    size?: ToggleSize;\n    label: string;\n  }\n\n  let {\n    name,\n    checked = $bindable(),\n    disabled = false,\n    size = 'm',\n    label,\n  }: Props = $props();\n\n  let dispatch = createEventDispatcher();\n\n  function handleState(): void {\n    checked = !checked;\n    dispatch('change', checked);\n  }\n</script>\n\n<div\n  class=\"mc-toggle {!label ? ' mc-toggle--hide-label' : ''} {size === 'm'\n    ? ' mc-toggle--m'\n    : ''}\"\n>\n  <label class=\"mc-toggle__container\">\n    <input\n      class=\"mc-toggle__input\"\n      id={name}\n      {name}\n      type=\"checkbox\"\n      {checked}\n      {disabled}\n      onclick={handleState}\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":["create_custom_event","type","detail","bubbles","cancelable","createEventDispatcher","active_component_context","component_context","e.lifecycle_outside_component","options","events","_a","callbacks","is_array","event","fn","handleState","_","checked","dispatch","name","$.prop","$$props","disabled","size","label","$$render","consequent"],"mappings":"yPAiIA,SAASA,EAAoBC,EAAMC,EAAQ,CAAE,QAAAC,EAAU,GAAO,WAAAC,EAAa,EAAO,EAAG,GAAI,CACxF,OAAO,IAAI,YAAYH,EAAM,CAAE,OAAAC,EAAQ,QAAAC,EAAS,WAAAC,EAAY,CAC7D,CAyBO,SAASC,GAAwB,CACvC,MAAMC,EAA2BC,EACjC,OAAID,IAA6B,MAChCE,EAAqD,EAG/C,CAACP,EAAMC,EAAQO,IAAY,OACjC,MAAMC,GACLC,EAAAL,EAAyB,EAAE,WAA3B,YAAAK,EACuBV,GAExB,GAAIS,EAAQ,CACX,MAAME,EAAYC,EAASH,CAAM,EAAIA,EAAO,MAAK,EAAK,CAACA,CAAM,EAGvDI,EAAQd,EAA2CC,EAAOC,EAAQO,CAAO,EAC/E,UAAWM,KAAMH,EAChBG,EAAG,KAAKT,EAAyB,EAAGQ,CAAK,EAE1C,MAAO,CAACA,EAAM,gBACjB,CAEE,MAAO,EACP,CACF,CC5JW,SAAAE,EAAoBC,EAAAC,EAAAC,EAAA,CAC3BD,GAAWA,GAAO,EAClBC,EAAS,SAAUD,GAAO,CAC5B;;srPA3BF,oBAeIE,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJJ,EAAOG,EAAAC,EAAA,UAAA,EAAA,EACPC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,EAAKJ,EAAAC,EAAA,QAAA,CAAA,EAGHH,EAAWd,EAAqB,0CAqBvBW,EAAWE,EAAAC,CAAA,6DAGYM,EAAK,CAAA,CAAA,kBADlCA,EAAK,GAAAC,EAAAC,CAAA,+CAdOF,EAAK,EAA8B,GAA3B,wBAA6B,IAAGD,EAAI,IAAK,IAChE,gBACA,EAAE,GAAA,eAAA,WAKEJ,GAAI,gMArBC,GAAK,6CACT,IAAG,2DAUd","x_google_ignoreList":[0]}