@mozaic-ds/web-components 1.0.0 → 1.2.0

package/dist/components/segmentedcontrol/README.md

@@ -0,0 +1,19 @@
+# `m-segmented-control`
+
+A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `selected` | The selected segment index, bound via v-model. | `number` | `$bindable(0)` |
+| `full` | if `true`, the segmented control take the full width. | `boolean` |   |
+| `size` | Determines the size of the segmented control. | `'s'` `'m'` | `s` |
+| `segments*` | An array of objects that allows you to provide all the data needed to generate the content for each segment. | `Array<{ label: string; }>` |   |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `change` | Emits when the selected segment changes. | `CustomEvent<number>` |
+

package/dist/components/segmentedcontrol/SegmentedControl.js

@@ -0,0 +1,4 @@
+import{v as w,c as C,p as E,a as j,b as l,f as k,t as u,i as h,j as S,k as c,r as v,e as p,g as b,d as D,h as q,m as A}from"../../custom-element.js";import{e as B,i as F}from"../../each.js";import{s as _}from"../../attributes.js";import{b as G}from"../../this.js";var H=k('<button type="button" role="radio"> </button>'),I=k('<div role="radiogroup"></div>');const J={hash:"svelte-1p6odhf",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-segmented-control.svelte-1p6odhf {display:inline-flex;background-color:var(--segmented-control-color-background-default, #ffffff);border:1px solid var(--segmented-control-color-border, #cccccc);border-radius:3rem;height:2rem;padding:0.25rem;box-sizing:border-box;gap:0.25rem;}.mc-segmented-control__segment.svelte-1p6odhf {display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;color:var(--segmented-control-color-text-default, #666666);cursor:pointer;font-family:inherit;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, 0.875rem);padding:0 1rem;border-radius:3rem;height:1.5rem;width:100%;transition:background-color 0.3s ease;}.mc-segmented-control__segment.svelte-1p6odhf:not(.mc-segmented-control__segment--selected):hover {background-color:var(--segmented-control-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-segmented-control__segment--selected.svelte-1p6odhf {color:var(--segmented-control-color-text-selected, #ffffff);background-color:var(--segmented-control-color-background-selected, #464e63);}.mc-segmented-control__segment.svelte-1p6odhf:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-segmented-control--m.svelte-1p6odhf {height:3rem;padding:0.5rem;}.mc-segmented-control--m.svelte-1p6odhf .mc-segmented-control__segment:where(.svelte-1p6odhf) {height:2rem;}.mc-segmented-control--full.svelte-1p6odhf {display:flex;}`};function K(g,r){E(r,!0),j(g,J);let o=l(r,"selected",15,0),d=l(r,"full",7),m=l(r,"size",7,"s"),a=l(r,"segments",7),i;const x=e=>{o(e);const f=new CustomEvent("change",{detail:e,bubbles:!0,composed:!0});i.dispatchEvent(f)};var y={get selected(){return o()},set selected(e=0){o(e),c()},get full(){return d()},set full(e){d(e),c()},get size(){return m()},set size(e="s"){m(e),c()},get segments(){return a()},set segments(e){a(e),c()}},s=I();return B(s,21,a,F,(e,f,n)=>{var t=H();t.__click=()=>x(n);var z=D(t,!0);v(t),u(()=>{p(t,1,b(["mc-segmented-control__segment",o()===n&&"mc-segmented-control__segment--selected"]),"svelte-1p6odhf"),_(t,"tabindex",o()===n?0:-1),_(t,"aria-checked",o()===n?"true":"false"),q(z,A(f).label)}),h(e,t)}),v(s),G(s,e=>i=e,()=>i),u(()=>p(s,1,b(["mc-segmented-control",`mc-segmented-control--${m()}`,d()&&"mc-segmented-control--full"]),"svelte-1p6odhf")),h(g,s),S(y)}w(["click"]);customElements.define("m-segmented-control",C(K,{selected:{},full:{},size:{},segments:{}},[],[],!0));
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/components/segmentedcontrol/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/segmentedcontrol/SegmentedControl.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-segmented-control' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.\n   *\n   * @event change {CustomEvent<number>} - Emits when the selected segment changes.\n   */\n  interface Props {\n    /**\n     * The selected segment index, bound via v-model.\n     */\n    selected?: number;\n    /**\n     * if `true`, the segmented control take the full width.\n     */\n    full?: boolean;\n    /**\n     * Determines the size of the segmented control.\n     */\n    size?: 's' | 'm';\n    /**\n     * An array of objects that allows you to provide all the data needed to generate the content for each segment.\n     */\n    segments: Array<{\n      /**\n       * The label displayed for the segment.\n       */\n      label: string;\n    }>;\n  }\n\n  let { selected = $bindable(0), full, size = 's', segments }: Props = $props();\n  let element: HTMLElement;\n\n  const onClick = (index: number) => {\n    selected = index;\n\n    const event = new CustomEvent('change', {\n      detail: index,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n<div\n  class={[\n    'mc-segmented-control',\n    `mc-segmented-control--${size}`,\n    full && 'mc-segmented-control--full',\n  ]}\n  role=\"radiogroup\"\n  bind:this={element}\n>\n  {#each segments as segment, index (index)}\n    <button\n      type=\"button\"\n      class={[\n        'mc-segmented-control__segment',\n        selected === index && 'mc-segmented-control__segment--selected',\n      ]}\n      role=\"radio\"\n      tabindex={selected === index ? 0 : -1}\n      aria-checked={selected === index ? 'true' : 'false'}\n      onclick={() => onClick(index)}\n    >\n      {segment.label}\n    </button>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/segmented-control';\n</style>\n"],"names":["selected","full","$.prop","$$props","size","segments","element","onClick","index","event","$.each","div","segment","button","$.set_attribute","$.set_text","text","$.get","$.bind_this","$$value"],"mappings":";;imDAAA,gBAgCQ,IAAAA,oBAAqB,CAAC,EAAGC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,eAAO,GAAG,EAAEC,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACrDG,QAEEC,EAAWC,GAAkB,CACjCR,EAAWQ,CAAK,EAEV,MAAAC,EAAK,IAAO,YAAY,UAC5B,OAAQD,EACR,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBF,EAAQ,cAAcG,CAAK,CAC7B,mDAZ2B,EAAC,0FAAgB,IAAG,uEAwBxCC,OAAAA,EAAAC,EAAA,GAAAN,OAAYO,EAAOJ,IAAA,WAUPK,EAAA,QAAA,IAAAN,EAAQC,CAAK,qCAN1B,gCACAR,EAAQ,IAAKQ,GAAS,8DAGdM,EAAAD,EAAA,WAAAb,EAAQ,IAAKQ,EAAQ,IAAM,EACvBM,EAAAD,EAAA,eAAAb,EAAQ,IAAKQ,EAAQ,OAAS,OAAO,EAGlDO,EAAAC,EAAAC,EAAAL,CAAO,EAAC,KAAK,kBAdPM,EAAAP,EAAAQ,GAAAb,QAAAA,CAAO,iBALhB,gDACyBF,EAAI,CAAA,GAC7BH,KAAQ,6DANZ"}

package/dist/components/segmentedcontrol/SegmentedControl.spec.js

@@ -0,0 +1,52 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import SegmentedControl from './SegmentedControl.svelte';
+describe('m-segmented-control component', () => {
+    const baseProps = {
+        segments: [{ label: 'Segment 1' }, { label: 'Segment 2' }, { label: 'Segment 3' }],
+        selected: 1,
+        size: 's',
+        full: false,
+    };
+    it('renders correct number of segments with labels', () => {
+        const { getAllByRole } = render(SegmentedControl, {
+            props: baseProps,
+        });
+        const buttons = getAllByRole('radio');
+        expect(buttons.length).toBe(3);
+        expect(buttons[0].textContent).toBe('Segment 1');
+        expect(buttons[1].textContent).toBe('Segment 2');
+        expect(buttons[2].textContent).toBe('Segment 3');
+    });
+    it('sets the correct initial selected segment', () => {
+        const { getAllByRole } = render(SegmentedControl, { props: baseProps });
+        const buttons = getAllByRole('radio');
+        expect(buttons[1].getAttribute('aria-checked')).toBe('true');
+        expect(buttons[1].tabIndex).toBe(0);
+        expect(buttons[0].getAttribute('aria-checked')).toBe('false');
+        expect(buttons[0].tabIndex).toBe(-1);
+    });
+    it('updates selected segment and dispatches event on click', async () => {
+        const { container, getAllByRole } = render(SegmentedControl, {
+            props: baseProps,
+        });
+        const buttons = getAllByRole('radio');
+        const handler = vi.fn();
+        container.firstChild?.addEventListener('change', handler);
+        await fireEvent.click(buttons[2]);
+        expect(handler).toHaveBeenCalledTimes(1);
+        expect(handler.mock.calls[0][0].detail).toBe(2);
+        expect(buttons[2].getAttribute('aria-checked')).toBe('true');
+        expect(buttons[2].tabIndex).toBe(0);
+        expect(buttons[1].getAttribute('aria-checked')).toBe('false');
+        expect(buttons[1].tabIndex).toBe(-1);
+    });
+    it('applies size and full classes correctly', () => {
+        const { container } = render(SegmentedControl, {
+            props: { ...baseProps, size: 'm', full: true },
+        });
+        const rootDiv = container.querySelector('.mc-segmented-control');
+        expect(rootDiv.classList.contains('mc-segmented-control--m')).toBe(true);
+        expect(rootDiv.classList.contains('mc-segmented-control--full')).toBe(true);
+    });
+});

package/dist/components/segmentedcontrol/SegmentedControl.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Size: Story;
+export declare const Full: Story;
+//# sourceMappingURL=SegmentedControl.stories.d.ts.map

package/dist/components/segmentedcontrol/SegmentedControl.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.stories.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedcontrol/SegmentedControl.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA2CX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}

package/dist/components/segmentedcontrol/SegmentedControl.stories.js

@@ -0,0 +1,54 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { action } from 'storybook/actions';
+const meta = {
+    title: 'Action/Segmented Control',
+    component: 'm-segmented-control',
+    argTypes: {
+        size: {
+            control: 'radio',
+            options: ['s', 'm'],
+        },
+        change: {
+            control: false,
+        },
+    },
+    args: {
+        segments: [
+            {
+                label: 'Label',
+            },
+            {
+                label: 'Label',
+            },
+            {
+                label: 'Label',
+            },
+            {
+                label: 'Label',
+            },
+        ],
+    },
+    render: (args) => {
+        const onChange = action('change');
+        return html `
+      <m-segmented-control
+        selected=${ifDefined(args.selected)}
+        full=${ifDefined(args.full)}
+        size=${ifDefined(args.size)}
+        .segments=${ifDefined(args.segments)}
+        @change=${(event) => {
+            onChange(event);
+        }}
+      ></m-segmented-control>
+    `;
+    },
+};
+export default meta;
+export const Default = {};
+export const Size = {
+    args: { size: 'm' },
+};
+export const Full = {
+    args: { full: true },
+};

package/dist/components/segmentedcontrol/SegmentedControl.svelte

@@ -0,0 +1,125 @@
+<svelte:options customElement={{ tag: 'm-segmented-control' }} />
+
+<script lang="ts">
+  /**
+   * A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.
+   *
+   * @event change {CustomEvent<number>} - Emits when the selected segment changes.
+   */
+  interface Props {
+    /**
+     * The selected segment index, bound via v-model.
+     */
+    selected?: number;
+    /**
+     * if `true`, the segmented control take the full width.
+     */
+    full?: boolean;
+    /**
+     * Determines the size of the segmented control.
+     */
+    size?: 's' | 'm';
+    /**
+     * An array of objects that allows you to provide all the data needed to generate the content for each segment.
+     */
+    segments: Array<{
+      /**
+       * The label displayed for the segment.
+       */
+      label: string;
+    }>;
+  }
+
+  let { selected = $bindable(0), full, size = 's', segments }: Props = $props();
+  let element: HTMLElement;
+
+  const onClick = (index: number) => {
+    selected = index;
+
+    const event = new CustomEvent('change', {
+      detail: index,
+      bubbles: true,
+      composed: true,
+    });
+    element.dispatchEvent(event);
+  };
+</script>
+
+<div
+  class={[
+    'mc-segmented-control',
+    `mc-segmented-control--${size}`,
+    full && 'mc-segmented-control--full',
+  ]}
+  role="radiogroup"
+  bind:this={element}
+>
+  {#each segments as segment, index (index)}
+    <button
+      type="button"
+      class={[
+        'mc-segmented-control__segment',
+        selected === index && 'mc-segmented-control__segment--selected',
+      ]}
+      role="radio"
+      tabindex={selected === index ? 0 : -1}
+      aria-checked={selected === index ? 'true' : 'false'}
+      onclick={() => onClick(index)}
+    >
+      {segment.label}
+    </button>
+  {/each}
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-segmented-control {
+  display: inline-flex;
+  background-color: var(--segmented-control-color-background-default, #ffffff);
+  border: 1px solid var(--segmented-control-color-border, #cccccc);
+  border-radius: 3rem;
+  height: 2rem;
+  padding: 0.25rem;
+  box-sizing: border-box;
+  gap: 0.25rem;
+}
+.mc-segmented-control__segment {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: none;
+  color: var(--segmented-control-color-text-default, #666666);
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: var(--font-size-100, 0.875rem);
+  padding: 0 1rem;
+  border-radius: 3rem;
+  height: 1.5rem;
+  width: 100%;
+  transition: background-color 0.3s ease;
+}
+.mc-segmented-control__segment:not(.mc-segmented-control__segment--selected):hover {
+  background-color: var(--segmented-control-color-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-segmented-control__segment--selected {
+  color: var(--segmented-control-color-text-selected, #ffffff);
+  background-color: var(--segmented-control-color-background-selected, #464e63);
+}
+.mc-segmented-control__segment:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-segmented-control--m {
+  height: 3rem;
+  padding: 0.5rem;
+}
+.mc-segmented-control--m .mc-segmented-control__segment {
+  height: 2rem;
+}
+.mc-segmented-control--full {
+  display: flex;
+}</style>

package/dist/components/segmentedcontrol/SegmentedControl.svelte.d.ts

@@ -0,0 +1,32 @@
+/**
+ * A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.
+ *
+ * @event change {CustomEvent<number>} - Emits when the selected segment changes.
+ */
+interface Props {
+    /**
+     * The selected segment index, bound via v-model.
+     */
+    selected?: number;
+    /**
+     * if `true`, the segmented control take the full width.
+     */
+    full?: boolean;
+    /**
+     * Determines the size of the segmented control.
+     */
+    size?: 's' | 'm';
+    /**
+     * An array of objects that allows you to provide all the data needed to generate the content for each segment.
+     */
+    segments: Array<{
+        /**
+         * The label displayed for the segment.
+         */
+        label: string;
+    }>;
+}
+declare const SegmentedControl: import("svelte").Component<Props, {}, "selected">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;
+//# sourceMappingURL=SegmentedControl.svelte.d.ts.map

package/dist/components/segmentedcontrol/SegmentedControl.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedcontrol/SegmentedControl.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC;QACd;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;CACJ;AAwCH,QAAA,MAAM,gBAAgB,mDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/select/README.md

@@ -9,7 +9,7 @@ A select component allows users to choose a single option from a predefined list
 | `id*` | A unique identifier for the select, used to associate the label with the form element. | `string` |   |
 | `name` | The name attribute for the select element, used for form submission. | `string` |   |
 | `options*` | Define the available choices for the select element. | `Array<{ id?: string; text: string; value: string` `number; disabled?: boolean; }>` |   |
-| `value` | The current value of the select. | `string` `number` |   |
+| `value` | The current value of the select. | `string` `number` | `$bindable()` |
 | `placeholder` | Text displayed when the select has no selected value. | `string` |   |
 | `isinvalid` | If `true`, the select is marked as invalid. | `boolean` |   |
 | `disabled` | If `true`, the select is disabled and non-interactive. | `boolean` |   |

package/dist/components/select/Select.js

@@ -1,7 +1,7 @@
-import{c as j,p as A,a as D,b as a,f as _,d as g,s as F,t as p,i as x,j as q,k as t,r as w,h as E,e as G,g as H,m as n}from"../../custom-element.js";import{i as I}from"../../if.js";import{e as J,i as K}from"../../each.js";import{d as N,s as C}from"../../attributes.js";import{c as O}from"../../custom-element-forward-events.js";var P=_("<option disabled selected> </option>"),Q=_("<option> </option>"),R=_("<select><!><!></select>");const T={hash:"svelte-6nznl5",code:`/**
+import{c as j,p as A,a as D,b as a,f as x,d as g,s as F,t as p,i as w,j as q,k as t,r as _,h as E,e as G,g as H,m as n}from"../../custom-element.js";import{i as I}from"../../if.js";import{e as J,i as K}from"../../each.js";import{c as N,s as C}from"../../attributes.js";import{c as O}from"../../custom-element-forward-events.js";var P=x("<option disabled selected> </option>"),Q=x("<option> </option>"),R=x("<select><!><!></select>");const T={hash:"svelte-6nznl5",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* stylelint-disable string-no-newline */.mc-select.svelte-6nznl5 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;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='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: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.svelte-6nznl5:hover {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.svelte-6nznl5:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-select.svelte-6nznl5:disabled {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:var(--forms-color-text-disabled, #737373);}.mc-select--readonly.svelte-6nznl5 {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-select.is-invalid.svelte-6nznl5 {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.svelte-6nznl5:hover {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.svelte-6nznl5 {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;}
+/* stylelint-disable string-no-newline */.mc-select.svelte-6nznl5 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;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='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-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);display:block;width:100%;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;border-radius:var(--border-radius-s, 0.25rem);}.mc-select.svelte-6nznl5:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-6nznl5:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-select.svelte-6nznl5:disabled {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:var(--forms-color-text-disabled, #737373);}.mc-select--readonly.svelte-6nznl5 {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-select.is-invalid.svelte-6nznl5 {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);}.mc-select.is-invalid.svelte-6nznl5:hover {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);}.mc-select--s.svelte-6nznl5 {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;}
 
-/* stylelint-enable string-no-newline */`};function U(z,r){A(r,!0),D(z,T);let d=a(r,"id",7),c=a(r,"name",7),v=a(r,"value",7),i=a(r,"placeholder",7),m=a(r,"size",7,"m"),u=a(r,"isinvalid",7),f=a(r,"disabled",7),b=a(r,"readonly",7),h=a(r,"options",7);var B={get id(){return d()},set id(e){d(e),t()},get name(){return c()},set name(e){c(e),t()},get value(){return v()},set value(e){v(e),t()},get placeholder(){return i()},set placeholder(e){i(e),t()},get size(){return m()},set size(e="m"){m(e),t()},get isinvalid(){return u()},set isinvalid(e){u(e),t()},get disabled(){return f()},set disabled(e){f(e),t()},get readonly(){return b()},set readonly(e){b(e),t()},get options(){return h()},set options(e){h(e),t()}},l=R(),y=g(l);{var L=e=>{var o=P(),s=g(o);w(o),o.value=o.__value="",p(()=>E(s,`-- ${i()??""} --`)),x(e,o)};I(y,e=>{i()&&e(L)})}var M=F(y);return J(M,17,h,K,(e,o)=>{var s=Q(),S=g(s,!0);w(s);var k={};p(()=>{s.disabled=n(o).disabled,E(S,n(o).text),k!==(k=n(o).value)&&(s.value=(s.__value=n(o).value)??"")}),x(e,s)}),w(l),p(()=>{C(l,"id",d()),G(l,1,H(["mc-select",`mc-select--${m()}`,b()&&"mc-select--readonly",u()&&"is-invalid"]),"svelte-6nznl5"),C(l,"name",c()),l.disabled=f()}),N(l,v),x(z,l),q(B)}customElements.define("m-select",j(U,{options:{attribute:"options",type:"Array"},id:{},name:{},value:{},placeholder:{},size:{},isinvalid:{},disabled:{},readonly:{}},[],[],!0,O));
+/* stylelint-enable string-no-newline */`};function U(z,r){A(r,!0),D(z,T);let d=a(r,"id",7),c=a(r,"name",7),v=a(r,"value",15),i=a(r,"placeholder",7),m=a(r,"size",7,"m"),u=a(r,"isinvalid",7),f=a(r,"disabled",7),b=a(r,"readonly",7),h=a(r,"options",7);var B={get id(){return d()},set id(e){d(e),t()},get name(){return c()},set name(e){c(e),t()},get value(){return v()},set value(e){v(e),t()},get placeholder(){return i()},set placeholder(e){i(e),t()},get size(){return m()},set size(e="m"){m(e),t()},get isinvalid(){return u()},set isinvalid(e){u(e),t()},get disabled(){return f()},set disabled(e){f(e),t()},get readonly(){return b()},set readonly(e){b(e),t()},get options(){return h()},set options(e){h(e),t()}},l=R(),y=g(l);{var L=e=>{var o=P(),s=g(o);_(o),o.value=o.__value="",p(()=>E(s,`-- ${i()??""} --`)),w(e,o)};I(y,e=>{i()&&e(L)})}var M=F(y);return J(M,17,h,K,(e,o)=>{var s=Q(),S=g(s,!0);_(s);var k={};p(()=>{s.disabled=n(o).disabled,E(S,n(o).text),k!==(k=n(o).value)&&(s.value=(s.__value=n(o).value)??"")}),w(e,s)}),_(l),p(()=>{C(l,"id",d()),G(l,1,H(["mc-select",`mc-select--${m()}`,b()&&"mc-select--readonly",u()&&"is-invalid"]),"svelte-6nznl5"),C(l,"name",c()),l.disabled=f()}),N(l,v),w(z,l),q(B)}customElements.define("m-select",j(U,{options:{attribute:"options",type:"Array"},id:{},name:{},value:{},placeholder:{},size:{},isinvalid:{},disabled:{},readonly:{}},[],[],!0,O));
 //# sourceMappingURL=Select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-select',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * 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.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the select, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the select element, used for form submission.\n     */\n    name?: string;\n    /**\n     * Define the available choices for the select element.\n     */\n    options: Array<{\n      id?: string;\n      text: string;\n      value: string | number;\n      disabled?: boolean;\n    }>;\n    /**\n     * The current value of the select.\n     */\n    value?: string | number;\n    /**\n     * Text displayed when the select has no selected value.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the select is marked as invalid.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, the select is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the select.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the select is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    value,\n    placeholder,\n    size = 'm',\n    isinvalid,\n    disabled,\n    readonly,\n    options,\n  }: Props = $props();\n</script>\n\n<select\n  {id}\n  class={[\n    'mc-select',\n    `mc-select--${size}`,\n    readonly && 'mc-select--readonly',\n    isinvalid && 'is-invalid',\n  ]}\n  {name}\n  {disabled}\n  bind:value\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each options as option}\n    <option disabled={option.disabled} value={option.value}>\n      {option.text}\n    </option>\n  {/each}\n</select>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","size","isinvalid","disabled","readonly","options","$$render","consequent","$.each","node_1","option","option_2","$.get","$.set_text","text_1","option_2_value","customElementForwardEvents"],"mappings":";;;;;0DAAA,oBA4DIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,CAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,eAAO,GAAG,EACVC,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,EAAOT,EAAAC,EAAA,UAAA,CAAA,2OAJA,IAAG,mTAsBJG,KAAW,EAAA,KAAA,CAAA,kBAFdA,EAAW,GAAAM,EAAAC,CAAA,eAMTC,OAAAA,EAAAC,EAAA,GAAAJ,OAAWK,IAAM,0CACJC,EAAA,SAAAC,EAAAF,CAAM,EAAC,SACtBG,EAAAC,EAAAF,EAAAF,CAAM,EAAC,IAAI,EAD4BK,KAAAA,EAAAH,EAAAF,CAAM,EAAC,SAAPC,EAAA,OAAAA,EAAA,QAAAC,EAAAF,CAAM,EAAC,QAAK,kDAhBtD,0BACcT,EAAI,CAAA,GAClBG,EAAQ,GAAI,sBACZF,KAAa,mFARjB,+KAhEYc"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-select',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * 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.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the select, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the select element, used for form submission.\n     */\n    name?: string;\n    /**\n     * Define the available choices for the select element.\n     */\n    options: Array<{\n      id?: string;\n      text: string;\n      value: string | number;\n      disabled?: boolean;\n    }>;\n    /**\n     * The current value of the select.\n     */\n    value?: string | number;\n    /**\n     * Text displayed when the select has no selected value.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the select is marked as invalid.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, the select is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the select.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the select is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    placeholder,\n    size = 'm',\n    isinvalid,\n    disabled,\n    readonly,\n    options,\n  }: Props = $props();\n</script>\n\n<select\n  {id}\n  class={[\n    'mc-select',\n    `mc-select--${size}`,\n    readonly && 'mc-select--readonly',\n    isinvalid && 'is-invalid',\n  ]}\n  {name}\n  {disabled}\n  bind:value\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each options as option, index (index)}\n    <option disabled={option.disabled} value={option.value}>\n      {option.text}\n    </option>\n  {/each}\n</select>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","size","isinvalid","disabled","readonly","options","$$render","consequent","$.each","node_1","option","option_2","$.get","$.set_text","text_1","option_2_value","customElementForwardEvents"],"mappings":";;;;;0DAAA,oBA4DIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,eAAO,GAAG,EACVC,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,EAAOT,EAAAC,EAAA,UAAA,CAAA,2OAJA,IAAG,mTAsBJG,KAAW,EAAA,KAAA,CAAA,kBAFdA,EAAW,GAAAM,EAAAC,CAAA,eAMTC,OAAAA,EAAAC,EAAA,GAAAJ,OAAWK,IAAM,0CACJC,EAAA,SAAAC,EAAAF,CAAM,EAAC,SACtBG,EAAAC,EAAAF,EAAAF,CAAM,EAAC,IAAI,EAD4BK,KAAAA,EAAAH,EAAAF,CAAM,EAAC,SAAPC,EAAA,OAAAA,EAAA,QAAAC,EAAAF,CAAM,EAAC,QAAK,kDAhBtD,0BACcT,EAAI,CAAA,GAClBG,EAAQ,GAAI,sBACZF,KAAa,mFARjB,+KAhEYc"}

package/dist/components/select/Select.svelte

@@ -60,7 +60,7 @@
   let {
     id,
     name,
-    value,
+    value = $bindable(),
     placeholder,
     size = 'm',
     isinvalid,
@@ -88,7 +88,7 @@
     </option>
   {/if}
 
-  {#each options as option}
+  {#each options as option, index (index)}
     <option disabled={option.disabled} value={option.value}>
       {option.text}
     </option>
@@ -109,8 +109,7 @@
   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='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);
+  border: var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);
   display: block;
   width: 100%;
   color: var(--forms-color-text-default, #000000);
@@ -118,10 +117,11 @@
   text-overflow: ellipsis;
   background-repeat: no-repeat;
   background-size: 1rem;
+  border-radius: var(--border-radius-s, 0.25rem);
 }
 .mc-select:hover {
   border-color: var(--forms-color-border-hover, #4d4d4d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-select:focus {
   box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
@@ -142,11 +142,11 @@
 }
 .mc-select.is-invalid {
   border-color: var(--forms-color-border-invalid, #ea302d);
-  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-select.is-invalid:hover {
   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);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
 }
 .mc-select--s {
   font-size: var(--font-size-100, 0.875rem);

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

@@ -44,7 +44,7 @@ interface Props {
      */
     readonly?: boolean;
 }
-declare const Select: import("svelte").Component<Props, {}, "">;
+declare const Select: import("svelte").Component<Props, {}, "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;
 //# sourceMappingURL=Select.svelte.d.ts.map

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":"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"}
+{"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,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/statusbadge/StatusBadge.js

@@ -1,4 +1,4 @@
-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:`/**
+import{c as f,p as m,a as v,b as l,f as h,d as u,s as k,t as p,i as y,j as w,k as b,r as n,e as _,g as x,h as S}from"../../custom-element.js";import{S as z}from"../statusdot/StatusDot.js";var D=h('<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 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));
+ */.mc-status-badge.svelte-1oceydf {background-color:var(--status-badge-color-background-info, #e1f3f9);border:var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-info, #a7d9ed);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-100, 0.875rem);display:inline-flex;align-items:center;gap:0.25rem;border-radius:var(--border-radius-s, 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-width-s, 0.0625rem) 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-width-s, 0.0625rem) 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-width-s, 0.0625rem) 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-width-s, 0.0625rem) solid var(--status-badge-color-border-neutral, #cccccc);}.mc-status-dot.svelte-1oceydf {background-color:var(--status-dot-color-background-info, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--border-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,t){m(t,!0),v(o,j);let e=l(t,"status",7,"info"),a=l(t,"label",7);var g={get status(){return e()},set status(s="info"){e(s),b()},get label(){return a()},set label(s){a(s),b()}},r=D(),d=u(r);z(d,{get status(){return e()},size:"m"});var c=k(d,2),i=u(c,!0);return n(c),n(r),p(()=>{_(r,1,x(["mc-status-badge",`mc-status-badge--${e()}`]),"svelte-1oceydf"),S(i,a())}),y(o,r),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 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"}
+{"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":";;6sEAAA,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.svelte

@@ -28,14 +28,14 @@
  * Do not edit directly, this file was auto-generated.
  */
 .mc-status-badge {
-  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);
+  background-color: var(--status-badge-color-background-info, #e1f3f9);
+  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-info, #a7d9ed);
   font-weight: var(--font-weight-regular, 400);
   font-size: var(--font-size-100, 0.875rem);
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
+  border-radius: var(--border-radius-s, 0.25rem);
   padding-right: 0.5rem;
   padding-left: 0.5rem;
   text-transform: lowercase;
@@ -50,26 +50,26 @@
 }
 .mc-status-badge--success {
   background-color: var(--status-badge-color-background-success, #ebf5de);
-  border: var(--border-s, 1px) solid var(--status-badge-color-border-success, #c5e39e);
+  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-success, #c5e39e);
 }
 .mc-status-badge--error {
   background-color: var(--status-badge-color-background-error, #fdeaea);
-  border: var(--border-s, 1px) solid var(--status-badge-color-border-error, #f8bcbb);
+  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-error, #f8bcbb);
 }
 .mc-status-badge--warning {
   background-color: var(--status-badge-color-background-warning, #fdf1e8);
-  border: var(--border-s, 1px) solid var(--status-badge-color-border-warning, #f8d2b3);
+  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-warning, #f8d2b3);
 }
 .mc-status-badge--neutral {
   background-color: var(--status-badge-color-background-neutral, #f2f2f2);
-  border: var(--border-s, 1px) solid var(--status-badge-color-border-neutral, #cccccc);
+  border: var(--border-width-s, 0.0625rem) solid var(--status-badge-color-border-neutral, #cccccc);
 }
 
 .mc-status-dot {
-  background-color: var(--status-dot-color-background-information, #0b96cc);
+  background-color: var(--status-dot-color-background-info, #0b96cc);
   height: 0.5rem;
   width: 0.5rem;
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   display: inline-block;
 }
 .mc-status-dot--s {

package/dist/components/statusdot/StatusDot.js

@@ -1,4 +1,4 @@
 import{c as l,p as n,a as i,b as c,f as m,t as v,i as p,j as g,k as u,e as b,g as f}from"../../custom-element.js";var h=m("<div></div>");const k={hash:"svelte-14acsp3",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-status-dot.svelte-14acsp3 {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-14acsp3 {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-14acsp3 {height:1rem;width:1rem;}.mc-status-dot--success.svelte-14acsp3 {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-14acsp3 {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-14acsp3 {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-14acsp3 {background-color:var(--status-dot-color-background-neutral, #808080);}`};function w(o,t){n(t,!0),i(o,k);let s=c(t,"size",7,"m"),a=c(t,"status",7,"info");var d={get size(){return s()},set size(e="m"){s(e),u()},get status(){return a()},set status(e="info"){a(e),u()}},r=h();return v(()=>b(r,1,f(["mc-status-dot",`mc-status-dot--${s()}`,`mc-status-dot--${a()}`]),"svelte-14acsp3")),p(o,r),g(d)}customElements.define("m-status-dot",l(w,{size:{},status:{}},[],[],!0));export{w as S};
+ */.mc-status-dot.svelte-14acsp3 {background-color:var(--status-dot-color-background-info, #0b96cc);height:0.5rem;width:0.5rem;border-radius:var(--border-radius-full, 100%);display:inline-block;}.mc-status-dot--s.svelte-14acsp3 {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-14acsp3 {height:1rem;width:1rem;}.mc-status-dot--success.svelte-14acsp3 {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-14acsp3 {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-14acsp3 {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-14acsp3 {background-color:var(--status-dot-color-background-neutral, #808080);}`};function w(o,t){n(t,!0),i(o,k);let s=c(t,"size",7,"m"),e=c(t,"status",7,"info");var d={get size(){return s()},set size(a="m"){s(a),u()},get status(){return e()},set status(a="info"){e(a),u()}},r=h();return v(()=>b(r,1,f(["mc-status-dot",`mc-status-dot--${s()}`,`mc-status-dot--${e()}`]),"svelte-14acsp3")),p(o,r),g(d)}customElements.define("m-status-dot",l(w,{size:{},status:{}},[],[],!0));export{w as S};
 //# sourceMappingURL=StatusDot.js.map

package/dist/components/statusdot/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","sources":["../../../src/components/statusdot/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-dot' }} />\n\n<script lang=\"ts\">\n  /**\n   * 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.\n   */\n  interface Props {\n    /**\n     * Allows to define the status dot type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n    /**\n     * Determines the size of the status dot.\n     */\n    size?: 's' | 'm' | 'l';\n  }\n\n  let { size = 'm', status = 'info' }: Props = $props();\n</script>\n\n<div\n  class={[\n    'mc-status-dot',\n    `mc-status-dot--${size}`,\n    `mc-status-dot--${status}`,\n  ]}\n></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["size","status"],"mappings":";;mwBAAA,gBAiBQ,IAAAA,eAAO,GAAG,EAAEC,iBAAS,MAAM,2CAApB,IAAG,iDAAW,OAAM,wCAK/B,kCACkBD,EAAI,CAAA,qBACJC,GAAM,mCAN5B"}
+{"version":3,"file":"StatusDot.js","sources":["../../../src/components/statusdot/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-dot' }} />\n\n<script lang=\"ts\">\n  /**\n   * 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.\n   */\n  interface Props {\n    /**\n     * Allows to define the status dot type.\n     */\n    status?: 'info' | 'success' | 'warning' | 'error' | 'neutral';\n    /**\n     * Determines the size of the status dot.\n     */\n    size?: 's' | 'm' | 'l';\n  }\n\n  let { size = 'm', status = 'info' }: Props = $props();\n</script>\n\n<div class={['mc-status-dot', `mc-status-dot--${size}`, `mc-status-dot--${status}`]}></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["size","status"],"mappings":";;mwBAAA,gBAiBQ,IAAAA,eAAO,GAAG,EAAEC,iBAAS,MAAM,2CAApB,IAAG,iDAAW,OAAM,wCAGtB,kCAAmCD,EAAI,CAAA,qBAAsBC,GAAM,mCAFhF"}

package/dist/components/statusdot/StatusDot.spec.js

@@ -18,13 +18,7 @@ describe('m-status-dot component', () => {
         });
     });
     it('applies correct status class', () => {
-        const statuses = [
-            'info',
-            'success',
-            'warning',
-            'error',
-            'neutral',
-        ];
+        const statuses = ['info', 'success', 'warning', 'error', 'neutral'];
         statuses.forEach((status) => {
             const { container } = render(StatusDot, { props: { status } });
             const dot = container.querySelector('.mc-status-dot');

package/dist/components/statusdot/StatusDot.svelte

@@ -18,22 +18,16 @@
   let { size = 'm', status = 'info' }: Props = $props();
 </script>
 
-<div
-  class={[
-    'mc-status-dot',
-    `mc-status-dot--${size}`,
-    `mc-status-dot--${status}`,
-  ]}
-></div>
+<div class={['mc-status-dot', `mc-status-dot--${size}`, `mc-status-dot--${status}`]}></div>
 
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
 .mc-status-dot {
-  background-color: var(--status-dot-color-background-information, #0b96cc);
+  background-color: var(--status-dot-color-background-info, #0b96cc);
   height: 0.5rem;
   width: 0.5rem;
-  border-radius: var(--radius-full, 100%);
+  border-radius: var(--border-radius-full, 100%);
   display: inline-block;
 }
 .mc-status-dot--s {

package/dist/components/statusdot/StatusDot.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusdot/StatusDot.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAmBH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"StatusDot.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/statusdot/StatusDot.svelte.ts"],"names":[],"mappings":"AAGE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACxB;AAeH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/statusmessage/README.md

@@ -0,0 +1,11 @@
+# `m-status-message`
+
+A Status Message is a compact component that combines an icon and concise text to communicate system states or user feedback in limited interface space. The icon and message work together as a unified structure to provide clear, immediate understanding of the current status. Status Messages are designed for contexts where space is constrained but clear communication is essential, offering quick recognition through color-coded icons paired with brief, actionable text.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `status` | Allows to define the status message style. | `'info'` `'success'` `'warning'` `'error'` `'neutral'` `'inprogress'` | `info` |
+| `label*` | Label of the status message. | `string` |   |
+