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

package/dist/stories/quantityselector/QuantitySelector.stories.js

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import { userEvent, expect } from '@storybook/test';
+import { action } from 'storybook/actions';
+import { userEvent, expect } from 'storybook/test';
 /**
  * The quantity selector is a form element used to enter or select a number.
  * This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart.

package/dist/stories/radio/Radio.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html-vite';
 /**
  * > A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
  *

package/dist/stories/radio/Radio.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/radio/Radio.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAErD;;;;;GAKG;wBA2CE,IAAI,CAAC,OAAO,CAAC;AAzClB,wBAyCmB;AAgBnB,eAAO,MAAM,OAAO,SAAoB,CAAC;AAEzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAKzC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAK1C,eAAO,MAAM,OAAO,SAAoB,CAAC"}
+{"version":3,"file":"Radio.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/radio/Radio.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE1D;;;;;GAKG;wBA2CE,IAAI,CAAC,OAAO,CAAC;AAzClB,wBAyCmB;AAgBnB,eAAO,MAAM,OAAO,SAAoB,CAAC;AAEzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAKzC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAK1C,eAAO,MAAM,OAAO,SAAoB,CAAC"}

package/dist/stories/radio/Radio.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 /**
  * > A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
  *

package/dist/stories/radio-group/Radio-group.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html-vite';
 /**
  * > A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
  *

package/dist/stories/radio-group/Radio-group.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio-group.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/radio-group/Radio-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGrD;;;;;GAKG;wBAwCE,IAAI,CAAC,OAAO,CAAC;AAtClB,wBAsCmB;AAmBnB,eAAO,MAAM,OAAO,SAAoB,CAAC;AA8BzC,eAAO,MAAM,MAAM,SAAoB,CAAC;AAgCxC,eAAO,MAAM,OAAO,SAAoB,CAAC"}
+{"version":3,"file":"Radio-group.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/radio-group/Radio-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBAwCE,IAAI,CAAC,OAAO,CAAC;AAtClB,wBAsCmB;AAmBnB,eAAO,MAAM,OAAO,SAAoB,CAAC;AA8BzC,eAAO,MAAM,MAAM,SAAoB,CAAC;AAgCxC,eAAO,MAAM,OAAO,SAAoB,CAAC"}

package/dist/stories/radio-group/Radio-group.stories.js

@@ -1,4 +1,4 @@
-import { action } from '@storybook/addon-actions';
+import { action } from 'storybook/actions';
 /**
  * > A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
  *

package/dist/stories/select/Select.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html-vite';
 /**
  * A select is a selection tool used in forms, allowing users to choose between multiple predefined options.
  *

package/dist/stories/select/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/select/Select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGrD;;;;;GAKG;wBAsCE,IAAI;AApCT,wBAoCU;AAoBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,KAAK,SAAoB,CAAC;AAOvC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAQ1C,eAAO,MAAM,SAAS,SAAoB,CAAC"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/select/Select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBAsCE,IAAI;AApCT,wBAoCU;AAoBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,KAAK,SAAoB,CAAC;AAOvC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAQ1C,eAAO,MAAM,SAAS,SAAoB,CAAC"}

package/dist/stories/select/Select.stories.js

@@ -1,4 +1,4 @@
-import { userEvent, expect } from '@storybook/test';
+import { userEvent, expect } from 'storybook/test';
 /**
  * A select is a selection tool used in forms, allowing users to choose between multiple predefined options.
  *

package/dist/stories/status-badge/StatusBadge.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html-vite';
 /**
  * A Status Badge indicates the status of an entity and can evolve at any time.
  *

package/dist/stories/status-badge/StatusBadge.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/status-badge/StatusBadge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGrD;;;;GAIG;wBAgBE,IAAI;AAdT,wBAcU;AAYV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,KAAK,SAAoB,CAAC;AAOvC,eAAO,MAAM,OAAO,SAAoB,CAAC"}
+{"version":3,"file":"StatusBadge.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/status-badge/StatusBadge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;GAIG;wBAgBE,IAAI;AAdT,wBAcU;AAYV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,KAAK,SAAoB,CAAC;AAOvC,eAAO,MAAM,OAAO,SAAoB,CAAC"}

package/dist/stories/status-badge/StatusBadge.stories.js

@@ -1,4 +1,4 @@
-import { within, expect } from '@storybook/test';
+import { within, expect } from 'storybook/test';
 /**
  * A Status Badge indicates the status of an entity and can evolve at any time.
  *

package/dist/stories/status-dot/StatusDot.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html-vite';
 /**
  * A Status Dot indicates the status of an entity and can evolve at any time.
  *

package/dist/stories/status-dot/StatusDot.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/status-dot/StatusDot.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGrD;;;;GAIG;wBAiBE,IAAI;AAfT,wBAeU;AASV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,KAAK,SAAoB,CAAC;AAOvC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,KAAK,SAAoB,CAAC"}
+{"version":3,"file":"StatusDot.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/status-dot/StatusDot.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;GAIG;wBAiBE,IAAI;AAfT,wBAeU;AASV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,KAAK,SAAoB,CAAC;AAOvC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,KAAK,SAAoB,CAAC"}

package/dist/stories/status-dot/StatusDot.stories.js

@@ -1,4 +1,4 @@
-import { expect } from '@storybook/test';
+import { expect } from 'storybook/test';
 /**
  * A Status Dot indicates the status of an entity and can evolve at any time.
  *

package/dist/stories/status-notification/StatusNotification.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html-vite';
 /**
  * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged.
  * It often provides feedback on a process, highlights a status update, or alerts users about an issue.

package/dist/stories/status-notification/StatusNotification.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusNotification.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/status-notification/StatusNotification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGrD;;;;;GAKG;wBA4BE,IAAI;AA1BT,wBA0BU;AAyBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAQzC,eAAO,MAAM,MAAM,SAAoB,CAAC;AAQxC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAQzC,eAAO,MAAM,UAAU,SAAoB,CAAC"}
+{"version":3,"file":"StatusNotification.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/status-notification/StatusNotification.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA4BE,IAAI;AA1BT,wBA0BU;AAyBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAQzC,eAAO,MAAM,MAAM,SAAoB,CAAC;AAQxC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAQzC,eAAO,MAAM,UAAU,SAAoB,CAAC"}

package/dist/stories/status-notification/StatusNotification.stories.js

@@ -1,4 +1,4 @@
-import { within, expect } from '@storybook/test';
+import { within, expect } from 'storybook/test';
 /**
  * A Status Notification is used to draw the user’s attention to important information that needs to be acknowledged.
  * It often provides feedback on a process, highlights a status update, or alerts users about an issue.

package/dist/stories/tabs/Tabs.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryFn } from '@storybook/html-vite';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;
+export declare const Centered: StoryFn;
+export declare const WithIcons: StoryFn;
+//# sourceMappingURL=Tabs.stories.d.ts.map

package/dist/stories/tabs/Tabs.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/tabs/Tabs.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAwBrD,IAAI;AArBT,wBAqBU;AAsCV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAoBzC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAoD1C,eAAO,MAAM,SAAS,SAAwB,CAAC"}

package/dist/stories/tabs/Tabs.stories.js

@@ -0,0 +1,121 @@
+import { within, expect } from 'storybook/test';
+export default {
+    title: 'Navigation/Tabs',
+    tags: ['autodocs', 'new'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.',
+            },
+        },
+    },
+    argTypes: {
+        activeindex: {
+            description: 'Index of the currently selected tab',
+            control: { type: 'number', min: 0 },
+        },
+        centered: {
+            description: 'centered tab element',
+            control: { type: 'boolean' },
+        },
+    },
+};
+// --- Template Function
+const Template = ({ activeindex = 0, centered = 'false' }) => {
+    const wrapper = document.createElement('div');
+    const tabs = document.createElement('mc-tabs');
+    tabs.setAttribute('activeindex', String(activeindex));
+    tabs.setAttribute('centered', centered || '');
+    for (let i = 0; i < 4; i++) {
+        const tab = document.createElement('mc-tab');
+        tab.setAttribute('slot', 'tab');
+        tab.setAttribute('index', String(i));
+        tab.setAttribute('tag', 'button');
+        tab.innerText = `Tab ${i + 1}`;
+        if (String(i) === String(3))
+            tab.setAttribute('disabled', 'true');
+        if (i === activeindex)
+            tab.setAttribute('selected', 'true');
+        tab.addEventListener('click', () => {
+            tabs.setAttribute('activeindex', String(i));
+            // Update other tab selection
+            const allTabs = tabs.querySelectorAll('mc-tab');
+            allTabs.forEach((el, idx) => {
+                if (i === idx) {
+                    el.setAttribute('selected', 'true');
+                }
+                else {
+                    el.removeAttribute('selected');
+                }
+            });
+        });
+        tabs.appendChild(tab);
+    }
+    wrapper.appendChild(tabs);
+    return wrapper;
+};
+// --- Default story
+export const Default = Template.bind({});
+Default.args = {
+    activeIndex: 0,
+    centered: false,
+};
+Default.play = async ({ canvasElement }) => {
+    const tabs = canvasElement.querySelector('mc-tabs');
+    const tabItems = tabs?.querySelectorAll('mc-tab');
+    expect(tabItems?.length).toBe(4);
+    const selected = Array.from(tabItems).filter((tab) => tab.getAttribute('selected') === 'true');
+    expect(selected.length).toBe(1);
+    expect(selected[0].innerText).toBe('Tab 1');
+};
+// --- Centered story
+export const Centered = Template.bind({});
+Centered.args = {
+    activeIndex: 1,
+    centered: true,
+};
+const IconTemplate = ({ activeindex = 0, centered = 'false' }) => {
+    const wrapper = document.createElement('div');
+    const tabs = document.createElement('mc-tabs');
+    tabs.setAttribute('activeindex', String(activeindex));
+    tabs.setAttribute('centered', centered || '');
+    for (let i = 0; i < 4; i++) {
+        const tab = document.createElement('mc-tab');
+        tab.setAttribute('slot', 'tab');
+        tab.setAttribute('index', String(i));
+        tab.setAttribute('tag', 'button');
+        tab.setAttribute('hasiconslot', 'true');
+        if (i === 3)
+            tab.setAttribute('disabled', 'true');
+        if (i === activeindex)
+            tab.setAttribute('selected', 'true');
+        const icon = document.createElement('chevron-right-32');
+        icon.setAttribute('slot', 'icon');
+        icon.setAttribute('style', 'height: 100%');
+        tab.appendChild(icon);
+        const label = document.createElement('span');
+        label.innerText = `Tab ${i + 1}`;
+        tab.appendChild(icon);
+        tab.appendChild(label);
+        tab.addEventListener('click', () => {
+            tabs.setAttribute('activeindex', String(i));
+            const allTabs = tabs.querySelectorAll('mc-tab');
+            allTabs.forEach((el, idx) => {
+                if (i === idx) {
+                    el.setAttribute('selected', 'true');
+                }
+                else {
+                    el.removeAttribute('selected');
+                }
+            });
+        });
+        tabs.appendChild(tab);
+    }
+    wrapper.appendChild(tabs);
+    return wrapper;
+};
+export const WithIcons = IconTemplate.bind({});
+WithIcons.args = {
+    activeIndex: 0,
+    centered: false,
+};

package/dist/stories/tags/Tags.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryFn } from '@storybook/html-vite';
+declare const _default: Meta;
+export default _default;
+export declare const Informative: StoryFn;
+//# sourceMappingURL=Tags.stories.d.ts.map

package/dist/stories/tags/Tags.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/tags/Tags.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAoBrD,IAAI;AAlBT,wBAkBU;AAYV,eAAO,MAAM,WAAW,EAAE,OAA8C,CAAC"}

package/dist/stories/tags/Tags.stories.js

@@ -0,0 +1,35 @@
+export default {
+    title: 'Indicators/Tag/Informative',
+    tags: ['autodocs', 'beta'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Text label displayed inside the tag',
+        },
+        id: {
+            control: 'text',
+            description: 'ID of the tag (optional)',
+        },
+        size: {
+            control: 'select',
+            options: ['s', 'm', 'l'],
+            description: 'Size of the tag',
+        },
+    },
+};
+const createInformativeTag = (args) => {
+    const tag = document.createElement('mc-tag');
+    if (args.label)
+        tag.setAttribute('label', args.label);
+    if (args.id)
+        tag.setAttribute('id', args.id);
+    if (args.size)
+        tag.setAttribute('size', args.size);
+    return tag;
+};
+export const Informative = (args) => createInformativeTag(args);
+Informative.args = {
+    id: 'tag-informative',
+    label: 'Static Tag',
+    size: 'm',
+};

package/dist/stories/tags/TagsContextualised.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryFn } from '@storybook/html-vite';
+declare const _default: Meta;
+export default _default;
+export declare const Contextualised: StoryFn;
+//# sourceMappingURL=TagsContextualised.stories.d.ts.map

package/dist/stories/tags/TagsContextualised.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsContextualised.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/tags/TagsContextualised.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAyBrD,IAAI;AAtBT,wBAsBU;AAiBV,eAAO,MAAM,cAAc,EAAE,OAAiD,CAAC"}

package/dist/stories/tags/TagsContextualised.stories.js

@@ -0,0 +1,51 @@
+import { expect, waitFor } from 'storybook/test';
+export default {
+    title: 'Indicators/Tag/Contextualised',
+    tags: ['autodocs', 'beta'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Text label displayed inside the tag',
+        },
+        contextualisedNumber: {
+            control: 'number',
+            description: 'Number badge displayed on the tag',
+        },
+        size: {
+            control: 'select',
+            options: ['s', 'm', 'l'],
+            description: 'Size of the tag',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the tag',
+        },
+    },
+};
+const createContextualisedTag = (args) => {
+    const tag = document.createElement('mc-tag-contextualised');
+    if (args.label)
+        tag.setAttribute('label', args.label);
+    if (args.contextualisedNumber)
+        tag.setAttribute('contextualisednumber', args.contextualisedNumber.toString());
+    if (args.size)
+        tag.setAttribute('size', args.size);
+    if (args.disabled)
+        tag.setAttribute('disabled', 'true');
+    return tag;
+};
+export const Contextualised = (args) => createContextualisedTag(args);
+Contextualised.args = {
+    label: 'Notifications',
+    contextualisedNumber: 8,
+    size: 'm',
+};
+Contextualised.play = async ({ canvasElement }) => {
+    const tagEl = await waitFor(() => canvasElement.querySelector('mc-tag-contextualised'));
+    expect(tagEl?.getAttribute('contextualisednumber')).toBe('8');
+    const shadow = tagEl?.shadowRoot;
+    const badge = shadow?.querySelector('.mc-number-badge');
+    const label = shadow?.querySelector('.mc-tag__label');
+    expect(badge?.textContent?.trim()).toBe('8');
+    expect(label?.textContent?.trim()).toBe('Notifications');
+};

package/dist/stories/tags/TagsInteractive.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryFn } from '@storybook/html-vite';
+declare const _default: Meta;
+export default _default;
+export declare const Interactive: StoryFn;
+//# sourceMappingURL=TagsInteractive.stories.d.ts.map

package/dist/stories/tags/TagsInteractive.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInteractive.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/tags/TagsInteractive.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBA8BrD,IAAI;AA1BT,wBA0BU;AAeV,eAAO,MAAM,WAAW,EAAE,OAA8C,CAAC"}

package/dist/stories/tags/TagsInteractive.stories.js

@@ -0,0 +1,55 @@
+import { userEvent, expect } from 'storybook/test';
+import { action } from 'storybook/actions';
+export default {
+    title: 'Indicators/Tag/Interactive',
+    tags: ['autodocs', 'beta'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Text label displayed inside the tag',
+        },
+        id: {
+            control: 'text',
+            description: 'ID of the tag (optional)',
+        },
+        size: {
+            control: 'select',
+            options: ['s', 'm', 'l'],
+            description: 'Size of the tag',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the tag',
+        },
+        onClick: {
+            action: 'clicked',
+            table: { category: 'Events' },
+        },
+    },
+};
+const createInteractiveTag = (args) => {
+    const tag = document.createElement('mc-tag-interactive');
+    if (args.label)
+        tag.setAttribute('label', args.label);
+    if (args.id)
+        tag.setAttribute('id', args.id);
+    if (args.size)
+        tag.setAttribute('size', args.size);
+    if (args.disabled)
+        tag.setAttribute('disabled', 'true');
+    tag.addEventListener('click', action('clicked'));
+    return tag;
+};
+export const Interactive = (args) => createInteractiveTag(args);
+Interactive.args = {
+    id: 'tag-interactive',
+    label: 'Click me',
+    size: 'm',
+};
+Interactive.play = async ({ canvasElement }) => {
+    const button = canvasElement
+        .querySelector('mc-tag-interactive')
+        ?.shadowRoot?.querySelector('button');
+    expect(button).not.toBeNull();
+    await userEvent.click(button);
+};

package/dist/stories/tags/TagsRemovable.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryFn } from '@storybook/html-vite';
+declare const _default: Meta;
+export default _default;
+export declare const Removable: StoryFn;
+//# sourceMappingURL=TagsRemovable.stories.d.ts.map

package/dist/stories/tags/TagsRemovable.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsRemovable.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/tags/TagsRemovable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBA8BrD,IAAI;AA1BT,wBA0BU;AAgBV,eAAO,MAAM,SAAS,EAAE,OAA4C,CAAC"}

package/dist/stories/tags/TagsRemovable.stories.js

@@ -0,0 +1,56 @@
+import { userEvent, expect } from 'storybook/test';
+import { action } from 'storybook/actions';
+export default {
+    title: 'Indicators/Tag/Removable',
+    tags: ['autodocs', 'beta'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Text label displayed inside the tag',
+        },
+        id: {
+            control: 'text',
+            description: 'ID of the tag (required)',
+        },
+        removableLabel: {
+            control: 'text',
+            description: 'Accessible label for the remove button',
+        },
+        size: {
+            control: 'select',
+            options: ['s', 'm', 'l'],
+            description: 'Size of the tag',
+        },
+        'remove-tag': {
+            action: 'remove-tag',
+            table: { category: 'Events' },
+        },
+    },
+};
+const createRemovableTag = (args) => {
+    const tag = document.createElement('mc-tag-removable');
+    if (args.label)
+        tag.setAttribute('label', args.label);
+    if (args.id)
+        tag.setAttribute('id', args.id);
+    if (args.size)
+        tag.setAttribute('size', args.size);
+    if (args.removableLabel)
+        tag.setAttribute('removablelabel', args.removableLabel);
+    tag.addEventListener('remove-tag', action('remove-tag'));
+    return tag;
+};
+export const Removable = (args) => createRemovableTag(args);
+Removable.args = {
+    id: 'tag-vue',
+    label: 'Tag label',
+    removableLabel: 'Remove Vue tag',
+    size: 'm',
+};
+Removable.play = async ({ canvasElement }) => {
+    const btn = canvasElement
+        .querySelector('mc-tag-removable')
+        ?.shadowRoot?.querySelector('button');
+    expect(btn).not.toBeNull();
+    await userEvent.click(btn);
+};

package/dist/stories/tags/TagsSelectable.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryFn } from '@storybook/html-vite';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;
+//# sourceMappingURL=TagsSelectable.stories.d.ts.map

package/dist/stories/tags/TagsSelectable.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsSelectable.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/tags/TagsSelectable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAsCrD,IAAI;AAlCT,wBAkCU;AAiBV,eAAO,MAAM,OAAO,EAAE,OAA6C,CAAC"}

package/dist/stories/tags/TagsSelectable.stories.js

@@ -0,0 +1,70 @@
+import { userEvent, expect } from 'storybook/test';
+import { action } from 'storybook/actions';
+export default {
+    title: 'Indicators/Tag/Selectable',
+    tags: ['autodocs', 'beta'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Text label displayed inside the tag',
+        },
+        id: {
+            control: 'text',
+            description: 'ID of the tag (required)',
+        },
+        name: {
+            control: 'text',
+            description: 'Form name (used for selectable)',
+        },
+        checked: {
+            control: 'boolean',
+            description: 'Checked state of the tag',
+        },
+        size: {
+            control: 'select',
+            options: ['s', 'm', 'l'],
+            description: 'Size of the tag',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the tag',
+        },
+        'update:checked': {
+            action: 'update:checked',
+            table: { category: 'Events' },
+        },
+    },
+};
+const createSelectableTag = (args) => {
+    const tag = document.createElement('mc-tag-selectable');
+    if (args.label)
+        tag.setAttribute('label', args.label);
+    if (args.id)
+        tag.setAttribute('id', args.id);
+    if (args.name)
+        tag.setAttribute('name', args.name);
+    if (args.size)
+        tag.setAttribute('size', args.size);
+    if (args.disabled)
+        tag.setAttribute('disabled', 'true');
+    if (args.checked)
+        tag.setAttribute('checked', 'true');
+    tag.addEventListener('update:checked', action('update:checked'));
+    return tag;
+};
+export const Default = (args) => createSelectableTag(args);
+Default.args = {
+    id: 'tag1',
+    name: 'filters',
+    label: 'Tag label',
+    checked: true,
+    size: 'm',
+};
+Default.play = async ({ canvasElement }) => {
+    const input = canvasElement
+        .querySelector('mc-tag-selectable')
+        ?.shadowRoot?.querySelector('input');
+    expect(input?.checked).toBe(true);
+    await userEvent.click(input);
+    expect(input?.checked).toBe(false);
+};

package/dist/stories/textarea/Textarea.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html-vite';
 /**
  * A textarea is used for multi-line text input, sharing appearance and states with text inputs.
  *

package/dist/stories/textarea/Textarea.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/textarea/Textarea.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGrD;;;;;GAKG;wBA2CE,IAAI;AAzCT,wBAyCU;AAmBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAO1C,eAAO,MAAM,QAAQ,SAAoB,CAAC"}
+{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/textarea/Textarea.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA2CE,IAAI;AAzCT,wBAyCU;AAmBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAO1C,eAAO,MAAM,QAAQ,SAAoB,CAAC"}

package/dist/stories/textarea/Textarea.stories.js

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import { userEvent, expect } from '@storybook/test';
+import { action } from 'storybook/actions';
+import { userEvent, expect } from 'storybook/test';
 /**
  * A textarea is used for multi-line text input, sharing appearance and states with text inputs.
  *

package/dist/stories/textinput/Textinput.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html-vite';
 /**
  * Inputs are used to create input fields with text on a single line. Their states depend on the user interaction or the context.
  *

package/dist/stories/textinput/Textinput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/textinput/Textinput.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGrD;;;;;GAKG;wBAmEE,IAAI;AAlET,wBAkEU;AAuBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AA4BzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,QAAQ,SAAoB,CAAC"}
+{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/textinput/Textinput.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBAmEE,IAAI;AAlET,wBAkEU;AAuBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AA4BzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,QAAQ,SAAoB,CAAC"}

package/dist/stories/textinput/Textinput.stories.js

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import { userEvent, expect } from '@storybook/test';
+import { action } from 'storybook/actions';
+import { userEvent, expect } from 'storybook/test';
 /**
  * Inputs are used to create input fields with text on a single line. Their states depend on the user interaction or the context.
  *

package/dist/stories/toggle/Toggle.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html-vite';
 /**
  * A toggle is used to choose between two possibilities and when the user needs instant feedback.
  * It is commonly used to show or hide content and act as an "on/off" switch.