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

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.stories.js

@@ -1,61 +1,30 @@
-import { waitFor, expect } from 'storybook/test';
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
     title: 'Indicators/Linear Progress Bar (Buffer)',
-    tags: ['autodocs', 'beta'],
-    args: {
-        value: 50,
-        size: 'm',
-    },
+    component: 'm-linear-progressbar-buffer',
+    tags: ['v2'],
     argTypes: {
         value: {
-            control: { type: 'range', min: 0, max: 100, step: 1 },
-            description: 'Current progress value (0–100)',
+            control: { type: 'range', min: 0, max: 100 },
         },
         size: {
-            control: 'select',
+            control: 'radio',
             options: ['s', 'm', 'l'],
         },
     },
-};
-const Template = (args) => {
-    const el = document.createElement('m-linear-progressbar-buffer');
-    el.setAttribute('value', args.value.toString());
-    if (args.size && args.size !== 'm')
-        el.setAttribute('size', args.size);
-    return el;
-};
-export const Default = {
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-linear-progressbar-buffer');
-        const indicator = el?.shadowRoot?.querySelector('.mc-linear-progressbar-buffer__indicator') || el?.querySelector('.mc-linear-progressbar-buffer__indicator');
-        await waitFor(() => {
-            expect(indicator).toHaveAttribute('aria-valuenow', '50');
-        });
-    },
-};
-export const Full = {
-    args: { value: 100 },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-linear-progressbar-buffer');
-        const indicator = el?.shadowRoot?.querySelector('.mc-linear-progressbar-buffer__indicator') || el?.querySelector('.mc-linear-progressbar-buffer__indicator');
-        expect(indicator).toHaveAttribute('aria-valuenow', '100');
+    args: {
+        value: 40,
     },
+    render: (args) => html `
+    <m-linear-progressbar-buffer
+      size=${ifDefined(args.size)}
+      value=${ifDefined(args.value)}
+    ></m-linear-progressbar-buffer>
+  `,
 };
-export const Small = {
+export default meta;
+export const Standard = {};
+export const Size = {
     args: { size: 's' },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-linear-progressbar-buffer');
-        expect(el).toHaveAttribute('size', 's');
-    },
-};
-export const Large = {
-    args: { size: 'l' },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-linear-progressbar-buffer');
-        expect(el).toHaveAttribute('size', 'l');
-    },
 };

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte

@@ -1,18 +1,28 @@
 <svelte:options customElement={{ tag: 'm-linear-progressbar-buffer' }} />
 
 <script lang="ts">
+  /**
+   * A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.
+   */
   interface Props {
-    value?: number;
+    /**
+     * Allows to define the progress bar size.
+     */
     size?: 's' | 'm' | 'l';
+    /**
+     * The current value of the progress bar.
+     */
+    value?: number;
   }
 
   let { value = 0, size = 'm' }: Props = $props();
 </script>
 
 <div
-  class="mc-linear-progressbar-buffer"
-  class:mc-linear-progressbar-buffer--s={size === 's'}
-  class:mc-linear-progressbar-buffer--l={size === 'l'}
+  class={[
+    'mc-linear-progressbar-buffer',
+    `mc-linear-progressbar-buffer--${size}`,
+  ]}
 >
   <div
     class="mc-linear-progressbar-buffer__indicator"
@@ -21,7 +31,7 @@
     aria-valuenow={value}
     aria-valuemin="0"
     aria-valuemax="100"
-  />
+  ></div>
 </div>
 
 <style>/**

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.d.ts

@@ -1,6 +1,15 @@
+/**
+ * A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.
+ */
 interface Props {
-    value?: number;
+    /**
+     * Allows to define the progress bar size.
+     */
     size?: 's' | 'm' | 'l';
+    /**
+     * The current value of the progress bar.
+     */
+    value?: number;
 }
 declare const LinearProgressbarBuffer: import("svelte").Component<Props, {}, "">;
 type LinearProgressbarBuffer = ReturnType<typeof LinearProgressbarBuffer>;

package/dist/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarBuffer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAiBH,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"LinearProgressbarBuffer.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarbuffer/LinearProgressbarBuffer.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoBH,QAAA,MAAM,uBAAuB,2CAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/components/linearprogressbarbuffer/README.md

@@ -0,0 +1,11 @@
+# `m-linear-progressbar-buffer`
+
+A linear progress bar (Buffer) visually represents the progress of a task along a horizontal track, often indicating both current progress and a secondary buffered state. This type of progress bar is commonly used for loading processes, file uploads, or streaming indicators, where part of the task is completed while another portion is preloaded or buffered. It provides users with real-time feedback on task advancement.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `size` | Allows to define the progress bar size. | `'s'` `'m'` `'l'` | `m` |
+| `value` | The current value of the progress bar. | `number` | `0` |
+

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js

@@ -1,4 +1,4 @@
-import{c as d,p as g,a as b,b as m,f as u,t as f,h,i as _,j as x,d as a,E as k,r as t,g as w}from"../../custom-element.js";import{a as y,s as z}from"../../attributes.js";var j=u('<div class="mc-linear-progressbar-percentage svelte-kh7ttv"><div class="mc-linear-progressbar-percentage__indicator svelte-kh7ttv" role="progressbar" aria-valuemin="0" aria-valuemax="100"><div class="mc-linear-progressbar-percentage__label svelte-kh7ttv"><p class="mc-linear-progressbar-percentage__value svelte-kh7ttv"> <span class="mc-linear-progressbar-percentage__unit svelte-kh7ttv">%</span></p></div></div></div>');const E={hash:"svelte-kh7ttv",code:`/**
+import{c as d,p as g,a as b,b as m,f as u,t as f,i as h,j as _,k,d as a,N as x,r as t,h as w}from"../../custom-element.js";import{a as y,s as z}from"../../attributes.js";var j=u('<div class="mc-linear-progressbar-percentage svelte-kh7ttv"><div class="mc-linear-progressbar-percentage__indicator svelte-kh7ttv" role="progressbar" aria-valuemin="0" aria-valuemax="100"><div class="mc-linear-progressbar-percentage__label svelte-kh7ttv"><p class="mc-linear-progressbar-percentage__value svelte-kh7ttv"> <span class="mc-linear-progressbar-percentage__unit svelte-kh7ttv">%</span></p></div></div></div>');const L={hash:"svelte-kh7ttv",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-linear-progressbar-percentage.svelte-kh7ttv {--progress-value: 40;font-family:var(--font-family, LeroyMerlin), sans-serif;background-color:var(--progressbar-color-background, #c9d0de);height:1.5rem;position:relative;min-width:6rem;border-radius:var(--radius-l, 1rem);box-sizing:border-box;}.mc-linear-progressbar-percentage__indicator.svelte-kh7ttv {border-radius:var(--radius-l, 1rem);background-color:var(--progressbar-color-indicator, #464e63);min-width:40px;height:100%;top:0;left:0;position:absolute;transition:width 0.4s ease;overflow:hidden;display:flex;justify-content:flex-end;width:calc(40px + var(--progress-value) * (100% - 40px) / 100);}.mc-linear-progressbar-percentage__label.svelte-kh7ttv {box-sizing:border-box;border-radius:var(--radius-l, 1rem);background-color:var(--progressbar-badge-color-background, #ffffff);color:var(--progressbar-badge-color-text, #171b26);height:1.5rem;width:2.5rem;border:0.125rem solid var(--progressbar-color-indicator, #464e63);display:flex;align-items:center;justify-content:center;}.mc-linear-progressbar-percentage__value.svelte-kh7ttv {font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;}.mc-linear-progressbar-percentage__unit.svelte-kh7ttv {font-size:var(--font-size-25, 0.625rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;position:relative;bottom:1px;}`};function L(o,i){g(i,!0),b(o,E);let e=m(i,"value",7,0);var v={get value(){return e()},set value(p=0){e(p),x()}},s=j(),r=a(s),l=a(r),n=a(l),c=a(n);return k(),t(n),t(l),t(r),t(s),f(()=>{y(r,`--progress-value: ${e()};`),z(r,"aria-valuenow",e()),w(c,`${e()??""} `)}),h(o,s),_(v)}customElements.define("m-linear-progressbar-percentage",d(L,{value:{}},[],[],!0));
+ */.mc-linear-progressbar-percentage.svelte-kh7ttv {--progress-value: 40;font-family:var(--font-family, LeroyMerlin), sans-serif;background-color:var(--progressbar-color-background, #c9d0de);height:1.5rem;position:relative;min-width:6rem;border-radius:var(--radius-l, 1rem);box-sizing:border-box;}.mc-linear-progressbar-percentage__indicator.svelte-kh7ttv {border-radius:var(--radius-l, 1rem);background-color:var(--progressbar-color-indicator, #464e63);min-width:40px;height:100%;top:0;left:0;position:absolute;transition:width 0.4s ease;overflow:hidden;display:flex;justify-content:flex-end;width:calc(40px + var(--progress-value) * (100% - 40px) / 100);}.mc-linear-progressbar-percentage__label.svelte-kh7ttv {box-sizing:border-box;border-radius:var(--radius-l, 1rem);background-color:var(--progressbar-badge-color-background, #ffffff);color:var(--progressbar-badge-color-text, #171b26);height:1.5rem;width:2.5rem;border:0.125rem solid var(--progressbar-color-indicator, #464e63);display:flex;align-items:center;justify-content:center;}.mc-linear-progressbar-percentage__value.svelte-kh7ttv {font-size:var(--font-size-50, 0.75rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;}.mc-linear-progressbar-percentage__unit.svelte-kh7ttv {font-size:var(--font-size-25, 0.625rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;position:relative;bottom:1px;}`};function P(o,i){g(i,!0),b(o,L);let e=m(i,"value",7,0);var v={get value(){return e()},set value(p=0){e(p),k()}},s=j(),r=a(s),l=a(r),n=a(l),c=a(n);return x(),t(n),t(l),t(r),t(s),f(()=>{y(r,`--progress-value: ${e()};`),z(r,"aria-valuenow",e()),w(c,`${e()??""} `)}),h(o,s),_(v)}customElements.define("m-linear-progressbar-percentage",d(P,{value:{}},[],[],!0));
 //# sourceMappingURL=LinearProgressbarPercentage.js.map

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarPercentage.js","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-linear-progressbar-percentage' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    value?: number;\n  }\n\n  let { value = 0 }: Props = $props();\n</script>\n\n<div class=\"mc-linear-progressbar-percentage\">\n  <div\n    class=\"mc-linear-progressbar-percentage__indicator\"\n    role=\"progressbar\"\n    style={`--progress-value: ${value};`}\n    aria-valuenow={value}\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div class=\"mc-linear-progressbar-percentage__label\">\n      <p class=\"mc-linear-progressbar-percentage__value\">\n        {value}\n        <span class=\"mc-linear-progressbar-percentage__unit\">%</span>\n      </p>\n    </div>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/linear-progressbar-percentage';\n</style>\n"],"names":["value"],"mappings":";;42CAAA,gBAOQ,IAAAA,gBAAQ,CAAC,6CAAD,EAAC,6GAOeA,EAAK,CAAA,GAAA,sBAClBA,GAAK,SAMfA,EAAK,GAAA,EAAA,GAAA,eAbd"}
+{"version":3,"file":"LinearProgressbarPercentage.js","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-linear-progressbar-percentage' }} />\n\n<script lang=\"ts\">\n  /**\n   * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.\n   */\n  interface Props {\n    /**\n     * The current value of the progress bar.\n     */\n    value?: number;\n  }\n\n  let { value = 0 }: Props = $props();\n</script>\n\n<div class=\"mc-linear-progressbar-percentage\">\n  <div\n    class=\"mc-linear-progressbar-percentage__indicator\"\n    role=\"progressbar\"\n    style={`--progress-value: ${value};`}\n    aria-valuenow={value}\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div class=\"mc-linear-progressbar-percentage__label\">\n      <p class=\"mc-linear-progressbar-percentage__value\">\n        {value}\n        <span class=\"mc-linear-progressbar-percentage__unit\">%</span>\n      </p>\n    </div>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/linear-progressbar-percentage';\n</style>\n"],"names":["value"],"mappings":";;42CAAA,gBAaQ,IAAAA,gBAAQ,CAAC,6CAAD,EAAC,6GAOeA,EAAK,CAAA,GAAA,sBAClBA,GAAK,SAMfA,EAAK,GAAA,EAAA,GAAA,eAbd"}

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.spec.js

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import LinearProgressbarPercentage from './LinearProgressbarPercentage.svelte';
+describe('m-linear-progressbar-percentage component', () => {
+    it('renders with default value 0', () => {
+        const { container, getByText } = render(LinearProgressbarPercentage);
+        const wrapper = container.querySelector('.mc-linear-progressbar-percentage');
+        expect(wrapper).toBeTruthy();
+        const indicator = container.querySelector('.mc-linear-progressbar-percentage__indicator');
+        expect(indicator).toBeTruthy();
+        expect(indicator.style.getPropertyValue('--progress-value')).toBe('0');
+        expect(indicator.getAttribute('aria-valuenow')).toBe('0');
+        expect(getByText('0')).toBeTruthy();
+        expect(getByText('%')).toBeTruthy();
+    });
+    it('renders with a custom value and displays it', () => {
+        const value = 42;
+        const { container, getByText } = render(LinearProgressbarPercentage, {
+            props: { value },
+        });
+        const indicator = container.querySelector('.mc-linear-progressbar-percentage__indicator');
+        expect(indicator.style.getPropertyValue('--progress-value')).toBe(String(value));
+        expect(indicator.getAttribute('aria-valuenow')).toBe(String(value));
+        expect(getByText(`${value}`)).toBeTruthy();
+    });
+});

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.d.ts

@@ -1,7 +1,6 @@
-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 Full: Story;
+export declare const Standard: Story;
 //# sourceMappingURL=LinearProgressbarPercentage.stories.d.ts.map

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarPercentage.stories.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;wBAetD,IAAI;AAZT,wBAYU;AAEV,KAAK,KAAK,GAAG,QAAQ,CAAC;AAQtB,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAWlB,CAAC"}
+{"version":3,"file":"LinearProgressbarPercentage.stories.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAiBX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC"}

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.stories.js

@@ -1,40 +1,22 @@
-import { expect, waitFor } from 'storybook/test';
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
     title: 'Indicators/Linear Progress Bar (Percentage)',
-    tags: ['autodocs', 'beta'],
-    args: {
-        value: 42,
-    },
+    component: 'm-linear-progressbar-percentage',
+    tags: ['v2'],
     argTypes: {
         value: {
-            control: { type: 'range', min: 0, max: 100, step: 1 },
-            description: 'Current progress value (0–100)',
+            control: { type: 'range', min: 0, max: 100 },
         },
     },
-};
-const Template = (args) => {
-    const el = document.createElement('m-linear-progressbar-percentage');
-    el.setAttribute('value', args.value.toString());
-    return el;
-};
-export const Default = {
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-linear-progressbar-percentage');
-        const indicator = el?.shadowRoot?.querySelector('.mc-linear-progressbar-percentage__indicator') || el?.querySelector('.mc-linear-progressbar-percentage__indicator');
-        const label = el?.shadowRoot?.querySelector('.mc-linear-progressbar-percentage__value') || el?.querySelector('.mc-linear-progressbar-percentage__value');
-        await waitFor(() => {
-            expect(indicator).toHaveAttribute('aria-valuenow', '42');
-            expect(label?.textContent?.trim()).toMatch(/^42\s*%$/);
-        });
-    },
-};
-export const Full = {
-    args: { value: 100 },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-linear-progressbar-percentage');
-        const label = el?.shadowRoot?.querySelector('.mc-linear-progressbar-percentage__value') || el?.querySelector('.mc-linear-progressbar-percentage__value');
-        expect(label?.textContent?.trim()).toMatch(/^100\s*%$/);
+    args: {
+        value: 40,
     },
+    render: (args) => html `
+    <m-linear-progressbar-percentage
+      value=${ifDefined(args.value)}
+    ></m-linear-progressbar-percentage>
+  `,
 };
+export default meta;
+export const Standard = {};

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte

@@ -1,7 +1,13 @@
 <svelte:options customElement={{ tag: 'm-linear-progressbar-percentage' }} />
 
 <script lang="ts">
+  /**
+   * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.
+   */
   interface Props {
+    /**
+     * The current value of the progress bar.
+     */
     value?: number;
   }
 

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.d.ts

@@ -1,4 +1,10 @@
+/**
+ * A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.
+ */
 interface Props {
+    /**
+     * The current value of the progress bar.
+     */
     value?: number;
 }
 declare const LinearProgressbarPercentage: import("svelte").Component<Props, {}, "">;

package/dist/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgressbarPercentage.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwBH,QAAA,MAAM,2BAA2B,2CAAwC,CAAC;AAC1E,KAAK,2BAA2B,GAAG,UAAU,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAClF,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"LinearProgressbarPercentage.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/linearprogressbarpercentage/LinearProgressbarPercentage.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwBH,QAAA,MAAM,2BAA2B,2CAAwC,CAAC;AAC1E,KAAK,2BAA2B,GAAG,UAAU,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAClF,eAAe,2BAA2B,CAAC"}

package/dist/components/linearprogressbarpercentage/README.md

@@ -0,0 +1,10 @@
+# `m-linear-progressbar-percentage`
+
+A linear progress bar (Percentage) visually represents the completion of a task along a horizontal track, displaying the exact progress in percentage within the bar. It is commonly used for file uploads, installations, form completion, or any process requiring user awareness of progress. The percentage label provides clear and immediate feedback, helping users track progress with precision.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `value` | The current value of the progress bar. | `number` | `0` |
+

package/dist/components/link/Link.js

@@ -1,4 +1,4 @@
-import{c as A,p as B,a as F,b as i,f as g,D as G,s as y,d as c,h as _,i as H,j as a,r as f}from"../../custom-element.js";import{i as z}from"../../if.js";import{s as p}from"../../slot.js";import{b as I}from"../../attributes.js";var J=g('<span class="mc-link__icon svelte-5kacnx"><!></span>'),K=g('<span class="mc-link__icon svelte-5kacnx"><!></span>'),M=g('<a><!> <span class="mc-link__label svelte-5kacnx"><!></span> <!></a>');const N={hash:"svelte-5kacnx",code:`/**
+import{c as L,p as S,a as q,b as i,f as _,d as c,s as b,t as A,i as h,j as B,k as l,r as s,e as F,g as G}from"../../custom-element.js";import{i as w}from"../../if.js";import{s as x}from"../../slot.js";import{s as y}from"../../attributes.js";var H=_('<span class="mc-link__icon svelte-5kacnx"><!></span>'),I=_('<span class="mc-link__icon svelte-5kacnx"><!></span>'),J=_('<a><!> <span class="mc-link__label svelte-5kacnx"><!></span> <!></a>');const K={hash:"svelte-5kacnx",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-link.svelte-5kacnx {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-5kacnx {line-height:1.3;}.mc-link__icon.svelte-5kacnx {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-5kacnx:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-5kacnx) {text-decoration:underline;}.mc-link.svelte-5kacnx:focus {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-link--m.svelte-5kacnx {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-5kacnx {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-5kacnx {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-5kacnx {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-5kacnx {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {border-bottom:var(--border-s, 1px) solid currentColor;}.mc-link--stand-alone.svelte-5kacnx:hover .mc-link__label:where(.svelte-5kacnx) {border-color:transparent;}.mc-link--inline.svelte-5kacnx {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {line-height:1;}.mc-link--inline.svelte-5kacnx:hover {text-decoration:none;}`};function O(b,n){B(n,!0),F(b,N);let m=i(n,"href",7),d=i(n,"target",7),k=i(n,"appearance",7,void 0),v=i(n,"disabled",7,!1),u=i(n,"size",7,"m"),h=i(n,"inline",7,!1),r=i(n,"iconposition",7,void 0),j=G(n,["$$slots","$$events","$$legacy","$$host","href","target","appearance","disabled","size","inline","iconposition"]);function C(e,t,l){const o=["mc-link"];return e&&o.push(`mc-link--${e}`),t&&o.push(`mc-link--${t}`),l?o.push("mc-link--inline"):o.push("mc-link--stand-alone"),o.join(" ")}var D={get href(){return m()},set href(e){m(e),a()},get target(){return d()},set target(e){d(e),a()},get appearance(){return k()},set appearance(e=void 0){k(e),a()},get disabled(){return v()},set disabled(e=!1){v(e),a()},get size(){return u()},set size(e="m"){u(e),a()},get inline(){return h()},set inline(e=!1){h(e),a()},get iconposition(){return r()},set iconposition(e=void 0){r(e),a()}},s=M();I(s,e=>({href:m(),target:d(),class:`${e??""} ${v()?"is-disabled":""} `,...j}),[()=>C(k(),u(),h())],void 0,"svelte-5kacnx");var w=c(s);{var E=e=>{var t=J(),l=c(t);p(l,n,"icon",{}),f(t),_(e,t)};z(w,e=>{r()==="left"&&e(E)})}var x=y(w,2),L=c(x);p(L,n,"default",{}),f(x);var S=y(x,2);{var q=e=>{var t=K(),l=c(t);p(l,n,"icon",{}),f(t),_(e,t)};z(S,e=>{r()==="right"&&e(q)})}return f(s),_(b,s),H(D)}customElements.define("m-link",A(O,{href:{},target:{},appearance:{},disabled:{},size:{},inline:{},iconposition:{}},["icon","default"],[],!0));
+ */.mc-link.svelte-5kacnx {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-5kacnx {line-height:1.3;}.mc-link__icon.svelte-5kacnx {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-5kacnx:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-5kacnx) {text-decoration:underline;}.mc-link.svelte-5kacnx:focus {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-link--m.svelte-5kacnx {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-5kacnx {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-5kacnx {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-5kacnx {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-5kacnx {min-height:2rem;font-weight:var(--link-font-weight, 600);}.mc-link--stand-alone.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {border-bottom:var(--border-s, 1px) solid currentColor;}.mc-link--stand-alone.svelte-5kacnx:hover .mc-link__label:where(.svelte-5kacnx) {border-color:transparent;}.mc-link--inline.svelte-5kacnx {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-5kacnx .mc-link__label:where(.svelte-5kacnx) {line-height:1;}.mc-link--inline.svelte-5kacnx:hover {text-decoration:none;}.mc-link__icon.svelte-5kacnx:empty {display:none;}`};function M(p,n){S(n,!0),q(p,K);let m=i(n,"href",7),k=i(n,"target",7),r=i(n,"inline",7),f=i(n,"appearance",7,"standard"),v=i(n,"size",7,"s"),o=i(n,"iconposition",7,"left");var z={get href(){return m()},set href(e){m(e),l()},get target(){return k()},set target(e){k(e),l()},get inline(){return r()},set inline(e){r(e),l()},get appearance(){return f()},set appearance(e="standard"){f(e),l()},get size(){return v()},set size(e="s"){v(e),l()},get iconposition(){return o()},set iconposition(e="left"){o(e),l()}},a=J(),g=c(a);{var j=e=>{var t=H(),u=c(t);x(u,n,"icon",{}),s(t),h(e,t)};w(g,e=>{o()==="left"&&e(j)})}var d=b(g,2),C=c(d);x(C,n,"default",{}),s(d);var D=b(d,2);{var E=e=>{var t=I(),u=c(t);x(u,n,"icon",{}),s(t),h(e,t)};w(D,e=>{o()==="right"&&e(E)})}return s(a),A(()=>{F(a,1,G(["mc-link",`mc-link--${f()}`,`mc-link--${v()}`,r()&&"mc-link--inline",!r()&&"mc-link--stand-alone"]),"svelte-5kacnx"),y(a,"href",m()),y(a,"target",k())}),h(p,a),B(z)}customElements.define("m-link",L(M,{href:{},target:{},inline:{},appearance:{},size:{},iconposition:{}},["icon","default"],[],!0));
 //# sourceMappingURL=Link.js.map

package/dist/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.svelte"],"sourcesContent":["<svelte:options customElement=\"m-link\" />\n\n<script lang=\"ts\">\n  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';\n  interface Props {\n    href: string;\n    target: string;\n    appearance?: LinkStyle;\n    disabled?: boolean;\n    size?: LinkSize;\n    inline?: boolean;\n    iconposition?: LinkIconPosition | undefined;\n    [key: string]: any;\n  }\n\n  let {\n    href,\n    target,\n    appearance = undefined,\n    disabled = false,\n    size = 'm',\n    inline = false,\n    iconposition = undefined,\n    ...events\n  }: Props = $props();\n\n  function setClasses(\n    appearance: LinkStyle,\n    size: LinkSize,\n    inline: boolean,\n  ): string {\n    const classes = ['mc-link'];\n\n    if (appearance) {\n      classes.push(`mc-link--${appearance}`);\n    }\n    if (size) {\n      classes.push(`mc-link--${size}`);\n    }\n    if (inline) {\n      classes.push('mc-link--inline');\n    } else {\n      classes.push('mc-link--stand-alone');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<a\n  {href}\n  {target}\n  class=\"{setClasses(appearance, size, inline)} {disabled\n    ? 'is-disabled'\n    : ''} \"\n  {...events}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["href","$.prop","$$props","target","appearance","disabled","size","inline","iconposition","events","$.rest_props","setClasses","classes","$$render","consequent","consequent_1"],"mappings":";;iwDAAA,oBAgBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,qBAAa,MAAS,EACtBC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,iBAAS,EAAK,EACdC,uBAAe,MAAS,EACrBC,EAAAC,EAAAR,EAAA,mHAGI,SAAAS,EACPP,EACAE,EACAC,EACQ,CACF,MAAAK,GAAW,SAAS,EAEtB,OAAAR,GACFQ,EAAQ,KAAI,YAAaR,CAAU,EAAA,EAEjCE,GACFM,EAAQ,KAAI,YAAaN,CAAI,EAAA,EAE3BC,EACFK,EAAQ,KAAK,iBAAiB,EAE9BA,EAAQ,KAAK,sBAAsB,EAE9BA,EAAQ,KAAK,GAAG,CACzB,oJA3Be,OAAS,qDACX,GAAK,6CACT,IAAG,iDACD,GAAK,6DACC,OAAS,iEA6BqBP,IAC3C,cACA,EAAE,OACFI,IAHI,CAAA,IAAAE,EAAWP,EAAU,EAAEE,EAAI,EAAEC,EAAM,CAAA,CAAA,uGAKtCC,EAAY,IAAK,QAAMK,EAAAC,CAAA,gIAQvBN,EAAY,IAAK,SAAOK,EAAAE,CAAA,2BAlB/B"}
+{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-link' }} />\n\n<script lang=\"ts\">\n  /**\n   * A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.\n   *\n   * @slot default - Use this slot to insert the textual content of the Link.\n   * @slot icon - Use this slot to insert an icon for the Link.\n   */\n  interface Props {\n    /**\n     * Position of the icon relative to the text.\n     */\n    iconposition?: 'left' | 'right';\n    /**\n     * Allows to define the link appearance.\n     */\n    appearance?: 'secondary' | 'accent' | 'inverse' | 'standard';\n    /**\n     * Allows to define the link size.\n     */\n    size?: 's' | 'm';\n    /**\n     * URL for the link.\n     */\n    href?: string;\n    /**\n     * Where to open the link.\n     */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n    /**\n     * Specify wether the link is inline.\n     */\n    inline?: boolean;\n  }\n\n  let {\n    href,\n    target,\n    inline,\n    appearance = 'standard',\n    size = 's',\n    iconposition = 'left',\n  }: Props = $props();\n</script>\n\n<a\n  class={[\n    'mc-link',\n    `mc-link--${appearance}`,\n    `mc-link--${size}`,\n    inline && 'mc-link--inline',\n    !inline && 'mc-link--stand-alone',\n  ]}\n  {href}\n  {target}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n\n  .mc-link__icon:empty {\n    display: none;\n  }\n</style>\n"],"names":["href","$.prop","$$props","target","inline","appearance","size","iconposition","$$render","consequent","consequent_1"],"mappings":";;mzDAAA,oBAqCIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EACNG,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,uBAAe,MAAM,sMAFR,WAAU,6CAChB,IAAG,6DACK,OAAM,2FAelBA,EAAY,IAAK,QAAMC,EAAAC,CAAA,gIAQvBF,EAAY,IAAK,SAAOC,EAAAE,CAAA,gCAjB3B,sBACYL,EAAU,CAAA,eACVC,EAAI,CAAA,GAChBF,EAAM,GAAI,kBACT,CAAAA,EAAM,GAAI,yFARf"}

package/dist/components/link/Link.spec.js

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import Link from './Link.svelte';
+describe('m-link component', () => {
+    it('renders with default props and correct classes', () => {
+        const { container } = render(Link, {
+            props: {
+                href: 'https://example.com',
+            },
+        });
+        const link = container.querySelector('a.mc-link');
+        expect(link).toBeTruthy();
+        expect(link).toHaveAttribute('href', 'https://example.com');
+        expect(link.classList.contains('mc-link--standard')).toBe(true);
+        expect(link.classList.contains('mc-link--s')).toBe(true);
+        expect(link.classList.contains('mc-link--stand-alone')).toBe(true);
+    });
+    it('renders with inline class when inline prop is true', () => {
+        const { container } = render(Link, {
+            props: {
+                href: 'https://example.com',
+                inline: true,
+            },
+        });
+        const link = container.querySelector('a.mc-link');
+        expect(link.classList.contains('mc-link--inline')).toBe(true);
+        expect(link.classList.contains('mc-link--stand-alone')).toBe(false);
+    });
+    it('applies appearance and size classes correctly', () => {
+        const { container } = render(Link, {
+            props: {
+                href: 'https://example.com',
+                appearance: 'accent',
+                size: 'm',
+            },
+        });
+        const link = container.querySelector('a.mc-link');
+        expect(link.classList.contains('mc-link--accent')).toBe(true);
+        expect(link.classList.contains('mc-link--m')).toBe(true);
+    });
+    it('sets target attribute correctly', () => {
+        const { container } = render(Link, {
+            props: {
+                href: 'https://example.com',
+                target: '_blank',
+            },
+        });
+        const link = container.querySelector('a.mc-link');
+        expect(link).toHaveAttribute('target', '_blank');
+    });
+});

package/dist/components/link/Link.stories.d.ts

@@ -1,13 +1,13 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * > A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.
- *
- * The `MLink` component is the **Svelte / WebComponent** implementation of the **Link** component of Mozaic Design System.<br/>
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/links/).
- */
-declare const _default: Meta<unknown>;
-export default _default;
-export declare const Default: any;
-export declare const IconLeft: any;
-export declare const IconRight: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Standard: Story;
+export declare const Secondary: Story;
+export declare const Accent: Story;
+export declare const Inverse: Story;
+export declare const Size: Story;
+export declare const Inline: Story;
+export declare const IconLeft: Story;
+export declare const IconRight: Story;
 //# sourceMappingURL=Link.stories.d.ts.map

package/dist/components/link/Link.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE1D;;;;;GAKG;wBAkDE,IAAI,CAAC,OAAO,CAAC;AAhDlB,wBAgDmB;AA0BnB,eAAO,MAAM,OAAO,KAAoB,CAAC;AAEzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAK1C,eAAO,MAAM,SAAS,KAAoB,CAAC"}
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/components/link/Link.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAqCX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}

package/dist/components/link/Link.stories.js

@@ -1,86 +1,73 @@
-/**
- * > A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page.
- *
- * The `MLink` component is the **Svelte / WebComponent** implementation of the **Link** component of Mozaic Design System.<br/>
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/links/).
- */
-export default {
-    title: 'Navigation/Link (stand alone)',
-    tags: ['autodocs', 'beta'],
+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/Link',
+    component: 'm-link',
     argTypes: {
-        label: {
-            description: 'Specify the link label',
-            control: 'text',
+        iconposition: {
+            control: 'radio',
+            options: ['left', 'right'],
         },
-        href: {
-            description: 'Specify the link href',
-            control: 'text',
-        },
-        target: {
-            description: 'Specify the href target',
-            control: {
-                type: 'select',
-                options: ['_blank', '_self', '_parent', '_top'],
-            },
-            defaultValue: '_blank',
-            if: { arg: 'href' },
+        appearance: {
+            control: 'radio',
+            options: ['secondary', 'accent', 'inverse', 'standard'],
         },
         size: {
-            description: 'Specify the link size',
-            control: { type: 'select' },
+            control: 'radio',
             options: ['s', 'm'],
         },
-        disabled: {
-            description: 'Specify wether the link is disabled',
-            control: 'boolean',
-        },
-        inline: {
-            description: 'Specify wether the link is inline',
-            control: 'boolean',
-        },
-        style: {
-            description: 'Specify which theme to display for the link',
-            control: {
-                type: 'select',
-            },
-            options: ['primary', 'secondary', 'accent', 'inverse'],
-        },
-        iconposition: {
-            description: 'Specify wether the icon is on the right or left ot the link',
-            control: { type: 'radio' },
-            options: ['left', 'right'],
+        target: {
+            control: 'radio',
+            options: ['_self', '_blank', '_parent', '_top'],
         },
     },
+    args: {
+        default: 'Stand-alone link',
+        href: '#',
+    },
+    render: (args) => html `
+    <m-link
+      iconposition=${ifDefined(args.iconposition)}
+      appearance=${ifDefined(args.appearance)}
+      size=${ifDefined(args.size)}
+      href=${ifDefined(args.href)}
+      target=${ifDefined(args.target)}
+      inline=${ifDefined(args.inline)}
+    >
+      ${unsafeHTML(ifDefined(args.icon))} ${unsafeHTML(ifDefined(args.default))}
+    </m-link>
+  `,
+};
+export default meta;
+export const Standard = {};
+export const Secondary = {
+    args: { appearance: 'secondary' },
 };
-const Template = (args) => {
-    const label = document.createElement('span');
-    label.innerText = 'Stand alone link';
-    const icon = document.createElement('chevron-left-24');
-    icon.setAttribute('slot', 'icon');
-    icon.setAttribute('style', 'height: 100%');
-    const primary = document.createElement('m-link');
-    primary.setAttribute('label', 'Primary');
-    if (args.style)
-        primary.setAttribute('style', args.style);
-    if (args.inline)
-        primary.setAttribute('inline', args.inline);
-    if (args.disabled)
-        primary.setAttribute('disabled', args.disabled);
-    if (args.iconposition)
-        primary.setAttribute('iconposition', args.iconposition);
-    primary.setAttribute('size', args.size);
-    primary.setAttribute('href', args.href);
-    primary.setAttribute('target', args.target);
-    primary.appendChild(label);
-    primary.appendChild(icon);
-    return primary;
+export const Accent = {
+    args: { appearance: 'accent' },
+};
+export const Inverse = {
+    globals: {
+        backgrounds: { value: 'inverse' },
+    },
+    args: { appearance: 'inverse' },
 };
-export const Default = Template.bind({});
-export const IconLeft = Template.bind({});
-IconLeft.args = {
-    iconposition: 'left',
+export const Size = {
+    args: { size: 'm' },
 };
-export const IconRight = Template.bind({});
-IconRight.args = {
-    iconposition: 'right',
+export const Inline = {
+    args: { inline: true },
+};
+export const IconLeft = {
+    args: {
+        iconPosition: 'left',
+        icon: '<chevron-left-24 slot="icon"></chevron-left-24>',
+    },
+};
+export const IconRight = {
+    args: {
+        iconPosition: 'right',
+        icon: '<chevron-right-24 slot="icon"></chevron-right-24>',
+    },
 };