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

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

@@ -1,122 +1,66 @@
-import ChevronRight32 from '@mozaic-ds/icons-svelte/custom-elements/ChevronRight32/ChevronRight32.js';
-import { within, 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: '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.',
-            },
-        },
+    component: 'm-tabs',
+    subcomponents: { 'm-tab': 'm-tab' },
+    args: {
+        tab: `
+      <m-tab slot="tab" selected="true">label</m-tab>
+      <m-tab slot="tab">label</m-tab>
+      <m-tab slot="tab">label</m-tab>
+      <m-tab slot="tab">label</m-tab>
+    `,
     },
-    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,
+    render: (args) => html `
+    <m-tabs
+      description=${ifDefined(args.description)}
+      centered=${ifDefined(args.centered)}
+      divider=${ifDefined(args.divider)}
+      value=${ifDefined(args.value)}
+    >
+      ${unsafeHTML(ifDefined(args.tab))}
+    </m-tabs>
+  `,
 };
-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');
+export default meta;
+export const Default = {};
+export const Icons = {
+    args: {
+        tab: `
+      <m-tab slot="tab" selected="true">
+        <chevron-right-24 slot="icon"></chevron-right-24>
+        label
+      </m-tab>
+      <m-tab slot="tab">
+        <chevron-right-24  slot="icon"></chevron-right-24>
+        label
+      </m-tab>
+      <m-tab slot="tab">
+        <chevron-right-24  slot="icon"></chevron-right-24>
+        label
+      </m-tab>
+      <m-tab slot="tab">
+        <chevron-right-24  slot="icon"></chevron-right-24>
+        label
+      </m-tab>
+    `,
+    },
 };
-// --- Centered story
-export const Centered = Template.bind({});
-Centered.args = {
-    activeIndex: 1,
-    centered: true,
+export const Centered = {
+    args: { 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 NoDivider = {
+    args: { divider: false },
 };
-export const WithIcons = IconTemplate.bind({});
-WithIcons.args = {
-    activeIndex: 0,
-    centered: false,
+export const Disabled = {
+    args: {
+        tab: `
+      <m-tab slot="tab" selected="true">label</m-tab>
+      <m-tab slot="tab">label</m-tab>
+      <m-tab slot="tab" disabled="true">label</m-tab>
+      <m-tab slot="tab" disabled="true">label</m-tab>
+    `,
+    },
 };

package/dist/components/tabs/Tabs.svelte

@@ -1,26 +1,43 @@
-<svelte:options customElement={{ tag: 'mc-tabs' }} />
+<svelte:options customElement={{ tag: 'm-tabs' }} />
 
 <script lang="ts">
-  let { activeindex, centered } = $props();
+  /**
+   * 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.
+   *
+   * @slot tab - use this slot to insert `m-tab` components.
+   */
+  interface Props {
+    /**
+     * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
+     */
+    description?: string;
+    /**
+     * If `true`, the divider will appear.
+     */
+    divider?: boolean;
+    /**
+     * If `true`, the tabs of the component will be centered.
+     */
+    centered?: boolean;
+  }
 
-  let active = $state(activeindex ?? 0);
+  let { description, divider = true, centered }: Props = $props();
 </script>
 
-<nav class="mc-tabs" class:mc-tabs--centered={centered}>
-  <ul class="mc-tabs__list" role="tablist" aria-label="Tabs default">
-    <slot name="tab" {active} />
+<nav class={['mc-tabs', centered && 'mc-tabs--centered']}>
+  <ul class="mc-tabs__list" role="tablist" aria-label={description}>
+    <slot name="tab" />
   </ul>
-  <div class="mc-divider-horizontal"></div>
+  {#if divider}
+    <div class="mc-divider-horizontal"></div>
+  {/if}
 </nav>
 
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-tabs {
-  background-color: #ffffff;
+  background-color: var(--tabs-color-background-default, #ffffff);
   position: relative;
   width: 100%;
   height: 3.5rem;
@@ -34,13 +51,13 @@
   padding: 0.5rem 0.25rem;
 }
 .mc-tabs__tab {
-  font-size: 0.875rem;
-  font-weight: 600;
+  font-size: var(--font-size-100, 0.875rem);
+  font-weight: var(--font-weight-semi-bold, 600);
   align-items: center;
   background: none;
   border: none;
-  border-radius: 0.25rem;
-  color: #404040;
+  border-radius: var(--radius-s, 0.25rem);
+  color: var(--tabs-color-text-default, #404040);
   cursor: pointer;
   display: flex;
   gap: 0.25rem;
@@ -53,22 +70,22 @@
   text-decoration: none;
 }
 .mc-tabs__tab:hover {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: var(--tabs-color-background-hover, rgba(0, 0, 0, 0.05));
 }
 .mc-tabs__tab:focus-visible {
-  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;
 }
 .mc-tabs__tab--selected {
-  color: #006902;
-  background-color: #ebf5de;
+  color: var(--tabs-color-text-selected, #006902);
+  background-color: var(--tabs-color-background-selected, #ebf5de);
 }
 .mc-tabs__tab--selected:hover {
-  background-color: #c5e39e;
+  background-color: var(--tabs-color-background-selected-hover, #c5e39e);
 }
 .mc-tabs__tab--disabled {
-  color: #b3b3b3;
+  color: var(--tabs-color-text-disabled, #b3b3b3);
   cursor: not-allowed;
 }
 .mc-tabs__tab--disabled:hover {
@@ -90,17 +107,17 @@
   position: relative;
 }
 .mc-divider-horizontal {
-  background: #cccccc;
+  background: var(--divider-color-primary, #cccccc);
   height: 0.0625rem;
 }
 .mc-divider-horizontal--secondary {
-  background: #999999;
+  background: var(--divider-color-secondary, #999999);
 }
 .mc-divider-horizontal--tertiary {
-  background: #333333;
+  background: var(--divider-color-tertiary, #333333);
 }
 .mc-divider-horizontal--inverse {
-  background: #ffffff;
+  background: var(--divider-color-inverse, #ffffff);
 }
 .mc-divider-horizontal--m {
   height: 0.25rem;
@@ -109,17 +126,17 @@
   height: 0.5rem;
 }
 .mc-divider-vertical {
-  background: #cccccc;
+  background: var(--divider-color-primary, #cccccc);
   width: 0.0625rem;
 }
 .mc-divider-vertical--secondary {
-  background: #999999;
+  background: var(--divider-color-secondary, #999999);
 }
 .mc-divider-vertical--tertiary {
-  background: #333333;
+  background: var(--divider-color-tertiary, #333333);
 }
 .mc-divider-vertical--inverse {
-  background: #ffffff;
+  background: var(--divider-color-inverse, #ffffff);
 }
 .mc-divider-vertical--m {
   height: 0.25rem;

package/dist/components/tabs/Tabs.svelte.d.ts

@@ -1,3 +1,22 @@
+/**
+ * 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.
+ *
+ * @slot tab - use this slot to insert `m-tab` components.
+ */
+interface Props {
+    /**
+     * A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
+     */
+    description?: string;
+    /**
+     * If `true`, the divider will appear.
+     */
+    divider?: boolean;
+    /**
+     * If `true`, the tabs of the component will be centered.
+     */
+    centered?: boolean;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,15 +30,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Tabs: $$__sveltets_2_IsomorphicComponent<{
-    activeindex: any;
-    centered: any;
-}, {
+declare const Tabs: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {
-    tab: {
-        active: any;
-    };
+    tab: {};
 }, {}, "">;
 type Tabs = InstanceType<typeof Tabs>;
 export default Tabs;

package/dist/components/tabs/Tabs.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAsBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,IAAI;iBAjCgD,GAAG;cAAY,GAAG;;;;;;;UAiCmB,CAAC;AAC9E,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsBH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,IAAI;;;;UAAqF,CAAC;AAC9E,KAAK,IAAI,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACxC,eAAe,IAAI,CAAC"}

package/dist/components/tags/README.md

@@ -0,0 +1,9 @@
+# `mc-tag`
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `label*` |  | `string` |   |
+| `size` |  | `'s'` `'m'` `'l'` | `m` |
+

package/dist/components/tags/Tag.js

@@ -1,7 +1,4 @@
-import{c as g,p as v,a as h,b as o,f as b,D as u,t as p,h as y,i as w,j as i,d as m,r as d,g as x}from"../../custom-element.js";import{b as _}from"../../attributes.js";var E=b('<span><span class="mc-tag__label svelte-nym64e"> </span></span>');const C={hash:"svelte-nym64e",code:`/**
+import{c as m,p as f,a as b,b as c,f as h,z as p,t as w,i as x,j,k as i,d,r as n,h as k}from"../../custom-element.js";import{b as _}from"../../attributes.js";var E=h('<span><span class="mc-tag__label svelte-ajo7cu"> </span></span>');const C={hash:"svelte-ajo7cu",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-tag.svelte-nym64e {font-size:0.875rem;border-radius:2rem;height:2rem;padding-inline:0.75rem;box-sizing:border-box;display:inline-flex;align-items:center;background:#ffffff;color:#242938;border:1px solid #999999;}.mc-tag--s.svelte-nym64e {font-size:0.75rem;border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-nym64e {font-size:0.875rem;border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-nym64e, .mc-tag.svelte-nym64e:disabled {cursor:not-allowed;background:#d9d9d9;color:#737373;border-color:#d9d9d9;box-shadow:none;}.mc-tag-interactive.svelte-nym64e {text-decoration:none;outline:none;cursor:pointer;font-weight:600;}.mc-tag-interactive.svelte-nym64e:not(:disabled):hover {box-shadow:inset 0 0 0 1px #999999;}.mc-tag-interactive.svelte-nym64e:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tag-contextualised.svelte-nym64e {gap:0.25rem;text-decoration:none;outline:none;color:#ffffff;border:none;background:#117f03;cursor:pointer;font-weight:600;padding-inline-end:1rem;padding-inline-start:0.5rem;}.mc-tag-contextualised.svelte-nym64e:not(:disabled):hover {background:#006902;}.mc-tag-contextualised.svelte-nym64e:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tag-contextualised.mc-tag--s.svelte-nym64e {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-nym64e {padding:0 0 0 1rem;background:#242938;color:#ffffff;border:none;}.mc-tag-removable__remove.svelte-nym64e {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:100%;}.mc-tag-removable__remove.svelte-nym64e:hover {background:#343b4c;}.mc-tag-removable__remove.svelte-nym64e:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tag-removable__icon.svelte-nym64e {fill:#c9d0de;width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-nym64e {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.svelte-nym64e {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-nym64e {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:600;}.mc-tag-selectable.svelte-nym64e:hover {box-shadow:inset 0 0 0 1px #999999;}.mc-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):focus-visible) {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):checked) {background:#117f03;color:#ffffff;border:none;}.mc-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):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='%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.svelte-nym64e:has(:where(.svelte-nym64e):checked):not(:has(:disabled)):hover {background:#006902;border-color:#006902;box-shadow:none;}.mc-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):disabled) {cursor:not-allowed;background:#d9d9d9;color:#737373;border-color:#d9d9d9;box-shadow:none;}.mc-tag-selectable.svelte-nym64e:has(:where(.svelte-nym64e):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='%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.svelte-nym64e .mc-tag__label:where(.svelte-nym64e) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-nym64e {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-nym64e {padding-inline-start:0.75rem;}`};function k(s,e){v(e,!0),h(s,C);let r=o(e,"label",7),t=o(e,"size",7,"m"),c=u(e,["$$slots","$$events","$$legacy","$$host","label","size"]);var a=E();_(a,()=>({class:`mc-tag  ${t()!=="m"?`mc-tag--${t()}`:""}`,...c}),void 0,void 0,"svelte-nym64e");var n=m(a),f=m(n,!0);return d(n),d(a),p(()=>x(f,r())),y(s,a),w({get label(){return r()},set label(l){r(l),i()},get size(){return t()},set size(l="m"){t(l),i()}})}customElements.define("mc-tag",g(k,{label:{},size:{}},[],[],!0));
+ */.mc-tag.svelte-ajo7cu {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.svelte-ajo7cu {font-size:var(--font-size-50, 0.75rem);border-radius:1.5rem;height:1.5rem;padding-inline:0.5rem;}.mc-tag--l.svelte-ajo7cu {font-size:var(--font-size-100, 0.875rem);border-radius:2.5rem;height:2.5rem;padding-inline:1rem;}.mc-tag.is-disabled.svelte-ajo7cu, .mc-tag.svelte-ajo7cu: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-interactive.svelte-ajo7cu {text-decoration:none;outline:none;cursor:pointer;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-interactive.svelte-ajo7cu:not(:disabled):hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-interactive.svelte-ajo7cu: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.svelte-ajo7cu {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.svelte-ajo7cu:not(:disabled):hover {background:var(--tag-color-background-selected-hover, #006902);}.mc-tag-contextualised.svelte-ajo7cu: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.svelte-ajo7cu {padding-inline-end:0.5rem;padding-inline-start:0.25rem;}.mc-tag-removable.svelte-ajo7cu {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.svelte-ajo7cu {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.svelte-ajo7cu:hover {background:var(--tag-color-background-inverse-hover, #343b4c);}.mc-tag-removable__remove.svelte-ajo7cu: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.svelte-ajo7cu {fill:var(--tag-color-delete-icon, #c9d0de);width:1.5rem;height:1.5rem;}.mc-tag-removable__text.svelte-ajo7cu {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.svelte-ajo7cu {padding:0 0 0 0.5rem;}.mc-tag-selectable.svelte-ajo7cu {gap:0.25rem;white-space:nowrap;cursor:pointer;padding-inline-start:0.5rem;font-weight:var(--font-weight-semi-bold, 600);}.mc-tag-selectable.svelte-ajo7cu:hover {box-shadow:inset 0 0 0 var(--border-s, 1px) var(--tag-color-border, #999999);}.mc-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):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.svelte-ajo7cu:has(:where(.svelte-ajo7cu):checked) {background:var(--tag-color-background-selected, #117f03);color:var(--tag-color-text-inverse, #ffffff);border:none;}.mc-tag-selectable.svelte-ajo7cu:has(:where(.svelte-ajo7cu):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.svelte-ajo7cu:has(:where(.svelte-ajo7cu):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.svelte-ajo7cu:has(:where(.svelte-ajo7cu):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.svelte-ajo7cu:has(:where(.svelte-ajo7cu):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.svelte-ajo7cu .mc-tag__label:where(.svelte-ajo7cu) {user-select:none;}.mc-tag-selectable.mc-tag--s.svelte-ajo7cu {padding-inline-start:0.25rem;gap:0.125rem;}.mc-tag-selectable.mc-tag--l.svelte-ajo7cu {padding-inline-start:0.75rem;}`};function z(l,e){f(e,!0),b(l,C);let r=c(e,"label",7),o=c(e,"size",7,"m"),u=p(e,["$$slots","$$events","$$legacy","$$host","label","size"]);var v={get label(){return r()},set label(t){r(t),i()},get size(){return o()},set size(t="m"){o(t),i()}},a=E();_(a,()=>({class:`mc-tag  ${o()!=="m"?`mc-tag--${o()}`:""}`,...u}),void 0,void 0,"svelte-ajo7cu");var s=d(a),g=d(s,!0);return n(s),n(a),w(()=>k(g,r())),x(l,a),j(v)}customElements.define("mc-tag",m(z,{label:{},size:{}},[],[],!0));
 //# sourceMappingURL=Tag.js.map

package/dist/components/tags/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/tags/Tag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    label: string;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let { label, size = 'm', ...attrs }: Props = $props();\n</script>\n\n<span class={`mc-tag  ${size !== 'm' ? `mc-tag--${size}` : ''}`} {...attrs}>\n  <span class=\"mc-tag__label\">{label}</span>\n</span>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-selectable';\n</style>\n"],"names":["label","$.prop","$$props","size","attrs","$.rest_props"],"mappings":";;;;;mxJAAA,oBASQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,eAAO,GAAG,EAAKC,EAAKC,EAAAH,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,QAAA,MAAA,CAAA,sBAGX,MAAA,WAAAC,EAAI,IAAK,IAAiB,WAAAA,MAAS,EAAE,MAAQC,mFACtCJ,EAAK,CAAA,CAAA,6FAJd,IAAG,YACzB"}
+{"version":3,"file":"Tag.js","sources":["../../../src/components/tags/Tag.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'mc-tag' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    label: string;\n    size?: 's' | 'm' | 'l';\n    [key: string]: any;\n  }\n\n  let { label, size = 'm', ...attrs }: Props = $props();\n</script>\n\n<span class={`mc-tag  ${size !== 'm' ? `mc-tag--${size}` : ''}`} {...attrs}>\n  <span class=\"mc-tag__label\">{label}</span>\n</span>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/tag';\n  @use '@mozaic-ds/styles/components/tag/c.tag-selectable';\n</style>\n"],"names":["label","$.prop","$$props","size","attrs","$.rest_props"],"mappings":";;oiMAAA,oBASQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,eAAO,GAAG,EAAKC,EAAKC,EAAAH,EAAA,CAAA,UAAA,WAAA,WAAA,SAAA,QAAA,MAAA,CAAA,0FAAb,IAAG,4BAGD,MAAA,WAAAC,EAAI,IAAK,IAAG,WAAcA,EAAI,IAAK,EAAE,MAAQC,mFACtCJ,EAAK,CAAA,CAAA,aAHpC"}

package/dist/components/tags/Tag.svelte

@@ -17,38 +17,35 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-tag {
-  font-size: 0.875rem;
+  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: #ffffff;
-  color: #242938;
-  border: 1px solid #999999;
+  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: 0.75rem;
+  font-size: var(--font-size-50, 0.75rem);
   border-radius: 1.5rem;
   height: 1.5rem;
   padding-inline: 0.5rem;
 }
 .mc-tag--l {
-  font-size: 0.875rem;
+  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: #d9d9d9;
-  color: #737373;
-  border-color: #d9d9d9;
+  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 {
@@ -59,13 +56,13 @@
   text-decoration: none;
   outline: none;
   cursor: pointer;
-  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold, 600);
 }
 .mc-tag-interactive:not(:disabled):hover {
-  box-shadow: inset 0 0 0 1px #999999;
+  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, #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;
 }
@@ -74,19 +71,19 @@
   gap: 0.25rem;
   text-decoration: none;
   outline: none;
-  color: #ffffff;
+  color: var(--tag-color-text-inverse, #ffffff);
   border: none;
-  background: #117f03;
+  background: var(--tag-color-background-selected, #117f03);
   cursor: pointer;
-  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold, 600);
   padding-inline-end: 1rem;
   padding-inline-start: 0.5rem;
 }
 .mc-tag-contextualised:not(:disabled):hover {
-  background: #006902;
+  background: var(--tag-color-background-selected-hover, #006902);
 }
 .mc-tag-contextualised:focus-visible {
-  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;
 }
@@ -97,8 +94,8 @@
 
 .mc-tag-removable {
   padding: 0 0 0 1rem;
-  background: #242938;
-  color: #ffffff;
+  background: var(--tag-color-background-inverse, #242938);
+  color: var(--tag-color-text-inverse, #ffffff);
   border: none;
 }
 .mc-tag-removable__remove {
@@ -111,18 +108,18 @@
   padding: 0.25rem;
   display: block;
   cursor: pointer;
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
 }
 .mc-tag-removable__remove:hover {
-  background: #343b4c;
+  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, #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;
 }
 .mc-tag-removable__icon {
-  fill: #c9d0de;
+  fill: var(--tag-color-delete-icon, #c9d0de);
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -162,19 +159,19 @@
   white-space: nowrap;
   cursor: pointer;
   padding-inline-start: 0.5rem;
-  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold, 600);
 }
 .mc-tag-selectable:hover {
-  box-shadow: inset 0 0 0 1px #999999;
+  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, #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;
 }
 .mc-tag-selectable:has(:checked) {
-  background: #117f03;
-  color: #ffffff;
+  background: var(--tag-color-background-selected, #117f03);
+  color: var(--tag-color-text-inverse, #ffffff);
   border: none;
 }
 .mc-tag-selectable:has(:checked)::before {
@@ -182,22 +179,22 @@
   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='%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");
+  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: #006902;
-  border-color: #006902;
+  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: #d9d9d9;
-  color: #737373;
-  border-color: #d9d9d9;
+  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='%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");
+  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%);