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

package/dist/components/checkboxgroup/CheckboxGroup.stories.js

@@ -1,146 +1,62 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-import { userEvent, expect } from 'storybook/test';
-/**
- * Checkbox Groups are used to manage multiple checkbox selections within a group.
- * They usually find their place in forms and allow users to choose multiple options.
- *
- * The `MCheckboxGroup` component is the **Svelte / WebComponent** implementation of the **Checkbox group** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/checkbox/#checkbox-group).
- */
-export default {
+const meta = {
     title: 'Form Elements/Checkbox Group',
-    tags: ['autodocs', 'beta'],
-    argTypes: {
-        legend: {
-            description: 'Specify the legend of the group.',
-            control: { type: 'text' },
-        },
-        id: {
-            description: 'Specify the checkbox group id',
-            control: { type: 'text' },
-        },
-        options: {
-            description: 'Specify the checkbox options in JSON format. ```{ value: string; id?: string; label?: string; disabled?: boolean; indeterminate?: boolean; isinvalid?: boolean; }[]```',
-            control: { type: 'object' },
-        },
-        values: {
-            description: 'Specify the select items selected values in checkbox options',
-            control: { type: 'object' },
-        },
-        onChange: {
-            description: 'Event that occurs when the checkbox state changes',
-            action: 'change',
-            table: {
-                category: 'Events',
+    component: 'm-checkbox-group',
+    args: {
+        name: 'checkboxGroupName',
+        value: ['checkbox2'],
+        options: [
+            {
+                id: 'checkbox-01',
+                label: 'checkbox Label',
+                value: 'checkbox1',
             },
-        },
-        onBlur: {
-            description: 'Event that occurs when the checkbox group is blurred',
-            action: 'blur',
-            table: {
-                category: 'Events',
+            {
+                id: 'checkbox-02',
+                label: 'checkbox Label',
+                value: 'checkbox2',
             },
-        },
+            {
+                id: 'checkbox-03',
+                label: 'checkbox Label',
+                value: 'checkbox3',
+            },
+            {
+                id: 'checkbox-04',
+                label: 'checkbox Label',
+                value: 'checkbox4',
+            },
+        ],
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-checkbox-group
+        name=${ifDefined(args.name)}
+        .options=${ifDefined(args.options)}
+        value=${ifDefined(args.value)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        inline=${ifDefined(args.inline)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-checkbox-group>
+    `;
     },
 };
-const Template = (args) => {
-    const checkboxGroup = document.createElement('m-checkbox-group');
-    checkboxGroup.setAttribute('id', args.id || 'checkbox-group-id');
-    checkboxGroup.setAttribute('legend', args.legend || 'Checkbox Group Title');
-    checkboxGroup.setAttribute('options', JSON.stringify(args.options || []));
-    checkboxGroup.setAttribute('values', JSON.stringify(args.values || []));
-    checkboxGroup.onchange = action('onChange');
-    checkboxGroup.onblur = action('onBlur');
-    return checkboxGroup;
-};
-export const Default = Template.bind({});
-Default.args = {
-    options: [
-        {
-            id: 'option1',
-            name: 'option1',
-            label: 'Option 1',
-            value: 'option1',
-        },
-        {
-            id: 'option2',
-            name: 'option2',
-            label: 'Option 2',
-            value: 'option2',
-        },
-        {
-            id: 'option3',
-            name: 'option3',
-            label: 'Option 3',
-            value: 'option3',
-        },
-    ],
-    values: ['option2'],
-};
-Default.play = async ({ canvasElement }) => {
-    const group = canvasElement.querySelector('m-checkbox-group');
-    const checkboxGroup = group?.shadowRoot?.querySelectorAll('input');
-    expect(group).not.toBeNull();
-    expect(checkboxGroup?.length).toBe(3);
-    await userEvent.click(checkboxGroup[0]);
-    expect(checkboxGroup?.[0]).toBeChecked();
-};
-export const AllChecked = Template.bind({});
-AllChecked.args = {
-    options: [
-        {
-            id: 'option1',
-            name: 'option1',
-            label: 'Option 1',
-            value: 'option1',
-        },
-        {
-            id: 'option2',
-            name: 'option2',
-            label: 'Option 2',
-            value: 'option2',
-        },
-        {
-            id: 'option3',
-            name: 'option3',
-            label: 'Option 3',
-            value: 'option3',
-        },
-    ],
-    values: ['option1', 'option2', 'option3'],
-};
-AllChecked.play = async ({ canvasElement }) => {
-    const group = canvasElement.querySelector('m-checkbox-group');
-    const checkboxGroup = group?.shadowRoot?.querySelectorAll('input');
-    expect(checkboxGroup?.length).toBe(3);
-    checkboxGroup?.forEach((checkbox) => expect(checkbox).toBeChecked());
-};
-export const SomeDisabled = Template.bind({});
-SomeDisabled.args = {
-    options: [
-        {
-            id: 'option1',
-            name: 'option1',
-            label: 'Option 1',
-            value: 'option1',
-            disabled: true,
-        },
-        {
-            id: 'option2',
-            name: 'option2',
-            label: 'Option 2',
-            checked: true,
-        },
-        {
-            id: 'option3',
-            name: 'option3',
-            label: 'Option 3',
-            checked: false,
-        },
-    ],
-};
-SomeDisabled.play = async ({ canvasElement }) => {
-    const group = canvasElement.querySelector('m-checkbox-group');
-    const checkboxGroup = group?.shadowRoot?.querySelectorAll('input');
-    expect(checkboxGroup?.[0]).toBeDisabled();
-};
+export default meta;
+export const Default = {};

package/dist/components/checkboxgroup/CheckboxGroup.svelte

@@ -9,62 +9,62 @@
 />
 
 <script lang="ts">
-  import type { CheckboxGroupOption } from './checkboxgroup.types';
   import { customElementForwardEvents } from '../../utils';
-
+  /**
+   * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
+   */
   interface Props {
-    options: Array<CheckboxGroupOption>;
+    /**
+     * The name attribute for the checkbox element, typically used for form submission.
+     */
     name: string;
-    id?: string;
-    legend?: string;
-    values?: Array<string | number>;
+    /**
+     * The current value of the checkbox group.
+     */
+    value?: Array<string>;
+    /**
+     * list of properties of each checkbox button of the checkbox group
+     */
+    options: Array<{
+      id: string;
+      label: string;
+      value: string;
+      disabled?: boolean;
+      indeterminate?: boolean;
+      indented?: boolean;
+    }>;
+    /**
+     * If `true`, applies an invalid state to the checkbox group.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, make the form element of the group inline.
+     */
+    inline?: boolean;
   }
 
-  const uid = $props.id();
-  let {
-    name,
-    id = uid,
-    options,
-    legend,
-    values = $bindable([]),
-  }: Props = $props();
-
-  function getOptionId(index: number): string {
-    return options[index]?.id ?? `${id}-${index}`;
-  }
+  let { name, options, value = $bindable([]), inline, isinvalid }: Props = $props();
 </script>
 
-<div class="checkbox-group-container" {id}>
-  <fieldset class="mc-field mc-field--group">
-    {#if legend}
-      <legend class="mc-field__legend">
-        {legend}
-      </legend>
-    {/if}
-    <div class="mc-field__container">
-      {#each options as opt, index (getOptionId(index))}
-        <div class="mc-checkbox mc-field__item">
-          <input
-            type="checkbox"
-            class="mc-checkbox__input"
-            class:is-invalid={opt.isinvalid}
-            id={getOptionId(index)}
-            {name}
-            disabled={opt.disabled}
-            bind:indeterminate={opt.indeterminate}
-            aria-invalid={opt.isinvalid}
-            bind:group={values}
-            value={opt.value}
-          />
-          {#if opt.label}
-            <label for={getOptionId(index)} class="mc-checkbox__label"
-              >{opt.label}</label
-            >
-          {/if}
-        </div>
-      {/each}
+<div class={['mc-field__content', inline && 'mc-field__content--inline']}>
+  {#each options as option (option.id)}
+    <div class="mc-checkbox mc-field__item">
+      <input
+        type="checkbox"
+        class={['mc-checkbox__input', isinvalid && 'is-invalid']}
+        id={option.id}
+        {name}
+        disabled={option.disabled}
+        indeterminate={option.indeterminate}
+        aria-invalid={isinvalid}
+        bind:group={value}
+        value={option.value}
+      />
+      {#if option.label}
+        <label for={option.id} class="mc-checkbox__label">{option.label}</label>
+      {/if}
     </div>
-  </fieldset>
+  {/each}
 </div>
 
 <style>/**
@@ -213,4 +213,9 @@
   gap: 0.25rem 1rem;
 }
 
-/* stylelint-enable string-no-newline */</style>
+/* stylelint-enable string-no-newline */
+.mc-field__content:where(.mc-field__content--inline) {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0.25rem 1rem;
+}</style>

package/dist/components/checkboxgroup/CheckboxGroup.svelte.d.ts

@@ -1,12 +1,36 @@
-import type { CheckboxGroupOption } from './checkboxgroup.types';
+/**
+ * A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
+ */
 interface Props {
-    options: Array<CheckboxGroupOption>;
+    /**
+     * The name attribute for the checkbox element, typically used for form submission.
+     */
     name: string;
-    id?: string;
-    legend?: string;
-    values?: Array<string | number>;
+    /**
+     * The current value of the checkbox group.
+     */
+    value?: Array<string>;
+    /**
+     * list of properties of each checkbox button of the checkbox group
+     */
+    options: Array<{
+        id: string;
+        label: string;
+        value: string;
+        disabled?: boolean;
+        indeterminate?: boolean;
+        indented?: boolean;
+    }>;
+    /**
+     * If `true`, applies an invalid state to the checkbox group.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, make the form element of the group inline.
+     */
+    inline?: boolean;
 }
-declare const CheckboxGroup: import("svelte").Component<Props, {}, "values">;
+declare const CheckboxGroup: import("svelte").Component<Props, {}, "value">;
 type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
 export default CheckboxGroup;
 //# sourceMappingURL=CheckboxGroup.svelte.d.ts.map

package/dist/components/checkboxgroup/CheckboxGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkboxgroup/CheckboxGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAI/D,UAAU,KAAK;IACb,OAAO,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;CACjC;AAoDH,QAAA,MAAM,aAAa,iDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CheckboxGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkboxgroup/CheckboxGroup.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA+BH,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/checkboxgroup/README.md

@@ -0,0 +1,14 @@
+# `m-checkbox-group`
+
+A checkbox is an interactive component used to select or deselect an option, typically within a list of choices. It allows users to make multiple selections independently and is often accompanied by a label for clarity. Checkboxes are commonly used in forms, filters, settings, and preference selections to provide a simple and intuitive way to enable or disable specific options. <br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field section](/docs/form-elements-field--docs#input).
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `name*` | The name attribute for the checkbox element, typically used for form submission. | `string` |   |
+| `value` | The current value of the checkbox group. | `Array<string>` | `$bindable([])` |
+| `options*` | list of properties of each checkbox button of the checkbox group | `Array<{ id: string; label: string; value: string; disabled?: boolean; indeterminate?: boolean; indented?: boolean; }>` |   |
+| `isinvalid` | If `true`, applies an invalid state to the checkbox group. | `boolean` |   |
+| `inline` | If `true`, make the form element of the group inline. | `boolean` |   |
+

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 { size, value = 0, type = 'percentage', contentvalue, additionalinfo }: Props = $props();\n</script>\n\n<div\n  class={['mc-circular-progressbar', size && `mc-circular-progressbar--${size}`]}\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,oBA6BQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,gBAAQ,CAAC,EAAEC,eAAO,YAAY,EAAEC,EAAYJ,EAAAC,EAAA,eAAA,CAAA,EAAEI,EAAcL,EAAAC,EAAA,iBAAA,CAAA,0FAApD,EAAC,6CAAS,aAAY,2NAuBKC,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,gCAxBf,0BAA2BV,iCAAoCA,GAAI,0CAE5DG,GAAK,2BAGQA,EAAK,CAAA,GAAA,eARnC"}

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',
     },
 };