@mozaic-ds/web-components 1.0.0-alpha.3 → 1.0.0-alpha.4

package/dist/components/overlayloader/OverlayLoader.svelte

@@ -0,0 +1,23 @@
+<svelte:options customElement="m-overlay-loader" />
+
+<script lang="ts">
+  import Loader from '../loader/Loader.svelte';
+  interface Props {
+    isvisible?: boolean;
+    text: string;
+    dialoglabel: string;
+  }
+
+  let { isvisible = false, text, dialoglabel }: Props = $props();
+</script>
+
+<div class="mc-overlay-loader" class:is-visible={isvisible}>
+  <div role="dialog" tabindex="-1" aria-labelledby={dialoglabel}>
+    <Loader size="l" theme="inverse" {text} />
+  </div>
+</div>
+
+<style lang="scss">
+  @use '@mozaic-ds/styles/components/loader';
+  @use '@mozaic-ds/styles/components/overlay';
+</style>

package/dist/components/quantityselector/QuantitySelector.d.ts

@@ -0,0 +1,4 @@
+export {}
+import _default from './QuantitySelector.svelte'
+export default _default
+export {}

package/dist/components/quantityselector/QuantitySelector.js

@@ -0,0 +1,7 @@
+import{d as W,c as A,p as C,a as H,b as n,t as J,e as c,s as h,k as I,f as L,g as M,h as O,i as o,r as d,j as B}from"../../custom-element.js";import{r as P,s as i}from"../../attributes.js";import{b as R}from"../../input.js";function T(m,e,l,r,a){e()>l()&&e(l()),e()<r()&&e(r()),a()(e())}function U(m,e,l,r,a){e()-Number(l())>r()&&e(e()-Number(l())),a()(e())}function X(m,e,l,r,a){e()+Number(l())<r()&&e(e()+Number(l())),a()(e())}var Y=J('<div><input type="number" class="mc-quantity-selector__control svelte-rbl4od" spellcheck="false"> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-rbl4od" tabindex="-1"><span class="mc-quantity-selector__icon svelte-rbl4od"><ui-more-24></ui-more-24></span> <span class="mc-quantity-selector__label svelte-rbl4od"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-rbl4od" tabindex="-1"><span class="mc-quantity-selector__icon svelte-rbl4od"><ui-less-24></ui-less-24></span> <span class="mc-quantity-selector__label svelte-rbl4od"> </span></button></div>',2);const Z={hash:"svelte-rbl4od",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-quantity-selector.svelte-rbl4od {background-color:var(--forms-color-background-default, #ffffff);border:1px solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;border-radius:0.25rem;display:flex;gap:0.25rem;padding:0.1875rem;position:relative;}.mc-quantity-selector.svelte-rbl4od,
+.mc-quantity-selector.svelte-rbl4od :where(.svelte-rbl4od) {box-sizing:border-box;}.mc-quantity-selector__control.svelte-rbl4od {background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none;
+  /* For Blink & WebKit rendering engines */
+  /* For Gecko rendering engine */padding:0;font-size:inherit;font-size:1rem;line-height:1.5;font-weight:600;cursor:inherit;text-align:center;flex-grow:1;}.mc-quantity-selector__control[type=number].svelte-rbl4od::-webkit-inner-spin-button, .mc-quantity-selector__control[type=number].svelte-rbl4od::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-quantity-selector__control[type=number].svelte-rbl4od {appearance:textfield;}.mc-quantity-selector__control.svelte-rbl4od::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-quantity-selector__button.svelte-rbl4od {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;height:2.5rem;width:2.5rem;border-radius:100%;color:var(--quantity-selector-color-button-text-default, #242938);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}.mc-quantity-selector__button.svelte-rbl4od:disabled {color:var(--quantity-selector-color-button-text-disabled, #d9d9d9);cursor:not-allowed;}.mc-quantity-selector__button.svelte-rbl4od:hover:not(:disabled) {background-color:var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1));}.mc-quantity-selector__button--decrease.svelte-rbl4od {order:-1;}.mc-quantity-selector__icon.svelte-rbl4od {height:1.5rem;width:1.5rem;fill:currentcolor;}.mc-quantity-selector__label.svelte-rbl4od {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-quantity-selector.svelte-rbl4od::after {transition:box-shadow 200ms ease;border-radius:0.25rem;content:"";position:absolute;inset:-0.125rem var(--inset-x, 3rem);pointer-events:none;display:block;}.mc-quantity-selector.svelte-rbl4od:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 1px var(--forms-color-border-hover, #4d4d4d);}.mc-quantity-selector.svelte-rbl4od:has(input:where(.svelte-rbl4od):disabled) {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none;}.mc-quantity-selector.svelte-rbl4od:has(input:where(.svelte-rbl4od):disabled) .mc-quantity-selector__button:where(.svelte-rbl4od):disabled {color:var(--forms-color-icon-disabled, #737373);}.mc-quantity-selector.svelte-rbl4od:has(input:where(.svelte-rbl4od):focus)::after {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-quantity-selector--s.svelte-rbl4od {--inset-x: 2rem;height:2rem;}.mc-quantity-selector--s.svelte-rbl4od .mc-quantity-selector__button:where(.svelte-rbl4od) {height:1.5rem;width:1.5rem;}.mc-quantity-selector--s.svelte-rbl4od .mc-quantity-selector__icon:where(.svelte-rbl4od) {height:1.25rem;width:1.25rem;}`};function $(m,e){C(e,!0),H(m,Z);let l=n(e,"id",7,void 0),r=n(e,"quantity",15,1),a=n(e,"min",7,1),u=n(e,"max",7,100),y=n(e,"small",7,!1),g=n(e,"decrementlabel",7,"Decrement"),q=n(e,"inputarialabel",7,"Quantity Selector"),x=n(e,"incrementlabel",7,"Increment"),v=n(e,"disabled",7,!1),w=n(e,"name",7,"quantity-selector-input"),_=n(e,"step",7,1),k=n(e,"increment",7),D=n(e,"decrement",7),N=n(e,"inputqty",7);var p=Y();let Q;var s=c(p);P(s),s.__input=[T,r,u,a,N];var b=h(s,2);b.__click=[X,r,_,u,k];var S=c(b),E=c(S);I(E,1,"svelte-rbl4od"),d(S);var j=h(S,2),G=c(j,!0);d(j),d(b);var f=h(b,2);f.__click=[U,r,_,a,D];var z=c(f),K=c(z);I(K,1,"svelte-rbl4od"),d(z);var F=h(z,2),V=c(F,!0);return d(F),d(f),d(p),L(()=>{Q=I(p,1,"mc-quantity-selector svelte-rbl4od",null,Q,{"mc-quantity-selector--s":y()}),i(s,"id",l()),i(s,"name",w()),i(s,"aria-label",q()),i(s,"aria-valuemin",a()),i(s,"aria-valuemax",u()),i(s,"aria-valuenow",r()),s.disabled=v(),i(b,"aria-controls",l()),b.disabled=r()===u()||v(),B(G,g()),i(f,"aria-controls",l()),f.disabled=r()===a()||v(),B(V,x())}),R(s,r),M(m,p),O({get id(){return l()},set id(t=void 0){l(t),o()},get quantity(){return r()},set quantity(t=1){r(t),o()},get min(){return a()},set min(t=1){a(t),o()},get max(){return u()},set max(t=100){u(t),o()},get small(){return y()},set small(t=!1){y(t),o()},get decrementlabel(){return g()},set decrementlabel(t="Decrement"){g(t),o()},get inputarialabel(){return q()},set inputarialabel(t="Quantity Selector"){q(t),o()},get incrementlabel(){return x()},set incrementlabel(t="Increment"){x(t),o()},get disabled(){return v()},set disabled(t=!1){v(t),o()},get name(){return w()},set name(t="quantity-selector-input"){w(t),o()},get step(){return _()},set step(t=1){_(t),o()},get increment(){return k()},set increment(t){k(t),o()},get decrement(){return D()},set decrement(t){D(t),o()},get inputqty(){return N()},set inputqty(t){N(t),o()}})}W(["input","click"]);customElements.define("m-qty-selector",A($,{id:{},quantity:{},min:{},max:{},small:{},decrementlabel:{},inputarialabel:{},incrementlabel:{},disabled:{},name:{},step:{},increment:{},decrement:{},inputqty:{}},[],[],!1));
+//# sourceMappingURL=QuantitySelector.js.map

package/dist/components/quantityselector/QuantitySelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuantitySelector.js","sources":["../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-qty-selector',\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  interface Props {\n    id?: string | undefined;\n    quantity?: number;\n    min?: number;\n    max?: number;\n    small?: boolean;\n    decrementlabel?: string;\n    inputarialabel?: string;\n    incrementlabel?: string;\n    disabled?: boolean;\n    name?: string;\n    step?: number;\n    [key: string]: any;\n  }\n\n  let {\n    id = undefined,\n    quantity = $bindable(1),\n    min = 1,\n    max = 100,\n    small = false,\n    decrementlabel = 'Decrement',\n    inputarialabel = 'Quantity Selector',\n    incrementlabel = 'Increment',\n    disabled = false,\n    name = 'quantity-selector-input',\n    step = 1,\n    increment,\n    decrement,\n    inputqty,\n  }: Props = $props();\n\n  function handleValue(): void {\n    if (quantity > max) {\n      quantity = max;\n    }\n    if (quantity < min) {\n      quantity = min;\n    }\n    inputqty(quantity);\n  }\n\n  function handleDecrement(): void {\n    if (quantity - Number(step) > min) {\n      quantity = quantity - Number(step);\n    }\n    decrement(quantity);\n  }\n\n  function handleIncrement(): void {\n    if (quantity + Number(step) < max) {\n      quantity = quantity + Number(step);\n    }\n    increment(quantity);\n  }\n</script>\n\n<div class=\"mc-quantity-selector\" class:mc-quantity-selector--s={small}>\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value={quantity}\n    oninput={handleValue}\n    class=\"mc-quantity-selector__control\"\n    aria-label={inputarialabel}\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={quantity}\n    spellcheck=\"false\"\n    {disabled}\n  />\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n    tabindex=\"-1\"\n    onclick={handleIncrement}\n    disabled={quantity === max || disabled}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <ui-more-24></ui-more-24>\n    </span>\n    <span class=\"mc-quantity-selector__label\">{decrementlabel}</span>\n  </button>\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--decrease\"\n    tabindex=\"-1\"\n    onclick={handleDecrement}\n    disabled={quantity === min || disabled}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <ui-less-24></ui-less-24>\n    </span>\n    <span class=\"mc-quantity-selector__label\">{incrementlabel}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n"],"names":["handleValue","_","quantity","max","min","inputqty","handleDecrement","__1","step","decrement","handleIncrement","__2","increment","id","small","decrementlabel","inputarialabel","incrementlabel","disabled","name","$.prop","$$props"],"mappings":"gOAwCW,SAAAA,EAAoBC,EAAAC,EAAAC,EAAAC,EAAAC,EAAA,CACvBH,EAAQ,EAAGC,KACbD,EAAWC,EAAG,CAAA,EAEZD,EAAQ,EAAGE,KACbF,EAAWE,EAAG,CAAA,EAEhBC,EAAQ,EAACH,GAAQ,CACnB,CAES,SAAAI,EAAwBC,EAAAL,EAAAM,EAAAJ,EAAAK,EAAA,CAC3BP,IAAW,OAAOM,EAAI,CAAA,EAAIJ,EAAG,GAC/BF,EAAWA,EAAW,EAAA,OAAOM,EAAI,CAAA,CAAA,EAEnCC,EAAS,EAACP,GAAQ,CACpB,CAES,SAAAQ,EAAwBC,EAAAT,EAAAM,EAAAL,EAAAS,EAAA,CAC3BV,IAAW,OAAOM,EAAI,CAAA,EAAIL,EAAG,GAC/BD,EAAWA,EAAW,EAAA,OAAOM,EAAI,CAAA,CAAA,EAEnCI,EAAS,EAACV,GAAQ,CACpB;;;;;u+FAtCE,IAAAW,aAAK,MAAS,EACdX,oBAAqB,CAAC,EACtBE,cAAM,CAAC,EACPD,cAAM,GAAG,EACTW,gBAAQ,EAAK,EACbC,yBAAiB,WAAW,EAC5BC,yBAAiB,mBAAmB,EACpCC,yBAAiB,WAAW,EAC5BC,mBAAW,EAAK,EAChBC,eAAO,yBAAyB,EAChCX,eAAO,CAAC,EACRI,EAASQ,EAAAC,EAAA,YAAA,CAAA,EACTZ,EAASW,EAAAC,EAAA,YAAA,CAAA,EACThB,EAAQe,EAAAC,EAAA,WAAA,CAAA,6CAkCCrB,EAAWE,EAAAC,EAAAC,EAAAC,CAAA,0BAcXK,kHAaAJ,4LAjCoDQ,EAAK,EAAA,iDAQtDE,GAAc,sBACXZ,GAAG,sBACHD,GAAG,sBACHD,GAAQ,qCAMRW,GAAE,aAIPX,EAAQ,IAAKC,EAAG,GAAIe,EAAQ,MAKKH,GAAc,sBAI1CF,GAAE,aAIPX,EAAQ,IAAKE,EAAG,GAAIc,EAAQ,MAKKD,GAAc,QAlC7Cf,CAAQ,0CA9Cf,OAAS,qDACO,EAAC,2CAChB,EAAC,2CACD,IAAG,+CACD,GAAK,iEACI,YAAW,iEACX,oBAAmB,iEACnB,YAAW,qDACjB,GAAK,6CACT,0BAAyB,6CACzB,EAAC"}

package/dist/components/quantityselector/QuantitySelector.svelte

@@ -0,0 +1,111 @@
+<svelte:options
+  customElement={{
+    tag: 'm-qty-selector',
+    shadow: 'none',
+  }}
+/>
+
+<script lang="ts">
+  interface Props {
+    id?: string | undefined;
+    quantity?: number;
+    min?: number;
+    max?: number;
+    small?: boolean;
+    decrementlabel?: string;
+    inputarialabel?: string;
+    incrementlabel?: string;
+    disabled?: boolean;
+    name?: string;
+    step?: number;
+    [key: string]: any;
+  }
+
+  let {
+    id = undefined,
+    quantity = $bindable(1),
+    min = 1,
+    max = 100,
+    small = false,
+    decrementlabel = 'Decrement',
+    inputarialabel = 'Quantity Selector',
+    incrementlabel = 'Increment',
+    disabled = false,
+    name = 'quantity-selector-input',
+    step = 1,
+    increment,
+    decrement,
+    inputqty,
+  }: Props = $props();
+
+  function handleValue(): void {
+    if (quantity > max) {
+      quantity = max;
+    }
+    if (quantity < min) {
+      quantity = min;
+    }
+    inputqty(quantity);
+  }
+
+  function handleDecrement(): void {
+    if (quantity - Number(step) > min) {
+      quantity = quantity - Number(step);
+    }
+    decrement(quantity);
+  }
+
+  function handleIncrement(): void {
+    if (quantity + Number(step) < max) {
+      quantity = quantity + Number(step);
+    }
+    increment(quantity);
+  }
+</script>
+
+<div class="mc-quantity-selector" class:mc-quantity-selector--s={small}>
+  <input
+    type="number"
+    {id}
+    {name}
+    bind:value={quantity}
+    oninput={handleValue}
+    class="mc-quantity-selector__control"
+    aria-label={inputarialabel}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-valuenow={quantity}
+    spellcheck="false"
+    {disabled}
+  />
+  <button
+    type="button"
+    aria-controls={id}
+    class="mc-quantity-selector__button mc-quantity-selector__button--increase"
+    tabindex="-1"
+    onclick={handleIncrement}
+    disabled={quantity === max || disabled}
+  >
+    <span class="mc-quantity-selector__icon">
+      <ui-more-24></ui-more-24>
+    </span>
+    <span class="mc-quantity-selector__label">{decrementlabel}</span>
+  </button>
+  <button
+    type="button"
+    aria-controls={id}
+    class="mc-quantity-selector__button mc-quantity-selector__button--decrease"
+    tabindex="-1"
+    onclick={handleDecrement}
+    disabled={quantity === min || disabled}
+  >
+    <span class="mc-quantity-selector__icon">
+      <ui-less-24></ui-less-24>
+    </span>
+    <span class="mc-quantity-selector__label">{incrementlabel}</span>
+  </button>
+</div>
+
+<style lang="scss">
+  @use '@mozaic-ds/styles/components/quantity-selector';
+</style>

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,4 @@
+export {}
+import _default from './Radio.svelte'
+export default _default
+export {}

package/dist/components/radio/Radio.js

@@ -0,0 +1,4 @@
+import{c as g,p as w,a as x,b as a,t as y,f as j,e as p,k as z,B,s as C,j as D,g as E,h as R,i as t,r as _}from"../../custom-element.js";import{s as f,a as S,r as q}from"../../attributes.js";var A=y('<div class="mc-radio svelte-1u25pv4"><input type="radio"> <label class="mc-radio__label svelte-1u25pv4"> </label></div>');const F={hash:"svelte-1u25pv4",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-radio.svelte-1u25pv4 {align-items:center;display:flex;gap:0.5rem;}.mc-radio__label.svelte-1u25pv4 {font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-1u25pv4 {appearance:none;margin:0;cursor:pointer;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:0.125rem solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-1u25pv4::before {border-radius:100%;content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-1u25pv4:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-1u25pv4:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-radio__input.svelte-1u25pv4:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-1u25pv4:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-1u25pv4:checked, .mc-radio__input.svelte-1u25pv4:disabled {border-color:transparent;}.mc-radio__input.svelte-1u25pv4:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-1u25pv4:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-1u25pv4:disabled + .mc-radio__label:where(.svelte-1u25pv4) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-1u25pv4:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-1u25pv4:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-1u25pv4:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}`};function G(m,r){w(r,!0),x(m,F);let s=a(r,"id",7,""),l=a(r,"name",7,""),i=a(r,"checked",7,!1),d=a(r,"disabled",7,!1),c=a(r,"isinvalid",7,!1),n=a(r,"label",7,"");function h(e){const b=["mc-radio__input"];return e&&b.push("is-invalid"),b.join(" ")}var u=A(),o=p(u);q(o);var v=C(o,2),k=p(v,!0);return _(v),_(u),j(e=>{f(o,"id",s()),z(o,1,B(e),"svelte-1u25pv4"),f(o,"name",l()),S(o,i()),o.disabled=d(),f(v,"for",s()),D(k,n())},[()=>h(c())]),E(m,u),R({get id(){return s()},set id(e=""){s(e),t()},get name(){return l()},set name(e=""){l(e),t()},get checked(){return i()},set checked(e=!1){i(e),t()},get disabled(){return d()},set disabled(e=!1){d(e),t()},get isinvalid(){return c()},set isinvalid(e=!1){c(e),t()},get label(){return n()},set label(e=""){n(e),t()}})}customElements.define("m-radio",g(G,{id:{},name:{},checked:{},disabled:{},isinvalid:{},label:{}},[],[],!0));
+//# sourceMappingURL=Radio.js.map

package/dist/components/radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-radio' }} />\n\n<script lang=\"ts\">\n  let {\n    id = '',\n    name = '',\n    checked = false,\n    disabled = false,\n    isinvalid = false,\n    label = '',\n  } = $props();\n\n  function getClasses(isInvalid: boolean): string {\n    const classes = ['mc-radio__input'];\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<!-- svelte-ignore a11y_click_events_have_key_events -->\n<div class=\"mc-radio\">\n  <input\n    {id}\n    type=\"radio\"\n    class={getClasses(isinvalid)}\n    {name}\n    {checked}\n    {disabled}\n  />\n  <label for={id} class=\"mc-radio__label\">{label}</label>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n</style>\n"],"names":["id","name","checked","disabled","isinvalid","label","getClasses","isInvalid","classes"],"mappings":";;yqEAII,IAAAA,aAAK,EAAE,EACPC,eAAO,EAAE,EACTC,kBAAU,EAAK,EACfC,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,gBAAQ,EAAE,WAGHC,EAAWC,EAA4B,CACxC,MAAAC,GAAW,iBAAiB,EAC9B,OAAAD,GACFC,EAAQ,KAAK,YAAY,EAEpBA,EAAQ,KAAK,GAAG,CACzB,kKAaYR,GAAE,MAA2BK,GAAK,GALrC,CAAA,IAAAC,EAAWF,GAAS,CAAA,2CAtBtB,GAAE,6CACA,GAAE,mDACC,GAAK,qDACJ,GAAK,uDACJ,GAAK,+CACT,GAAE"}

package/dist/components/radio/Radio.svelte

@@ -0,0 +1,37 @@
+<svelte:options customElement={{ tag: 'm-radio' }} />
+
+<script lang="ts">
+  let {
+    id = '',
+    name = '',
+    checked = false,
+    disabled = false,
+    isinvalid = false,
+    label = '',
+  } = $props();
+
+  function getClasses(isInvalid: boolean): string {
+    const classes = ['mc-radio__input'];
+    if (isInvalid) {
+      classes.push('is-invalid');
+    }
+    return classes.join(' ');
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div class="mc-radio">
+  <input
+    {id}
+    type="radio"
+    class={getClasses(isinvalid)}
+    {name}
+    {checked}
+    {disabled}
+  />
+  <label for={id} class="mc-radio__label">{label}</label>
+</div>
+
+<style lang="scss">
+  @use '@mozaic-ds/styles/components/radio';
+</style>

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

@@ -0,0 +1,4 @@
+export {}
+import _default from './RadioGroup.svelte'
+export default _default
+export {}

package/dist/components/radiogroup/RadioGroup.js

@@ -0,0 +1,8 @@
+import{d as J,c as K,p as L,a as M,b as l,z as N,A as G,t as x,f as w,g as y,h as O,i as a,e as c,s as R,r as d,j as S,k as V,m as r,C as q}from"../../custom-element.js";import{i as P}from"../../if.js";import{e as Q}from"../../each.js";import{r as T,s as v}from"../../attributes.js";import{a as U}from"../../input.js";var W=x('<legend class="mc-field__legend svelte-jgbztm"> </legend>'),X=(g,i,u)=>i(r(u).value),Y=x('<div class="mc-radio mc-field__item svelte-jgbztm"><input type="radio"> <label class="mc-radio__label svelte-jgbztm"> </label></div>'),Z=x('<div class="radio-group-container"><fieldset class="mc-field mc-field--group svelte-jgbztm"><!> <div></div></fieldset></div>');const $={hash:"svelte-jgbztm",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-radio.svelte-jgbztm {align-items:center;display:flex;gap:0.5rem;}.mc-radio__label.svelte-jgbztm {font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-jgbztm {appearance:none;margin:0;cursor:pointer;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:0.125rem solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-jgbztm::before {border-radius:100%;content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-jgbztm:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-jgbztm:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-radio__input.svelte-jgbztm:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-jgbztm:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-jgbztm:checked, .mc-radio__input.svelte-jgbztm:disabled {border-color:transparent;}.mc-radio__input.svelte-jgbztm:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-jgbztm:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-jgbztm:disabled + .mc-radio__label:where(.svelte-jgbztm) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-jgbztm:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-jgbztm:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-jgbztm:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
+
+/* stylelint-disable string-no-newline */ .mc-field__legend.svelte-jgbztm {font-size:0.875rem;line-height:1.3;font-weight:400;color:var(--field-color-label, #000000);}.mc-field__legend.svelte-jgbztm {padding-left:0;padding-right:0;}.mc-field__content.svelte-jgbztm {margin-top:0.5rem;}.mc-field__item.svelte-jgbztm {padding-top:0.375rem;padding-bottom:0.375rem;}.mc-field__item.svelte-jgbztm:not(:last-child) {margin-bottom:0.25rem;}.mc-field--group.svelte-jgbztm {border:none;margin-left:0;margin-right:0;padding:0;}
+
+/* stylelint-enable string-no-newline */`};function ee(g,i){L(i,!0),M(g,$);const u=[];let b=l(i,"id",7),f=l(i,"selectedvalue",7),_=l(i,"options",7),s=l(i,"legend",7),p=l(i,"inline",7),h=l(i,"isinvalid",7,!1),z=N(G(f()));function B(e){q(z,G(e))}var m=Z(),A=c(m),C=c(A);{var F=e=>{var t=W(),n=c(t,!0);d(t),w(()=>S(n,s())),y(e,t)};P(C,e=>{s()&&s().length&&e(F)})}var j=R(C,2);return Q(j,21,_,e=>e.id,(e,t)=>{var n=Y(),o=c(n);T(o);let D;var E;o.__change=[X,B,t];var k=R(o,2),H=c(k,!0);d(k),d(n),w(()=>{D=V(o,1,"mc-radio__input svelte-jgbztm",null,D,{"is-invalid":h()}),v(o,"id",r(t).id),v(o,"name",r(t).name),E!==(E=r(t).value)&&(o.value=(o.__value=r(t).value)==null?"":r(t).value),o.disabled=r(t).disabled,v(k,"for",r(t).id),S(H,r(t).label)}),U(u,[],o,()=>(r(t).value,r(z)),I=>q(z,I)),y(e,n)}),d(j),d(A),d(m),w(()=>{v(m,"id",b()),V(j,1,`mc-field__content ${(p()?"mc-field__content--inline":"")??""}`,"svelte-jgbztm")}),y(g,m),O({get id(){return b()},set id(e){b(e),a()},get selectedvalue(){return f()},set selectedvalue(e){f(e),a()},get options(){return _()},set options(e){_(e),a()},get legend(){return s()},set legend(e){s(e),a()},get inline(){return p()},set inline(e){p(e),a()},get isinvalid(){return h()},set isinvalid(e=!1){h(e),a()}})}J(["change"]);customElements.define("m-radio-group",K(ee,{options:{attribute:"options",type:"Array"},id:{},selectedvalue:{},legend:{},inline:{},isinvalid:{}},[],[],!1));
+//# sourceMappingURL=RadioGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radiogroup/RadioGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio-group',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { RadioGroupOption } from './radioGroup.types';\n\n  interface Props {\n    id: string;\n    selectedvalue: string;\n    options: Array<RadioGroupOption>;\n    legend: string;\n    inline: boolean;\n    isinvalid?: boolean;\n  }\n\n  let {\n    id,\n    selectedvalue,\n    options,\n    legend,\n    inline,\n    isinvalid = false,\n  }: Props = $props();\n\n  let selectedValue: string | undefined = $state(selectedvalue);\n\n  function onChange(value: string) {\n    selectedValue = value;\n    // dispatch('change', selectedValue);\n  }\n</script>\n\n<div {id} class=\"radio-group-container\">\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend && legend.length}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n\n    <div class=\"mc-field__content {inline ? 'mc-field__content--inline' : ''}\">\n      {#each options as opt (opt.id)}\n        <div class=\"mc-radio mc-field__item\">\n          <input\n            type=\"radio\"\n            class=\"mc-radio__input\"\n            class:is-invalid={isinvalid}\n            id={opt.id}\n            name={opt.name}\n            bind:group={selectedValue}\n            value={opt.value}\n            disabled={opt.disabled}\n            onchange={() => onChange(opt.value)}\n          />\n          <label for={opt.id} class=\"mc-radio__label\">{opt.label}</label>\n        </div>\n      {/each}\n    </div>\n  </fieldset>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["onChange","$.get","opt","id","$.prop","$$props","selectedvalue","options","legend","inline","isinvalid","selectedValue","value","$.set","$$render","consequent","$.each","div_1","$.set_attribute","input","input_value","label","$.set_text","text_1","$$value"],"mappings":"8YA2D4BA,EAAQC,EAACC,CAAG,EAAC,KAAK;;;;;;0FApC1CC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAaF,EAAAC,EAAA,gBAAA,CAAA,EACbE,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAML,EAAAC,EAAA,SAAA,CAAA,EACNK,oBAAY,EAAK,EAGfC,MAA2CL,EAAa,CAAA,CAAA,WAEnDN,EAASY,EAAe,CAC/BC,EAAAF,IAAgBC,CAAK,CAAA,CAEvB,uEAOOJ,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAIA,EAAM,EAAC,QAAMM,EAAAC,CAAA,iBAOnBC,OAAAA,EAAAC,EAAA,GAAAV,EAAWL,GAAKA,EAAI,MAATA,IAAG,2JAKGQ,EAAS,EAAA,EACvBQ,EAAAC,EAAA,KAAAlB,EAAAC,CAAG,EAAC,EAAE,EACJgB,EAAAC,EAAA,OAAAlB,EAAAC,CAAG,EAAC,IAAI,EAEPkB,KAAAA,EAAAnB,EAAAC,CAAG,EAAC,SAAJiB,EAAA,OAAAA,EAAA,QAAAlB,EAAAC,CAAG,EAAC,QAAJ,KAAA,GAAAD,EAAAC,CAAG,EAAC,OACDiB,EAAA,SAAAlB,EAAAC,CAAG,EAAC,SAGJgB,EAAAG,EAAA,MAAApB,EAAAC,CAAG,EAAC,EAAE,EAA2BoB,EAAAC,EAAAtB,EAAAC,CAAG,EAAC,KAAK,kBAJ7CD,EAAAC,CAAG,EAAC,QADCS,CAAa,QAAbA,EAAaa,CAAA,4EATFf,IAAS,4BAA8B,KAAE,EAAA,GAAA,eAAA,uTAnB5D,GAAK"}

package/dist/components/radiogroup/RadioGroup.svelte

@@ -0,0 +1,72 @@
+<svelte:options
+  customElement={{
+    tag: 'm-radio-group',
+    props: {
+      options: { type: 'Array', attribute: 'options' },
+    },
+    shadow: 'none',
+  }}
+/>
+
+<script lang="ts">
+  import type { RadioGroupOption } from './radioGroup.types';
+
+  interface Props {
+    id: string;
+    selectedvalue: string;
+    options: Array<RadioGroupOption>;
+    legend: string;
+    inline: boolean;
+    isinvalid?: boolean;
+  }
+
+  let {
+    id,
+    selectedvalue,
+    options,
+    legend,
+    inline,
+    isinvalid = false,
+  }: Props = $props();
+
+  let selectedValue: string | undefined = $state(selectedvalue);
+
+  function onChange(value: string) {
+    selectedValue = value;
+    // dispatch('change', selectedValue);
+  }
+</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={() => onChange(opt.value)}
+          />
+          <label for={opt.id} class="mc-radio__label">{opt.label}</label>
+        </div>
+      {/each}
+    </div>
+  </fieldset>
+</div>
+
+<style lang="scss">
+  @use '@mozaic-ds/styles/components/radio';
+  @use '@mozaic-ds/styles/components/field';
+</style>

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

@@ -0,0 +1,4 @@
+export {}
+import _default from './Select.svelte'
+export default _default
+export {}

package/dist/components/select/Select.js

@@ -0,0 +1,7 @@
+import{x as M,l as E,y as j,c as O,p as D,a as F,b as u,z as I,A as G,t as w,f as g,k as H,B as J,m,g as p,h as K,i as v,e as _,s as N,r as x,C as P,j as C}from"../../custom-element.js";import{i as Q}from"../../if.js";import{e as R,i as T}from"../../each.js";import{s as U}from"../../attributes.js";function S(e,o,t){if(e.multiple)return X(e,o);for(var l of e.options){var a=b(l);if(j(a,o)){l.selected=!0;return}}(!t||o!==void 0)&&(e.selectedIndex=-1)}function V(e,o){E(()=>{var t=new MutationObserver(()=>{var l=e.__value;S(e,l)});return t.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value"]}),()=>{t.disconnect()}})}function W(e,o,t=o){var l=!0;M(e,"change",a=>{var n=a?"[selected]":":checked",d;if(e.multiple)d=[].map.call(e.querySelectorAll(n),b);else{var f=e.querySelector(n)??e.querySelector("option:not([disabled])");d=f&&b(f)}t(d)}),E(()=>{var a=o();if(S(e,a,l),l&&a===void 0){var n=e.querySelector(":checked");n!==null&&(a=b(n),t(a))}e.__value=a,l=!1}),V(e)}function X(e,o){for(var t of e.options)t.selected=~o.indexOf(b(t))}function b(e){return"__value"in e?e.__value:e.value}var Y=w("<option disabled selected> </option>"),Z=w("<option> </option>"),$=w("<select><!><!></select>");const ee={hash:"svelte-i0s2u",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */.mc-select.svelte-i0s2u {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='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:1px solid var(--forms-color-border-default, #666666);border-radius: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-i0s2u:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 1px var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-i0s2u: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-i0s2u: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-i0s2u {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-select.is-invalid.svelte-i0s2u {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 1px var(--forms-color-border-invalid, #ea302d);}.mc-select.is-invalid.svelte-i0s2u:hover {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 1px var(--forms-color-border-invalid-hover, #c61112);}.mc-select--s.svelte-i0s2u {font-size:0.875rem;line-height:1.3;height:2rem;padding:0 2rem 0 0.5rem;background-position:right 0.5rem center;}
+
+/* stylelint-enable string-no-newline */`};function re(e,o){D(o,!0),F(e,ee);let t=u(o,"id",7),l=u(o,"valueselected",7,""),a=u(o,"placeholder",7),n=u(o,"size",7,"m"),d=u(o,"isinvalid",7,!1),f=u(o,"disabled",7,!1),h=u(o,"options",7),y=I(G(l()));function q(r,s){const i=["mc-select"];return r&&i.push("is-invalid"),s&&i.push(`mc-select--${s}`),i.join(" ")}var c=$(),k=_(c);{var A=r=>{var s=Y();s.value=((s.__value="")==null,"");var i=_(s);x(s),g(()=>C(i,`-- ${a()??""} --`)),p(r,s)};Q(k,r=>{a()&&r(A)})}var B=N(k);return R(B,17,h,T,(r,s)=>{var i=Z(),z={},L=_(i,!0);x(i),g(()=>{i.disabled=m(s).disabled,z!==(z=m(s).value)&&(i.value=(i.__value=m(s).value)==null?"":m(s).value),C(L,m(s).text)}),p(r,i)}),x(c),g(r=>{U(c,"id",t()),H(c,1,J(r),"svelte-i0s2u"),c.disabled=f()},[()=>q(d(),n())]),W(c,()=>m(y),r=>P(y,r)),p(e,c),K({get id(){return t()},set id(r){t(r),v()},get valueselected(){return l()},set valueselected(r=""){l(r),v()},get placeholder(){return a()},set placeholder(r){a(r),v()},get size(){return n()},set size(r="m"){n(r),v()},get isinvalid(){return d()},set isinvalid(r=!1){d(r),v()},get disabled(){return f()},set disabled(r=!1){f(r),v()},get options(){return h()},set options(r){h(r),v()}})}customElements.define("m-select",O(re,{options:{attribute:"options",type:"Array"},id:{},valueselected:{},placeholder:{},size:{},isinvalid:{},disabled:{}},[],[],!1));
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/bindings/select.js","../../../src/components/select/Select.svelte"],"sourcesContent":["import { effect } from '../../../reactivity/effects.js';\nimport { listen_to_event_and_reset_event } from './shared.js';\nimport { untrack } from '../../../runtime.js';\nimport { is } from '../../../proxy.js';\n\n/**\n * Selects the correct option(s) (depending on whether this is a multiple select)\n * @template V\n * @param {HTMLSelectElement} select\n * @param {V} value\n * @param {boolean} [mounting]\n */\nexport function select_option(select, value, mounting) {\n\tif (select.multiple) {\n\t\treturn select_options(select, value);\n\t}\n\n\tfor (var option of select.options) {\n\t\tvar option_value = get_option_value(option);\n\t\tif (is(option_value, value)) {\n\t\t\toption.selected = true;\n\t\t\treturn;\n\t\t}\n\t}\n\n\tif (!mounting || value !== undefined) {\n\t\tselect.selectedIndex = -1; // no option should be selected\n\t}\n}\n\n/**\n * Selects the correct option(s) if `value` is given,\n * and then sets up a mutation observer to sync the\n * current selection to the dom when it changes. Such\n * changes could for example occur when options are\n * inside an `#each` block.\n * @template V\n * @param {HTMLSelectElement} select\n * @param {() => V} [get_value]\n */\nexport function init_select(select, get_value) {\n\tlet mounting = true;\n\teffect(() => {\n\t\tif (get_value) {\n\t\t\tselect_option(select, untrack(get_value), mounting);\n\t\t}\n\t\tmounting = false;\n\n\t\tvar observer = new MutationObserver(() => {\n\t\t\t// @ts-ignore\n\t\t\tvar value = select.__value;\n\t\t\tselect_option(select, value);\n\t\t\t// Deliberately don't update the potential binding value,\n\t\t\t// the model should be preserved unless explicitly changed\n\t\t});\n\n\t\tobserver.observe(select, {\n\t\t\t// Listen to option element changes\n\t\t\tchildList: true,\n\t\t\tsubtree: true, // because of <optgroup>\n\t\t\t// Listen to option element value attribute changes\n\t\t\t// (doesn't get notified of select value changes,\n\t\t\t// because that property is not reflected as an attribute)\n\t\t\tattributes: true,\n\t\t\tattributeFilter: ['value']\n\t\t});\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t});\n}\n\n/**\n * @param {HTMLSelectElement} select\n * @param {() => unknown} get\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_select_value(select, get, set = get) {\n\tvar mounting = true;\n\n\tlisten_to_event_and_reset_event(select, 'change', (is_reset) => {\n\t\tvar query = is_reset ? '[selected]' : ':checked';\n\t\t/** @type {unknown} */\n\t\tvar value;\n\n\t\tif (select.multiple) {\n\t\t\tvalue = [].map.call(select.querySelectorAll(query), get_option_value);\n\t\t} else {\n\t\t\t/** @type {HTMLOptionElement | null} */\n\t\t\tvar selected_option =\n\t\t\t\tselect.querySelector(query) ??\n\t\t\t\t// will fall back to first non-disabled option if no option is selected\n\t\t\t\tselect.querySelector('option:not([disabled])');\n\t\t\tvalue = selected_option && get_option_value(selected_option);\n\t\t}\n\n\t\tset(value);\n\t});\n\n\t// Needs to be an effect, not a render_effect, so that in case of each loops the logic runs after the each block has updated\n\teffect(() => {\n\t\tvar value = get();\n\t\tselect_option(select, value, mounting);\n\n\t\t// Mounting and value undefined -> take selection from dom\n\t\tif (mounting && value === undefined) {\n\t\t\t/** @type {HTMLOptionElement | null} */\n\t\t\tvar selected_option = select.querySelector(':checked');\n\t\t\tif (selected_option !== null) {\n\t\t\t\tvalue = get_option_value(selected_option);\n\t\t\t\tset(value);\n\t\t\t}\n\t\t}\n\n\t\t// @ts-ignore\n\t\tselect.__value = value;\n\t\tmounting = false;\n\t});\n\n\t// don't pass get_value, we already initialize it in the effect above\n\tinit_select(select);\n}\n\n/**\n * @template V\n * @param {HTMLSelectElement} select\n * @param {V} value\n */\nfunction select_options(select, value) {\n\tfor (var option of select.options) {\n\t\t// @ts-ignore\n\t\toption.selected = ~value.indexOf(get_option_value(option));\n\t}\n}\n\n/** @param {HTMLOptionElement} option */\nfunction get_option_value(option) {\n\t// __value only exists if the <option> has a value attribute\n\tif ('__value' in option) {\n\t\treturn option.__value;\n\t} else {\n\t\treturn option.value;\n\t}\n}\n","<svelte:options\n  customElement={{\n    tag: 'm-select',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n\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  }: 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<!-- svelte-ignore a11y_no_onchange -->\n<select\n  {id}\n  class={setClasses(isinvalid, size)}\n  {disabled}\n  bind:value={valueSelected}\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":["select_option","select","value","mounting","select_options","option","option_value","get_option_value","is","init_select","get_value","effect","observer","bind_select_value","get","set","listen_to_event_and_reset_event","is_reset","query","selected_option","id","$.prop","$$props","valueselected","placeholder","size","isinvalid","disabled","options","valueSelected","setClasses","classes","$$render","consequent","$.each","node_1","opt","option_1","$.get","option_1_value","$.set_text","text_1","$.bind_select_value","$$value"],"mappings":"2SAYO,SAASA,EAAcC,EAAQC,EAAOC,EAAU,CACtD,GAAIF,EAAO,SACV,OAAOG,EAAeH,EAAQC,CAAK,EAGpC,QAASG,KAAUJ,EAAO,QAAS,CAClC,IAAIK,EAAeC,EAAiBF,CAAM,EAC1C,GAAIG,EAAGF,EAAcJ,CAAK,EAAG,CAC5BG,EAAO,SAAW,GAClB,MACH,CACA,EAEK,CAACF,GAAYD,IAAU,UAC1BD,EAAO,cAAgB,GAEzB,CAYO,SAASQ,EAAYR,EAAQS,EAAW,CAE9CC,EAAO,IAAM,CAMZ,IAAIC,EAAW,IAAI,iBAAiB,IAAM,CAEzC,IAAIV,EAAQD,EAAO,QACnBD,EAAcC,EAAQC,CAAK,CAG9B,CAAG,EAED,OAAAU,EAAS,QAAQX,EAAQ,CAExB,UAAW,GACX,QAAS,GAIT,WAAY,GACZ,gBAAiB,CAAC,OAAO,CAC5B,CAAG,EAEM,IAAM,CACZW,EAAS,WAAY,CACrB,CACH,CAAE,CACF,CAQO,SAASC,EAAkBZ,EAAQa,EAAKC,EAAMD,EAAK,CACzD,IAAIX,EAAW,GAEfa,EAAgCf,EAAQ,SAAWgB,GAAa,CAC/D,IAAIC,EAAQD,EAAW,aAAe,WAElCf,EAEJ,GAAID,EAAO,SACVC,EAAQ,CAAA,EAAG,IAAI,KAAKD,EAAO,iBAAiBiB,CAAK,EAAGX,CAAgB,MAC9D,CAEN,IAAIY,EACHlB,EAAO,cAAciB,CAAK,GAE1BjB,EAAO,cAAc,wBAAwB,EAC9CC,EAAQiB,GAAmBZ,EAAiBY,CAAe,CAC9D,CAEEJ,EAAIb,CAAK,CACX,CAAE,EAGDS,EAAO,IAAM,CACZ,IAAIT,EAAQY,EAAK,EAIjB,GAHAd,EAAcC,EAAQC,EAAOC,CAAQ,EAGjCA,GAAYD,IAAU,OAAW,CAEpC,IAAIiB,EAAkBlB,EAAO,cAAc,UAAU,EACjDkB,IAAoB,OACvBjB,EAAQK,EAAiBY,CAAe,EACxCJ,EAAIb,CAAK,EAEb,CAGED,EAAO,QAAUC,EACjBC,EAAW,EACb,CAAE,EAGDM,EAAYR,CAAM,CACnB,CAOA,SAASG,EAAeH,EAAQC,EAAO,CACtC,QAASG,KAAUJ,EAAO,QAEzBI,EAAO,SAAW,CAACH,EAAM,QAAQK,EAAiBF,CAAM,CAAC,CAE3D,CAGA,SAASE,EAAiBF,EAAQ,CAEjC,MAAI,YAAaA,EACTA,EAAO,QAEPA,EAAO,KAEhB;;;;;gFCrHIe,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,EAELO,MAAuBN,EAAa,CAAA,CAAA,EAE/B,SAAAO,EAAWJ,EAAoBD,EAA0B,CAC1D,MAAAM,GAAW,WAAW,EAExB,OAAAL,GACFK,EAAQ,KAAK,YAAY,EAEvBN,GACFM,EAAQ,KAAI,cAAeN,CAAI,EAAA,EAG1BM,EAAQ,KAAK,GAAG,CACzB,yGAYQP,KAAW,EAAA,KAAA,CAAA,kBAFdA,EAAW,GAAAQ,EAAAC,CAAA,eAMTC,OAAAA,EAAAC,EAAA,GAAAP,OAAWQ,IAAG,sCACDC,EAAA,SAAAC,EAAAF,CAAG,EAAC,SAAiBG,KAAAA,EAAAD,EAAAF,CAAG,EAAC,SAAJC,EAAA,OAAAA,EAAA,QAAAC,EAAAF,CAAG,EAAC,QAAJ,KAAA,GAAAE,EAAAF,CAAG,EAAC,OACxCI,EAAAC,EAAAH,EAAAF,CAAG,EAAC,IAAI,sFAZNN,EAAWJ,EAAS,EAAED,EAAI,CAAA,IAErBiB,EAAAzC,EAAA,IAAAqC,EAAAT,CAAa,OAAbA,EAAac,CAAA,CAAA,yGA5BP,GAAE,wGAEX,IAAG,uDACE,GAAK,qDACN,GAAK","x_google_ignoreList":[0]}

package/dist/components/select/Select.svelte

@@ -0,0 +1,75 @@
+<svelte:options
+  customElement={{
+    tag: 'm-select',
+    props: {
+      options: { type: 'Array', attribute: 'options' },
+    },
+    shadow: 'none',
+  }}
+/>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  import type { SelectOption, SelectSize } from './select.types';
+
+  interface Props {
+    id: string;
+    name: string;
+    valueselected?: string;
+    placeholder: string;
+    size?: SelectSize;
+    isinvalid?: boolean;
+    disabled?: boolean;
+    options: Array<SelectOption>;
+    [key: string]: any;
+  }
+
+  let {
+    id,
+    valueselected = '',
+    placeholder,
+    size = 'm',
+    isinvalid = false,
+    disabled = false,
+    options,
+  }: Props = $props();
+  let valueSelected = $state(valueselected);
+
+  function setClasses(isinvalid: boolean, size: SelectSize): string {
+    const classes = ['mc-select'];
+
+    if (isinvalid) {
+      classes.push('is-invalid');
+    }
+    if (size) {
+      classes.push(`mc-select--${size}`);
+    }
+
+    return classes.join(' ');
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_onchange -->
+<select
+  {id}
+  class={setClasses(isinvalid, size)}
+  {disabled}
+  bind:value={valueSelected}
+>
+  {#if placeholder}
+    <option value="" disabled selected>
+      -- {placeholder} --
+    </option>
+  {/if}
+
+  {#each options as opt}
+    <option disabled={opt.disabled} value={opt.value}>
+      {opt.text}
+    </option>
+  {/each}
+</select>
+
+<style lang="scss">
+  @use '@mozaic-ds/styles/components/select';
+</style>

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

@@ -0,0 +1,4 @@
+export {}
+import _default from './StatusBadge.svelte'
+export default _default
+export {}

package/dist/components/statusbadge/StatusBadge.js

@@ -0,0 +1,4 @@
+import{c as u,p as m,a as g,b as i,t as b,e as c,f as v,g as f,h as p,i as k,s as h,r as d,k as x}from"../../custom-element.js";import{a as w}from"../../slot.js";import{S as _}from"./StatusDot.js";var y=b('<div><!> <span class="mc-status-badge__label svelte-1x1mo7s"><!></span></div>');const S={hash:"svelte-1x1mo7s",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-status-badge.svelte-1x1mo7s {background-color:var(--status-badge-color-background-information, #e1f3f9);border-radius:0.25rem;font-weight:400;font-size:0.875rem;display:inline-flex;align-items:center;gap:0.25rem;padding-right:0.5rem;padding-left:0.5rem;text-transform:lowercase;white-space:nowrap;min-height:1.5rem;}.mc-status-badge__label.svelte-1x1mo7s {color:var(--status-badge-color-label, #000000);}.mc-status-badge__label.svelte-1x1mo7s::first-letter {text-transform:uppercase;}.mc-status-badge--success.svelte-1x1mo7s {background-color:var(--status-badge-color-background-success, #ebf5de);}.mc-status-badge--danger.svelte-1x1mo7s {background-color:var(--status-badge-color-background-danger, #fdeaea);}.mc-status-badge--warning.svelte-1x1mo7s {background-color:var(--status-badge-color-background-warning, #fdf1e8);}.mc-status-badge--neutral.svelte-1x1mo7s {background-color:var(--status-badge-color-background-neutral, #e6e6e6);}.mc-status-dot.svelte-1x1mo7s {background-color:var(--status-dot-color-background-information, #0074aa);height:0.5rem;width:0.5rem;border-radius:100%;display:inline-block;}.mc-status-dot--s.svelte-1x1mo7s {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-1x1mo7s {height:1rem;width:1rem;}.mc-status-dot--success.svelte-1x1mo7s {background-color:var(--status-dot-color-background-success, #117f03);}.mc-status-dot--danger.svelte-1x1mo7s {background-color:var(--status-dot-color-background-danger, #c61112);}.mc-status-dot--warning.svelte-1x1mo7s {background-color:var(--status-dot-color-background-warning, #b64f00);}.mc-status-dot--neutral.svelte-1x1mo7s {background-color:var(--status-dot-color-background-neutral, #666666);}`};function z(a,e){m(e,!0),g(a,S);let t=i(e,"style",7);var s=y(),o=c(s);_(o,{get style(){return t()},size:"m"});var r=h(o,2),l=c(r);return w(l,e,"default",{}),d(r),d(s),v(()=>x(s,1,`mc-status-badge ${(t()?`mc-status-badge--${t()}`:"")??""}`,"svelte-1x1mo7s")),f(a,s),p({get style(){return t()},set style(n){t(n),k()}})}customElements.define("m-status-badge",u(z,{style:{}},["default"],[],!0));
+//# sourceMappingURL=StatusBadge.js.map

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

@@ -0,0 +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    style: BadgeStyle;\n  }\n\n  let { style }: Props = $props();\n</script>\n\n<div class=\"mc-status-badge {style ? `mc-status-badge--${style}` : ''}\">\n  <StatusDot {style} 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":["style","$.prop","$$props"],"mappings":";;mrDAUQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,oJAGgBF,EAAK,EAAA,oBAAuBA,EAAK,CAAA,GAAK,KAAE,EAAA,GAAA,gBAAA,CAAA"}

package/dist/components/statusbadge/StatusBadge.svelte

@@ -0,0 +1,22 @@
+<svelte:options customElement={{ tag: 'm-status-badge' }} />
+
+<script lang="ts">
+  import type { BadgeStyle } from './badge.types';
+  import StatusDot from './StatusDot.svelte';
+
+  interface Props {
+    style: BadgeStyle;
+  }
+
+  let { style }: Props = $props();
+</script>
+
+<div class="mc-status-badge {style ? `mc-status-badge--${style}` : ''}">
+  <StatusDot {style} size="m" />
+  <span class="mc-status-badge__label"><slot /></span>
+</div>
+
+<style lang="scss">
+  @use '@mozaic-ds/styles/components/status-badge';
+  @use '@mozaic-ds/styles/components/status-dot';
+</style>

package/dist/components/statusbadge/StatusDot.d.ts

@@ -0,0 +1,4 @@
+export {}
+import _default from './StatusDot.svelte'
+export default _default
+export {}

package/dist/components/statusbadge/StatusDot.js

@@ -0,0 +1,4 @@
+import{c as u,p as l,a as n,b as c,t as m,f as i,g as b,h as g,i as d,k as v}from"../../custom-element.js";var w=m("<div></div>");const h={hash:"svelte-bwqsm9",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-status-dot.svelte-bwqsm9 {background-color:var(--status-dot-color-background-information, #0074aa);height:0.5rem;width:0.5rem;border-radius:100%;display:inline-block;}.mc-status-dot--s.svelte-bwqsm9 {height:0.25rem;width:0.25rem;}.mc-status-dot--l.svelte-bwqsm9 {height:1rem;width:1rem;}.mc-status-dot--success.svelte-bwqsm9 {background-color:var(--status-dot-color-background-success, #117f03);}.mc-status-dot--danger.svelte-bwqsm9 {background-color:var(--status-dot-color-background-danger, #c61112);}.mc-status-dot--warning.svelte-bwqsm9 {background-color:var(--status-dot-color-background-warning, #b64f00);}.mc-status-dot--neutral.svelte-bwqsm9 {background-color:var(--status-dot-color-background-neutral, #666666);}`};function f(o,e){l(e,!0),n(o,h);let t=c(e,"style",7),s=c(e,"size",7);var r=w();return i(()=>v(r,1,`mc-status-dot ${(s()?`mc-status-dot--${s()}`:"")??""}  ${(t()?`mc-status-dot--${t()}`:"")??""}`,"svelte-bwqsm9")),b(o,r),g({get style(){return t()},set style(a){t(a),d()},get size(){return s()},set size(a){s(a),d()}})}customElements.define("m-status-dot",u(f,{style:{},size:{}},[],[],!1));export{f as S};
+//# sourceMappingURL=StatusDot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDot.js","sources":["../../../src/components/statusbadge/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-dot', shadow: 'none' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle, BadgeSize } from './badge.types';\n\n  interface Props {\n    style: BadgeStyle;\n    size: BadgeSize;\n  }\n\n  let { style, size }: Props = $props();\n</script>\n\n<div\n  class=\"mc-status-dot {size ? `mc-status-dot--${size}` : ''}  {style\n    ? `mc-status-dot--${style}`\n    : ''}\"\n></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["style","$.prop","$$props","size"],"mappings":";;8vBAUQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,iDAIKC,EAAI,EAAA,kBAAqBA,EAAI,CAAK,GAAA,aAAMH,EACxC,EAAA,kBAAAA,MAClB,KAAE,EAAA,GAAA,eAAA,CAAA"}

package/dist/components/statusdot/StatusDot.svelte

@@ -0,0 +1,22 @@
+<svelte:options customElement={{ tag: 'm-status-dot', shadow: 'none' }} />
+
+<script lang="ts">
+  import type { BadgeStyle, BadgeSize } from './badge.types';
+
+  interface Props {
+    style: BadgeStyle;
+    size: BadgeSize;
+  }
+
+  let { style, size }: Props = $props();
+</script>
+
+<div
+  class="mc-status-dot {size ? `mc-status-dot--${size}` : ''}  {style
+    ? `mc-status-dot--${style}`
+    : ''}"
+></div>
+
+<style lang="scss">
+  @use '@mozaic-ds/styles/components/status-dot';
+</style>

package/dist/components/textarea/Textarea.d.ts

@@ -0,0 +1,4 @@
+export {}
+import _default from './Textarea.svelte'
+export default _default
+export {}

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,7 @@
+import{d as w,c as y,p as _,a as k,b as o,t as D,f as E,g as q,h as z,i as t,q as I,k as O}from"../../custom-element.js";import{s as l}from"../../attributes.js";import{b as S}from"../../input.js";import{c as T}from"../../index-client.js";var j=D('<textarea spellcheck="false"></textarea>');const A={hash:"svelte-15vrvs3",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */
+
+/* stylelint-enable string-no-newline */.mc-textarea.svelte-15vrvs3 {font-family:inherit;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:1px solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;font-size:1rem;line-height:1.5;min-height:4rem;padding:0.5rem 0.75rem;}.mc-textarea.svelte-15vrvs3::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-textarea.svelte-15vrvs3:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 1px var(--forms-color-border-hover, #4d4d4d);}.mc-textarea.svelte-15vrvs3: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-textarea.svelte-15vrvs3:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-textarea[readonly].svelte-15vrvs3 {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-textarea.is-invalid.svelte-15vrvs3 {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 1px var(--forms-color-border-invalid, #ea302d);}.mc-textarea.is-invalid.svelte-15vrvs3:hover {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 1px var(--forms-color-border-invalid-hover, #c61112);}`};function B(h,a){_(a,!0),k(h,A);let s=o(a,"name",7),d=o(a,"value",15),i=o(a,"placeholder",7),c=o(a,"rows",7,2),n=o(a,"isinvalid",7),v=o(a,"disabled",7,!1),m=o(a,"minlength",7),f=o(a,"maxlength",7),u=o(a,"readonly",7);const g=T();function x(e){let p=e.target.value;g("on-input",p)}var r=j();I(r);let b;return r.__input=x,E(()=>{b=O(r,1,"mc-textarea svelte-15vrvs3",null,b,{"is-invalid":n()}),l(r,"aria-invalid",n()),l(r,"name",s()),l(r,"id",s()),l(r,"placeholder",i()),l(r,"rows",c()),r.disabled=v(),l(r,"minlength",m()),l(r,"maxlength",f()),r.readOnly=u()}),S(r,d),q(h,r),z({get name(){return s()},set name(e){s(e),t()},get value(){return d()},set value(e){d(e),t()},get placeholder(){return i()},set placeholder(e){i(e),t()},get rows(){return c()},set rows(e=2){c(e),t()},get isinvalid(){return n()},set isinvalid(e){n(e),t()},get disabled(){return v()},set disabled(e=!1){v(e),t()},get minlength(){return m()},set minlength(e){m(e),t()},get maxlength(){return f()},set maxlength(e){f(e),t()},get readonly(){return u()},set readonly(e){u(e),t()}})}w(["input"]);customElements.define("m-textarea",y(B,{name:{},value:{},placeholder:{},rows:{},isinvalid:{},disabled:{},minlength:{},maxlength:{},readonly:{}},[],[],!0));
+//# sourceMappingURL=Textarea.js.map

package/dist/components/textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options customElement=\"m-textarea\" />\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n\n  interface Props {\n    name: string;\n    value: string;\n    placeholder: string;\n    rows?: number;\n    isinvalid: boolean;\n    disabled?: boolean;\n    minlength: number;\n    maxlength: number;\n    readonly: boolean;\n  }\n\n  let {\n    name,\n    value = $bindable(),\n    placeholder,\n    rows = 2,\n    isinvalid,\n    disabled = false,\n    minlength,\n    maxlength,\n    readonly,\n  }: Props = $props();\n\n  const dispatch = createEventDispatcher();\n\n  function onInput(e: Event) {\n    let value = (e.target as HTMLInputElement).value;\n    dispatch('on-input', value);\n  }\n</script>\n\n<textarea\n  bind:value\n  class=\"mc-textarea\"\n  class:is-invalid={isinvalid}\n  aria-invalid={isinvalid}\n  {name}\n  id={name}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {readonly}\n  spellcheck=\"false\"\n  oninput={onInput}\n></textarea>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n  @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["name","$.prop","$$props","value","placeholder","rows","isinvalid","disabled","minlength","maxlength","readonly","dispatch","createEventDispatcher","onInput"],"mappings":";;;;;snDAkBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAKF,EAAAC,EAAA,QAAA,EAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,eAAO,CAAC,EACRC,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,mBAAW,EAAK,EAChBC,EAASP,EAAAC,EAAA,YAAA,CAAA,EACTO,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAQT,EAAAC,EAAA,WAAA,CAAA,EAGJ,MAAAS,EAAWC,EAAqB,WAE7BC,EAAQ,EAAU,CACrB,IAAAV,EAAS,EAAE,OAA4B,MAC3CQ,EAAS,WAAYR,CAAK,CAC5B,uCAiBSU,mEAXSP,EAAS,EAAA,qBACbA,GAAS,2BAEnBN,GAAI,6TAtBC,EAAC,4GAEG,GAAK"}