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

package/dist/components/togglegroup/ToggleGroup.svelte

@@ -10,93 +10,81 @@
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
-
-  interface ToggleGroupOption {
-    value: string;
-    id?: string;
-    label?: string;
-    disabled?: boolean;
-    indeterminate?: boolean;
-    isinvalid?: boolean;
-    size?: 's' | 'm';
-  }
-
+  /**
+   * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.
+   */
   interface Props {
-    options: Array<ToggleGroupOption>;
+    /**
+     * The name attribute for the toggle element, typically used for form submission.
+     */
     name: string;
-    id?: string;
-    legend?: string;
-    values?: Array<string | number>;
+    /**
+     * The current value of the toggle group.
+     */
+    value?: Array<string>;
+    /**
+     * List of properties of each toggle of the toggle group.
+     */
+    options: Array<{
+      id: string;
+      label: string;
+      value: string;
+      disabled?: boolean;
+      size?: 's' | 'm';
+    }>;
+    /**
+     * If `true`, make the form element of the group inline.
+     */
+    inline?: boolean;
   }
 
-  const uid = $props.id();
-  let {
-    name,
-    id = uid,
-    options,
-    legend,
-    values = $bindable([]),
-  }: Props = $props();
-
-  function getOptionId(index: number): string {
-    return options[index]?.id ?? `${id}-${index}`;
-  }
+  let { name, value = $bindable([]), options, inline }: Props = $props();
 </script>
 
-<fieldset class="mc-field mc-field--group">
-  {#if legend}
-    <legend class="mc-field__legend">
-      {legend}
-    </legend>
-  {/if}
-  <div {id} class="mc-field__container">
-    {#each options as opt, index (getOptionId(index))}
-      <div
-        class="mc-toggle mc-field__item {!opt.label
-          ? ' mc-toggle--hide-label'
-          : ''} {opt.size === 'm' ? ' mc-toggle--m' : ''}"
-      >
-        <label class="mc-toggle__container">
-          <input
-            class="mc-toggle__input"
-            id={name}
-            {name}
-            type="checkbox"
-            bind:group={values}
-            value={opt.value}
-            disabled={opt.disabled}
-          />
-          {#if opt.label}
-            <span class="mc-toggle__label">{opt.label}</span>
-          {/if}
-        </label>
-      </div>
-    {/each}
-  </div>
-</fieldset>
+<div class={['mc-field__content', inline && 'mc-field__content--inline']}>
+  {#each options as option}
+    <div
+      class="mc-toggle mc-field__item {!option.label
+        ? ' mc-toggle--hide-label'
+        : ''} {option.size === 'm' ? ' mc-toggle--m' : ''}"
+    >
+      <label class="mc-toggle__container">
+        <input
+          class="mc-toggle__input"
+          id={option.id}
+          {name}
+          type="checkbox"
+          bind:group={value}
+          value={option.value}
+          disabled={option.disabled}
+        />
+        {#if option.label}
+          <span class="mc-toggle__label">{option.label}</span>
+        {/if}
+      </label>
+    </div>
+  {/each}
+</div>
 
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 /* stylelint-disable string-no-newline */
 .mc-field__label, .mc-field__legend {
-  font-size: 0.875rem;
-  line-height: 1.3;
-  font-weight: 400;
-  color: #000000;
+  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 {
   padding-inline: 0;
 }
 .mc-field__requirement, .mc-field__help {
-  font-size: 0.75rem;
-  line-height: 1.5;
-  font-weight: 400;
+  font-size: var(--font-size-50, 0.75rem);
+  line-height: var(--line-height-m, 1.5);
+  font-weight: var(--font-weight-regular, 400);
   vertical-align: top;
-  color: #666666;
+  color: var(--field-color-requirement, #666666);
 }
 .mc-field__help {
   display: block;
@@ -106,8 +94,8 @@
   margin-top: 0.5rem;
 }
 .mc-field__validation-message {
-  font-size: 0.875rem;
-  line-height: 1.5;
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-m, 1.5);
   display: inline-flex;
   gap: 0.25rem;
   margin-top: 0.25rem;
@@ -118,19 +106,19 @@
   width: 1.25rem;
 }
 .mc-field__validation-message.is-valid {
-  color: #117f03;
+  color: var(--field-color-validation-valid, #117f03);
 }
 .mc-field__validation-message.is-valid::before {
-  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='%23117f03' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
+  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(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
 }
 .mc-field__validation-message.is-invalid {
-  color: #c61112;
+  color: var(--field-color-validation-invalid, #c61112);
 }
 .mc-field__validation-message.is-invalid::before {
-  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='%23c61112' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
+  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(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
 }
 .mc-field__validation-message.is-loading {
-  color: #666666;
+  color: var(--field-color-validation-loading, #666666);
 }
 .mc-field--group {
   border-width: 0;
@@ -167,16 +155,16 @@
   transition: box-shadow 200ms ease;
   height: 1.5rem;
   width: 2.5rem;
-  background-color: #666666;
-  border-radius: 1rem;
+  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: #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='%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-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;
@@ -194,36 +182,36 @@
   width: 1px;
 }
 .mc-toggle__label {
-  color: #000000;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
+  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: #117f03;
+  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='%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");
+  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: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
 }
 .mc-toggle:has(:disabled) .mc-toggle__container::after {
-  background-color: #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='%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");
+  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: #737373;
+  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='%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");
+  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, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
@@ -234,18 +222,18 @@
 .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='%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");
+  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='%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");
+  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='%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");
+  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='%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");
+  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%);
@@ -256,4 +244,10 @@
   white-space: nowrap;
   padding: 0;
   width: 1px;
+}
+
+.mc-field__content:where(.mc-field__content--inline) {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0.25rem 1rem;
 }</style>

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

@@ -1,20 +1,31 @@
-interface ToggleGroupOption {
-    value: string;
-    id?: string;
-    label?: string;
-    disabled?: boolean;
-    indeterminate?: boolean;
-    isinvalid?: boolean;
-    size?: 's' | 'm';
-}
+/**
+ * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.
+ */
 interface Props {
-    options: Array<ToggleGroupOption>;
+    /**
+     * The name attribute for the toggle element, typically used for form submission.
+     */
     name: string;
-    id?: string;
-    legend?: string;
-    values?: Array<string | number>;
+    /**
+     * The current value of the toggle group.
+     */
+    value?: Array<string>;
+    /**
+     * List of properties of each toggle of the toggle group.
+     */
+    options: Array<{
+        id: string;
+        label: string;
+        value: string;
+        disabled?: boolean;
+        size?: 's' | 'm';
+    }>;
+    /**
+     * If `true`, make the form element of the group inline.
+     */
+    inline?: boolean;
 }
-declare const ToggleGroup: import("svelte").Component<Props, {}, "values">;
+declare const ToggleGroup: import("svelte").Component<Props, {}, "value">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;
 export default ToggleGroup;
 //# sourceMappingURL=ToggleGroup.svelte.d.ts.map

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,iDAAwC,CAAC;AAC1D,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":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;KAClB,CAAC,CAAC;IACH;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmCH,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/tooltip/README.md

@@ -0,0 +1,19 @@
+# `m-tooltip`
+
+A tooltip is a small, contextual message that appears when users hover over, focus on, or tap an element, providing additional information or guidance without cluttering the interface. Tooltips are commonly used to explain icons, abbreviations, or complex actions. They typically disappear automatically when the user moves away from the trigger element.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the tooltip, used to describe the tooltip. | `string` |   |
+| `text*` | Content of the tooltip. | `string` |   |
+| `position` | Determines the position of the tooltip. | `'top'` `'bottom'` `'left'` `'right'` | `top` |
+| `pointer` | If `true`, the tooltip display a pointer. | `boolean` | `true` |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `default` | The tooltip will point to the content of the slot. |
+

package/dist/components/tooltip/Tooltip.js

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

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

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

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

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Tooltip from './Tooltip.svelte';
+describe('m-tooltip component', () => {
+    it('renders with default props and displays text', () => {
+        const { container, getByRole } = render(Tooltip, {
+            props: {
+                id: 'tooltip-id',
+                text: 'This is a tooltip',
+            },
+        });
+        const tooltip = container.querySelector('.mc-tooltip');
+        expect(tooltip).toBeTruthy();
+        expect(tooltip.classList.contains('mc-tooltip--top')).toBe(true);
+    });
+    it('applies the correct position class', () => {
+        const { container } = render(Tooltip, {
+            props: {
+                id: 'tooltip-id',
+                text: 'Tooltip content',
+                position: 'bottom',
+            },
+        });
+        const tooltip = container.querySelector('.mc-tooltip');
+        expect(tooltip.classList.contains('mc-tooltip--bottom')).toBe(true);
+    });
+    it('hides pointer when pointer prop is false', () => {
+        const { container } = render(Tooltip, {
+            props: {
+                id: 'tooltip-id',
+                text: 'Tooltip content',
+                pointer: false,
+            },
+        });
+        const tooltip = container.querySelector('.mc-tooltip');
+        expect(tooltip.classList.contains('mc-tooltip--no-pointer')).toBe(true);
+    });
+});

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

@@ -1,11 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/html-vite';
-declare const _default: Meta;
-export default _default;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
 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 Pointer: Story;
 export declare const Right: Story;
+export declare const Left: Story;
+export declare const Bottom: Story;
 //# sourceMappingURL=Tooltip.stories.d.ts.map

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

@@ -1 +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"}
+{"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,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAiCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC"}

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

@@ -1,73 +1,59 @@
-import { userEvent, within, waitFor, expect } from 'storybook/test';
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+const meta = {
     title: 'Overlay/Tooltip',
-    tags: ['autodocs', 'beta'],
+    component: 'm-tooltip',
     args: {
-        id: 'tooltip-id',
-        text: 'Tooltip content',
-        position: 'top',
-        pointer: true,
-        trigger: '<div id="trigger">Hover me</div>',
+        id: 'tooltipId',
+        text: 'Keep the tooltip text concise.',
+        default: 'Tooltip on the top',
     },
     argTypes: {
-        trigger: {
-            table: { category: 'Slots' },
-            control: 'text',
+        position: {
+            control: 'radio',
+            options: ['top', 'bottom', 'left', 'right'],
+        },
+        '--tooltip-z-index': {
+            description: 'Customise the z-index of the tooltip',
+            control: false,
+            table: {
+                category: 'Custom Properties',
+                type: { summary: 'number' },
+                defaultValue: { summary: '1' },
+            },
         },
     },
-};
-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 = {
+    render: (args) => html `
+    <m-tooltip
+      id=${ifDefined(args.id)}
+      text=${ifDefined(args.text)}
+      position=${ifDefined(args.position)}
+      pointer=${ifDefined(args.pointer)}
+    >
+      ${unsafeHTML(ifDefined(args.default))}
+    </m-tooltip>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Pointer = {
     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 Right = {
+    args: {
+        position: 'right',
+    },
 };
 export const Left = {
-    args: { position: 'left' },
-    render: Template,
+    args: {
+        position: 'left',
+    },
 };
-export const Right = {
-    args: { position: 'right' },
-    render: Template,
+export const Bottom = {
+    args: {
+        position: 'bottom',
+    },
 };