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

package/dist/components/toggle/Toggle.svelte

@@ -1,61 +1,165 @@
-<svelte:options tag={null} />
+<svelte:options
+  customElement={{
+    tag: 'm-toggle',
+    extend: customElementForwardEvents,
+  }}
+/>
 
 <script lang="ts">
   import type { ToggleSize } from './toggle.types';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import { createEventForwarder } from '../../utilities/EventForward';
+  import { customElementForwardEvents } from '../../utils';
 
-  export let name: string;
-  export let checked: boolean;
-  export let disabled = false;
-  export let size: ToggleSize = 'm';
-  export let label: string;
-
-  const forwardEvents = createEventForwarder(get_current_component());
-
-  $: userClass = $$props.class;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-
-  function handleState(): void {
-    checked = !checked;
-    eventHandler.dispatch('change', checked);
+  interface Props {
+    name: string;
+    checked: boolean;
+    disabled?: boolean;
+    size?: ToggleSize;
+    label: string;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
   }
+
+  let {
+    name,
+    checked = $bindable(),
+    disabled = false,
+    size = 'm',
+    label,
+    onchange,
+    onblur
+  }: Props = $props();
 </script>
 
 <div
-  class="mc-toggle {!label ? ' mc-toggle--hide-label' : ''} {size === 's'
-    ? ' mc-toggle--s'
-    : ''} {userClass}"
-  {...attributes}
+  class="mc-toggle"
+  class:mc-toggle--hide-label={!label}
+  class:mc-toggle--m={size === 'm'}
 >
-  <input
-    use:forwardEvents
-    class="mc-toggle__input"
-    id={name}
-    {name}
-    type="checkbox"
-    {checked}
-    {disabled}
-    on:click={handleState}
-  />
-  <label class="mc-toggle__label" for={name}>
+  <label class="mc-toggle__container">
+    <input
+      class="mc-toggle__input"
+      id={name}
+      {name}
+      type="checkbox"
+      bind:checked
+      {disabled}
+      {onchange}
+      {onblur}
+    />
     {#if label}
-      <span class="mc-toggle__content">{label}</span>
+      <span class="mc-toggle__label">{label}</span>
     {/if}
   </label>
 </div>
 
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.toggle';
-</style>
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-toggle {
+  width: fit-content;
+}
+.mc-toggle__container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 0.5rem;
+  position: relative;
+  padding: 0.25rem;
+}
+.mc-toggle__container::before, .mc-toggle__container::after {
+  content: "";
+}
+.mc-toggle__container::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::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 {
+  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 {
+  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:has(:checked) .mc-toggle__container::before {
+  background-color: var(--forms-color-background-checked, #117f03);
+}
+.mc-toggle:has(:checked) .mc-toggle__container::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:has(:disabled) .mc-toggle__container {
+  cursor: not-allowed;
+}
+.mc-toggle:has(:disabled) .mc-toggle__container::before {
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
+}
+.mc-toggle:has(:disabled) .mc-toggle__container::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:has(:disabled) .mc-toggle__label {
+  color: var(--forms-color-text-disabled, #737373);
+}
+.mc-toggle:has(:disabled:checked) .mc-toggle__container::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:has(:focus-visible) .mc-toggle__container::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 .mc-toggle__container::before {
+  height: 2rem;
+  width: 3.5rem;
+}
+.mc-toggle--m .mc-toggle__container::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:has(:checked) .mc-toggle__container::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:has(:disabled) .mc-toggle__container::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:has(:disabled:checked) .mc-toggle__container::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 .mc-toggle__label {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}</style>

package/dist/components/toggle/Toggle.svelte.d.ts

@@ -5,25 +5,10 @@ interface Props {
     disabled?: boolean;
     size?: ToggleSize;
     label: string;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => 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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Toggle: $$__sveltets_2_IsomorphicComponent<Props, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "checked">;
-type Toggle = InstanceType<typeof Toggle>;
+declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;
 //# sourceMappingURL=Toggle.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI/C,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAuCH,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;AAKD,QAAA,MAAM,MAAM;;;;qBAA6E,CAAC;AACxE,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI/C,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAmCH,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

@@ -1,7 +1,7 @@
-import{c as I,p as O,a as S,b as T,d as s,e as Y,f as p,g as n,s as P,h as a,r as o,t as m,i as q,j as u,k as y,l as J,m as d}from"../../custom-element.js";import{i as B}from"../../if.js";import{e as K}from"../../each.js";import{r as N,s as b}from"../../attributes.js";import{b as Q}from"../../input.js";import{c as R}from"../../custom-element-forward-events.js";var U=p('<legend class="mc-field__legend svelte-7x6fn9"> </legend>'),V=p('<span class="mc-toggle__label svelte-7x6fn9"> </span>'),W=p('<div><label class="mc-toggle__container svelte-7x6fn9"><input class="mc-toggle__input svelte-7x6fn9" type="checkbox"/> <!></label></div>'),X=p('<fieldset class="mc-field mc-field--group svelte-7x6fn9"><!> <div class="mc-field__container svelte-7x6fn9"></div></fieldset>');const Z={hash:"svelte-7x6fn9",code:`/**
+import{c as I,k as O,a as S,b as s,f as p,t as m,h as u,i as T,p as Y,l as q,d as n,s as P,r as o,j as d,g as y,m as a,e as J}from"../../custom-element.js";import{i as B}from"../../if.js";import{e as K}from"../../each.js";import{s as b,r as N}from"../../attributes.js";import{b as Q}from"../../input.js";import{c as R}from"../../custom-element-forward-events.js";var U=p('<legend class="mc-field__legend svelte-7x6fn9"> </legend>'),V=p('<span class="mc-toggle__label svelte-7x6fn9"> </span>'),W=p('<div><label class="mc-toggle__container svelte-7x6fn9"><input class="mc-toggle__input svelte-7x6fn9" type="checkbox"/> <!></label></div>'),X=p('<fieldset class="mc-field mc-field--group svelte-7x6fn9"><!> <div class="mc-field__container svelte-7x6fn9"></div></fieldset>');const Z={hash:"svelte-7x6fn9",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */ .mc-field__legend.svelte-7x6fn9 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__legend.svelte-7x6fn9 {padding-inline:0;}.mc-field--group.svelte-7x6fn9 {border-width:0;margin-inline:0;padding:0;}
 
-/* stylelint-enable string-no-newline */.mc-toggle.svelte-7x6fn9 {width:fit-content;}.mc-toggle__container.svelte-7x6fn9 {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-7x6fn9::before, .mc-toggle__container.svelte-7x6fn9::after {content:"";}.mc-toggle__container.svelte-7x6fn9::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-7x6fn9::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-7x6fn9 {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-7x6fn9 {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-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9) {cursor:not-allowed;}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__label:where(.svelte-7x6fn9) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled:checked) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):focus-visible) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9 .mc-toggle__container:where(.svelte-7x6fn9)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-7x6fn9 .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):disabled:checked) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9 .mc-toggle__label:where(.svelte-7x6fn9) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function $(C,r){const k=O();S(r,!0),T(C,Z);const H=[];let g=s(r,"name",7),f=s(r,"id",7,k),c=s(r,"options",7),h=s(r,"legend",7),v=s(r,"values",31,()=>Y([]));function j(e){var l;return((l=c()[e])==null?void 0:l.id)??`${f()}-${e}`}var x=X(),L=n(x);{var A=e=>{var l=U(),i=n(l,!0);o(l),m(()=>y(i,h())),u(e,l)};B(L,e=>{h()&&e(A)})}var w=P(L,2);return K(w,23,c,(e,l)=>j(l),(e,l)=>{var i=W(),z=n(i),t=n(z);N(t);var M,D=P(t,2);{var F=E=>{var _=V(),G=n(_,!0);o(_),m(()=>y(G,a(l).label)),u(E,_)};B(D,E=>{a(l).label&&E(F)})}o(z),o(i),m(()=>{q(i,1,`mc-toggle mc-field__item ${a(l).label?"":" mc-toggle--hide-label"} ${a(l).size==="m"?" mc-toggle--m":""}`,"svelte-7x6fn9"),b(t,"id",g()),b(t,"name",g()),t.disabled=a(l).disabled,M!==(M=a(l).value)&&(t.value=(t.__value=a(l).value)??"")}),Q(H,[],t,()=>(a(l).value,v()),v),u(e,i)}),o(w),o(x),m(()=>b(w,"id",f())),u(C,x),J({get name(){return g()},set name(e){g(e),d()},get id(){return f()},set id(e=k){f(e),d()},get options(){return c()},set options(e){c(e),d()},get legend(){return h()},set legend(e){h(e),d()},get values(){return v()},set values(e=[]){v(e),d()}})}customElements.define("m-toggle-group",I($,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},id:{},legend:{},values:{}},[],[],!0,R));
+/* stylelint-enable string-no-newline */.mc-toggle.svelte-7x6fn9 {width:fit-content;}.mc-toggle__container.svelte-7x6fn9 {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-7x6fn9::before, .mc-toggle__container.svelte-7x6fn9::after {content:"";}.mc-toggle__container.svelte-7x6fn9::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-7x6fn9::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-7x6fn9 {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-7x6fn9 {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-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9) {cursor:not-allowed;}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__label:where(.svelte-7x6fn9) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled:checked) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):focus-visible) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9 .mc-toggle__container:where(.svelte-7x6fn9)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-7x6fn9 .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9:has(:where(.svelte-7x6fn9):disabled:checked) .mc-toggle__container:where(.svelte-7x6fn9)::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-7x6fn9 .mc-toggle__label:where(.svelte-7x6fn9) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function $(C,r){const k=O();Y(r,!0),S(C,Z);const H=[];let g=s(r,"name",7),f=s(r,"id",7,k),c=s(r,"options",7),h=s(r,"legend",7),v=s(r,"values",31,()=>q([]));function j(e){var l;return((l=c()[e])==null?void 0:l.id)??`${f()}-${e}`}var x=X(),L=n(x);{var A=e=>{var l=U(),i=n(l,!0);o(l),m(()=>y(i,h())),u(e,l)};B(L,e=>{h()&&e(A)})}var w=P(L,2);return K(w,23,c,(e,l)=>j(l),(e,l)=>{var i=W(),z=n(i),t=n(z);N(t);var M,D=P(t,2);{var F=E=>{var _=V(),G=n(_,!0);o(_),m(()=>y(G,a(l).label)),u(E,_)};B(D,E=>{a(l).label&&E(F)})}o(z),o(i),m(()=>{J(i,1,`mc-toggle mc-field__item ${a(l).label?"":" mc-toggle--hide-label"} ${a(l).size==="m"?" mc-toggle--m":""}`,"svelte-7x6fn9"),b(t,"id",g()),b(t,"name",g()),t.disabled=a(l).disabled,M!==(M=a(l).value)&&(t.value=(t.__value=a(l).value)??"")}),Q(H,[],t,()=>(a(l).value,v()),v),u(e,i)}),o(w),o(x),m(()=>b(w,"id",f())),u(C,x),T({get name(){return g()},set name(e){g(e),d()},get id(){return f()},set id(e=k){f(e),d()},get options(){return c()},set options(e){c(e),d()},get legend(){return h()},set legend(e){h(e),d()},get values(){return v()},set values(e=[]){v(e),d()}})}customElements.define("m-toggle-group",I($,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},id:{},legend:{},values:{}},[],[],!0,R));
 //# sourceMappingURL=ToggleGroup.js.map

package/dist/components/togglegroup/ToggleGroup.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta } from '@storybook/html-vite';
+/**
+ * Toggle Groups are used to manage multiple toggle switches within a group.
+ * They allow users to choose multiple options using toggles, typically for preference or feature settings.
+ *
+ * The `MToggleGroup` component is the **Svelte / WebComponent** implementation of the **Toggle group** component of Mozaic Design System.
+ * You can refer to the full specification in [the documentation](https://mozaic.adeo.cloud/components/form/toggle).
+ */
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const AllChecked: any;
+export declare const SomeDisabled: any;
+//# sourceMappingURL=ToggleGroup.stories.d.ts.map

package/dist/components/togglegroup/ToggleGroup.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/togglegroup/ToggleGroup.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBA+BE,IAAI;AA7BT,wBA6BU;AAaV,eAAO,MAAM,OAAO,KAAoB,CAAC;AA8BzC,eAAO,MAAM,UAAU,KAAoB,CAAC;AAkB5C,eAAO,MAAM,YAAY,KAAoB,CAAC"}

package/dist/components/togglegroup/ToggleGroup.stories.js

@@ -0,0 +1,109 @@
+import { action } from 'storybook/actions';
+import { userEvent, expect } from 'storybook/test';
+/**
+ * Toggle Groups are used to manage multiple toggle switches within a group.
+ * They allow users to choose multiple options using toggles, typically for preference or feature settings.
+ *
+ * The `MToggleGroup` component is the **Svelte / WebComponent** implementation of the **Toggle group** component of Mozaic Design System.
+ * You can refer to the full specification in [the documentation](https://mozaic.adeo.cloud/components/form/toggle).
+ */
+export default {
+    title: 'Form Elements/Toggle Group',
+    tags: ['autodocs', 'new'],
+    argTypes: {
+        legend: {
+            description: 'Specify the legend of the group.',
+            control: { type: 'text' },
+        },
+        id: {
+            description: 'Specify the toggle group id.',
+            control: { type: 'text' },
+        },
+        options: {
+            description: 'Specify the toggle options in JSON format. ```{ value: string; id?: string; label?: string; disabled?: boolean; size?: "s" | "m"; }[]```',
+            control: { type: 'object' },
+        },
+        values: {
+            description: 'Specify the toggle selected values.',
+            control: { type: 'object' },
+        },
+        onChange: {
+            description: 'Event triggered when the toggle state changes.',
+            action: 'change',
+            table: {
+                category: 'Events',
+            },
+        },
+    },
+};
+const Template = (args) => {
+    const toggleGroup = document.createElement('m-toggle-group');
+    toggleGroup.setAttribute('id', args.id || 'toggle-group-id');
+    toggleGroup.setAttribute('size', args.size || 's');
+    toggleGroup.setAttribute('legend', args.legend || 'Toggle Group Title');
+    toggleGroup.setAttribute('options', JSON.stringify(args.options || []));
+    toggleGroup.setAttribute('values', JSON.stringify(args.values || []));
+    toggleGroup.onchange = action('onChange');
+    return toggleGroup;
+};
+export const Default = Template.bind({});
+Default.args = {
+    options: [
+        {
+            id: 'toggle1',
+            label: 'Option 1',
+            value: 'option1',
+        },
+        {
+            id: 'toggle2',
+            label: 'Option 2',
+            value: 'option2',
+        },
+        {
+            id: 'toggle3',
+            label: 'Option 3',
+            value: 'option3',
+        },
+    ],
+    values: ['option2'],
+};
+Default.play = async ({ canvasElement }) => {
+    const group = canvasElement.querySelector('m-toggle-group');
+    const toggles = group?.shadowRoot?.querySelectorAll('input[type="checkbox"]');
+    expect(group).not.toBeNull();
+    expect(toggles?.length).toBe(3);
+    await userEvent.click(toggles[0]);
+    expect(toggles?.[0]).toBeChecked();
+};
+export const AllChecked = Template.bind({});
+AllChecked.args = {
+    options: [
+        { id: 'toggle1', label: 'Option 1', value: 'option1' },
+        { id: 'toggle2', label: 'Option 2', value: 'option2' },
+        { id: 'toggle3', label: 'Option 3', value: 'option3' },
+    ],
+    values: ['option1', 'option2', 'option3'],
+    size: 'm',
+};
+AllChecked.play = async ({ canvasElement }) => {
+    const toggles = canvasElement
+        .querySelector('m-toggle-group')
+        ?.shadowRoot?.querySelectorAll('input[type="checkbox"]');
+    expect(toggles?.length).toBe(3);
+    toggles?.forEach((toggle) => expect(toggle).toBeChecked());
+};
+export const SomeDisabled = Template.bind({});
+SomeDisabled.args = {
+    options: [
+        { id: 'toggle1', label: 'Option 1', value: 'option1', disabled: true },
+        { id: 'toggle2', label: 'Option 2', value: 'option2' },
+        { id: 'toggle3', label: 'Option 3', value: 'option3' },
+    ],
+    values: ['option2'],
+};
+SomeDisabled.play = async ({ canvasElement }) => {
+    const toggles = canvasElement
+        .querySelector('m-toggle-group')
+        ?.shadowRoot?.querySelectorAll('input[type="checkbox"]');
+    expect(toggles?.[0]).toBeDisabled();
+};

package/dist/components/togglegroup/ToggleGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/togglegroup/ToggleGroup.svelte.ts"],"names":[],"mappings":"AAME,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAED,UAAU,KAAK;IACb,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;CACjC;AAsDH,QAAA,MAAM,WAAW,iDAAsC,CAAC;AACxD,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ToggleGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/togglegroup/ToggleGroup.svelte.ts"],"names":[],"mappings":"AAME,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAED,UAAU,KAAK;IACb,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;CACjC;AAsDH,QAAA,MAAM,WAAW,iDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/tooltip/Tooltip.js

@@ -1,2 +1,6 @@
-import{S as t,i as o,a as e,b as r,f as n,s as i,c as a,e as s,d as l,v as m,n as c,h as p,j as f,k as d,y as b,l as h,m as _,o as g,u as w}from"../../index-c222d0b7.js";function x(t){let o,e,n,i,g,w,x=[{class:w=u(t[2])+" "+t[4]},{"aria-describedby":t[0]},t[3]],k={};for(let t=0;t<x.length;t+=1)k=a(k,x[t]);return{c(){o=s("div"),e=s("slot"),n=l(),i=s("span"),g=m(t[1]),this.c=c,p(i,"id",t[0]),p(i,"class","mc-tooltip__content"),p(i,"role","tooltip"),f(o,k)},m(t,a){r(t,o,a),d(o,e),d(o,n),d(o,i),d(i,g)},p(t,[e]){2&e&&b(g,t[1]),1&e&&p(i,"id",t[0]),f(o,k=h(x,[20&e&&w!==(w=u(t[2])+" "+t[4])&&{class:w},1&e&&{"aria-describedby":t[0]},8&e&&t[3]]))},i:c,o:c,d(t){t&&_(o)}}}function u(t){const o=["mc-tooltip"];return t&&o.push(`mc-tooltip--${t}`),o.join(" ")}function k(t,o,e){let r,n;const i=["id","text","position"];let s=g(o,i),{id:l}=o,{text:m}=o,{position:c}=o;return t.$$set=t=>{e(6,o=a(a({},o),w(t))),e(5,s=g(o,i)),"id"in t&&e(0,l=t.id),"text"in t&&e(1,m=t.text),"position"in t&&e(2,c=t.position)},t.$$.update=()=>{e(4,r=o.class),e(3,n=Object.assign({},s)),8&t.$$.dirty&&delete n.class},o=w(o),[l,m,c,n,r]}class v extends t{constructor(t){super();const a=document.createElement("style");a.textContent=".mc-tooltip{font-family:\"LeroyMerlin\", sans-serif;font-weight:400;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative}.mc-tooltip:focus,.mc-tooltip:hover,.mc-tooltip:focus-within{cursor:help}.mc-tooltip:focus .mc-tooltip__content,.mc-tooltip:hover .mc-tooltip__content,.mc-tooltip:focus-within .mc-tooltip__content{visibility:visible}.mc-tooltip__content{font-size:0.875rem;line-height:1.2857142857;background-color:#4d4d4d;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#ffffff;padding:0.4375rem 1rem;position:absolute;text-align:center;visibility:hidden;white-space:normal;z-index:var(--tooltip-content-z-index, 1000);border:1px solid #ffffff;word-break:break-word}@supports (width: -moz-max-content) or (width: max-content){.mc-tooltip__content{min-width:6.625rem;max-width:13.75rem;width:-webkit-max-content;width:-moz-max-content;width:max-content}}.mc-tooltip__content::before{background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath fill='%23ffffff' 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\") no-repeat;background-size:0.625rem;content:\"\";height:0.625rem;position:absolute;width:0.625rem}.mc-tooltip__content::after{background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath fill='%234d4d4d' 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\") no-repeat;background-size:0.5rem;content:\"\";height:0.5rem;position:absolute;width:0.5rem}.mc-tooltip--top .mc-tooltip__content{top:0;left:50%;-webkit-transform:translate(-50%, calc(-100% - 0.75rem));-ms-transform:translate(-50%, calc(-100% - 0.75rem));transform:translate(-50%, calc(-100% - 0.75rem))}.mc-tooltip--top .mc-tooltip__content::after,.mc-tooltip--top .mc-tooltip__content::before{bottom:0;left:50%;-webkit-transform:translate(-50%, 100%) rotate(-90deg);-ms-transform:translate(-50%, 100%) rotate(-90deg);transform:translate(-50%, 100%) rotate(-90deg)}.mc-tooltip--top .mc-tooltip__content::before{bottom:-1px}.mc-tooltip--right .mc-tooltip__content{top:50%;right:0;-webkit-transform:translate(calc(100% + 0.75rem), -50%);-ms-transform:translate(calc(100% + 0.75rem), -50%);transform:translate(calc(100% + 0.75rem), -50%)}.mc-tooltip--right .mc-tooltip__content::after,.mc-tooltip--right .mc-tooltip__content::before{top:50%;left:0;-webkit-transform:translate(-99%, -50%);-ms-transform:translate(-99%, -50%);transform:translate(-99%, -50%)}.mc-tooltip--right .mc-tooltip__content::before{left:-1px}.mc-tooltip--left .mc-tooltip__content{left:0;top:50%;-webkit-transform:translate(calc(-100% - 0.75rem), -50%);-ms-transform:translate(calc(-100% - 0.75rem), -50%);transform:translate(calc(-100% - 0.75rem), -50%)}.mc-tooltip--left .mc-tooltip__content::after,.mc-tooltip--left .mc-tooltip__content::before{top:50%;right:0;-webkit-transform:translate(99%, -50%) rotate(180deg);-ms-transform:translate(99%, -50%) rotate(180deg);transform:translate(99%, -50%) rotate(180deg)}.mc-tooltip--left .mc-tooltip__content::before{right:-1px}.mc-tooltip--bottom .mc-tooltip__content{bottom:0;left:50%;-webkit-transform:translate(-50%, calc(100% + 0.75rem));-ms-transform:translate(-50%, calc(100% + 0.75rem));transform:translate(-50%, calc(100% + 0.75rem))}.mc-tooltip--bottom .mc-tooltip__content::after,.mc-tooltip--bottom .mc-tooltip__content::before{top:0;left:50%;-webkit-transform:translate(-50%, -100%) rotate(90deg);-ms-transform:translate(-50%, -100%) rotate(90deg);transform:translate(-50%, -100%) rotate(90deg)}.mc-tooltip--bottom .mc-tooltip__content::before{top:-1px}.mc-tooltip--no-pointer .mc-tooltip__content::after,.mc-tooltip--no-pointer .mc-tooltip__content::before{background:none}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.mc-tooltip__content{width:13.75rem}.mc-tooltip--top .mc-tooltip__content{-webkit-transform:translate(-50%, -100%);-ms-transform:translate(-50%, -100%);transform:translate(-50%, -100%);margin-top:-0.75rem}.mc-tooltip--right .mc-tooltip__content{-webkit-transform:translate(100%, -50%);-ms-transform:translate(100%, -50%);transform:translate(100%, -50%);margin-right:-0.75rem}.mc-tooltip--left .mc-tooltip__content{-webkit-transform:translate(-100%, -50%);-ms-transform:translate(-100%, -50%);transform:translate(-100%, -50%);margin-left:-0.75rem}.mc-tooltip--bottom .mc-tooltip__content{-webkit-transform:translate(-50%, 100%);-ms-transform:translate(-50%, 100%);transform:translate(-50%, 100%);margin-bottom:-0.75rem}}",this.shadowRoot.appendChild(a),o(this,{target:this.shadowRoot,props:e(this.attributes),customElement:!0},k,x,i,{id:0,text:1,position:2},null),t&&(t.target&&r(t.target,this,t.anchor),t.props&&(this.$set(t.props),n()))}static get observedAttributes(){return["id","text","position"]}get id(){return this.$$.ctx[0]}set id(t){this.$$set({id:t}),n()}get text(){return this.$$.ctx[1]}set text(t){this.$$set({text:t}),n()}get position(){return this.$$.ctx[2]}set position(t){this.$$set({position:t}),n()}}export{v as default};
+import{c as _,p as g,a as u,b as l,f as w,d as b,s as x,r as d,t as k,e as y,g as z,h as E,i as C,j as i}from"../../custom-element.js";import{s as B}from"../../slot.js";import{s as h}from"../../attributes.js";var M=w('<div><!> <span class="mc-tooltip__content svelte-n4nb3v" role="tooltip"> </span></div>');const j={hash:"svelte-n4nb3v",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-tooltip.svelte-n4nb3v {display:inline-flex;position:relative;}.mc-tooltip.svelte-n4nb3v:focus, .mc-tooltip.svelte-n4nb3v:hover {cursor:help;}.mc-tooltip.svelte-n4nb3v:focus .mc-tooltip__content:where(.svelte-n4nb3v), .mc-tooltip.svelte-n4nb3v:hover .mc-tooltip__content:where(.svelte-n4nb3v) {visibility:visible;}.mc-tooltip__content.svelte-n4nb3v {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;}
+@supports (width: max-content) {.mc-tooltip__content.svelte-n4nb3v {width:max-content;}
+}.mc-tooltip__content.svelte-n4nb3v::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-n4nb3v::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-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v) {top:0;left:50%;transform:translate(-50%, calc(-100% - 1rem));}.mc-tooltip--top.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v)::after, .mc-tooltip--top.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v)::before {bottom:0;left:50%;transform:translate(-50%, 100%) rotate(-90deg);}.mc-tooltip--top.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v)::before {bottom:-1px;}.mc-tooltip--right.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v) {top:50%;right:0;transform:translate(calc(100% + 1rem), -50%);}.mc-tooltip--right.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v)::after, .mc-tooltip--right.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v)::before {top:50%;left:0;transform:translate(-99%, -50%);}.mc-tooltip--right.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v)::before {left:-1px;}.mc-tooltip--left.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v) {left:0;top:50%;transform:translate(calc(-100% - 1rem), -50%);}.mc-tooltip--left.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v)::after, .mc-tooltip--left.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v)::before {top:50%;right:0;transform:translate(99%, -50%) rotate(180deg);}.mc-tooltip--left.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v)::before {right:-1px;}.mc-tooltip--bottom.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v) {bottom:0;left:50%;transform:translate(-50%, calc(100% + 1rem));}.mc-tooltip--bottom.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v)::after, .mc-tooltip--bottom.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v)::before {top:0;left:50%;transform:translate(-50%, -100%) rotate(90deg);}.mc-tooltip--bottom.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v)::before {top:-1px;}.mc-tooltip--no-pointer.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v)::after, .mc-tooltip--no-pointer.svelte-n4nb3v .mc-tooltip__content:where(.svelte-n4nb3v)::before {background:none;}`};function D(c,e){g(e,!0),u(c,j);let r=l(e,"id",7),s=l(e,"text",7),o=l(e,"position",7,"top"),a=l(e,"pointer",7,!0);var n=M();let p;var m=b(n);B(m,e,"default",{});var v=x(m,2),f=b(v,!0);return d(v),d(n),k(t=>{p=y(n,1,"mc-tooltip svelte-n4nb3v",null,p,t),h(n,"aria-describedby",r()),h(v,"id",r()),z(f,s())},[()=>({"mc-tooltip--no-pointer":!a(),"mc-tooltip--top":o()==="top","mc-tooltip--bottom":o()==="bottom","mc-tooltip--left":o()==="left","mc-tooltip--right":o()==="right"})]),E(c,n),C({get id(){return r()},set id(t){r(t),i()},get text(){return s()},set text(t){s(t),i()},get position(){return o()},set position(t="top"){o(t),i()},get pointer(){return a()},set pointer(t=!0){a(t),i()}})}customElements.define("m-tooltip",_(D,{options:{attribute:"pointer",reflect:!0,type:"Boolean"},id:{},text:{},position:{},pointer:{}},["default"],[],!0));
 //# sourceMappingURL=Tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/tooltip/Tooltip.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { TooltipPosition } from './tooltip.types';\n\n  export let id: string;\n  export let text: string;\n  export let position: TooltipPosition;\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  function getClasses(position: TooltipPosition) {\n    const classes = ['mc-tooltip'];\n\n    if (position) {\n      classes.push(`mc-tooltip--${position}`);\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<div\n  class=\"{getClasses(position)} {userClass}\"\n  aria-describedby={id}\n  {...attributes}\n>\n  <slot />\n  <span {id} class=\"mc-tooltip__content\" role=\"tooltip\">\n    {text}\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.tooltip';\n</style>\n"],"names":["getClasses","ctx","insert","target","div","anchor","append","slot","span","class","div_class_value","position","classes","push","join","id","$$props","text","$$invalidate","userClass","attributes","Object","assign","$$restProps"],"mappings":"oNAsBUA,EAAWC,EAAQ,IAAA,IAAIA,EAAS,wBACtBA,EAAE,IAChBA,EAAU,yGAIXA,EAAI,oGAPTC,EASKC,EAAAC,EAAAC,GAJHC,EAAOF,EAAAG,UACPD,EAEMF,EAAAI,6BADHP,EAAI,gDANCD,EAAWC,EAAQ,IAAA,IAAIA,EAAS,KAAA,CAAAQ,MAAAC,4BACtBT,EAAE,SAChBA,EAAU,8BAbL,SAAAD,EAAWW,GACZ,MAAAC,GAAW,qBAEbD,GACFC,EAAQC,KAAI,eAAgBF,KAEvBC,EAAQE,KAAK,iFAZXC,GAAUC,QACVC,GAAYD,YACZL,GAAyBK,8JACjCE,EAAA,EAAAC,EAAYH,EAAQP,WACpBW,EAALC,OAAAC,UAAuBC,yBACXH,EAAWX"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/tooltip/Tooltip.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-tooltip',\n    props: {\n      options: { reflect: true, type: 'Boolean', attribute: 'pointer' },\n    },\n  }}\n/>\n\n<script lang=\"ts\">\n  interface Props {\n    id: string;\n    text: string;\n    position?: 'top' | 'bottom' | 'left' | 'right';\n    pointer?: boolean;\n  }\n\n  let { id, text, position = 'top', pointer = true }: Props = $props();\n</script>\n\n<div\n  class=\"mc-tooltip\"\n  class:mc-tooltip--no-pointer={!pointer}\n  class:mc-tooltip--top={position === 'top'}\n  class:mc-tooltip--bottom={position === 'bottom'}\n  class:mc-tooltip--left={position === 'left'}\n  class:mc-tooltip--right={position === 'right'}\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":";;;;49FAAA,oBAiBQA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,mBAAW,KAAK,EAAEC,kBAAU,EAAI,mKAU9BL,GAAE,oBAIjBG,GAAI,oCATwBE,EAAO,EACf,kBAAAD,EAAQ,IAAK,MACV,qBAAAA,EAAQ,IAAK,SACf,mBAAAA,EAAQ,IAAK,OACZ,oBAAAA,EAAQ,IAAK,sJATX,MAAK,mDAAY,GAAI,YAClD"}

package/dist/components/tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/html-vite';
+declare const _default: Meta;
+export default _default;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const NoPointer: Story;
+export declare const Top: Story;
+export declare const Bottom: Story;
+export declare const Left: Story;
+export declare const Right: Story;
+//# sourceMappingURL=Tooltip.stories.d.ts.map

package/dist/components/tooltip/Tooltip.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;wBAmBtD,IAAI;AAhBT,wBAgBU;AAEV,KAAK,KAAK,GAAG,QAAQ,CAAC;AAqBtB,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,KAGjB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAGpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAGlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC"}

package/dist/components/tooltip/Tooltip.stories.js

@@ -0,0 +1,73 @@
+import { userEvent, within, waitFor, expect } from 'storybook/test';
+export default {
+    title: 'Overlay/Tooltip',
+    tags: ['autodocs', 'beta'],
+    args: {
+        id: 'tooltip-id',
+        text: 'Tooltip content',
+        position: 'top',
+        pointer: true,
+        trigger: '<div id="trigger">Hover me</div>',
+    },
+    argTypes: {
+        trigger: {
+            table: { category: 'Slots' },
+            control: 'text',
+        },
+    },
+};
+const Template = (args) => {
+    const wrapper = document.createElement('div');
+    wrapper.setAttribute('style', 'padding:3rem 8rem;');
+    const tooltip = document.createElement('m-tooltip');
+    tooltip.setAttribute('id', args.id);
+    tooltip.setAttribute('text', args.text);
+    if (args.position)
+        tooltip.setAttribute('position', args.position);
+    tooltip.pointer = args.pointer;
+    // Inject slot content (e.g., a button)
+    const trigger = document.createElement('span');
+    trigger.innerHTML = args.trigger ?? '<span>Hover me</span>';
+    tooltip.appendChild(trigger);
+    wrapper.appendChild(tooltip);
+    return wrapper;
+};
+export const Default = {
+    render: Template,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const tooltipHost = canvasElement.querySelector('m-tooltip');
+        const button = tooltipHost?.querySelector('div');
+        const tooltip = tooltipHost?.shadowRoot?.querySelector('.mc-tooltip') ||
+            tooltipHost?.querySelector('.mc-tooltip');
+        expect(button).not.toBeNull();
+        expect(tooltip).not.toBeNull();
+    },
+};
+export const NoPointer = {
+    args: {
+        pointer: false,
+    },
+    render: Template,
+    play: async ({ canvasElement }) => {
+        const tooltip = canvasElement.querySelector('m-tooltip');
+        const el = tooltip?.shadowRoot?.querySelector('.mc-tooltip');
+        expect(el?.classList.contains('mc-tooltip--no-pointer')).toBe(true);
+    },
+};
+export const Top = {
+    args: { position: 'top' },
+    render: Template,
+};
+export const Bottom = {
+    args: { position: 'bottom' },
+    render: Template,
+};
+export const Left = {
+    args: { position: 'left' },
+    render: Template,
+};
+export const Right = {
+    args: { position: 'right' },
+    render: Template,
+};