@mozaic-ds/web-components 1.0.0 → 1.2.0

package/dist/components/tags/TagSelectable.svelte

@@ -1,247 +0,0 @@
-<svelte:options customElement={{ tag: 'mc-tag-selectable' }} />
-
-<script lang="ts">
-  interface Props {
-    id: string;
-    name?: string;
-    label: string;
-    checked?: boolean;
-    disabled?: boolean;
-    size?: 's' | 'm' | 'l';
-    [key: string]: any;
-  }
-
-  let {
-    id,
-    name,
-    label,
-    checked = $bindable(false),
-    disabled = false,
-    size = 'm',
-    ...attrs
-  }: Props = $props();
-
-  function handleChange(e: Event) {
-    checked = (e.target as HTMLInputElement).checked;
-  }
-</script>
-
-<label
-  class={`mc-tag mc-tag-selectable ${size !== 'm' ? `mc-tag--${size}` : ''}`}
-  {id}
-  {...attrs}
->
-  <input
-    type="checkbox"
-    class="mc-tag__input"
-    {id}
-    {name}
-    {checked}
-    {disabled}
-    onchange={handleChange}
-  />
-  <span class="mc-tag__label">{label}</span>
-</label>
-
-<style>/**
- * Do not edit directly, this file was auto-generated.
- */
-.mc-tag {
-  font-size: var(--font-size-100, 0.875rem);
-  border-radius: 2rem;
-  height: 2rem;
-  padding-inline: 0.75rem;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  background: var(--tag-color-background-standard, #ffffff);
-  color: var(--tag-color-text-standard, #242938);
-  border: var(--border-s, 1px) solid var(--tag-color-border, #999999);
-}
-.mc-tag--s {
-  font-size: var(--font-size-50, 0.75rem);
-  border-radius: 1.5rem;
-  height: 1.5rem;
-  padding-inline: 0.5rem;
-}
-.mc-tag--l {
-  font-size: var(--font-size-100, 0.875rem);
-  border-radius: 2.5rem;
-  height: 2.5rem;
-  padding-inline: 1rem;
-}
-.mc-tag.is-disabled, .mc-tag:disabled {
-  cursor: not-allowed;
-  background: var(--color-background-disabled, #d9d9d9);
-  color: var(--color-text-disabled, #737373);
-  border-color: var(--color-background-disabled, #d9d9d9);
-  box-shadow: none;
-}
-.mc-tag.is-disabled .mc-badge, .mc-tag:disabled .mc-badge {
-  color: currentColor;
-}
-
-.mc-tag-interactive {
-  text-decoration: none;
-  outline: none;
-  cursor: pointer;
-  font-weight: var(--font-weight-semi-bold, 600);
-}
-.mc-tag-interactive:not(:disabled):hover {
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
-}
-.mc-tag-interactive:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
-  outline: 0.125rem solid transparent;
-  outline-offset: 0.125rem;
-}
-
-.mc-tag-contextualised {
-  gap: 0.25rem;
-  text-decoration: none;
-  outline: none;
-  color: var(--tag-color-text-inverse, #ffffff);
-  border: none;
-  background: var(--tag-color-background-selected, #117f03);
-  cursor: pointer;
-  font-weight: var(--font-weight-semi-bold, 600);
-  padding-inline-end: 1rem;
-  padding-inline-start: 0.5rem;
-}
-.mc-tag-contextualised:not(:disabled):hover {
-  background: var(--tag-color-background-selected-hover, #006902);
-}
-.mc-tag-contextualised:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
-  outline: 0.125rem solid transparent;
-  outline-offset: 0.125rem;
-}
-.mc-tag-contextualised.mc-tag--s {
-  padding-inline-end: 0.5rem;
-  padding-inline-start: 0.25rem;
-}
-
-.mc-tag-removable {
-  padding: 0 0 0 1rem;
-  background: var(--tag-color-background-inverse, #242938);
-  color: var(--tag-color-text-inverse, #ffffff);
-  border: none;
-}
-.mc-tag-removable__remove {
-  width: 2rem;
-  height: 2rem;
-  background-size: 1.5rem;
-  background: transparent;
-  border: none;
-  margin: 0 0 0 0.125rem;
-  padding: 0.25rem;
-  display: block;
-  cursor: pointer;
-  border-radius: var(--radius-full, 100%);
-}
-.mc-tag-removable__remove:hover {
-  background: var(--tag-color-background-inverse-hover, #343b4c);
-}
-.mc-tag-removable__remove:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
-  outline: 0.125rem solid transparent;
-  outline-offset: 0.125rem;
-}
-.mc-tag-removable__icon {
-  fill: var(--tag-color-delete-icon, #c9d0de);
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.mc-tag-removable__text {
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  padding: 0;
-  width: 1px;
-}
-.mc-tag-removable.mc-tag--s {
-  padding: 0 0 0 0.5rem;
-}
-.mc-tag-removable.mc-tag--s .mc-tag-removable__remove {
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0.125rem;
-}
-.mc-tag-removable.mc-tag--s .mc-tag-removable__icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-.mc-tag-removable.mc-tag--l .mc-tag-removable__remove {
-  width: 2.5rem;
-  height: 2.5rem;
-}
-.mc-tag-removable.mc-tag--l .mc-tag-removable__icon {
-  width: 2rem;
-  height: 2rem;
-}
-
-.mc-tag-selectable {
-  gap: 0.25rem;
-  white-space: nowrap;
-  cursor: pointer;
-  padding-inline-start: 0.5rem;
-  font-weight: var(--font-weight-semi-bold, 600);
-}
-.mc-tag-selectable:hover {
-  box-shadow: inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);
-}
-.mc-tag-selectable:has(:focus-visible) {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
-  outline: 0.125rem solid transparent;
-  outline-offset: 0.125rem;
-}
-.mc-tag-selectable:has(:checked) {
-  background: var(--tag-color-background-selected, #117f03);
-  color: var(--tag-color-text-inverse, #ffffff);
-  border: none;
-}
-.mc-tag-selectable:has(:checked)::before {
-  display: inline-block;
-  content: "";
-  height: 1.25rem;
-  width: 1.25rem;
-  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(--tag-color-text-inverse, %23ffffff)' 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-tag-selectable:has(:checked):not(:has(:disabled)):hover {
-  background: var(--tag-color-background-selected-hover, #006902);
-  border-color: var(--tag-color-background-selected-hover, #006902);
-  box-shadow: none;
-}
-.mc-tag-selectable:has(:disabled) {
-  cursor: not-allowed;
-  background: var(--color-background-disabled, #d9d9d9);
-  color: var(--color-text-disabled, #737373);
-  border-color: var(--color-background-disabled, #d9d9d9);
-  box-shadow: none;
-}
-.mc-tag-selectable:has(:disabled)::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='var(--color-text-disabled, %23737373)' 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-tag-selectable .mc-tag__input {
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  padding: 0;
-  width: 1px;
-}
-.mc-tag-selectable .mc-tag__label {
-  user-select: none;
-}
-.mc-tag-selectable.mc-tag--s {
-  padding-inline-start: 0.25rem;
-  gap: 0.125rem;
-}
-.mc-tag-selectable.mc-tag--l {
-  padding-inline-start: 0.75rem;
-}</style>

package/dist/components/tags/TagSelectable.svelte.d.ts

@@ -1,13 +0,0 @@
-interface Props {
-    id: string;
-    name?: string;
-    label: string;
-    checked?: boolean;
-    disabled?: boolean;
-    size?: 's' | 'm' | 'l';
-    [key: string]: any;
-}
-declare const TagSelectable: import("svelte").Component<Props, {}, "checked">;
-type TagSelectable = ReturnType<typeof TagSelectable>;
-export default TagSelectable;
-//# sourceMappingURL=TagSelectable.svelte.d.ts.map

package/dist/components/tags/TagSelectable.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TagSelectable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tags/TagSelectable.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA8BH,QAAA,MAAM,aAAa,kDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -1,5 +0,0 @@
-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/components/tags/Tags.stories.d.ts.map

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

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

@@ -1,41 +0,0 @@
-export default {
-    title: 'Indicators/Tag/Informative',
-    parameters: {
-        docs: {
-            description: {
-                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
-            },
-        },
-    },
-    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/components/tags/TagsContextualised.stories.d.ts

@@ -1,5 +0,0 @@
-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/components/tags/TagsContextualised.stories.d.ts.map

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

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

@@ -1,57 +0,0 @@
-import { expect, waitFor } from 'storybook/test';
-export default {
-    title: 'Indicators/Tag/Contextualised',
-    parameters: {
-        docs: {
-            description: {
-                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
-            },
-        },
-    },
-    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/components/tags/TagsInteractive.stories.d.ts

@@ -1,5 +0,0 @@
-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/components/tags/TagsInteractive.stories.d.ts.map

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

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

@@ -1,61 +0,0 @@
-import { userEvent, expect } from 'storybook/test';
-import { action } from 'storybook/actions';
-export default {
-    title: 'Indicators/Tag/Interactive',
-    parameters: {
-        docs: {
-            description: {
-                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
-            },
-        },
-    },
-    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/components/tags/TagsRemovable.stories.d.ts

@@ -1,5 +0,0 @@
-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/components/tags/TagsRemovable.stories.d.ts.map

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

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

@@ -1,62 +0,0 @@
-import { userEvent, expect } from 'storybook/test';
-import { action } from 'storybook/actions';
-export default {
-    title: 'Indicators/Tag/Removable',
-    parameters: {
-        docs: {
-            description: {
-                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
-            },
-        },
-    },
-    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/components/tags/TagsSelectable.stories.d.ts

@@ -1,5 +0,0 @@
-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/components/tags/TagsSelectable.stories.d.ts.map

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

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

@@ -1,76 +0,0 @@
-import { userEvent, expect } from 'storybook/test';
-import { action } from 'storybook/actions';
-export default {
-    title: 'Indicators/Tag/Selectable',
-    parameters: {
-        docs: {
-            description: {
-                component: 'A Tag is a UI element used to filter data, categorize, select or deselect an option. It can appear standalone, in a group, or embedded within other components. Depending on its use, a tag can be interactive (clickable, removable, selectable) or static (serving as a visual indicator).',
-            },
-        },
-    },
-    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);
-};