@mozaic-ds/web-components 1.0.0-beta.7 → 1.1.0

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

@@ -1,14 +1,6 @@
-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;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
 //# sourceMappingURL=ToggleGroup.stories.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"ToggleGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/components/togglegroup/ToggleGroup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAwDX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

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

@@ -1,109 +1,61 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 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 {
+const meta = {
     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',
+    component: 'm-toggle-group',
+    args: {
+        name: 'toggleGroupName',
+        value: ['toggle2'],
+        options: [
+            {
+                id: 'toggle-01',
+                label: 'Toggle Label',
+                value: 'toggle1',
             },
-        },
+            {
+                id: 'toggle-02',
+                label: 'Toggle Label',
+                value: 'toggle2',
+            },
+            {
+                id: 'toggle-03',
+                label: 'Toggle Label',
+                value: 'toggle3',
+            },
+            {
+                id: 'toggle-04',
+                label: 'Toggle Label',
+                value: 'toggle4',
+            },
+        ],
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-toggle-group
+        name=${ifDefined(args.name)}
+        .options=${ifDefined(args.options)}
+        value=${ifDefined(args.value)}
+        inline=${ifDefined(args.inline)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-toggle-group>
+    `;
     },
 };
-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();
-};
+export default meta;
+export const Default = {};

package/dist/components/togglegroup/ToggleGroup.svelte

@@ -10,70 +10,61 @@
 
 <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 (option.id)}
+    <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.
@@ -253,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,6 +1,6 @@
-import{c as _,p as b,a as g,b as l,f as u,d,s as w,r as h,t as x,e as k,g as E,h as C,i as B,j as i}from"../../custom-element.js";import{s as M}from"../../slot.js";import{s as f}from"../../attributes.js";var j=u('<div><!> <span class="mc-tooltip__content svelte-11vyzsr" role="tooltip"> </span></div>');const D={hash:"svelte-11vyzsr",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.
  */.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;}`};function S(c,e){b(e,!0),g(c,D);let s=l(e,"id",7),n=l(e,"text",7),o=l(e,"position",7,"top"),a=l(e,"pointer",7,!0);var y={get id(){return s()},set id(t){s(t),i()},get text(){return n()},set text(t){n(t),i()},get position(){return o()},set position(t="top"){o(t),i()},get pointer(){return a()},set pointer(t=!0){a(t),i()}},r=j();let p;var m=d(r);M(m,e,"default",{});var v=w(m,2),z=d(v,!0);return h(v),h(r),x(t=>{p=k(r,1,"mc-tooltip svelte-11vyzsr",null,p,t),f(r,"aria-describedby",s()),f(v,"id",s()),E(z,n())},[()=>({"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"})]),C(c,r),B(y)}customElements.define("m-tooltip",_(S,{options:{attribute:"pointer",reflect:!0,type:"Boolean"},id:{},text:{},position:{},pointer:{}},["default"],[],!0));
+}.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":";;;;kgGAAA,oBAiBQA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,mBAAW,KAAK,EAAEC,kBAAU,EAAI,yIAArB,MAAK,mDAAY,GAAI,0KAU9BL,GAAE,oBAIjBG,GAAI,oCATwBE,EAAO,EACf,kBAAAD,EAAQ,IAAK,MACV,qBAAAA,EAAQ,IAAK,SACf,mBAAAA,EAAQ,IAAK,OACZ,oBAAAA,EAAQ,IAAK,uBARxC"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/tooltip/Tooltip.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-tooltip' }} />\n\n<script lang=\"ts\">\n  /**\n   * A tooltip is a small, contextual message that appears when users hover over, focus on, or tap an element, providing additional information or guidance without cluttering the interface. Tooltips are commonly used to explain icons, abbreviations, or complex actions. They typically disappear automatically when the user moves away from the trigger element.\n   *\n   * @slot default - The tooltip will point to the content of the slot.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the tooltip, used to describe the tooltip.\n     */\n    id: string;\n    /**\n     * Content of the tooltip.\n     */\n    text: string;\n    /**\n     * Determines the position of the tooltip.\n     */\n    position?: 'top' | 'bottom' | 'left' | 'right';\n    /**\n     * If `true`, the tooltip display a pointer.\n     */\n    pointer?: boolean;\n  }\n\n  let { id, text, position = 'top', pointer = true }: Props = $props();\n</script>\n\n<div\n  class={['mc-tooltip', !pointer && 'mc-tooltip--no-pointer', `mc-tooltip--${position}`]}\n  aria-describedby={id}\n>\n  <slot />\n  <span {id} class=\"mc-tooltip__content\" role=\"tooltip\">\n    {text}\n  </span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tooltip';\n</style>\n"],"names":["id","$.prop","$$props","text","position","pointer"],"mappings":";;;;6sGAAA,oBA2BQA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EAAEE,mBAAW,KAAK,EAAEC,kBAAU,EAAI,yIAArB,MAAK,mDAAY,GAAI,qGAIxC,aAAe,CAAAA,EAAO,GAAI,wCAAyCD,GAAQ,8CACjEJ,GAAE,oBAIjBG,GAAI,eART"}

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

@@ -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 } = 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',
+    },
 };