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

package/dist/components/radiogroup/RadioGroup.stories.js

@@ -1,157 +1,62 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { action } from 'storybook/actions';
-/**
- * > A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone.
- *
- * The `MRadioGroup` component is the **Svelte / WebComponent** implementation of the **Radio** component of Mozaic Design System.<br/>
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/radio/code/#implement-as-a-group).
- */
-export default {
+const meta = {
     title: 'Form Elements/Radio Group',
-    tags: ['autodocs', 'beta'],
-    argTypes: {
-        legend: {
-            description: 'Specify the label of the group.',
-            control: { type: 'text' },
-        },
-        id: {
-            description: 'Specifiy the radio group id',
-            control: { type: 'text' },
-        },
-        selectedvalue: {
-            description: 'Specifiy the value of the selected element',
-            control: { type: 'text' },
-        },
-        inline: {
-            description: 'Render radio group horizontally',
-            control: { type: 'boolean' },
-        },
-        isinvalid: {
-            description: 'Render radio group invalid',
-            control: { type: 'boolean' },
-        },
-        options: {
-            description: 'Specify the select options. It needs to be `JSON.stringify(options)`',
-            control: { type: 'array' },
-        },
-        onChange: {
-            name: 'change',
-            description: 'On radio change',
-            action: 'change',
-            table: {
-                category: 'Events',
+    component: 'm-radio-group',
+    args: {
+        name: 'radioGroupName',
+        value: 'radio2',
+        options: [
+            {
+                id: 'radio-01',
+                label: 'Radio button Label',
+                value: 'radio1',
             },
-        },
-        onBlur: {
-            description: 'On radio blurred',
-            action: 'blur',
-            table: {
-                category: 'Events',
+            {
+                id: 'radio-02',
+                label: 'Radio button Label',
+                value: 'radio2',
             },
-        },
+            {
+                id: 'radio-03',
+                label: 'Radio button Label',
+                value: 'radio3',
+            },
+            {
+                id: 'radio-04',
+                label: 'Radio button Label',
+                value: 'radio4',
+            },
+        ],
+    },
+    render: (args) => {
+        const onInput = action('input');
+        const onChange = action('change');
+        const onFocus = action('focus');
+        const onBlur = action('blur');
+        return html `
+      <m-radio-group
+        name=${ifDefined(args.name)}
+        .options=${ifDefined(args.options)}
+        value=${ifDefined(args.value)}
+        isinvalid=${ifDefined(args.isinvalid)}
+        inline=${ifDefined(args.inline)}
+        @input=${(event) => {
+            onInput(event);
+        }}
+        @change=${(event) => {
+            onChange(event);
+        }}
+        @focus=${(event) => {
+            onFocus(event);
+        }}
+        @blur=${(event) => {
+            onBlur(event);
+        }}
+      ></m-radio-group>
+    `;
     },
 };
-const Template = (args) => {
-    const MRadioGroup = document.createElement('m-radio-group');
-    const options = [];
-    MRadioGroup.setAttribute('id', args.id || 'radio-group-id');
-    MRadioGroup.setAttribute('selectedvalue', args.selectedvalue || 'option2');
-    MRadioGroup.isinvalid = args.isinvalid || false;
-    if (args.inline)
-        MRadioGroup.setAttribute('inline', args.inline);
-    MRadioGroup.setAttribute('legend', args.legend || 'Group radio Title');
-    if (args.options || options) {
-        MRadioGroup.options = args.options || options;
-    }
-    MRadioGroup.addEventListener('change', action('onChange'));
-    MRadioGroup.addEventListener('blur', action('onBlur'));
-    return MRadioGroup;
-};
-export const Default = Template.bind({});
-Default.args = {
-    options: [
-        {
-            id: 'option1',
-            name: 'Option name 1',
-            label: 'Option 1',
-            value: 'option1',
-            disabled: false,
-            checked: true,
-        },
-        {
-            id: 'option2',
-            name: 'Option name 2',
-            label: 'Option 2',
-            value: 'option2',
-            disabled: false,
-            checked: false,
-        },
-        {
-            id: 'option3',
-            name: 'Option name 3',
-            label: 'Option 3',
-            value: 'option3',
-            disabled: false,
-            checked: false,
-        },
-    ],
-};
-export const Inline = Template.bind({});
-Inline.args = {
-    inline: true,
-    options: [
-        {
-            id: 'option1',
-            name: 'Option name 1',
-            label: 'Option 1',
-            value: 'option1',
-            disabled: false,
-            checked: true,
-        },
-        {
-            id: 'option2',
-            name: 'Option name 2',
-            label: 'Option 2',
-            value: 'option2',
-            disabled: false,
-            checked: false,
-        },
-        {
-            id: 'option3',
-            name: 'Option name 3',
-            label: 'Option 3',
-            value: 'option3',
-            disabled: false,
-            checked: false,
-        },
-    ],
-};
-export const Invalid = Template.bind({});
-Invalid.args = {
-    isinvalid: true,
-    options: [
-        {
-            id: 'option1',
-            name: 'Option name 1',
-            label: 'Option 1',
-            value: 'option1',
-            disabled: false,
-            checked: true,
-        },
-        {
-            id: 'option2',
-            name: 'Option name 2',
-            label: 'Option 2',
-            value: 'option2',
-            disabled: false,
-            checked: false,
-        },
-        {
-            id: 'option3',
-            name: 'Option name 3',
-            label: 'Option 3',
-            value: 'option3',
-            disabled: false,
-            checked: false,
-        },
-    ],
-};
+export default meta;
+export const Default = {};

package/dist/components/radiogroup/RadioGroup.svelte

@@ -10,59 +10,61 @@
 
 <script lang="ts">
   import { customElementForwardEvents } from '../../utils';
-  import type { RadioGroupOption } from './radioGroup.types';
-
+  /**
+   * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.
+   */
   interface Props {
-    id: string;
-    selectedvalue?: string;
-    options: Array<RadioGroupOption>;
-    legend: string;
-    inline: boolean;
+    /**
+     * The name attribute for the radio element, typically used for form submission.
+     */
+    name: string;
+    /**
+     * The current value of the radio group.
+     */
+    value?: string;
+    /**
+     * list of properties of each radio button of the radio group
+     */
+    options: Array<{
+      id: string;
+      label: string;
+      value: string;
+      disabled?: boolean;
+    }>;
+    /**
+     * If `true`, applies an invalid state to the radio group.
+     */
     isinvalid?: boolean;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * If `true`, make the form element of the group inline.
+     */
+    inline?: boolean;
   }
 
   let {
-    id,
-    selectedvalue = $bindable(),
+    value = $bindable(),
+    name,
     options,
-    legend,
     inline,
-    isinvalid = false,
-    onchange,
-    onblur,
+    isinvalid,
   }: Props = $props();
 </script>
 
-<div {id} class="radio-group-container">
-  <fieldset class="mc-field mc-field--group">
-    {#if legend && legend.length}
-      <legend class="mc-field__legend">
-        {legend}
-      </legend>
-    {/if}
-
-    <div class="mc-field__content {inline ? 'mc-field__content--inline' : ''}">
-      {#each options as opt (opt.id)}
-        <div class="mc-radio mc-field__item">
-          <input
-            type="radio"
-            class="mc-radio__input"
-            class:is-invalid={isinvalid}
-            id={opt.id}
-            name={opt.name}
-            bind:group={selectedvalue}
-            value={opt.value}
-            disabled={opt.disabled}
-            {onchange}
-            {onblur}
-          />
-          <label for={opt.id} class="mc-radio__label">{opt.label}</label>
-        </div>
-      {/each}
+<div class={['mc-field__content', inline && 'mc-field__content--inline']}>
+  {#each options as option}
+    <div class="mc-radio mc-field__item">
+      <input
+        type="radio"
+        class={['mc-radio__input', isinvalid && 'is-invalid']}
+        id={option.id}
+        {name}
+        bind:group={value}
+        value={option.value}
+        disabled={option.disabled}
+      />
+      <label for={option.id} class="mc-radio__label">{option.label}</label>
     </div>
-  </fieldset>
+  {/each}
 </div>
 
 <style>/**
@@ -210,4 +212,9 @@
   gap: 0.25rem 1rem;
 }
 
-/* stylelint-enable string-no-newline */</style>
+/* stylelint-enable string-no-newline */
+.mc-field__content:where(.mc-field__content--inline) {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0.25rem 1rem;
+}</style>

package/dist/components/radiogroup/RadioGroup.svelte.d.ts

@@ -1,15 +1,34 @@
-import type { RadioGroupOption } from './radioGroup.types';
+/**
+ * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.
+ */
 interface Props {
-    id: string;
-    selectedvalue?: string;
-    options: Array<RadioGroupOption>;
-    legend: string;
-    inline: boolean;
+    /**
+     * The name attribute for the radio element, typically used for form submission.
+     */
+    name: string;
+    /**
+     * The current value of the radio group.
+     */
+    value?: string;
+    /**
+     * list of properties of each radio button of the radio group
+     */
+    options: Array<{
+        id: string;
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }>;
+    /**
+     * If `true`, applies an invalid state to the radio group.
+     */
     isinvalid?: boolean;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * If `true`, make the form element of the group inline.
+     */
+    inline?: boolean;
 }
-declare const RadioGroup: import("svelte").Component<Props, {}, "selectedvalue">;
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;
 //# sourceMappingURL=RadioGroup.svelte.d.ts.map

package/dist/components/radiogroup/RadioGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/radiogroup/RadioGroup.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGzD,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAiDH,QAAA,MAAM,UAAU,wDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/radiogroup/RadioGroup.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmCH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/select/README.md

@@ -0,0 +1,18 @@
+# `m-select`
+
+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.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `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` |   |
+| `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` |   |
+| `size` | Determines the size of the select. | `'s'` `'m'` | `m` |
+| `readonly` | If `true`, the select is read-only (cannot be edited). | `boolean` |   |
+

package/dist/components/select/Select.js

@@ -1,7 +1,7 @@
-import{n as D,c as F,p as G,a as H,b as s,v as I,l as J,f as k,s as K,d as w,t as _,u as N,e as O,o as P,m as n,h as z,i as Q,j as t,r as y,w as R,g as j}from"../../custom-element.js";import{i as T}from"../../if.js";import{e as U,i as V}from"../../each.js";import{s as W,d as X}from"../../attributes.js";import{c as Y}from"../../custom-element-forward-events.js";var Z=k("<option disabled selected> </option>"),$=k("<option> </option>"),ee=k("<select><!><!></select>");const re={hash:"svelte-6nznl5",code:`/**
+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:`/**
  * 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-enable string-no-newline */`};function oe(E,o){G(o,!0),H(E,re);let c=s(o,"id",7),v=s(o,"valueselected",7,""),d=s(o,"placeholder",7),u=s(o,"size",7,"m"),m=s(o,"isvalid",7,!1),f=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=I(J(v()));function B(e,r,a){const i=["mc-select"];return e&&i.push("is-valid"),r&&i.push("is-invalid"),a&&i.push(`mc-select--${a}`),i.join(" ")}var L={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 m()},set isvalid(e=!1){m(e),t()},get isinvalid(){return f()},set isinvalid(e=!1){f(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()}},l=ee();l.__change=function(...e){var r;(r=p())==null||r.apply(this,e)};var q=w(l);{var M=e=>{var r=Z(),a=w(r);y(r),r.value=r.__value="",_(()=>j(a,`-- ${d()??""} --`)),z(e,r)};T(q,e=>{d()&&e(M)})}var A=K(q);return U(A,17,g,V,(e,r)=>{var a=$(),i=w(a,!0);y(a);var S={};_(()=>{a.disabled=n(r).disabled,j(i,n(r).text),S!==(S=n(r).value)&&(a.value=(a.__value=n(r).value)??"")}),z(e,a)}),y(l),_(e=>{W(l,"id",c()),O(l,1,e,"svelte-6nznl5"),l.disabled=h(),l.required=b()},[()=>N(B(m(),f(),u()))]),P("blur",l,function(...e){var r;(r=x())==null||r.apply(this,e)}),X(l,()=>n(C),e=>R(C,e)),z(E,l),Q(L)}D(["change"]);customElements.define("m-select",F(oe,{options:{attribute:"options",type:"Array"},id:{},valueselected:{},placeholder:{},size:{},isvalid:{},isinvalid:{},disabled:{},required:{},onchange:{},onblur:{}},[],[],!0,Y));
+/* 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));
 //# 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    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,qGA5BkB,GAAE,wGAEX,IAAG,mDACA,GAAK,uDACH,GAAK,qDACN,GAAK,qDACL,GAAK,6TAoCVX,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,gGAd3C,CAAA,IAAAM,EAAAZ,EAAWR,EAAO,EAAEC,EAAS,EAAEF,EAAI,CAAA,CAAA,CAAA,oEAG9BsB,EAAAC,EAAA,IAAAN,EAAAT,CAAa,OAAbA,EAAagB,CAAA,CAAA,aAP3B,+NAtDYC"}
+{"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"}

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

@@ -0,0 +1,76 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Select from './Select.svelte';
+describe('m-select component', () => {
+    const baseProps = {
+        id: 'test-select',
+        name: 'test-name',
+        options: [
+            { text: 'Option 1', value: '1' },
+            { text: 'Option 2', value: '2', disabled: true },
+            { text: 'Option 3', value: '3' },
+        ],
+        value: '1',
+    };
+    it('renders a select element with correct options', () => {
+        const { container } = render(Select, { props: baseProps });
+        const select = container.querySelector('select');
+        const options = container.querySelectorAll('option');
+        expect(select).toBeTruthy();
+        expect(options.length).toBe(3);
+        expect(options[0].textContent).toBe('Option 1');
+        expect(options[0].value).toBe('1');
+        expect(options[1].disabled).toBe(true);
+        expect(options[2].value).toBe('3');
+    });
+    it('sets the correct initial value', () => {
+        const { container } = render(Select, { props: baseProps });
+        const select = container.querySelector('select');
+        expect(select.value).toBe('1');
+    });
+    it('updates value on change (with bind:value)', async () => {
+        const { container } = render(Select, {
+            props: { ...baseProps, value: '1' },
+        });
+        const select = container.querySelector('select');
+        await fireEvent.change(select, { target: { value: '3' } });
+        expect(select.value).toBe('3');
+    });
+    it('displays placeholder if provided', () => {
+        const { container } = render(Select, {
+            props: { ...baseProps, placeholder: 'Please select', value: '' },
+        });
+        const placeholderOption = container.querySelector('option');
+        expect(placeholderOption?.textContent).toContain('Please select');
+        expect(placeholderOption?.disabled).toBe(true);
+        expect(placeholderOption?.selected).toBe(true);
+    });
+    it('applies the disabled prop', () => {
+        const { container } = render(Select, {
+            props: { ...baseProps, disabled: true },
+        });
+        const select = container.querySelector('select');
+        expect(select.disabled).toBe(true);
+    });
+    it('applies the readonly class when readonly is true', () => {
+        const { container } = render(Select, {
+            props: { ...baseProps, readonly: true },
+        });
+        const select = container.querySelector('select');
+        expect(select.classList.contains('mc-select--readonly')).toBe(true);
+    });
+    it('applies the is-invalid class when isinvalid is true', () => {
+        const { container } = render(Select, {
+            props: { ...baseProps, isinvalid: true },
+        });
+        const select = container.querySelector('select');
+        expect(select.classList.contains('is-invalid')).toBe(true);
+    });
+    it('applies the correct size class', () => {
+        const { container } = render(Select, {
+            props: { ...baseProps, size: 's' },
+        });
+        const select = container.querySelector('select');
+        expect(select.classList.contains('mc-select--s')).toBe(true);
+    });
+});

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

@@ -1,15 +1,11 @@
-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;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const WithValue: Story;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
 //# sourceMappingURL=Select.stories.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAgEX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}