@mozaic-ds/web-components 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/components/select/Select.js

@@ -1,7 +1,7 @@
-import{c as L,a as M,b as A,d as t,C as D,e as F,f as p,x as q,s as G,g as b,h as i,j as h,l as H,m as a,r as g,t as y,k as z,$ as I}from"../../custom-element.js";import{i as J}from"../../if.js";import{e as K,i as N}from"../../each.js";import{b as O,d as P}from"../../attributes.js";import{c as Q}from"../../custom-element-forward-events.js";var R=p("<option disabled selected> </option>"),T=p("<option> </option>"),U=p("<select><!><!></select>");const V={hash:"svelte-13f62in",code:`/**
+import{n as A,c as D,p as F,a as G,b as s,C as H,l as I,f as z,s as J,d as w,t as _,B as K,e as N,o as O,m as n,h as y,i as P,j as t,r as k,_ as Q,g as S}from"../../custom-element.js";import{i as R}from"../../if.js";import{e as T,i as U}from"../../each.js";import{s as V,d as W}from"../../attributes.js";import{c as X}from"../../custom-element-forward-events.js";var Y=z("<option disabled selected> </option>"),Z=z("<option> </option>"),$=z("<select><!><!></select>");const ee={hash:"svelte-13f62in",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-select.svelte-13f62in {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-13f62in: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-13f62in: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-13f62in: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-13f62in {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-select.is-invalid.svelte-13f62in {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-13f62in: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-13f62in {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 W(x,s){M(s,!0),A(x,V);let n=t(s,"id",7),c=t(s,"valueselected",7,""),d=t(s,"placeholder",7),v=t(s,"size",7,"m"),f=t(s,"isinvalid",7,!1),m=t(s,"disabled",7,!1),u=t(s,"options",7),E=q(s,["$$slots","$$events","$$legacy","$$host","id","valueselected","placeholder","size","isinvalid","disabled","options"]),w=D(F(c()));function C(e,r){const o=["mc-select"];return e&&o.push("is-invalid"),r&&o.push(`mc-select--${r}`),o.join(" ")}var l=U();O(l,e=>({id:n(),class:e,disabled:m(),...E}),[()=>C(f(),v())],void 0,"svelte-13f62in");var _=b(l);{var S=e=>{var r=R(),o=b(r);g(r),r.value=r.__value="",y(()=>z(o,`-- ${d()??""} --`)),h(e,r)};J(_,e=>{d()&&e(S)})}var j=G(_);return K(j,17,u,N,(e,r)=>{var o=T(),B=b(o,!0);g(o);var k={};y(()=>{o.disabled=i(r).disabled,z(B,i(r).text),k!==(k=i(r).value)&&(o.value=(o.__value=i(r).value)??"")}),h(e,o)}),g(l),P(l,()=>i(w),e=>I(w,e)),h(x,l),H({get id(){return n()},set id(e){n(e),a()},get valueselected(){return c()},set valueselected(e=""){c(e),a()},get placeholder(){return d()},set placeholder(e){d(e),a()},get size(){return v()},set size(e="m"){v(e),a()},get isinvalid(){return f()},set isinvalid(e=!1){f(e),a()},get disabled(){return m()},set disabled(e=!1){m(e),a()},get options(){return u()},set options(e){u(e),a()}})}customElements.define("m-select",L(W,{options:{attribute:"options",type:"Array"},id:{},valueselected:{},placeholder:{},size:{},isinvalid:{},disabled:{}},[],[],!0,Q));
+/* stylelint-enable string-no-newline */`};function re(E,o){F(o,!0),G(E,ee);let c=s(o,"id",7),v=s(o,"valueselected",7,""),d=s(o,"placeholder",7),u=s(o,"size",7,"m"),f=s(o,"isvalid",7,!1),m=s(o,"isinvalid",7,!1),h=s(o,"disabled",7,!1),b=s(o,"required",7,!1),g=s(o,"options",7),p=s(o,"onchange",7),x=s(o,"onblur",7),C=H(I(v()));function j(e,r,a){const l=["mc-select"];return e&&l.push("is-valid"),r&&l.push("is-invalid"),a&&l.push(`mc-select--${a}`),l.join(" ")}var i=$();i.__change=function(...e){var r;(r=p())==null||r.apply(this,e)};var q=w(i);{var L=e=>{var r=Y(),a=w(r);k(r),r.value=r.__value="",_(()=>S(a,`-- ${d()??""} --`)),y(e,r)};R(q,e=>{d()&&e(L)})}var M=J(q);return T(M,17,g,U,(e,r)=>{var a=Z(),l=w(a,!0);k(a);var B={};_(()=>{a.disabled=n(r).disabled,S(l,n(r).text),B!==(B=n(r).value)&&(a.value=(a.__value=n(r).value)??"")}),y(e,a)}),k(i),_(e=>{V(i,"id",c()),N(i,1,e,"svelte-13f62in"),i.disabled=h(),i.required=b()},[()=>K(j(f(),m(),u()))]),O("blur",i,function(...e){var r;(r=x())==null||r.apply(this,e)}),W(i,()=>n(C),e=>Q(C,e)),y(E,i),P({get id(){return c()},set id(e){c(e),t()},get valueselected(){return v()},set valueselected(e=""){v(e),t()},get placeholder(){return d()},set placeholder(e){d(e),t()},get size(){return u()},set size(e="m"){u(e),t()},get isvalid(){return f()},set isvalid(e=!1){f(e),t()},get isinvalid(){return m()},set isinvalid(e=!1){m(e),t()},get disabled(){return h()},set disabled(e=!1){h(e),t()},get required(){return b()},set required(e=!1){b(e),t()},get options(){return g()},set options(e){g(e),t()},get onchange(){return p()},set onchange(e){p(e),t()},get onblur(){return x()},set onblur(e){x(e),t()}})}A(["change"]);customElements.define("m-select",D(re,{options:{attribute:"options",type:"Array"},id:{},valueselected:{},placeholder:{},size:{},isvalid:{},isinvalid:{},disabled:{},required:{},onchange:{},onblur:{}},[],[],!0,X));
 //# 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  import type { SelectOption, SelectSize } from './select.types';\n\n  interface Props {\n    id: string;\n    name: string;\n    valueselected?: string;\n    placeholder: string;\n    size?: SelectSize;\n    isinvalid?: boolean;\n    disabled?: boolean;\n    options: Array<SelectOption>;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    valueselected = '',\n    placeholder,\n    size = 'm',\n    isinvalid = false,\n    disabled = false,\n    options,\n    ...events\n  }: Props = $props();\n  let valueSelected = $state(valueselected);\n\n  function setClasses(isinvalid: boolean, size: SelectSize): string {\n    const classes = ['mc-select'];\n\n    if (isinvalid) {\n      classes.push('is-invalid');\n    }\n    if (size) {\n      classes.push(`mc-select--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<select\n  {id}\n  class={setClasses(isinvalid, size)}\n  {disabled}\n  bind:value={valueSelected}\n  {...events}\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each options as opt}\n    <option disabled={opt.disabled} value={opt.value}>\n      {opt.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","valueselected","placeholder","size","isinvalid","disabled","options","events","$.rest_props","valueSelected","setClasses","classes","$.attribute_effect","select","$0","$$render","consequent","$.each","node_1","opt","option_1","$.get","$.set_text","text_1","option_1_value","$.bind_select_value","$$value","customElementForwardEvents"],"mappings":";;;;;0DAAA,oBA2BIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,wBAAgB,EAAE,EAClBC,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,eAAO,GAAG,EACVC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACJO,EAAAC,EAAAR,EAAA,uHAEDS,MAAuBR,EAAa,CAAA,CAAA,EAE/B,SAAAS,EAAWN,EAAoBD,EAA0B,CAC1D,MAAAQ,GAAW,WAAW,EAExB,OAAAP,GACFO,EAAQ,KAAK,YAAY,EAEvBR,GACFQ,EAAQ,KAAI,cAAeR,CAAI,EAAA,EAG1BQ,EAAQ,KAAK,GAAG,CACzB,WAQIC,EAAAC,EAAAC,IAAA,CAAA,GAAAhB,EAAA,EAAA,MAAAgB,EAAA,SAAAT,EAAA,EAAA,GAAAE,CAHG,GAAA,CAAA,IAAAG,EAAWN,IAAWD,GAAI,CAAA,EAAA,OAAA,gBAAA,mFAOzBD,KAAW,EAAA,KAAA,CAAA,kBAFdA,EAAW,GAAAa,EAAAC,CAAA,eAMTC,OAAAA,EAAAC,EAAA,GAAAZ,OAAWa,IAAG,0CACDC,EAAA,SAAAC,EAAAF,CAAG,EAAC,SACnBG,EAAAC,EAAAF,EAAAF,CAAG,EAAC,IAAI,EAD4BK,KAAAA,EAAAH,EAAAF,CAAG,EAAC,SAAJC,EAAA,OAAAA,EAAA,QAAAC,EAAAF,CAAG,EAAC,QAAK,oBAVtCM,EAAAZ,EAAA,IAAAQ,EAAAZ,CAAa,OAAbA,EAAaiB,CAAA,CAAA,yGA5BP,GAAE,wGAEX,IAAG,uDACE,GAAK,qDACN,GAAK,+DAkBpB,mKA5CYC"}
+{"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  import type { SelectOption, SelectSize } from './select.types';\n\n  interface Props {\n    id: string;\n    name: string;\n    valueselected?: string;\n    placeholder: string;\n    size?: SelectSize;\n    isvalid?: boolean;\n    isinvalid?: boolean;\n    disabled?: boolean;\n    required?: boolean;\n    options: Array<SelectOption>;\n    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    id,\n    valueselected = '',\n    placeholder,\n    size = 'm',\n    isvalid = false,\n    isinvalid = false,\n    disabled = false,\n    required = false,\n    options,\n    onchange,\n    onblur,\n  }: Props = $props();\n  let valueSelected = $state(valueselected);\n\n  function setClasses(isvalid: boolean, isinvalid: boolean, size: SelectSize): string {\n    const classes = ['mc-select'];\n\n    if(isvalid) {\n      classes.push('is-valid');\n    }\n\n    if (isinvalid) {\n      classes.push('is-invalid');\n    }\n    if (size) {\n      classes.push(`mc-select--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<select\n  {id}\n  class={setClasses(isvalid, isinvalid, size)}\n  {disabled}\n  {required}\n  bind:value={valueSelected}\n  {onchange}\n  {onblur}\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each options as opt}\n    <option disabled={opt.disabled} value={opt.value}>\n      {opt.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","valueselected","placeholder","size","isvalid","isinvalid","disabled","required","options","onchange","onblur","valueSelected","setClasses","classes","$$render","consequent","$.each","node_1","opt","option_1","$.get","$.set_text","text_1","option_1_value","$.clsx","$.bind_select_value","select","$$value","customElementForwardEvents"],"mappings":";;;;;2DAAA,qBA8BIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,wBAAgB,EAAE,EAClBC,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,eAAO,GAAG,EACVC,kBAAU,EAAK,EACfC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,mBAAW,EAAK,EAChBC,EAAOT,EAAAC,EAAA,UAAA,CAAA,EACPS,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACRU,EAAMX,EAAAC,EAAA,SAAA,CAAA,EAEJW,MAAuBV,EAAa,CAAA,CAAA,EAE/B,SAAAW,EAAWR,EAAkBC,EAAoBF,EAA0B,CAC5E,MAAAU,GAAW,WAAW,EAEzB,OAAAT,GACDS,EAAQ,KAAK,UAAU,EAGrBR,GACFQ,EAAQ,KAAK,YAAY,EAEvBV,GACFU,EAAQ,KAAI,cAAeV,CAAI,EAAA,EAG1BU,EAAQ,KAAK,GAAG,CACzB,4JAcQX,KAAW,EAAA,KAAA,CAAA,kBAFdA,EAAW,GAAAY,EAAAC,CAAA,eAMTC,OAAAA,EAAAC,EAAA,GAAAT,OAAWU,IAAG,0CACDC,EAAA,SAAAC,EAAAF,CAAG,EAAC,SACnBG,EAAAC,EAAAF,EAAAF,CAAG,EAAC,IAAI,EAD4BK,KAAAA,EAAAH,EAAAF,CAAG,EAAC,SAAJC,EAAA,OAAAA,EAAA,QAAAC,EAAAF,CAAG,EAAC,QAAK,iGAd3C,CAAA,IAAAM,EAAAZ,EAAWR,EAAS,EAAAC,IAAWF,EAAI,CAAA,CAAA,CAAA,oEAG9BsB,EAAAC,EAAA,IAAAN,EAAAT,CAAa,OAAbA,EAAagB,CAAA,CAAA,yGApCP,GAAE,wGAEX,IAAG,mDACA,GAAK,uDACH,GAAK,qDACN,GAAK,qDACL,GAAK,qKAuBpB,+NAtDYC"}

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

@@ -0,0 +1,15 @@
+import type { Meta } from '@storybook/html-vite';
+/**
+ * A select is a selection tool used in forms, allowing users to choose between multiple predefined options.
+ *
+ * The `MSelect` component is the **Svelte / WebComponent** implementation of the **Select** component of Mozaic Design System.
+ * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/select/).
+ */
+declare const _default: Meta;
+export default _default;
+export declare const Default: any;
+export declare const Small: any;
+export declare const Disabled: any;
+export declare const Required: any;
+export declare const WithValue: any;
+//# sourceMappingURL=Select.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA0CE,IAAI;AAxCT,wBAwCU;AAqBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,KAAK,KAAoB,CAAC;AAOvC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAQ1C,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAQ1C,eAAO,MAAM,SAAS,KAAoB,CAAC"}

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

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

package/dist/components/select/Select.svelte

@@ -1,43 +1,51 @@
-<svelte:options tag={null} />
+<svelte:options
+  customElement={{
+    tag: 'm-select',
+    props: {
+      options: { type: 'Array', attribute: 'options' },
+    },
+    extend: customElementForwardEvents,
+  }}
+/>
 
 <script lang="ts">
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import { createEventForwarder } from '../../utilities/EventForward';
-
+  import { customElementForwardEvents } from '../../utils';
   import type { SelectOption, SelectSize } from './select.types';
 
-  export let id: string;
-  export let valueselected = '';
-  export let placeholder: string;
-  export let size: SelectSize = 'm';
-  export let isvalid = false;
-  export let isinvalid = false;
-  export let disabled = false;
-  export let options: string;
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  const forwardEvents = createEventForwarder(get_current_component());
-  let valueSelected = '';
+  interface Props {
+    id: string;
+    name: string;
+    valueselected?: string;
+    placeholder: string;
+    size?: SelectSize;
+    isvalid?: boolean;
+    isinvalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    options: Array<SelectOption>;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
+  }
+
+  let {
+    id,
+    valueselected = '',
+    placeholder,
+    size = 'm',
+    isvalid = false,
+    isinvalid = false,
+    disabled = false,
+    required = false,
+    options,
+    onchange,
+    onblur,
+  }: Props = $props();
+  let valueSelected = $state(valueselected);
 
-  $: parsedOptions = options ? (JSON.parse(options) as SelectOption[]) : [];
-  $: valueSelected = valueselected;
-  $: userClass = $$props.class;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-  function setClasses(
-    isvalid: boolean,
-    isinvalid: boolean,
-    size: SelectSize,
-  ): string {
+  function setClasses(isvalid: boolean, isinvalid: boolean, size: SelectSize): string {
     const classes = ['mc-select'];
 
-    if (isvalid && !isinvalid) {
+    if(isvalid) {
       classes.push('is-valid');
     }
 
@@ -52,15 +60,14 @@
   }
 </script>
 
-<!-- svelte-ignore a11y-no-onchange -->
 <select
-  use:forwardEvents
   {id}
-  class="{setClasses(isvalid, isinvalid, size)} {userClass}"
+  class={setClasses(isvalid, isinvalid, size)}
   {disabled}
+  {required}
   bind:value={valueSelected}
-  on:change={() => eventHandler.dispatch('change', valueSelected)}
-  {...attributes}
+  {onchange}
+  {onblur}
 >
   {#if placeholder}
     <option value="" disabled selected>
@@ -68,14 +75,72 @@
     </option>
   {/if}
 
-  {#each parsedOptions as opt}
-    <option name={opt.value} disabled={opt.disabled} value={opt.value}>
+  {#each options as opt}
+    <option disabled={opt.disabled} value={opt.value}>
       {opt.text}
     </option>
   {/each}
 </select>
 
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/_c.select';
-</style>
+<style>/**
+ * 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: 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: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: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: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 {
+  border-color: var(--forms-color-border-read-only, #cccccc);
+  pointer-events: none;
+}
+.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);
+}
+.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);
+}
+.mc-select--s {
+  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 */</style>

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

@@ -5,10 +5,13 @@ interface Props {
     valueselected?: string;
     placeholder: string;
     size?: SelectSize;
+    isvalid?: boolean;
     isinvalid?: boolean;
     disabled?: boolean;
+    required?: boolean;
     options: Array<SelectOption>;
-    [key: string]: any;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
 }
 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,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA0DH,QAAA,MAAM,MAAM,2CAAsC,CAAC;AACnD,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":"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"}

package/dist/components/statusbadge/StatusBadge.js

@@ -1,4 +1,4 @@
-import{c as u,a as i,b,d as g,f as m,g as d,s as v,t as f,j as p,l as h,m as k,r as c,i as q}from"../../custom-element.js";import{s as w}from"../../slot.js";import{S as _}from"./StatusDot.js";var x=m('<div><!> <span class="mc-status-badge__label svelte-4n1qei"><!></span></div>');const y={hash:"svelte-4n1qei",code:`/**
+import{c as u,p as i,a as b,b as g,f as m,d,s as v,t as f,h as p,i as h,j as k,r as c,e as q}from"../../custom-element.js";import{s as w}from"../../slot.js";import{S as _}from"../statusdot/StatusDot.js";var x=m('<div><!> <span class="mc-status-badge__label svelte-4n1qei"><!></span></div>');const y={hash:"svelte-4n1qei",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-status-badge.svelte-4n1qei {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-4n1qei {color:var(--status-badge-color-label, #000000);}.mc-status-badge__label.svelte-4n1qei::first-letter {text-transform:uppercase;}.mc-status-badge--success.svelte-4n1qei {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-4n1qei {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-4n1qei {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-4n1qei {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-4n1qei {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-4n1qei {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-4n1qei {height:1rem;width:1rem;}.mc-status-dot--success.svelte-4n1qei {background-color:var(--status-dot-color-background-success, #3f9e10);}.mc-status-dot--error.svelte-4n1qei {background-color:var(--status-dot-color-background-error, #ea302d);}.mc-status-dot--warning.svelte-4n1qei {background-color:var(--status-dot-color-background-warning, #ea7315);}.mc-status-dot--neutral.svelte-4n1qei {background-color:var(--status-dot-color-background-neutral, #808080);}`};function S(a,t){i(t,!0),b(a,y);let e=g(t,"status",7);var r=x(),s=d(r);_(s,{get status(){return e()},size:"m"});var o=v(s,2),n=d(o);return w(n,t,"default",{}),c(o),c(r),f(()=>q(r,1,`mc-status-badge ${e()?`mc-status-badge--${e()}`:""}`,"svelte-4n1qei")),p(a,r),h({get status(){return e()},set status(l){e(l),k()}})}customElements.define("m-status-badge",u(S,{status:{}},["default"],[],!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 { BadgeStyle } from './badge.types';\n  import StatusDot from './StatusDot.svelte';\n\n  interface Props {\n    status: BadgeStyle;\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":";;0oEAAA,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 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":";;0oEAAA,oBAUQA,EAAMC,EAAAC,EAAA,SAAA,CAAA,oJAGeF,EAAM,EAAA,oBAAuBA,EAAM,CAAA,GAAK,EAAE,GAAA,eAAA,CAAA,8DAFvE"}

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

@@ -0,0 +1,13 @@
+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;
+//# sourceMappingURL=StatusBadge.stories.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,54 @@
+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 {
+    title: 'Status/Status Badge',
+    tags: ['autodocs', 'beta'],
+    argTypes: {
+        label: {
+            description: 'Specify the badge label',
+            control: 'text',
+        },
+        status: {
+            description: 'Specify the badge type',
+            control: { type: 'radio' },
+            options: ['neutral', 'warning', 'error', 'success', 'info'],
+        },
+    },
+};
+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 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 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 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');
+};

package/dist/components/statusbadge/StatusBadge.svelte

@@ -1,11 +1,11 @@
 <svelte:options customElement={{ tag: 'm-status-badge' }} />
 
 <script lang="ts">
-  import type { BadgeStyle } from './badge.types';
-  import StatusDot from './StatusDot.svelte';
+  import type { StatusBadgeStyle } from './StatusBadge.types';
+  import StatusDot from '../statusdot/StatusDot.svelte';
 
   interface Props {
-    status: BadgeStyle;
+    status: StatusBadgeStyle;
   }
 
   let { status }: Props = $props();

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

@@ -1,6 +1,6 @@
-import type { BadgeStyle } from './badge.types';
+import type { StatusBadgeStyle } from './StatusBadge.types';
 interface Props {
-    status: BadgeStyle;
+    status: StatusBadgeStyle;
 }
 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> & {

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,UAAU,EAAE,MAAM,eAAe,CAAC;AAI9C,UAAU,KAAK;IACb,MAAM,EAAE,UAAU,CAAC;CACpB;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;;;;;;UAAmF,CAAC;AACnF,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":"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"}

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

@@ -0,0 +1,2 @@
+export type StatusBadgeStyle = 'error' | 'success' | 'warning' | 'neutral' | 'info';
+//# sourceMappingURL=StatusBadge.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.types.d.ts","sourceRoot":"","sources":["../../../src/components/statusbadge/StatusBadge.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GACxB,OAAO,GACP,SAAS,GACT,SAAS,GACT,SAAS,GACT,MAAM,CAAC"}

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

@@ -0,0 +1 @@
+export {};

package/dist/components/statusdot/StatusDot.js

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

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

@@ -0,0 +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  import type { DotStyle, DotSize } from './StatusDot.types';\n\n  interface Props {\n    status: DotStyle;\n    size: DotSize;\n  }\n\n  let { size, status }: Props = $props();\n</script>\n\n<div\n  class=\"mc-status-dot {size ? `mc-status-dot--${size}` : ''}  {status\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","$.prop","$$props","status"],"mappings":";;mwBAAA,oBAUQA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAMF,EAAAC,EAAA,SAAA,CAAA,gDAIIF,IAAI,kBAAqBA,GAAS,GAAA,EAAE,KAAIG,IACxC,kBAAAA,MAClB,EAAE,GAAA,gBAAA,CAAA,2GALR"}

package/dist/components/statusdot/StatusDot.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta } from '@storybook/html-vite';
+/**
+ * A Status Dot indicates the status of an entity and can evolve at any time.
+ *
+ * The `MStatusDot` component is the **Svelte / WebComponent** implementation of the **Status Dot** 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;
+export declare const Large: any;
+//# sourceMappingURL=StatusDot.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDot.stories.d.ts","sourceRoot":"","sources":["../../../src/components/statusdot/StatusDot.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;GAIG;wBAiBE,IAAI;AAfT,wBAeU;AASV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAOzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAOzC,eAAO,MAAM,KAAK,KAAoB,CAAC;AAOvC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAOzC,eAAO,MAAM,KAAK,KAAoB,CAAC"}

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

@@ -0,0 +1,60 @@
+import { expect } from 'storybook/test';
+/**
+ * A Status Dot indicates the status of an entity and can evolve at any time.
+ *
+ * The `MStatusDot` component is the **Svelte / WebComponent** implementation of the **Status Dot** component of Mozaic Design System.
+ */
+export default {
+    title: 'Status/Status Dot',
+    tags: ['autodocs', 'code-only'],
+    argTypes: {
+        status: {
+            description: 'Specify the badge type',
+            control: { type: 'radio' },
+            options: ['neutral', 'warning', 'error', 'success', 'info'],
+        },
+        size: {
+            description: 'Specify the size of the badge',
+            control: { type: 'radio' },
+            options: ['s', 'm', 'l'],
+        },
+    },
+};
+const Template = (args) => {
+    const primary = document.createElement('m-status-dot');
+    if (args.status)
+        primary.setAttribute('status', args.status);
+    if (args.size)
+        primary.setAttribute('size', args.size);
+    return primary;
+};
+export const Default = Template.bind({});
+Default.args = {};
+Default.play = async ({ canvasElement }) => {
+    const dot = canvasElement.querySelector('m-status-dot');
+    expect(dot).not.toBeNull();
+};
+export const Warning = Template.bind({});
+Warning.args = { status: 'warning' };
+Warning.play = async ({ canvasElement }) => {
+    const dot = canvasElement.querySelector('m-status-dot');
+    expect(dot).toHaveAttribute('status', 'warning');
+};
+export const Error = Template.bind({});
+Error.args = { status: 'error' };
+Error.play = async ({ canvasElement }) => {
+    const dot = canvasElement.querySelector('m-status-dot');
+    expect(dot).toHaveAttribute('status', 'error');
+};
+export const Success = Template.bind({});
+Success.args = { status: 'success' };
+Success.play = async ({ canvasElement }) => {
+    const dot = canvasElement.querySelector('m-status-dot');
+    expect(dot).toHaveAttribute('status', 'success');
+};
+export const Large = Template.bind({});
+Large.args = { size: 'l' };
+Large.play = async ({ canvasElement }) => {
+    const dot = canvasElement.querySelector('m-status-dot');
+    expect(dot).toHaveAttribute('size', 'l');
+};