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

package/dist/components/circularprogressbar/CircularProgressbar.js

@@ -1,6 +1,6 @@
-import{c as S,p as q,a as A,b as i,f as _,s as f,d as t,t as m,e as F,h as g,i as G,j as n,r as o,E as H,g as h}from"../../custom-element.js";import{i as w}from"../../if.js";import{s as I,a as J}from"../../attributes.js";var K=_('<div class="mc-circular-progressbar__percentage svelte-oy9ecz"><p class="mc-circular-progressbar__value svelte-oy9ecz"> </p> <p class="mc-circular-progressbar__unit svelte-oy9ecz">%</p></div>'),N=_('<p class="mc-circular-progressbar__text svelte-oy9ecz"> </p>'),O=_('<div class="mc-circular-progressbar__content svelte-oy9ecz"><p class="mc-circular-progressbar__number svelte-oy9ecz"> </p> <!></div>'),Q=_('<div role="progressbar" aria-valuemin="0" aria-valuemax="100"><svg class="mc-circular-progressbar__line svelte-oy9ecz" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 100 100"><circle class="mc-circular-progressbar__track svelte-oy9ecz" cx="50" cy="50" r="46"></circle><circle class="mc-circular-progressbar__indicator svelte-oy9ecz" cx="50" cy="50" r="46"></circle></svg> <!> <!></div>');const R={hash:"svelte-oy9ecz",code:`/**
+import{c as N,p as P,a as S,b as i,f as _,s as f,d as t,t as g,i as m,j as q,k as n,r as o,N as A,h,e as F,g as G}from"../../custom-element.js";import{i as w}from"../../if.js";import{s as H,a as I}from"../../attributes.js";var J=_('<div class="mc-circular-progressbar__percentage svelte-oy9ecz"><p class="mc-circular-progressbar__value svelte-oy9ecz"> </p> <p class="mc-circular-progressbar__unit svelte-oy9ecz">%</p></div>'),K=_('<p class="mc-circular-progressbar__text svelte-oy9ecz"> </p>'),O=_('<div class="mc-circular-progressbar__content svelte-oy9ecz"><p class="mc-circular-progressbar__number svelte-oy9ecz"> </p> <!></div>'),Q=_('<div role="progressbar" aria-valuemin="0" aria-valuemax="100"><svg class="mc-circular-progressbar__line svelte-oy9ecz" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 100 100"><circle class="mc-circular-progressbar__track svelte-oy9ecz" cx="50" cy="50" r="46"></circle><circle class="mc-circular-progressbar__indicator svelte-oy9ecz" cx="50" cy="50" r="46"></circle></svg> <!> <!></div>');const R={hash:"svelte-oy9ecz",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-circular-progressbar.svelte-oy9ecz {--progress-value: 40;font-family:var(--font-family, LeroyMerlin), sans-serif;color:var(--progressbar-color-text, #000000);position:relative;display:inline-block;width:9rem;height:9rem;border-radius:50%;}.mc-circular-progressbar__line.svelte-oy9ecz {transform:rotate(270deg);}.mc-circular-progressbar__track.svelte-oy9ecz, .mc-circular-progressbar__indicator.svelte-oy9ecz {stroke-width:calc(8 / (144 / 100));fill:none;stroke-linecap:round;}.mc-circular-progressbar__track.svelte-oy9ecz {stroke:var(--progressbar-color-background, #c9d0de);}.mc-circular-progressbar__indicator.svelte-oy9ecz {stroke:var(--progressbar-color-indicator, #464e63);stroke-dasharray:289.1428571429;stroke-dashoffset:calc((100 - var(--progress-value)) / 100 * 289.1428571429);transition:stroke-dashoffset 0.3s ease;}.mc-circular-progressbar__content.svelte-oy9ecz {display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;margin:0;top:50%;left:50%;transform:translate(-50%, -50%);}.mc-circular-progressbar__number.svelte-oy9ecz, .mc-circular-progressbar__text.svelte-oy9ecz {white-space:nowrap;text-align:center;line-height:var(--line-height-s, 1.3);margin:0;color:var(--progressbar-color-text, #000000);}.mc-circular-progressbar__number.svelte-oy9ecz {font-size:var(--font-size-300, 1.5rem);}.mc-circular-progressbar__text.svelte-oy9ecz {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-circular-progressbar__percentage.svelte-oy9ecz {display:flex;justify-content:center;align-items:center;position:absolute;margin:0;top:50%;left:50%;transform:translate(-50%, -50%);}.mc-circular-progressbar__value.svelte-oy9ecz, .mc-circular-progressbar__unit.svelte-oy9ecz {font-weight:var(--font-weight-semi-bold, 600);line-height:var(--line-height-s, 1.3);color:var(--progressbar-color-text, #000000);}.mc-circular-progressbar__value.svelte-oy9ecz {font-size:var(--font-size-600, 2.5rem);}.mc-circular-progressbar__unit.svelte-oy9ecz {font-size:var(--font-size-300, 1.5rem);}.mc-circular-progressbar--m.svelte-oy9ecz .mc-circular-progressbar__content:where(.svelte-oy9ecz), .mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__content:where(.svelte-oy9ecz) {display:none;}.mc-circular-progressbar--m.svelte-oy9ecz .mc-circular-progressbar__percentage:where(.svelte-oy9ecz), .mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__percentage:where(.svelte-oy9ecz) {display:none;}.mc-circular-progressbar--m.svelte-oy9ecz::after, .mc-circular-progressbar--s.svelte-oy9ecz::after {display:none;}.mc-circular-progressbar--m.svelte-oy9ecz .mc-circular-progressbar__track:where(.svelte-oy9ecz),
 .mc-circular-progressbar--m.svelte-oy9ecz .mc-circular-progressbar__indicator:where(.svelte-oy9ecz) {stroke-width:calc(4 / (48 / 100));}.mc-circular-progressbar--m.svelte-oy9ecz {width:3rem;height:3rem;}.mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__track:where(.svelte-oy9ecz),
-.mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__indicator:where(.svelte-oy9ecz) {stroke-width:calc(4 / (32 / 100));transform-origin:center;transform:scale(0.95);}.mc-circular-progressbar--s.svelte-oy9ecz {width:2rem;height:2rem;}`};function T(x,s){q(s,!0),A(x,R);let v=i(s,"size",7,"l"),l=i(s,"value",7,0),u=i(s,"type",7,"percentage"),y=i(s,"contentvalue",7,""),p=i(s,"additionalinfo",7,"");var E={get size(){return v()},set size(e="l"){v(e),n()},get value(){return l()},set value(e=0){l(e),n()},get type(){return u()},set type(e="percentage"){u(e),n()},get contentvalue(){return y()},set contentvalue(e=""){y(e),n()},get additionalinfo(){return p()},set additionalinfo(e=""){p(e),n()}},c=Q();let k;var j=f(t(c),2);{var B=e=>{var r=K(),a=t(r),b=t(a,!0);o(a),H(2),o(r),m(()=>h(b,l())),g(e,r)};w(j,e=>{u()==="percentage"&&e(B)})}var C=f(j,2);{var D=e=>{var r=O(),a=t(r),b=t(a,!0);o(a);var L=f(a,2);{var M=d=>{var z=N(),P=t(z,!0);o(z),m(()=>h(P,p())),g(d,z)};w(L,d=>{p()&&d(M)})}o(r),m(()=>h(b,y())),g(e,r)};w(C,e=>{u()==="content"&&e(D)})}return o(c),m(e=>{k=F(c,1,"mc-circular-progressbar svelte-oy9ecz",null,k,e),I(c,"aria-valuenow",l()),J(c,`--progress-value: ${l()};`)},[()=>({"mc-circular-progressbar--s":v()==="s","mc-circular-progressbar--m":v()==="m"})]),g(x,c),G(E)}customElements.define("m-circular-progressbar",S(T,{size:{},value:{},type:{},contentvalue:{},additionalinfo:{}},[],[],!0));
+.mc-circular-progressbar--s.svelte-oy9ecz .mc-circular-progressbar__indicator:where(.svelte-oy9ecz) {stroke-width:calc(4 / (32 / 100));transform-origin:center;transform:scale(0.95);}.mc-circular-progressbar--s.svelte-oy9ecz {width:2rem;height:2rem;}`};function T(x,s){P(s,!0),S(x,R);let v=i(s,"size",7),l=i(s,"value",7,0),u=i(s,"type",7,"percentage"),y=i(s,"contentvalue",7),p=i(s,"additionalinfo",7);var j={get size(){return v()},set size(e){v(e),n()},get value(){return l()},set value(e=0){l(e),n()},get type(){return u()},set type(e="percentage"){u(e),n()},get contentvalue(){return y()},set contentvalue(e){y(e),n()},get additionalinfo(){return p()},set additionalinfo(e){p(e),n()}},c=Q(),k=f(t(c),2);{var B=e=>{var r=J(),a=t(r),b=t(a,!0);o(a),A(2),o(r),g(()=>h(b,l())),m(e,r)};w(k,e=>{u()==="percentage"&&e(B)})}var C=f(k,2);{var D=e=>{var r=O(),a=t(r),b=t(a,!0);o(a);var E=f(a,2);{var L=d=>{var z=K(),M=t(z,!0);o(z),g(()=>h(M,p())),m(d,z)};w(E,d=>{p()&&d(L)})}o(r),g(()=>h(b,y())),m(e,r)};w(C,e=>{u()==="content"&&e(D)})}return o(c),g(()=>{F(c,1,G(["mc-circular-progressbar",v()&&`mc-circular-progressbar--${v()}`]),"svelte-oy9ecz"),H(c,"aria-valuenow",l()),I(c,`--progress-value: ${l()};`)}),m(x,c),q(j)}customElements.define("m-circular-progressbar",N(T,{size:{},value:{},type:{},contentvalue:{},additionalinfo:{}},[],[],!0));
 //# sourceMappingURL=CircularProgressbar.js.map

package/dist/components/circularprogressbar/CircularProgressbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgressbar.js","sources":["../../../src/components/circularprogressbar/CircularProgressbar.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-circular-progressbar' }} />\n\n<script lang=\"ts\">\n  interface Props {\n    size?: 's' | 'm' | 'l';\n    value?: number;\n    type?: 'percentage' | 'content';\n    contentvalue?: string;\n    additionalinfo?: string;\n  }\n\n  let {\n    size = 'l',\n    value = 0,\n    type = 'percentage',\n    contentvalue = '',\n    additionalinfo = '',\n  }: Props = $props();\n</script>\n\n<div\n  class=\"mc-circular-progressbar\"\n  class:mc-circular-progressbar--s={size === 's'}\n  class:mc-circular-progressbar--m={size === 'm'}\n  role=\"progressbar\"\n  aria-valuenow={value}\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  style={`--progress-value: ${value};`}\n>\n  <svg\n    class=\"mc-circular-progressbar__line\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n    viewBox=\"0 0 100 100\"\n  >\n    <circle class=\"mc-circular-progressbar__track\" cx=\"50\" cy=\"50\" r=\"46\" />\n    <circle class=\"mc-circular-progressbar__indicator\" cx=\"50\" cy=\"50\" r=\"46\" />\n  </svg>\n\n  {#if type === 'percentage'}\n    <div class=\"mc-circular-progressbar__percentage\">\n      <p class=\"mc-circular-progressbar__value\">{value}</p>\n      <p class=\"mc-circular-progressbar__unit\">%</p>\n    </div>\n  {/if}\n\n  {#if type === 'content'}\n    <div class=\"mc-circular-progressbar__content\">\n      <p class=\"mc-circular-progressbar__number\">{contentvalue}</p>\n      {#if additionalinfo}\n        <p class=\"mc-circular-progressbar__text\">{additionalinfo}</p>\n      {/if}\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/circular-progressbar';\n</style>\n"],"names":["size","value","type","contentvalue","additionalinfo","$$render","consequent","consequent_1","consequent_2"],"mappings":";;;;2QAAA,gBAYI,IAAAA,eAAO,GAAG,EACVC,gBAAQ,CAAC,EACTC,eAAO,YAAY,EACnBC,uBAAe,EAAE,EACjBC,yBAAiB,EAAE,2CAJZ,IAAG,+CACF,EAAC,6CACF,aAAY,6DACJ,GAAE,iEACA,GAAE,uGA0B0BH,EAAK,CAAA,CAAA,kBAF/CC,EAAI,IAAK,cAAYG,EAAAC,CAAA,uHAWsBF,EAAc,CAAA,CAAA,kBADrDA,EAAc,GAAAC,EAAAE,CAAA,mBADyBJ,EAAY,CAAA,CAAA,kBAFvDD,EAAI,IAAK,WAASG,EAAAG,CAAA,oGAtBRP,GAAK,2BAGQA,EAAK,CAAA,GAAA,UANC,6BAAAD,EAAI,IAAK,IACT,6BAAAA,EAAI,IAAK,mBAL7C"}
+{"version":3,"file":"CircularProgressbar.js","sources":["../../../src/components/circularprogressbar/CircularProgressbar.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-circular-progressbar' }} />\n\n<script lang=\"ts\">\n  /**\n   * A circular progress bar visually represents progress toward a goal or completion of a process using a circular shape. It is commonly used to indicate task completion or performance metrics. The progress is displayed as a partially filled ring, often accompanied by a percentage or status indicator. Circular Progress Bars are useful for providing users with real-time feedback on ongoing actions without taking up significant screen space.\n   */\n  interface Props {\n    /**\n     * Sets the size of the progress bar.\n     */\n    size?: 's' | 'm' | 'l';\n    /**\n     * The current value of the progress bar.\n     */\n    value?: number;\n    /**\n     * Shows either a percentage or custom content.\n     */\n    type?: 'percentage' | 'content';\n    /**\n     * Main content shown when `type` is `'content'`.\n     */\n    contentvalue?: string;\n    /**\n     * Additional text shown to define the `contentValue`.\n     */\n    additionalinfo?: string;\n  }\n\n  let {\n    size,\n    value = 0,\n    type = 'percentage',\n    contentvalue,\n    additionalinfo,\n  }: Props = $props();\n</script>\n\n<div\n  class={[\n    'mc-circular-progressbar',\n    size && `mc-circular-progressbar--${size}`,\n  ]}\n  role=\"progressbar\"\n  aria-valuenow={value}\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  style={`--progress-value: ${value};`}\n>\n  <svg\n    class=\"mc-circular-progressbar__line\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n    viewBox=\"0 0 100 100\"\n  >\n    <circle class=\"mc-circular-progressbar__track\" cx=\"50\" cy=\"50\" r=\"46\" />\n    <circle class=\"mc-circular-progressbar__indicator\" cx=\"50\" cy=\"50\" r=\"46\" />\n  </svg>\n\n  {#if type === 'percentage'}\n    <div class=\"mc-circular-progressbar__percentage\">\n      <p class=\"mc-circular-progressbar__value\">{value}</p>\n      <p class=\"mc-circular-progressbar__unit\">%</p>\n    </div>\n  {/if}\n\n  {#if type === 'content'}\n    <div class=\"mc-circular-progressbar__content\">\n      <p class=\"mc-circular-progressbar__number\">{contentvalue}</p>\n      {#if additionalinfo}\n        <p class=\"mc-circular-progressbar__text\">{additionalinfo}</p>\n      {/if}\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/circular-progressbar';\n</style>\n"],"names":["size","$.prop","$$props","value","type","contentvalue","additionalinfo","$$render","consequent","consequent_1","consequent_2"],"mappings":";;;;2QAAA,oBA8BIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,gBAAQ,CAAC,EACTC,eAAO,YAAY,EACnBC,EAAYJ,EAAAC,EAAA,eAAA,CAAA,EACZI,EAAcL,EAAAC,EAAA,iBAAA,CAAA,0FAHN,EAAC,6CACF,aAAY,2NA6B0BC,EAAK,CAAA,CAAA,kBAF/CC,EAAI,IAAK,cAAYG,EAAAC,CAAA,uHAWsBF,EAAc,CAAA,CAAA,kBADrDA,EAAc,GAAAC,EAAAE,CAAA,mBADyBJ,EAAY,CAAA,CAAA,kBAFvDD,EAAI,IAAK,WAASG,EAAAG,CAAA,gCA1BrB,0BACAV,iCAAoCA,GAAI,0CAG3BG,GAAK,2BAGQA,EAAK,CAAA,GAAA,eAXnC"}

package/dist/components/circularprogressbar/CircularProgressbar.spec.js

@@ -0,0 +1,74 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import CircularProgressbar from './CircularProgressbar.svelte';
+describe('m-circular-progressbar component', () => {
+    it('renders with default props (type: percentage, value: 0)', () => {
+        const { container, getByText } = render(CircularProgressbar);
+        const wrapper = container.querySelector('.mc-circular-progressbar');
+        expect(wrapper).toBeTruthy();
+        expect(wrapper).toHaveAttribute('role', 'progressbar');
+        expect(wrapper).toHaveAttribute('aria-valuenow', '0');
+        expect(wrapper).toHaveAttribute('aria-valuemin', '0');
+        expect(wrapper).toHaveAttribute('aria-valuemax', '100');
+        const valueText = getByText('0');
+        const percentUnit = getByText('%');
+        expect(valueText).toBeTruthy();
+        expect(percentUnit).toBeTruthy();
+    });
+    it('applies the correct size class', () => {
+        const { container } = render(CircularProgressbar, {
+            props: { size: 'l' },
+        });
+        const wrapper = container.querySelector('.mc-circular-progressbar');
+        expect(wrapper?.classList.contains('mc-circular-progressbar--l')).toBe(true);
+    });
+    it('updates percentage value visually and via ARIA', () => {
+        const { container, getByText } = render(CircularProgressbar, {
+            props: { value: 75 },
+        });
+        const wrapper = container.querySelector('.mc-circular-progressbar');
+        expect(wrapper?.getAttribute('aria-valuenow')).toBe('75');
+        expect(getByText('75')).toBeTruthy();
+    });
+    it('renders content type with contentvalue and no additional info', () => {
+        const { getByText, queryByText } = render(CircularProgressbar, {
+            props: {
+                type: 'content',
+                contentvalue: '42',
+            },
+        });
+        const content = getByText('42');
+        expect(content).toBeTruthy();
+        expect(queryByText('%')).toBeNull();
+    });
+    it('renders contentvalue with additionalinfo', () => {
+        const { getByText } = render(CircularProgressbar, {
+            props: {
+                type: 'content',
+                contentvalue: 'Done',
+                additionalinfo: 'All tasks completed',
+            },
+        });
+        expect(getByText('Done')).toBeTruthy();
+        expect(getByText('All tasks completed')).toBeTruthy();
+    });
+    it('does not render content block when type is percentage', () => {
+        const { container } = render(CircularProgressbar, {
+            props: {
+                type: 'percentage',
+                value: 10,
+                contentvalue: 'Should not show',
+                additionalinfo: 'Also hidden',
+            },
+        });
+        expect(container.querySelector('.mc-circular-progressbar__content')).toBeNull();
+    });
+    it('sets inline style for progress value', () => {
+        const { container } = render(CircularProgressbar, {
+            props: { value: 33 },
+        });
+        const wrapper = container.querySelector('.mc-circular-progressbar');
+        const style = wrapper.getAttribute('style');
+        expect(style).toContain('--progress-value: 33');
+    });
+});

package/dist/components/circularprogressbar/CircularProgressbar.stories.d.ts

@@ -1,9 +1,9 @@
-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 Percentage: Story;
+export declare const Standard: Story;
+export declare const SizeS: Story;
+export declare const SizeM: Story;
 export declare const Content: Story;
-export declare const Small: Story;
-export declare const Medium: Story;
 //# sourceMappingURL=CircularProgressbar.stories.d.ts.map

package/dist/components/circularprogressbar/CircularProgressbar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgressbar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/circularprogressbar/CircularProgressbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;wBA8BtD,IAAI;AA3BT,wBA2BU;AAEV,KAAK,KAAK,GAAG,QAAQ,CAAC;AAatB,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC"}
+{"version":3,"file":"CircularProgressbar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/circularprogressbar/CircularProgressbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IA6BX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC"}

package/dist/components/circularprogressbar/CircularProgressbar.stories.js

@@ -1,86 +1,47 @@
-import { expect, within, waitFor } from 'storybook/test';
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
     title: 'Indicators/Circular Progress Bar',
-    tags: ['autodocs', 'beta'],
-    args: {
-        value: 75,
-        size: 'l',
-        type: 'percentage',
-    },
+    component: 'm-circular-progressbar',
+    tags: ['v2'],
     argTypes: {
         value: {
             control: { type: 'range', min: 0, max: 100 },
         },
-        size: {
-            control: 'select',
-            options: ['s', 'm', 'l'],
-        },
         type: {
-            control: 'select',
+            control: 'radio',
             options: ['percentage', 'content'],
         },
-        contentvalue: {
-            control: 'text',
-        },
-        additionalinfo: {
-            control: 'text',
+        size: {
+            control: 'radio',
+            options: ['s', 'm', 'l'],
         },
     },
+    args: {
+        value: 40,
+    },
+    render: (args) => html `
+    <m-circular-progressbar
+      size=${ifDefined(args.size)}
+      value=${ifDefined(args.value)}
+      type=${ifDefined(args.type)}
+      contentvalue=${ifDefined(args.contentvalue)}
+      additionalinfo=${ifDefined(args.additionalinfo)}
+    ></m-circular-progressbar>
+  `,
 };
-const Template = (args) => {
-    const el = document.createElement('m-circular-progressbar');
-    el.setAttribute('value', args.value.toString());
-    el.setAttribute('type', args.type);
-    if (args.size && args.size !== 'l')
-        el.setAttribute('size', args.size);
-    if (args.contentvalue)
-        el.setAttribute('contentvalue', args.contentvalue);
-    if (args.additionalinfo)
-        el.setAttribute('additionalinfo', args.additionalinfo);
-    return el;
+export default meta;
+export const Standard = {};
+export const SizeS = {
+    args: { size: 'm' },
 };
-export const Percentage = {
-    args: {
-        value: 42,
-        type: 'percentage',
-    },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-circular-progressbar');
-        const valueEl = el?.shadowRoot?.querySelector('.mc-circular-progressbar__value');
-        const unitEl = el?.shadowRoot?.querySelector('.mc-circular-progressbar__unit');
-        expect(valueEl?.textContent?.trim()).toBe('42');
-        expect(unitEl?.textContent?.trim()).toBe('%');
-    },
+export const SizeM = {
+    args: { size: 's' },
 };
 export const Content = {
     args: {
         type: 'content',
-        contentvalue: '23',
-        additionalinfo: 'Tasks',
-    },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-circular-progressbar');
-        const num = el?.shadowRoot?.querySelector('.mc-circular-progressbar__number');
-        const text = el?.shadowRoot?.querySelector('.mc-circular-progressbar__text');
-        expect(num?.textContent?.trim()).toBe('23');
-        expect(text?.textContent?.trim()).toBe('Tasks');
-    },
-};
-export const Small = {
-    args: { size: 's' },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-circular-progressbar');
-        expect(el).toHaveAttribute('size', 's');
-    },
-};
-export const Medium = {
-    args: { size: 'm' },
-    render: Template,
-    play: async ({ canvasElement }) => {
-        const el = canvasElement.querySelector('m-circular-progressbar');
-        expect(el).toHaveAttribute('size', 'm');
+        contentValue: '999 999€',
+        additionalInfo: 'additional Info',
     },
 };

package/dist/components/circularprogressbar/CircularProgressbar.svelte

@@ -1,27 +1,46 @@
 <svelte:options customElement={{ tag: 'm-circular-progressbar' }} />
 
 <script lang="ts">
+  /**
+   * A circular progress bar visually represents progress toward a goal or completion of a process using a circular shape. It is commonly used to indicate task completion or performance metrics. The progress is displayed as a partially filled ring, often accompanied by a percentage or status indicator. Circular Progress Bars are useful for providing users with real-time feedback on ongoing actions without taking up significant screen space.
+   */
   interface Props {
+    /**
+     * Sets the size of the progress bar.
+     */
     size?: 's' | 'm' | 'l';
+    /**
+     * The current value of the progress bar.
+     */
     value?: number;
+    /**
+     * Shows either a percentage or custom content.
+     */
     type?: 'percentage' | 'content';
+    /**
+     * Main content shown when `type` is `'content'`.
+     */
     contentvalue?: string;
+    /**
+     * Additional text shown to define the `contentValue`.
+     */
     additionalinfo?: string;
   }
 
   let {
-    size = 'l',
+    size,
     value = 0,
     type = 'percentage',
-    contentvalue = '',
-    additionalinfo = '',
+    contentvalue,
+    additionalinfo,
   }: Props = $props();
 </script>
 
 <div
-  class="mc-circular-progressbar"
-  class:mc-circular-progressbar--s={size === 's'}
-  class:mc-circular-progressbar--m={size === 'm'}
+  class={[
+    'mc-circular-progressbar',
+    size && `mc-circular-progressbar--${size}`,
+  ]}
   role="progressbar"
   aria-valuenow={value}
   aria-valuemin="0"

package/dist/components/circularprogressbar/CircularProgressbar.svelte.d.ts

@@ -1,8 +1,26 @@
+/**
+ * A circular progress bar visually represents progress toward a goal or completion of a process using a circular shape. It is commonly used to indicate task completion or performance metrics. The progress is displayed as a partially filled ring, often accompanied by a percentage or status indicator. Circular Progress Bars are useful for providing users with real-time feedback on ongoing actions without taking up significant screen space.
+ */
 interface Props {
+    /**
+     * Sets the size of the progress bar.
+     */
     size?: 's' | 'm' | 'l';
+    /**
+     * The current value of the progress bar.
+     */
     value?: number;
+    /**
+     * Shows either a percentage or custom content.
+     */
     type?: 'percentage' | 'content';
+    /**
+     * Main content shown when `type` is `'content'`.
+     */
     contentvalue?: string;
+    /**
+     * Additional text shown to define the `contentValue`.
+     */
     additionalinfo?: string;
 }
 declare const CircularProgressbar: import("svelte").Component<Props, {}, "">;

package/dist/components/circularprogressbar/CircularProgressbar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgressbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/circularprogressbar/CircularProgressbar.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA0CH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"CircularProgressbar.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/circularprogressbar/CircularProgressbar.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;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA6CH,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/circularprogressbar/README.md

@@ -0,0 +1,14 @@
+# `m-circular-progressbar`
+
+A circular progress bar visually represents progress toward a goal or completion of a process using a circular shape. It is commonly used to indicate task completion or performance metrics. The progress is displayed as a partially filled ring, often accompanied by a percentage or status indicator. Circular Progress Bars are useful for providing users with real-time feedback on ongoing actions without taking up significant screen space.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `size` | Sets the size of the progress bar. | `'s'` `'m'` `'l'` |   |
+| `value` | The current value of the progress bar. | `number` | `0` |
+| `type` | Shows either a percentage or custom content. | `'percentage'` `'content'` | `percentage` |
+| `contentvalue` | Main content shown when `type` is `'content'`. | `string` |   |
+| `additionalinfo` | Additional text shown to define the `contentValue`. | `string` |   |
+

package/dist/components/datepicker/Datepicker.js

@@ -1,7 +1,7 @@
-import{n as D,c as F,p as I,a as L,b as o,f as H,D as S,d as c,s as k,t as V,e as q,h as y,i as A,j as t,r as d,g as G}from"../../custom-element.js";import{i as J}from"../../if.js";import{b as K}from"../../attributes.js";import{c as N}from"../../input.js";import{C as O}from"../../CrossCircleFilled24.js";import"../../legacy.js";function P(v,r){r("")}var Q=H('<div class="mc-datepicker__controls-options mc-controls-options svelte-xj4ivh"><button type="button" class="mc-controls-options__button svelte-xj4ivh"><!> <span class="mc-controls-options__label svelte-xj4ivh"> </span></button></div>'),R=H("<div><input/> <!></div>");const T={hash:"svelte-xj4ivh",code:`/**
+import{v as Z,c as B,p as D,a as F,b as o,f as H,s as k,d as c,t as V,i as y,j as L,k as t,r as d,h as O,e as S,g as q}from"../../custom-element.js";import{i as A}from"../../if.js";import{r as G,s as w}from"../../attributes.js";import{c as I}from"../../input.js";import{c as J}from"../../custom-element-forward-events.js";import{C as K}from"../../CrossCircleFilled24.js";import"../../legacy.js";const N=(v,r)=>r("");var P=H('<div class="mc-datepicker__controls-options mc-controls-options svelte-xj4ivh"><button type="button" class="mc-controls-options__button svelte-xj4ivh"><!> <span class="mc-controls-options__label svelte-xj4ivh"> </span></button></div>'),Q=H('<div><input class="mc-datepicker__control mc-text-input__control svelte-xj4ivh" type="date"/> <!></div>');const R={hash:"svelte-xj4ivh",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* stylelint-disable string-no-newline */.mc-text-input.svelte-xj4ivh {transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-xj4ivh {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control.svelte-xj4ivh {padding:0.75rem 0.6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1;}.mc-text-input__control.svelte-xj4ivh::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-xj4ivh {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-xj4ivh:focus-within {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-text-input.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-text-input.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none;}.mc-text-input.svelte-xj4ivh:has(input[readonly]:where(.svelte-xj4ivh)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh) {padding-inline-start:0;}.mc-text-input.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh) {padding-inline-end:0;}.mc-text-input--s.svelte-xj4ivh {height:2rem;}.mc-text-input--s.svelte-xj4ivh .mc-text-input__control:where(.svelte-xj4ivh) {padding:0.375rem 0.6875rem;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-text-input--s.svelte-xj4ivh:has(.mc-text-input__icon:where(.svelte-xj4ivh)) {padding-inline-start:0.4375rem;}.mc-text-input--s.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-xj4ivh {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}.mc-text-input.svelte-xj4ivh :where(.svelte-xj4ivh) {box-sizing:border-box;}
+/* stylelint-disable string-no-newline */.mc-text-input.svelte-xj4ivh {transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;box-sizing:border-box;display:flex;align-items:center;gap:0.5rem;}.mc-text-input__control.svelte-xj4ivh {background-color:transparent;border-width:0;font-family:inherit;outline:none;}.mc-text-input__control.svelte-xj4ivh {padding:0.75rem 0.6875rem;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);flex-grow:1;}.mc-text-input__control.svelte-xj4ivh::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-xj4ivh {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-xj4ivh:focus-within {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-text-input.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-text-input.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none;}.mc-text-input.svelte-xj4ivh:has(input[readonly]:where(.svelte-xj4ivh)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) .mc-text-input__control:where(.svelte-xj4ivh) {padding-inline-end:0;}.mc-text-input--s.svelte-xj4ivh {height:2rem;}.mc-text-input--s.svelte-xj4ivh .mc-text-input__control:where(.svelte-xj4ivh) {padding:0.375rem 0.6875rem;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-text-input--s.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-xj4ivh {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}.mc-text-input.svelte-xj4ivh :where(.svelte-xj4ivh) {box-sizing:border-box;}
 
-/* stylelint-enable string-no-newline */.mc-datepicker.svelte-xj4ivh {border-radius:var(--radius-s, 0.25rem);position:relative;}.mc-datepicker__control.svelte-xj4ivh {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");font-family:var(--font-family, LeroyMerlin), sans-serif;background-repeat:no-repeat;background-position:right 0.75rem center;display:block;padding:0 0.75rem;}.mc-datepicker__control.svelte-xj4ivh::-webkit-calendar-picker-indicator {padding-right:1rem;opacity:0;transform:scale(2);}.mc-datepicker__control.svelte-xj4ivh::-moz-calendar-picker-indicator {padding-right:1rem;opacity:0;transform:scale(2);}.mc-datepicker__control.is-invalid.svelte-xj4ivh {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-datepicker__control.is-invalid.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}.mc-datepicker__control.svelte-xj4ivh:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-datepicker__control.svelte-xj4ivh:disabled:hover:not(:focus-within) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-datepicker.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0;}.mc-datepicker.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:all;cursor:not-allowed;}.mc-datepicker.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled):hover {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-datepicker--s.svelte-xj4ivh .mc-datepicker__control:where(.svelte-xj4ivh) {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");}.mc-datepicker--s.svelte-xj4ivh .mc-datepicker__control:where(.svelte-xj4ivh):disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");}.mc-datepicker__controls-options.svelte-xj4ivh {position:absolute;right:2.75rem;top:0.75rem;}.mc-controls-options.svelte-xj4ivh {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-xj4ivh {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--radius-full, 100%);}.mc-controls-options__button.svelte-xj4ivh: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-controls-options__icon.svelte-xj4ivh {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-xj4ivh, .mc-controls-options__icon.svelte-xj4ivh {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-xj4ivh {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-controls-options__unit.svelte-xj4ivh {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}`};function U(v,r){I(r,!0),L(v,T);let h=o(r,"id",7),m=o(r,"name",7,""),i=o(r,"value",7,""),l=o(r,"isinvalid",7,!1),u=o(r,"disabled",7,!1),s=o(r,"size",7,"m"),p=o(r,"readonly",7,!1),x=o(r,"isclearable",7,!1),f=o(r,"clearlabel",7,"clear content"),z=S(r,["$$slots","$$events","$$legacy","$$host","id","name","value","isinvalid","disabled","size","readonly","isclearable","clearlabel"]);function C(e){const a=e.target;i(a.value)}var E={get id(){return h()},set id(e){h(e),t()},get name(){return m()},set name(e=""){m(e),t()},get value(){return i()},set value(e=""){i(e),t()},get isinvalid(){return l()},set isinvalid(e=!1){l(e),t()},get disabled(){return u()},set disabled(e=!1){u(e),t()},get size(){return s()},set size(e="m"){s(e),t()},get readonly(){return p()},set readonly(e=!1){p(e),t()},get isclearable(){return x()},set isclearable(e=!1){x(e),t()},get clearlabel(){return f()},set clearlabel(e="clear content"){f(e),t()}},n=R();let w;var b=c(n);K(b,()=>({class:"mc-datepicker__control mc-text-input__control",type:"date",id:h(),name:m(),disabled:u(),readonly:p(),"aria-invalid":l(),oninput:C,...z}),void 0,void 0,"svelte-xj4ivh",!0);var M=k(b,2);{var Z=e=>{var a=Q(),g=c(a);g.__click=[P,i];var _=c(g);O(_,{class:"mc-controls-options__icon","aria-hidden":"true"});var j=k(_,2),B=c(j,!0);d(j),d(g),d(a),V(()=>G(B,f())),y(e,a)};J(M,e=>{x()&&i()&&e(Z)})}return d(n),V(e=>w=q(n,1,"mc-datepicker mc-text-input svelte-xj4ivh",null,w,e),[()=>({"is-invalid":l(),"mc-text-input--s":s()==="s","mc-datepicker--s":s()==="s"})]),N(b,i),y(v,n),A(E)}D(["click"]);customElements.define("m-datepicker",F(U,{id:{},name:{},value:{},isinvalid:{},disabled:{},size:{},readonly:{},isclearable:{},clearlabel:{}},[],[],!0));
+/* stylelint-enable string-no-newline */.mc-datepicker.svelte-xj4ivh {border-radius:var(--radius-s, 0.25rem);position:relative;}.mc-datepicker__control.svelte-xj4ivh {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");font-family:var(--font-family, LeroyMerlin), sans-serif;background-repeat:no-repeat;background-position:right 0.75rem center;display:block;padding:0 0.75rem;}.mc-datepicker__control.svelte-xj4ivh::-webkit-calendar-picker-indicator {padding-right:1rem;opacity:0;transform:scale(2);}.mc-datepicker__control.svelte-xj4ivh::-moz-calendar-picker-indicator {padding-right:1rem;opacity:0;transform:scale(2);}.mc-datepicker__control.is-invalid.svelte-xj4ivh {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-datepicker__control.is-invalid.svelte-xj4ivh:hover:not(:focus-within) {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}.mc-datepicker__control.svelte-xj4ivh:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E");background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-datepicker__control.svelte-xj4ivh:disabled:hover:not(:focus-within) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-datepicker.svelte-xj4ivh:has(.mc-controls-options:where(.svelte-xj4ivh)) {padding-inline-end:0;}.mc-datepicker.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:all;cursor:not-allowed;}.mc-datepicker.svelte-xj4ivh:has(input:where(.svelte-xj4ivh):disabled):hover {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-datepicker--s.svelte-xj4ivh .mc-datepicker__control:where(.svelte-xj4ivh) {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");}.mc-datepicker--s.svelte-xj4ivh .mc-datepicker__control:where(.svelte-xj4ivh):disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E");}.mc-datepicker__controls-options.svelte-xj4ivh {position:absolute;right:2.75rem;top:0.75rem;}.mc-controls-options.svelte-xj4ivh {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-xj4ivh {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--radius-full, 100%);}.mc-controls-options__button.svelte-xj4ivh: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-controls-options__icon.svelte-xj4ivh {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-xj4ivh, .mc-controls-options__icon.svelte-xj4ivh {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-xj4ivh {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-controls-options__unit.svelte-xj4ivh {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}`};function T(v,r){D(r,!0),F(v,R);let h=o(r,"id",7),m=o(r,"name",7),a=o(r,"value",7),l=o(r,"isinvalid",7),u=o(r,"disabled",7),s=o(r,"size",7,"m"),p=o(r,"readonly",7),x=o(r,"isclearable",7),b=o(r,"clearlabel",7,"clear content");var z={get id(){return h()},set id(e){h(e),t()},get name(){return m()},set name(e){m(e),t()},get value(){return a()},set value(e){a(e),t()},get isinvalid(){return l()},set isinvalid(e){l(e),t()},get disabled(){return u()},set disabled(e){u(e),t()},get size(){return s()},set size(e="m"){s(e),t()},get readonly(){return p()},set readonly(e){p(e),t()},get isclearable(){return x()},set isclearable(e){x(e),t()},get clearlabel(){return b()},set clearlabel(e="clear content"){b(e),t()}},n=Q(),i=c(n);G(i);var C=k(i,2);{var E=e=>{var f=P(),g=c(f);g.__click=[N,a];var _=c(g);K(_,{class:"mc-controls-options__icon","aria-hidden":"true"});var j=k(_,2),M=c(j,!0);d(j),d(g),d(f),V(()=>O(M,b())),y(e,f)};A(C,e=>{x()&&a()&&e(E)})}return d(n),V(()=>{S(n,1,q(["mc-datepicker mc-text-input",`mc-text-input--${s()}`,`mc-datepicker--${s()}`,l()&&"is-invalid"]),"svelte-xj4ivh"),w(i,"id",h()),w(i,"name",m()),i.disabled=u(),i.readOnly=p(),w(i,"aria-invalid",l())}),I(i,a),y(v,n),L(z)}Z(["click"]);customElements.define("m-datepicker",B(T,{id:{},name:{},value:{},isinvalid:{},disabled:{},size:{},readonly:{},isclearable:{},clearlabel:{}},[],[],!0,J));
 //# sourceMappingURL=Datepicker.js.map

package/dist/components/datepicker/Datepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.js","sources":["../../../src/components/datepicker/Datepicker.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-datepicker' }} />\n\n<script lang=\"ts\">\n  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n\n  interface Props {\n    id: string;\n    name?: string;\n    value?: string | number;\n    isinvalid?: boolean;\n    disabled?: boolean;\n    size?: 's' | 'm';\n    readonly?: boolean;\n    isclearable?: boolean;\n    clearlabel?: string;\n    [events: string]: string;\n  }\n\n  let {\n    id,\n    name = '',\n    value = '',\n    isinvalid = false,\n    disabled = false,\n    size = 'm',\n    readonly = false,\n    isclearable = false,\n    clearlabel = 'clear content',\n    ...events\n  }: Props = $props();\n\n  function onInput(event: Event) {\n    const target = event.target as HTMLInputElement;\n    value = target.value;\n  }\n\n  function clearValue() {\n    value = '';\n  }\n</script>\n\n<div\n  class=\"mc-datepicker mc-text-input\"\n  class:is-invalid={isinvalid}\n  class:mc-text-input--s={size === 's'}\n  class:mc-datepicker--s={size === 's'}\n>\n  <input\n    class=\"mc-datepicker__control mc-text-input__control\"\n    type=\"date\"\n    bind:value\n    {id}\n    {name}\n    {disabled}\n    {readonly}\n    aria-invalid={isinvalid}\n    oninput={onInput}\n    {...events}\n  />\n\n  {#if isclearable && value}\n    <div class=\"mc-datepicker__controls-options mc-controls-options\">\n      <button\n        type=\"button\"\n        class=\"mc-controls-options__button\"\n        onclick={clearValue}\n      >\n        <CrossCircleFilled24\n          class=\"mc-controls-options__icon\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/text-input';\n  @use '@mozaic-ds/styles/components/datepicker';\n  @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["clearValue","_","value","id","$.prop","$$props","name","isinvalid","disabled","size","readonly","isclearable","clearlabel","events","$.rest_props","onInput","event","target","$$render","consequent"],"mappings":"yUAoCW,SAAAA,EAAUC,EAAAC,EAAG,CACpBA,EAAQ,EAAE,CACZ;;;;;28LAtCF,oBAmBIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,eAAO,EAAE,EACTJ,gBAAQ,EAAE,EACVK,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,mBAAW,EAAK,EAChBC,sBAAc,EAAK,EACnBC,qBAAa,eAAe,EACzBC,EAAAC,EAAAT,EAAA,6IAGIU,EAAQC,EAAc,OACvBC,EAASD,EAAM,OACrBd,EAAQe,EAAO,KAAK,CACtB,mFAdS,GAAE,+CACD,GAAE,uDACE,GAAK,qDACN,GAAK,6CACT,IAAG,qDACC,GAAK,2DACF,GAAK,yDACN,gBAAe,wKA4BdV,EAAS,UACdQ,KACLF,0FAQSb,EAAUE,CAAA,2HAMuBU,EAAU,CAAA,CAAA,kBAXrDD,EAAW,GAAIT,KAAKgB,EAAAC,CAAA,uGAjBPZ,EAAS,EACH,mBAAAE,EAAI,IAAK,IACT,mBAAAA,EAAI,IAAK,0BANnC"}
+{"version":3,"file":"Datepicker.js","sources":["../../../src/components/datepicker/Datepicker.svelte"],"sourcesContent":["<svelte:options\n  customElement={{ tag: 'm-datepicker', extend: customElementForwardEvents }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import CrossCircleFilled24 from '@mozaic-ds/icons-svelte/svelte/CrossCircleFilled24/CrossCircleFilled24.svelte';\n  /**\n   * A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the datepicker element, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the datepicker element, typically used for form submission.\n     */\n    name?: string;\n    /**\n     * The current value of the datepicker field.\n     */\n    value?: string | number;\n    /**\n     * If `true`, applies an invalid state to the datepicker.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, disables the datepicker, making it non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the datepicker.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the datepicker is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n    /**\n     * If `true`, a clear button will appear when the datepicker has a value.\n     */\n    isclearable?: boolean;\n    /**\n     * The label text for the clear button.\n     */\n    clearlabel?: string;\n  }\n\n  let {\n    id,\n    name,\n    value,\n    isinvalid,\n    disabled,\n    size = 'm',\n    readonly,\n    isclearable,\n    clearlabel = 'clear content',\n  }: Props = $props();\n\n  const resetValue = () => (value = '');\n</script>\n\n<div\n  class={[\n    'mc-datepicker mc-text-input',\n    `mc-text-input--${size}`,\n    `mc-datepicker--${size}`,\n    isinvalid && 'is-invalid',\n  ]}\n>\n  <input\n    class=\"mc-datepicker__control mc-text-input__control\"\n    type=\"date\"\n    bind:value\n    {id}\n    {name}\n    {disabled}\n    {readonly}\n    aria-invalid={isinvalid}\n  />\n\n  {#if isclearable && value}\n    <div class=\"mc-datepicker__controls-options mc-controls-options\">\n      <button\n        type=\"button\"\n        class=\"mc-controls-options__button\"\n        onclick={resetValue}\n      >\n        <CrossCircleFilled24\n          class=\"mc-controls-options__icon\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/text-input';\n  @use '@mozaic-ds/styles/components/datepicker';\n  @use '@mozaic-ds/styles/components/controls-options';\n</style>\n"],"names":["resetValue","_","value","id","$.prop","$$props","name","isinvalid","disabled","size","readonly","isclearable","clearlabel","$$render","consequent","customElementForwardEvents"],"mappings":"iZA6DQA,EAAU,CAAAC,EAAAC,IAAUA,EAAQ,EAAE;;;;;28LA7DtC,oBAkDIC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJH,EAAKE,EAAAC,EAAA,QAAA,CAAA,EACLE,EAASH,EAAAC,EAAA,YAAA,CAAA,EACTG,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EACRI,eAAO,GAAG,EACVC,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAWP,EAAAC,EAAA,cAAA,CAAA,EACXO,qBAAa,eAAe,4RAHrB,IAAG,yKAGG,gBAAe,kFA8BfZ,EAAUE,CAAA,2HAMuBU,EAAU,CAAA,CAAA,kBAXrDD,EAAW,GAAIT,KAAKW,EAAAC,CAAA,gCAjBvB,gDACkBL,EAAI,CAAA,qBACJA,EAAI,CAAA,GACtBF,KAAa,+GAWCA,GAAS,sBAlB3B,mKA7DgDQ"}

package/dist/components/datepicker/Datepicker.spec.js

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Datepicker from './Datepicker.svelte';
+describe('m-datepicker component', () => {
+    const id = 'my-datepicker';
+    it('renders input with default size "m"', () => {
+        const { container } = render(Datepicker, {
+            props: { id },
+        });
+        const wrapper = container.querySelector('.mc-datepicker');
+        expect(wrapper).toBeTruthy();
+        expect(wrapper?.classList.contains('mc-text-input--m')).toBe(true);
+        const input = container.querySelector('input[type="date"]');
+        expect(input).toBeTruthy();
+        expect(input.id).toBe(id);
+    });
+    it('renders with custom size "s"', () => {
+        const { container } = render(Datepicker, {
+            props: { id, size: 's' },
+        });
+        const wrapper = container.querySelector('.mc-datepicker');
+        expect(wrapper?.classList.contains('mc-text-input--s')).toBe(true);
+        expect(wrapper?.classList.contains('mc-datepicker--s')).toBe(true);
+    });
+    it('renders with pre-filled value', () => {
+        const { container } = render(Datepicker, {
+            props: { id, value: '2025-10-15' },
+        });
+        const input = container.querySelector('input[type="date"]');
+        expect(input.value).toBe('2025-10-15');
+    });
+    it('updates the bound value on user input', async () => {
+        const { container } = render(Datepicker, {
+            props: { id, value: '2025-10-15' },
+        });
+        const input = container.querySelector('input[type="date"]');
+        await fireEvent.input(input, { target: { value: '2025-12-01' } });
+        expect(input.value).toBe('2025-12-01');
+    });
+    it('renders disabled and readonly states correctly', () => {
+        const { container } = render(Datepicker, {
+            props: { id, disabled: true, readonly: true },
+        });
+        const input = container.querySelector('input');
+        expect(input.disabled).toBe(true);
+        expect(input.readOnly).toBe(true);
+    });
+    it('applies invalid state with aria-invalid', () => {
+        const { container } = render(Datepicker, {
+            props: { id, isinvalid: true },
+        });
+        const input = container.querySelector('input');
+        expect(input).toHaveAttribute('aria-invalid', 'true');
+        const wrapper = container.querySelector('.mc-datepicker');
+        expect(wrapper.classList.contains('is-invalid')).toBe(true);
+    });
+    it('shows clear button when isclearable is true and value is set', () => {
+        const { getByRole, getByText } = render(Datepicker, {
+            props: {
+                id,
+                value: '2025-10-10',
+                isclearable: true,
+                clearlabel: 'Clear date',
+            },
+        });
+        const clearButton = getByRole('button');
+        expect(clearButton).toBeTruthy();
+        expect(getByText('Clear date')).toBeTruthy();
+    });
+    it('clears value when clear button is clicked', async () => {
+        const { container, getByRole } = render(Datepicker, {
+            props: {
+                id,
+                value: '2025-10-10',
+                isclearable: true,
+            },
+        });
+        const input = container.querySelector('input');
+        expect(input.value).toBe('2025-10-10');
+        const button = getByRole('button');
+        await fireEvent.click(button);
+        expect(input.value).toBe('');
+    });
+    it('does not render clear button if value is not set', () => {
+        const { container } = render(Datepicker, {
+            props: {
+                id,
+                isclearable: true,
+                value: '',
+            },
+        });
+        const button = container.querySelector('button');
+        expect(button).toBeNull();
+    });
+});

package/dist/components/datepicker/Datepicker.stories.d.ts

@@ -1,10 +1,11 @@
-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 WithValue: Story;
 export declare const Default: Story;
-export declare const Clearable: Story;
-export declare const Invalid: Story;
-export declare const Readonly: Story;
 export declare const Small: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
 //# sourceMappingURL=Datepicker.stories.d.ts.map

package/dist/components/datepicker/Datepicker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/Datepicker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;wBAuBtD,IAAI;AAnBT,wBAmBU;AAEV,KAAK,KAAK,GAAG,QAAQ,CAAC;AAmBtB,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC"}
+{"version":3,"file":"Datepicker.stories.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/Datepicker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA4CX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}