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

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>
@@ -85,62 +98,59 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 /* stylelint-disable string-no-newline */
 .mc-select {
   appearance: none;
   font-family: inherit;
   transition: box-shadow 200ms ease;
-  font-size: 1rem;
-  line-height: 1.3;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-s, 1.3);
   height: 3rem;
   padding: 0 3rem 0 0.75rem;
   background-position: right 1rem center;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
-  border: 1px solid #666666;
-  border-radius: 0.25rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--radius-s, 0.25rem);
   display: block;
   width: 100%;
-  color: #000000;
-  background-color: #ffffff;
+  color: var(--forms-color-text-default, #000000);
+  background-color: var(--forms-color-background-default, #ffffff);
   text-overflow: ellipsis;
   background-repeat: no-repeat;
   background-size: 1rem;
 }
 .mc-select:hover {
-  border-color: #4d4d4d;
-  box-shadow: 0 0 0 1px #4d4d4d;
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-select:focus {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
   outline: 0.125rem solid transparent;
   outline-offset: 0.125rem;
 }
 .mc-select:disabled {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
-  background-color: #d9d9d9;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   border-color: transparent;
   cursor: not-allowed;
   box-shadow: none;
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
 }
 .mc-select--readonly {
-  border-color: #cccccc;
+  border-color: var(--forms-color-border-read-only, #cccccc);
   pointer-events: none;
 }
 .mc-select.is-invalid {
-  border-color: #ea302d;
-  box-shadow: 0 0 0 1px #ea302d;
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-select.is-invalid:hover {
-  border-color: #c61112;
-  box-shadow: 0 0 0 1px #c61112;
+  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-select--s {
-  font-size: 0.875rem;
-  line-height: 1.3;
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
   height: 2rem;
   padding: 0 2rem 0 0.5rem;
   background-position: right 0.5rem center;

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,7 +1,4 @@
-import{c as u,p as n,a as i,b as f,f as m,d as o,s as g,t as p,h as v,i as h,j as _,r as d,e as k}from"../../custom-element.js";import{s as w}from"../../slot.js";import{S as x}from"../statusdot/StatusDot.js";var y=m('<div><!> <span class="mc-status-badge__label svelte-2arfbl"><!></span></div>');const S={hash:"svelte-2arfbl",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.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-status-badge.svelte-2arfbl {background-color:#e1f3f9;border:1px solid #a7d9ed;border-radius:0.25rem;font-weight:400;font-size: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-2arfbl {color:#000000;}.mc-status-badge__label.svelte-2arfbl::first-letter {text-transform:uppercase;}.mc-status-badge--success.svelte-2arfbl {background-color:#ebf5de;border:1px solid #c5e39e;}.mc-status-badge--error.svelte-2arfbl {background-color:#fdeaea;border:1px solid #f8bcbb;}.mc-status-badge--warning.svelte-2arfbl {background-color:#fdf1e8;border:1px solid #f8d2b3;}.mc-status-badge--neutral.svelte-2arfbl {background-color:#f2f2f2;border:1px solid #cccccc;}.mc-status-dot.svelte-2arfbl {background-color:#0b96cc;height:0.5rem;width:0.5rem;border-radius:100%;display:inline-block;}.mc-status-dot--s.svelte-2arfbl {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-2arfbl {height:1rem;width:1rem;}.mc-status-dot--success.svelte-2arfbl {background-color:#3f9e10;}.mc-status-dot--error.svelte-2arfbl {background-color:#ea302d;}.mc-status-dot--warning.svelte-2arfbl {background-color:#ea7315;}.mc-status-dot--neutral.svelte-2arfbl {background-color:#808080;}`};function D(a,s){n(s,!0),i(a,S);let e=f(s,"status",7);var t=y(),r=o(t);x(r,{get status(){return e()},size:"m"});var l=g(r,2),c=o(l);return w(c,s,"default",{}),d(l),d(t),p(()=>k(t,1,`mc-status-badge ${e()?`mc-status-badge--${e()}`:""}`,"svelte-2arfbl")),v(a,t),h({get status(){return e()},set status(b){e(b),_()}})}customElements.define("m-status-badge",u(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":";;;;;myCAAA,oBAUQA,EAAMC,EAAAC,EAAA,SAAA,CAAA,oJAGeF,EAAM,EAAA,oBAAuBA,EAAM,CAAA,GAAK,EAAE,GAAA,eAAA,CAAA,8DAFvE"}
+{"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,33 +1,38 @@
 <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>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-status-badge {
-  background-color: #e1f3f9;
-  border: 1px solid #a7d9ed;
-  border-radius: 0.25rem;
-  font-weight: 400;
-  font-size: 0.875rem;
+  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;
@@ -38,33 +43,33 @@
   min-height: 1.5rem;
 }
 .mc-status-badge__label {
-  color: #000000;
+  color: var(--status-badge-color-label, #000000);
 }
 .mc-status-badge__label::first-letter {
   text-transform: uppercase;
 }
 .mc-status-badge--success {
-  background-color: #ebf5de;
-  border: 1px solid #c5e39e;
+  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 {
-  background-color: #fdeaea;
-  border: 1px solid #f8bcbb;
+  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 {
-  background-color: #fdf1e8;
-  border: 1px solid #f8d2b3;
+  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 {
-  background-color: #f2f2f2;
-  border: 1px solid #cccccc;
+  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 {
-  background-color: #0b96cc;
+  background-color: var(--status-dot-color-background-information, #0b96cc);
   height: 0.5rem;
   width: 0.5rem;
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
   display: inline-block;
 }
 .mc-status-dot--s {
@@ -76,14 +81,14 @@
   width: 1rem;
 }
 .mc-status-dot--success {
-  background-color: #3f9e10;
+  background-color: var(--status-dot-color-background-success, #3f9e10);
 }
 .mc-status-dot--error {
-  background-color: #ea302d;
+  background-color: var(--status-dot-color-background-error, #ea302d);
 }
 .mc-status-dot--warning {
-  background-color: #ea7315;
+  background-color: var(--status-dot-color-background-warning, #ea7315);
 }
 .mc-status-dot--neutral {
-  background-color: #808080;
+  background-color: var(--status-dot-color-background-neutral, #808080);
 }</style>

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

@@ -1,32 +1,17 @@
-import type { StatusBadgeStyle } from './StatusBadge.types';
+/**
+ * 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';
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const StatusBadge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, "">;
-type StatusBadge = InstanceType<typeof StatusBadge>;
+declare const StatusBadge: import("svelte").Component<Props, {}, "">;
+type StatusBadge = ReturnType<typeof StatusBadge>;
 export default StatusBadge;
 //# sourceMappingURL=StatusBadge.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusbadge/StatusBadge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAI1D,UAAU,KAAK;IACb,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AAoBH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,WAAW;;;;;;UAAqF,CAAC;AACrF,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusbadge/StatusBadge.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;CAC/D;AAmBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/statusdot/README.md

@@ -0,0 +1,11 @@
+# `m-status-dot`
+
+A Status dot is a small visual indicator used to represent the state or condition of an element. It is often color-coded to convey different statuses at a glance, such as availability, activity, or urgency. Status Dots are commonly found in user presence indicators, system statuses, or process tracking to provide quick, unobtrusive feedback.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `status` | Allows to define the status dot type. | `'info'` `'success'` `'warning'` `'error'` `'neutral'` | `info` |
+| `size` | Determines the size of the status dot. | `'s'` `'m'` `'l'` | `m` |
+