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

package/dist/components/select/Select.stories.js

@@ -1,104 +1,99 @@
-import { userEvent, expect } from 'storybook/test';
-/**
- * A select is a selection tool used in forms, allowing users to choose between multiple predefined options.
- *
- * The `MSelect` component is the **Svelte / WebComponent** implementation of the **Select** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/select/).
- */
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { action } from 'storybook/actions';
+const meta = {
     title: 'Form Elements/Select',
-    tags: ['autodocs', 'beta'],
+    component: 'm-select',
     argTypes: {
-        placeholder: {
-            description: 'Specify the select placeholder',
-            control: 'text',
-        },
-        name: {
-            description: 'Specify the name attribut for the select element',
-            control: 'text',
-            type: 'string',
-        },
-        options: {
-            description: 'Specify the select options as an array of objects. <b />```{ id?: string; text: string; value: string | number; disabled?: boolean; }[]```',
-            control: 'object',
-        },
         size: {
-            description: 'Specify the select size',
-            control: { type: 'radio' },
+            control: 'radio',
             options: ['s', 'm'],
         },
-        isinvalid: {
-            description: 'Specify whether the select is invalid',
-            control: { type: 'boolean' },
-        },
-        disabled: {
-            description: 'Specify whether the select is disabled',
-            control: { type: 'boolean' },
-        },
-        required: {
-            description: 'Specify whether the select is required',
-            control: { type: 'boolean' },
-        },
-        valueselected: {
-            description: 'Specify the selected option of the select',
-            control: { type: 'text' },
-        },
+    },
+    args: {
+        id: 'selectId',
+        placeholder: 'Choose an option',
+        options: [
+            {
+                text: 'Option 1',
+                value: 'option1',
+            },
+            {
+                text: 'Option 2',
+                value: 'option2',
+                disabled: true,
+            },
+            {
+                text: 'Option 3',
+                value: 'option3',
+            },
+            {
+                text: 'Option 4',
+                value: 'option4',
+            },
+        ],
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-select
+        id=${ifDefined(args.id)}
+        name=${ifDefined(args.name)}
+        value=${ifDefined(args.value)}
+        .options=${ifDefined(args.options)}
+        placeholder=${ifDefined(args.placeholder)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        disabled=${ifDefined(args.disabled)}
+        size=${ifDefined(args.size)}
+        readonly=${ifDefined(args.readonly)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-select>
+    `;
     },
 };
-const opts = [
-    { text: 'Option 1', value: 'option1' },
-    { text: 'Option 2', value: 'option2', disabled: true },
-    { text: 'Option 3', value: 'option3' },
-];
-const Template = (args) => {
-    const MSelect = document.createElement('m-select');
-    MSelect.setAttribute('placeholder', args.placeholder || 'Primary');
-    MSelect.setAttribute('valueselected', args.valueselected || '');
-    if (args.options)
-        MSelect.setAttribute('options', JSON.stringify(args.options));
-    if (args.size)
-        MSelect.setAttribute('size', args.size);
-    if (args.isinvalid)
-        MSelect.setAttribute('isinvalid', 'true');
-    if (args.disabled)
-        MSelect.setAttribute('disabled', 'true');
-    if (args.required)
-        MSelect.setAttribute('required', 'true');
-    return MSelect;
-};
-export const Default = Template.bind({});
-Default.args = { options: opts };
-Default.play = async ({ canvasElement }) => {
-    const select = canvasElement.querySelector('m-select');
-    const input = select?.shadowRoot?.querySelector('select');
-    expect(select).not.toBeNull();
-    await userEvent.selectOptions(input, 'option1');
-    expect(input).toHaveValue('option1');
+export default meta;
+export const WithValue = {
+    args: {
+        id: 'withValueId',
+        value: 'option1',
+    },
 };
-export const Small = Template.bind({});
-Small.args = { size: 's', options: opts };
-Small.play = async ({ canvasElement }) => {
-    const select = canvasElement.querySelector('m-select');
-    expect(select).toHaveAttribute('size', 's');
+export const Default = {};
+export const Small = {
+    args: {
+        id: 'smallId',
+        size: 's',
+    },
 };
-export const Disabled = Template.bind({});
-Disabled.args = { disabled: true, options: opts };
-Disabled.play = async ({ canvasElement }) => {
-    const select = canvasElement.querySelector('m-select');
-    const input = select?.shadowRoot?.querySelector('select');
-    expect(input).toBeDisabled();
+export const Disabled = {
+    args: {
+        id: 'disabledId',
+        disabled: true,
+    },
 };
-export const Required = Template.bind({});
-Required.args = { required: true, options: opts };
-Required.play = async ({ canvasElement }) => {
-    const select = canvasElement.querySelector('m-select');
-    const input = select?.shadowRoot?.querySelector('select');
-    expect(input).toHaveAttribute('required');
+export const ReadOnly = {
+    args: {
+        id: 'readonlyId',
+        readonly: true,
+    },
 };
-export const WithValue = Template.bind({});
-WithValue.args = { valueselected: 'option3', options: opts };
-WithValue.play = async ({ canvasElement }) => {
-    const select = canvasElement.querySelector('m-select');
-    const input = select?.shadowRoot?.querySelector('select');
-    expect(input).toHaveValue('option3');
+export const Invalid = {
+    args: {
+        id: 'invalidId',
+        isinvalid: true,
+    },
 };

package/dist/components/select/Select.svelte

@@ -10,64 +10,77 @@
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
-  import type { SelectOption, SelectSize } from './select.types';
-
+  /**
+   * A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.
+   */
   interface Props {
+    /**
+     * A unique identifier for the select, used to associate the label with the form element.
+     */
     id: string;
-    name: string;
-    valueselected?: string;
-    placeholder: string;
-    size?: SelectSize;
-    isvalid?: boolean;
+    /**
+     * The name attribute for the select element, used for form submission.
+     */
+    name?: string;
+    /**
+     * Define the available choices for the select element.
+     */
+    options: Array<{
+      id?: string;
+      text: string;
+      value: string | number;
+      disabled?: boolean;
+    }>;
+    /**
+     * The current value of the select.
+     */
+    value?: string | number;
+    /**
+     * Text displayed when the select has no selected value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the select is marked as invalid.
+     */
     isinvalid?: boolean;
+    /**
+     * If `true`, the select is disabled and non-interactive.
+     */
     disabled?: boolean;
-    required?: boolean;
-    options: Array<SelectOption>;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * Determines the size of the select.
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, the select is read-only (cannot be edited).
+     */
+    readonly?: boolean;
   }
 
   let {
     id,
-    valueselected = '',
+    name,
+    value,
     placeholder,
     size = 'm',
-    isvalid = false,
-    isinvalid = false,
-    disabled = false,
-    required = false,
+    isinvalid,
+    disabled,
+    readonly,
     options,
-    onchange,
-    onblur,
   }: Props = $props();
-  let valueSelected = $state(valueselected);
-
-  function setClasses(isvalid: boolean, isinvalid: boolean, size: SelectSize): string {
-    const classes = ['mc-select'];
-
-    if(isvalid) {
-      classes.push('is-valid');
-    }
-
-    if (isinvalid) {
-      classes.push('is-invalid');
-    }
-    if (size) {
-      classes.push(`mc-select--${size}`);
-    }
-
-    return classes.join(' ');
-  }
 </script>
 
 <select
   {id}
-  class={setClasses(isvalid, isinvalid, size)}
+  class={[
+    'mc-select',
+    `mc-select--${size}`,
+    readonly && 'mc-select--readonly',
+    isinvalid && 'is-invalid',
+  ]}
+  {name}
   {disabled}
-  {required}
-  bind:value={valueSelected}
-  {onchange}
-  {onblur}
+  bind:value
 >
   {#if placeholder}
     <option value="" disabled selected>
@@ -75,9 +88,9 @@
     </option>
   {/if}
 
-  {#each options as opt}
-    <option disabled={opt.disabled} value={opt.value}>
-      {opt.text}
+  {#each options as option}
+    <option disabled={option.disabled} value={option.value}>
+      {option.text}
     </option>
   {/each}
 </select>

package/dist/components/select/Select.svelte.d.ts

@@ -1,17 +1,48 @@
-import type { SelectOption, SelectSize } from './select.types';
+/**
+ * A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.
+ */
 interface Props {
+    /**
+     * A unique identifier for the select, used to associate the label with the form element.
+     */
     id: string;
-    name: string;
-    valueselected?: string;
-    placeholder: string;
-    size?: SelectSize;
-    isvalid?: boolean;
+    /**
+     * The name attribute for the select element, used for form submission.
+     */
+    name?: string;
+    /**
+     * Define the available choices for the select element.
+     */
+    options: Array<{
+        id?: string;
+        text: string;
+        value: string | number;
+        disabled?: boolean;
+    }>;
+    /**
+     * The current value of the select.
+     */
+    value?: string | number;
+    /**
+     * Text displayed when the select has no selected value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the select is marked as invalid.
+     */
     isinvalid?: boolean;
+    /**
+     * If `true`, the select is disabled and non-interactive.
+     */
     disabled?: boolean;
-    required?: boolean;
-    options: Array<SelectOption>;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * Determines the size of the select.
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, the select is read-only (cannot be edited).
+     */
+    readonly?: boolean;
 }
 declare const Select: import("svelte").Component<Props, {}, "">;
 type Select = ReturnType<typeof Select>;

package/dist/components/select/Select.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG7D,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAiEH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiDH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/statusbadge/README.md

@@ -0,0 +1,11 @@
+# `m-status-badge`
+
+A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `label*` | Content of the status badge. | `string` |   |
+| `status` | Allows to define the status badge type. | `'info'` `'success'` `'warning'` `'error'` `'neutral'` | `info` |
+

package/dist/components/statusbadge/StatusBadge.js

@@ -1,4 +1,4 @@
-import{c as b,p as g,a as i,b as f,f as m,d,s as v,t as p,h,i as y,j as k,r as c,e as w}from"../../custom-element.js";import{s as _}from"../../slot.js";import{S as x}from"../statusdot/StatusDot.js";var S=m('<div><!> <span class="mc-status-badge__label svelte-1oceydf"><!></span></div>');const z={hash:"svelte-1oceydf",code:`/**
+import{c as f,p as v,a as m,b as l,f as p,d as u,s as h,t as k,i as y,j as w,k as n,r as b,e as _,g as x,h as S}from"../../custom-element.js";import{S as z}from"../statusdot/StatusDot.js";var D=p('<div><!> <span class="mc-status-badge__label svelte-1oceydf"> </span></div>');const j={hash:"svelte-1oceydf",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-status-badge.svelte-1oceydf {background-color:var(--status-badge-color-background-information, #e1f3f9);border:var(--border-s, 1px) solid var(--status-badge-color-border-information, #a7d9ed);border-radius:var(--radius-s, 0.25rem);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-100, 0.875rem);display:inline-flex;align-items:center;gap:0.25rem;padding-right:0.5rem;padding-left:0.5rem;text-transform:lowercase;white-space:nowrap;min-height:1.5rem;}.mc-status-badge__label.svelte-1oceydf {color:var(--status-badge-color-label, #000000);}.mc-status-badge__label.svelte-1oceydf::first-letter {text-transform:uppercase;}.mc-status-badge--success.svelte-1oceydf {background-color:var(--status-badge-color-background-success, #ebf5de);border:var(--border-s, 1px) solid var(--status-badge-color-border-success, #c5e39e);}.mc-status-badge--error.svelte-1oceydf {background-color:var(--status-badge-color-background-error, #fdeaea);border:var(--border-s, 1px) solid var(--status-badge-color-border-error, #f8bcbb);}.mc-status-badge--warning.svelte-1oceydf {background-color:var(--status-badge-color-background-warning, #fdf1e8);border:var(--border-s, 1px) solid var(--status-badge-color-border-warning, #f8d2b3);}.mc-status-badge--neutral.svelte-1oceydf {background-color:var(--status-badge-color-background-neutral, #f2f2f2);border:var(--border-s, 1px) solid var(--status-badge-color-border-neutral, #cccccc);}.mc-status-dot.svelte-1oceydf {background-color:var(--status-dot-color-background-information, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--radius-full, 100%);display:inline-block;}.mc-status-dot--s.svelte-1oceydf {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-1oceydf {height:1rem;width:1rem;}.mc-status-dot--success.svelte-1oceydf {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-1oceydf {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-1oceydf {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-1oceydf {background-color:var(--status-dot-color-background-neutral, #808080);}`};function D(a,t){g(t,!0),i(a,z);let e=f(t,"status",7);var l={get status(){return e()},set status(n){e(n),k()}},r=S(),s=d(r);x(s,{get status(){return e()},size:"m"});var o=v(s,2),u=d(o);return _(u,t,"default",{}),c(o),c(r),p(()=>w(r,1,`mc-status-badge ${e()?`mc-status-badge--${e()}`:""}`,"svelte-1oceydf")),h(a,r),y(l)}customElements.define("m-status-badge",b(D,{status:{}},["default"],[],!0));
+ */.mc-status-badge.svelte-1oceydf {background-color:var(--status-badge-color-background-information, #e1f3f9);border:var(--border-s, 1px) solid var(--status-badge-color-border-information, #a7d9ed);border-radius:var(--radius-s, 0.25rem);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-100, 0.875rem);display:inline-flex;align-items:center;gap:0.25rem;padding-right:0.5rem;padding-left:0.5rem;text-transform:lowercase;white-space:nowrap;min-height:1.5rem;}.mc-status-badge__label.svelte-1oceydf {color:var(--status-badge-color-label, #000000);}.mc-status-badge__label.svelte-1oceydf::first-letter {text-transform:uppercase;}.mc-status-badge--success.svelte-1oceydf {background-color:var(--status-badge-color-background-success, #ebf5de);border:var(--border-s, 1px) solid var(--status-badge-color-border-success, #c5e39e);}.mc-status-badge--error.svelte-1oceydf {background-color:var(--status-badge-color-background-error, #fdeaea);border:var(--border-s, 1px) solid var(--status-badge-color-border-error, #f8bcbb);}.mc-status-badge--warning.svelte-1oceydf {background-color:var(--status-badge-color-background-warning, #fdf1e8);border:var(--border-s, 1px) solid var(--status-badge-color-border-warning, #f8d2b3);}.mc-status-badge--neutral.svelte-1oceydf {background-color:var(--status-badge-color-background-neutral, #f2f2f2);border:var(--border-s, 1px) solid var(--status-badge-color-border-neutral, #cccccc);}.mc-status-dot.svelte-1oceydf {background-color:var(--status-dot-color-background-information, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--radius-full, 100%);display:inline-block;}.mc-status-dot--s.svelte-1oceydf {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-1oceydf {height:1rem;width:1rem;}.mc-status-dot--success.svelte-1oceydf {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-1oceydf {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-1oceydf {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-1oceydf {background-color:var(--status-dot-color-background-neutral, #808080);}`};function B(o,r){v(r,!0),m(o,j);let e=l(r,"status",7,"info"),a=l(r,"label",7);var g={get status(){return e()},set status(s="info"){e(s),n()},get label(){return a()},set label(s){a(s),n()}},t=D(),d=u(t);z(d,{get status(){return e()},size:"m"});var c=h(d,2),i=u(c,!0);return b(c),b(t),k(()=>{_(t,1,x(["mc-status-badge",`mc-status-badge--${e()}`]),"svelte-1oceydf"),S(i,a())}),y(o,t),w(g)}customElements.define("m-status-badge",f(B,{status:{},label:{}},[],[],!0));
 //# sourceMappingURL=StatusBadge.js.map

package/dist/components/statusbadge/StatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.js","sources":["../../../src/components/statusbadge/StatusBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-badge' }} />\n\n<script lang=\"ts\">\n  import type { StatusBadgeStyle } from './StatusBadge.types';\n  import StatusDot from '../statusdot/StatusDot.svelte';\n\n  interface Props {\n    status: StatusBadgeStyle;\n  }\n\n  let { status }: Props = $props();\n</script>\n\n<div class=\"mc-status-badge {status ? `mc-status-badge--${status}` : ''}\">\n  <StatusDot {status} size=\"m\" />\n  <span class=\"mc-status-badge__label\"><slot /></span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-badge';\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["status","$.prop","$$props"],"mappings":";;wpEAAA,oBAUQA,EAAMC,EAAAC,EAAA,SAAA,CAAA,yMAGeF,EAAM,EAAA,oBAAuBA,EAAM,CAAA,GAAK,EAAE,GAAA,gBAAA,CAAA,aAFvE"}
+{"version":3,"file":"StatusBadge.js","sources":["../../../src/components/statusbadge/StatusBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-badge' }} />\n\n<script lang=\"ts\">\n  import StatusDot from '../statusdot/StatusDot.svelte';\n  /**\n   * A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.\n   */\n  interface Props {\n    /**\n     * Content of the status badge.\n     */\n    label: string;\n    /**\n     * Allows to define the status badge type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n  }\n\n  let { status = 'info', label }: Props = $props();\n</script>\n\n<div class={['mc-status-badge', `mc-status-badge--${status}`]}>\n  <StatusDot {status} size=\"m\" />\n  <span class=\"mc-status-badge__label\">{label}</span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-badge';\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["status","label","$.prop","$$props","$.set_class","div","$.clsx"],"mappings":";;wpEAAA,gBAkBQ,IAAAA,iBAAS,MAAM,EAAEC,EAAKC,EAAAC,EAAA,QAAA,CAAA,+CAAb,OAAM,gKAGVC,EAAAC,EAAA,EAAAC,EAAA,CAAA,sCAAuCN,EAAM,CAAA,EAAA,CAAA,EAAA,gBAAA,MAElBC,GAAK,eAJ7C"}

package/dist/components/statusbadge/StatusBadge.spec.js

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import StatusBadge from './StatusBadge.svelte';
+describe('m-status-badge component', () => {
+    it('renders with required label and default status "info"', () => {
+        const { container, getByText } = render(StatusBadge, {
+            props: { label: 'Test Label' },
+        });
+        const badge = container.querySelector('.mc-status-badge');
+        expect(badge).toBeTruthy();
+        expect(badge?.classList.contains('mc-status-badge--info')).toBe(true);
+        expect(getByText('Test Label')).toBeTruthy();
+        const statusDot = container.querySelector('.mc-status-dot');
+        expect(statusDot).toBeTruthy();
+        expect(statusDot?.classList.contains('mc-status-dot--info')).toBe(true);
+    });
+    it('applies correct status class when status prop is set', () => {
+        const { container } = render(StatusBadge, {
+            props: { label: 'Status Test', status: 'error' },
+        });
+        const badge = container.querySelector('.mc-status-badge');
+        expect(badge?.classList.contains('mc-status-badge--error')).toBe(true);
+        const statusDot = container.querySelector('.mc-status-dot');
+        expect(statusDot?.classList.contains('mc-status-dot--error')).toBe(true);
+    });
+    it('renders the label text properly', () => {
+        const testLabel = 'Dynamic Label';
+        const { getByText } = render(StatusBadge, { props: { label: testLabel } });
+        expect(getByText(testLabel)).toBeTruthy();
+    });
+});

package/dist/components/statusbadge/StatusBadge.stories.d.ts

@@ -1,13 +1,10 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * A Status Badge indicates the status of an entity and can evolve at any time.
- *
- * The `MStatusBadge` component is the **Svelte / WebComponent** implementation of the **Status Badge** component of Mozaic Design System.
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Warning: any;
-export declare const Error: any;
-export declare const Success: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Info: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const Neutral: Story;
 //# sourceMappingURL=StatusBadge.stories.d.ts.map

package/dist/components/statusbadge/StatusBadge.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.stories.d.ts","sourceRoot":"","sources":["../../../src/components/statusbadge/StatusBadge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;GAIG;wBAgBE,IAAI;AAdT,wBAcU;AAYV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAOzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAOzC,eAAO,MAAM,KAAK,KAAoB,CAAC;AAOvC,eAAO,MAAM,OAAO,KAAoB,CAAC"}
+{"version":3,"file":"StatusBadge.stories.d.ts","sourceRoot":"","sources":["../../../src/components/statusbadge/StatusBadge.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,QAAA,MAAM,IAAI,EAAE,IAeX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,KAAU,CAAC;AAE9B,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

package/dist/components/statusbadge/StatusBadge.stories.js

@@ -1,54 +1,31 @@
-import { within, expect } from 'storybook/test';
-/**
- * A Status Badge indicates the status of an entity and can evolve at any time.
- *
- * The `MStatusBadge` component is the **Svelte / WebComponent** implementation of the **Status Badge** component of Mozaic Design System.
- */
-export default {
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+const meta = {
     title: 'Status/Status Badge',
-    tags: ['autodocs', 'beta'],
+    component: 'm-status-badge',
     argTypes: {
-        label: {
-            description: 'Specify the badge label',
-            control: 'text',
-        },
         status: {
-            description: 'Specify the badge type',
-            control: { type: 'radio' },
-            options: ['neutral', 'warning', 'error', 'success', 'info'],
+            control: 'radio',
+            options: ['info', 'success', 'warning', 'error'],
         },
     },
+    args: { label: 'Badge label' },
+    render: (args) => html ` <m-status-badge
+      label=${ifDefined(args.label)}
+      status=${ifDefined(args.status)}
+    ></m-status-badge>`,
 };
-const Template = (args) => {
-    const primary = document.createElement('m-status-badge');
-    const label = document.createElement('span');
-    label.innerText = 'Status';
-    primary.appendChild(label);
-    if (args.status)
-        primary.setAttribute('status', args.status);
-    return primary;
-};
-export const Default = Template.bind({});
-Default.args = {};
-Default.play = async ({ canvasElement }) => {
-    const badge = within(canvasElement).getByText('Status');
-    expect(badge).not.toBeNull();
+export default meta;
+export const Info = {};
+export const Success = {
+    args: { status: 'success' },
 };
-export const Warning = Template.bind({});
-Warning.args = { label: 'Warning', status: 'warning' };
-Warning.play = async ({ canvasElement }) => {
-    const badge = canvasElement.querySelector('m-status-badge');
-    expect(badge).toHaveAttribute('status', 'warning');
+export const Warning = {
+    args: { status: 'warning' },
 };
-export const Error = Template.bind({});
-Error.args = { label: 'Error', status: 'error' };
-Error.play = async ({ canvasElement }) => {
-    const badge = canvasElement.querySelector('m-status-badge');
-    expect(badge).toHaveAttribute('status', 'error');
+export const Error = {
+    args: { status: 'error' },
 };
-export const Success = Template.bind({});
-Success.args = { label: 'Success', status: 'success' };
-Success.play = async ({ canvasElement }) => {
-    const badge = canvasElement.querySelector('m-status-badge');
-    expect(badge).toHaveAttribute('status', 'success');
+export const Neutral = {
+    args: { status: 'neutral' },
 };

package/dist/components/statusbadge/StatusBadge.svelte

@@ -1,19 +1,27 @@
 <svelte:options customElement={{ tag: 'm-status-badge' }} />
 
 <script lang="ts">
-  import type { StatusBadgeStyle } from './StatusBadge.types';
   import StatusDot from '../statusdot/StatusDot.svelte';
-
+  /**
+   * A Status Badge is used to indicate the current status of an element, providing a clear and concise visual cue. The status can change dynamically based on updates, events, or conditions within the system. Status Badges help users quickly identify the state of an item, such as an order status, system health, or process completion. They are often color-coded to enhance readability and recognition.
+   */
   interface Props {
-    status: StatusBadgeStyle;
+    /**
+     * Content of the status badge.
+     */
+    label: string;
+    /**
+     * Allows to define the status badge type.
+     */
+    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';
   }
 
-  let { status }: Props = $props();
+  let { status = 'info', label }: Props = $props();
 </script>
 
-<div class="mc-status-badge {status ? `mc-status-badge--${status}` : ''}">
+<div class={['mc-status-badge', `mc-status-badge--${status}`]}>
   <StatusDot {status} size="m" />
-  <span class="mc-status-badge__label"><slot /></span>
+  <span class="mc-status-badge__label">{label}</span>
 </div>
 
 <style>/**