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

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,10 +1,7 @@
-import{n as M,c as A,p as F,a as G,b as l,v as H,l as I,f as k,s as J,d as x,t as _,u as K,e as N,o as O,m as n,h as y,i as P,j as i,r as j,w 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=k("<option disabled selected> </option>"),Z=k("<option> </option>"),$=k("<select><!><!></select>");const ee={hash:"svelte-14ej849",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.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
-/* stylelint-disable string-no-newline */.mc-select.svelte-14ej849 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:1rem;line-height:1.3;height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");border:1px solid #666666;border-radius:0.25rem;display:block;width:100%;color:#000000;background-color:#ffffff;text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;}.mc-select.svelte-14ej849:hover {border-color:#4d4d4d;box-shadow:0 0 0 1px #4d4d4d;}.mc-select.svelte-14ej849:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-select.svelte-14ej849:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");background-color:#d9d9d9;border-color:transparent;cursor:not-allowed;box-shadow:none;color:#737373;}.mc-select--readonly.svelte-14ej849 {border-color:#cccccc;pointer-events:none;}.mc-select.is-invalid.svelte-14ej849 {border-color:#ea302d;box-shadow:0 0 0 1px #ea302d;}.mc-select.is-invalid.svelte-14ej849:hover {border-color:#c61112;box-shadow:0 0 0 1px #c61112;}.mc-select--s.svelte-14ej849 {font-size:0.875rem;line-height: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-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 te(z,s){F(s,!0),G(z,ee);let c=l(s,"id",7),u=l(s,"valueselected",7,""),d=l(s,"placeholder",7),v=l(s,"size",7,"m"),m=l(s,"isvalid",7,!1),g=l(s,"isinvalid",7,!1),h=l(s,"disabled",7,!1),f=l(s,"required",7,!1),b=l(s,"options",7),p=l(s,"onchange",7),w=l(s,"onblur",7),E=H(I(u()));function B(e,t,a){const o=["mc-select"];return e&&o.push("is-valid"),t&&o.push("is-invalid"),a&&o.push(`mc-select--${a}`),o.join(" ")}var r=$();r.__change=function(...e){var t;(t=p())==null||t.apply(this,e)};var C=x(r);{var D=e=>{var t=Y(),a=x(t);j(t),t.value=t.__value="",_(()=>S(a,`-- ${d()??""} --`)),y(e,t)};R(C,e=>{d()&&e(D)})}var L=J(C);return T(L,17,b,U,(e,t)=>{var a=Z(),o=x(a,!0);j(a);var q={};_(()=>{a.disabled=n(t).disabled,S(o,n(t).text),q!==(q=n(t).value)&&(a.value=(a.__value=n(t).value)??"")}),y(e,a)}),j(r),_(e=>{V(r,"id",c()),N(r,1,e,"svelte-14ej849"),r.disabled=h(),r.required=f()},[()=>K(B(m(),g(),v()))]),O("blur",r,function(...e){var t;(t=w())==null||t.apply(this,e)}),W(r,()=>n(E),e=>Q(E,e)),y(z,r),P({get id(){return c()},set id(e){c(e),i()},get valueselected(){return u()},set valueselected(e=""){u(e),i()},get placeholder(){return d()},set placeholder(e){d(e),i()},get size(){return v()},set size(e="m"){v(e),i()},get isvalid(){return m()},set isvalid(e=!1){m(e),i()},get isinvalid(){return g()},set isinvalid(e=!1){g(e),i()},get disabled(){return h()},set disabled(e=!1){h(e),i()},get required(){return f()},set required(e=!1){f(e),i()},get options(){return b()},set options(e){b(e),i()},get onchange(){return p()},set onchange(e){p(e),i()},get onblur(){return w()},set onblur(e){w(e),i()}})}M(["change"]);customElements.define("m-select",A(te,{options:{attribute:"options",type:"Array"},id:{},valueselected:{},placeholder:{},size:{},isvalid:{},isinvalid:{},disabled:{},required:{},onchange:{},onblur:{}},[],[],!0,X));
+/* 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,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"}
+{"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"}

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

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