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

package/dist/components/textinput/Textinput.js

@@ -1,4 +1,4 @@
-import{v as A,w as R,u as U,c as X,a as Y,b as $,d as n,f as E,t as K,i as ee,j as B,l as te,m as r,g as b,s as D,x as ne,h as T,y as V,r as d,k as re}from"../../custom-element.js";import{i as W}from"../../if.js";import{s as oe}from"../../slot.js";import{b as ie,r as le}from"../../attributes.js";import{a as se}from"../../input.js";function ae(c,t,o){A(()=>{var i=R(()=>t(c,o==null?void 0:o())||{});if(i!=null&&i.destroy)return()=>i.destroy()})}function ce(c,t,o){t(""),o()("onclear")}var me=E('<span class="mc-text-input__icon svelte-1byhm3b"><!></span>'),be=E('<div class="mc-controls-options js-control-options svelte-1byhm3b"><button type="button" class="mc-controls-options__button svelte-1byhm3b"><svg class="mc-controls-options__icon svelte-1byhm3b" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" class="svelte-1byhm3b"></path></svg> <span class="mc-controls-options__label svelte-1byhm3b"> </span></button></div>'),de=E("<div><!> <input/> <!></div>");const he={hash:"svelte-1byhm3b",code:`/**
+import{q as X,u as oe,n as ie,c as le,p as ae,a as se,b as n,f as N,t as Q,m as x,v as A,e as ce,h as v,i as me,j as r,d as f,s as H,r as p,g as be,w as R,x as U}from"../../custom-element.js";import{s as de}from"../../snippet.js";import{i as J}from"../../if.js";import{s as he}from"../../slot.js";import{a as ue,r as ve}from"../../attributes.js";import{c as fe}from"../../input.js";function pe(b,t,i){X(()=>{var o=oe(()=>t(b,i==null?void 0:i())||{});if(o!=null&&o.destroy)return()=>o.destroy()})}function ge(b,t,i){var o;t(""),(o=i())==null||o("onclear")}var ye=N('<span class="mc-text-input__icon svelte-1byhm3b"><!></span>'),xe=N('<div class="mc-controls-options js-control-options svelte-1byhm3b"><button type="button" class="mc-controls-options__button svelte-1byhm3b"><svg class="mc-controls-options__icon svelte-1byhm3b" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" class="svelte-1byhm3b"></path></svg> <span class="mc-controls-options__label svelte-1byhm3b"> </span></button></div>'),_e=N("<div><!> <input/> <!></div>");const we={hash:"svelte-1byhm3b",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-controls-options.svelte-1byhm3b {align-items:center;display:inline-flex;justify-content:center;gap:0.5rem;}.mc-controls-options__button.svelte-1byhm3b {background-color:transparent;border-width:0;color:initial;font-family:inherit;outline:none;appearance:none;cursor:pointer;padding:0;border-radius:var(--radius-full, 100%);}.mc-controls-options__button.svelte-1byhm3b:hover .mc-controls-options__icon:where(.svelte-1byhm3b) {fill:var(--forms-color-icon-clear-hover, #4d4d4d);}.mc-controls-options__button.svelte-1byhm3b: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-controls-options__icon.svelte-1byhm3b {fill:var(--forms-color-icon-clear, #666666);}.mc-controls-options__button.svelte-1byhm3b, .mc-controls-options__icon.svelte-1byhm3b {height:1.5rem;width:1.5rem;}.mc-controls-options__label.svelte-1byhm3b {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-controls-options__unit.svelte-1byhm3b {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);color:var(--forms-color-text-default, #000000);}
 
@@ -6,5 +6,5 @@ import{v as A,w as R,u as U,c as X,a as Y,b as $,d as n,f as E,t as K,i as ee,j
   /* For Blink & WebKit rendering engines */
   /* For Gecko rendering engine */appearance:textfield;}.mc-text-input__control[type=number].svelte-1byhm3b::-webkit-inner-spin-button, .mc-text-input__control[type=number].svelte-1byhm3b::-webkit-outer-spin-button {appearance:none;margin:0;}.mc-text-input__control[type=search].svelte-1byhm3b::-webkit-search-decoration, .mc-text-input__control[type=search].svelte-1byhm3b::-webkit-search-cancel-button {appearance:none;}.mc-text-input__control.svelte-1byhm3b::placeholder {color:var(--forms-color-placeholder, #666666);}.mc-text-input__icon.svelte-1byhm3b {fill:var(--forms-color-icon-default, #666666);height:1.5rem;width:1.5rem;flex-shrink:0;}.mc-text-input.svelte-1byhm3b:focus-within {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-text-input.svelte-1byhm3b:hover:not(:focus-within) {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-text-input.svelte-1byhm3b:has(input:where(.svelte-1byhm3b):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-text-input.svelte-1byhm3b:has(input[readonly]:where(.svelte-1byhm3b)) {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-text-input.svelte-1byhm3b:has(.mc-text-input__icon:where(.svelte-1byhm3b)) {padding-inline-start:0.6875rem;}.mc-text-input.svelte-1byhm3b:has(.mc-text-input__icon:where(.svelte-1byhm3b)) .mc-text-input__control:where(.svelte-1byhm3b) {padding-inline-start:0;}.mc-text-input.svelte-1byhm3b:has(.mc-controls-options:where(.svelte-1byhm3b)) {padding-inline-end:0.6875rem;}.mc-text-input.svelte-1byhm3b:has(.mc-controls-options:where(.svelte-1byhm3b)) .mc-text-input__control:where(.svelte-1byhm3b) {padding-inline-end:0;}.mc-text-input--s.svelte-1byhm3b {height:2rem;}.mc-text-input--s.svelte-1byhm3b .mc-text-input__control:where(.svelte-1byhm3b) {padding:0.375rem 0.6875rem;font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);}.mc-text-input--s.svelte-1byhm3b:has(.mc-text-input__icon:where(.svelte-1byhm3b)) {padding-inline-start:0.4375rem;}.mc-text-input--s.svelte-1byhm3b:has(.mc-controls-options:where(.svelte-1byhm3b)) {padding-inline-end:0.4375rem;}.mc-text-input.is-invalid.svelte-1byhm3b {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-text-input.is-invalid.svelte-1byhm3b:hover:not(:focus-within) {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-text-input.svelte-1byhm3b :where(.svelte-1byhm3b) {box-sizing:border-box;}
 
-/* stylelint-enable string-no-newline */.right-align.svelte-1byhm3b {text-align:right;}`};function ue(c,t){Y(t,!0),$(c,he);let o=n(t,"name",7),i=n(t,"value",7),p=n(t,"placeholder",7),f=n(t,"inputtype",7,"text"),g=n(t,"isvalid",7),h=n(t,"isinvalid",7),y=n(t,"disabled",7,!1),x=n(t,"size",7,"m"),_=n(t,"iconname",7),w=n(t,"rightalign",7),k=n(t,"min",7),z=n(t,"max",7),q=n(t,"minlength",7),C=n(t,"maxlength",7),j=n(t,"required",7,!1),L=n(t,"clearlabel",7,"Clear content"),F=n(t,"isclearable",7,!1),M=n(t,"onclear",7),S=n(t,"hasicon",7,!1),H=ne(t,["$$slots","$$events","$$legacy","$$host","name","value","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max","minlength","maxlength","required","clearlabel","isclearable","onclear","hasicon"]),I=V(f),J=V(()=>!!(F()&&i()));function N(e,l,a,v){const s=["mc-text-input","mc-field__input"];return e&&s.push("is-valid"),l&&s.push("is-invalid"),a==="s"&&s.push("mc-text-input--s"),v&&s.push("mc-left-icon-input__input"),w()&&s.push("right-align"),s.join(" ")}const Z=e=>{e.type=T(I)};var u=de(),G=b(u);{var O=e=>{var l=me(),a=b(l);oe(a,t,"icon",{}),d(l),B(e,l)};W(G,e=>{S()&&e(O)})}var m=D(G,2);le(m),ie(m,()=>({class:"mc-text-input__control","aria-invalid":h(),name:o(),id:o(),placeholder:p(),disabled:y(),min:k(),max:z(),minlength:q(),maxlength:C(),spellcheck:"false",required:j(),...H}),void 0,void 0,"svelte-1byhm3b"),A(()=>se(m,i)),ae(m,e=>Z==null?void 0:Z(e));var P=D(m,2);{var Q=e=>{var l=be(),a=b(l);a.__click=[ce,i,M];var v=D(b(a),2),s=b(v,!0);d(v),d(a),d(l),K(()=>re(s,L())),B(e,l)};W(P,e=>{T(J)&&e(Q)})}return d(u),K(e=>ee(u,1,`${e??""} `,"svelte-1byhm3b"),[()=>N(g(),h(),x(),_())]),B(c,u),te({get name(){return o()},set name(e){o(e),r()},get value(){return i()},set value(e){i(e),r()},get placeholder(){return p()},set placeholder(e){p(e),r()},get inputtype(){return f()},set inputtype(e="text"){f(e),r()},get isvalid(){return g()},set isvalid(e){g(e),r()},get isinvalid(){return h()},set isinvalid(e){h(e),r()},get disabled(){return y()},set disabled(e=!1){y(e),r()},get size(){return x()},set size(e="m"){x(e),r()},get iconname(){return _()},set iconname(e){_(e),r()},get rightalign(){return w()},set rightalign(e){w(e),r()},get min(){return k()},set min(e){k(e),r()},get max(){return z()},set max(e){z(e),r()},get minlength(){return q()},set minlength(e){q(e),r()},get maxlength(){return C()},set maxlength(e){C(e),r()},get required(){return j()},set required(e=!1){j(e),r()},get clearlabel(){return L()},set clearlabel(e="Clear content"){L(e),r()},get isclearable(){return F()},set isclearable(e=!1){F(e),r()},get onclear(){return M()},set onclear(e){M(e),r()},get hasicon(){return S()},set hasicon(e=!1){S(e),r()}})}U(["click"]);customElements.define("m-textinput",X(ue,{name:{},value:{},placeholder:{},inputtype:{},isvalid:{},isinvalid:{},disabled:{},size:{},iconname:{},rightalign:{},min:{},max:{},minlength:{},maxlength:{},required:{},clearlabel:{},isclearable:{},onclear:{},hasicon:{}},["icon"],[],!0));
+/* stylelint-enable string-no-newline */.right-align.svelte-1byhm3b {text-align:right;}`};function ke(b,t){ae(t,!0),se(b,we);let i=n(t,"name",7),o=n(t,"value",7),_=n(t,"placeholder",7),w=n(t,"inputtype",7,"text"),k=n(t,"isvalid",7),g=n(t,"isinvalid",7),z=n(t,"disabled",7,!1),q=n(t,"readonly",7,!1),C=n(t,"size",7,"m"),j=n(t,"hasicon",7,!1),d=n(t,"icon",7),L=n(t,"rightalign",7),F=n(t,"min",7),M=n(t,"max",7),S=n(t,"minlength",7),Z=n(t,"maxlength",7),B=n(t,"required",7,!1),D=n(t,"clearlabel",7,"Clear content"),E=n(t,"isclearable",7,!1),G=n(t,"onclear",7),I=n(t,"oninput",7),K=n(t,"onchange",7),T=n(t,"onblur",7),Y=A(w),$=A(()=>!!(E()&&o())),O=A(()=>!!j()||!!d());function ee(e,a,s,c){const l=["mc-text-input","mc-field__input"];return e&&l.push("is-valid"),a&&l.push("is-invalid"),s==="s"&&l.push("mc-text-input--s"),c&&l.push("mc-left-icon-input__input"),L()&&l.push("right-align"),l.join(" ")}const V=e=>{e.type=x(Y)};var y=_e(),P=f(y);{var te=e=>{var a=ye(),s=f(a);{var c=m=>{var u=R(),W=U(u);de(W,d),v(m,u)},l=m=>{var u=R(),W=U(u);he(W,t,"icon",{}),v(m,u)};J(s,m=>{d()?m(c):m(l,!1)})}p(a),v(e,a)};J(P,e=>{x(O)&&e(te)})}var h=H(P,2);ve(h),ue(h,()=>({class:"mc-text-input__control","aria-invalid":g(),name:i(),id:i(),placeholder:_(),disabled:z(),min:F(),max:M(),minlength:S(),maxlength:Z(),spellcheck:"false",required:B(),...q()?{readonly:!0}:{},oninput:I(),onchange:K(),onblur:T()}),void 0,void 0,"svelte-1byhm3b"),X(()=>fe(h,o)),pe(h,e=>V==null?void 0:V(e));var ne=H(h,2);{var re=e=>{var a=xe(),s=f(a);s.__click=[ge,o,G];var c=H(f(s),2),l=f(c,!0);p(c),p(s),p(a),Q(()=>be(l,D())),v(e,a)};J(ne,e=>{x($)&&e(re)})}return p(y),Q(e=>ce(y,1,`${e??""} `,"svelte-1byhm3b"),[()=>ee(k(),g(),C(),x(O))]),v(b,y),me({get name(){return i()},set name(e){i(e),r()},get value(){return o()},set value(e){o(e),r()},get placeholder(){return _()},set placeholder(e){_(e),r()},get inputtype(){return w()},set inputtype(e="text"){w(e),r()},get isvalid(){return k()},set isvalid(e){k(e),r()},get isinvalid(){return g()},set isinvalid(e){g(e),r()},get disabled(){return z()},set disabled(e=!1){z(e),r()},get readonly(){return q()},set readonly(e=!1){q(e),r()},get size(){return C()},set size(e="m"){C(e),r()},get hasicon(){return j()},set hasicon(e=!1){j(e),r()},get icon(){return d()},set icon(e){d(e),r()},get rightalign(){return L()},set rightalign(e){L(e),r()},get min(){return F()},set min(e){F(e),r()},get max(){return M()},set max(e){M(e),r()},get minlength(){return S()},set minlength(e){S(e),r()},get maxlength(){return Z()},set maxlength(e){Z(e),r()},get required(){return B()},set required(e=!1){B(e),r()},get clearlabel(){return D()},set clearlabel(e="Clear content"){D(e),r()},get isclearable(){return E()},set isclearable(e=!1){E(e),r()},get onclear(){return G()},set onclear(e){G(e),r()},get oninput(){return I()},set oninput(e){I(e),r()},get onchange(){return K()},set onchange(e){K(e),r()},get onblur(){return T()},set onblur(e){T(e),r()}})}ie(["click"]);customElements.define("m-textinput",le(ke,{name:{},value:{},placeholder:{},inputtype:{},isvalid:{},isinvalid:{},disabled:{},readonly:{},size:{},hasicon:{},icon:{},rightalign:{},min:{},max:{},minlength:{},maxlength:{},required:{},clearlabel:{},isclearable:{},onclear:{},oninput:{},onchange:{},onblur:{}},["icon"],[],!0));
 //# sourceMappingURL=Textinput.js.map

package/dist/components/textinput/Textinput.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/actions.js","../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["/** @import { ActionPayload } from '#client' */\nimport { effect, render_effect } from '../../reactivity/effects.js';\nimport { safe_not_equal } from '../../reactivity/equality.js';\nimport { deep_read_state, untrack } from '../../runtime.js';\n\n/**\n * @template P\n * @param {Element} dom\n * @param {(dom: Element, value?: P) => ActionPayload<P>} action\n * @param {() => P} [get_value]\n * @returns {void}\n */\nexport function action(dom, action, get_value) {\n\teffect(() => {\n\t\tvar payload = untrack(() => action(dom, get_value?.()) || {});\n\n\t\tif (get_value && payload?.update) {\n\t\t\tvar inited = false;\n\t\t\t/** @type {P} */\n\t\t\tvar prev = /** @type {any} */ ({}); // initialize with something so it's never equal on first run\n\n\t\t\trender_effect(() => {\n\t\t\t\tvar value = get_value();\n\n\t\t\t\t// Action's update method is coarse-grained, i.e. when anything in the passed value changes, update.\n\t\t\t\t// This works in legacy mode because of mutable_source being updated as a whole, but when using $state\n\t\t\t\t// together with actions and mutation, it wouldn't notice the change without a deep read.\n\t\t\t\tdeep_read_state(value);\n\n\t\t\t\tif (inited && safe_not_equal(prev, value)) {\n\t\t\t\t\tprev = value;\n\t\t\t\t\t/** @type {Function} */ (payload.update)(value);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tinited = true;\n\t\t}\n\n\t\tif (payload?.destroy) {\n\t\t\treturn () => /** @type {Function} */ (payload.destroy)();\n\t\t}\n\t});\n}\n","<svelte:options customElement=\"m-textinput\" />\n\n<script lang=\"ts\">\n  import type { TextInputSize, TextInputType } from './textinput.types';\n\n  interface Props {\n    name: string;\n    value: string;\n    placeholder: string;\n    inputtype?: TextInputType;\n    isvalid: boolean;\n    isinvalid: boolean;\n    disabled?: boolean;\n    size?: TextInputSize;\n    iconname: string;\n    rightalign: boolean;\n    min: string;\n    max: string;\n    minlength: number;\n    maxlength: number;\n    required?: boolean;\n    clearlabel?: string;\n    isclearable?: boolean;\n    hasicon?: boolean;\n    onclear?: (arg: string) => void;\n  }\n\n  let {\n    name,\n    value,\n    placeholder,\n    inputtype = 'text',\n    isvalid,\n    isinvalid,\n    disabled = false,\n    size = 'm',\n    iconname,\n    rightalign,\n    min,\n    max,\n    minlength,\n    maxlength,\n    required = false,\n    clearlabel = 'Clear content',\n    isclearable = false,\n    onclear,\n    hasicon = false,\n    ...events\n  }: Props = $props();\n\n  let inputType = $derived(inputtype);\n  let displayClear = $derived(isclearable && value ? true : false);\n\n  function getClasses(\n    isValid: boolean,\n    isInvalid: boolean,\n    size: TextInputSize,\n    iconname: string,\n  ): string {\n    const classes = ['mc-text-input', 'mc-field__input'];\n\n    if (isValid) {\n      classes.push('is-valid');\n    }\n\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n\n    if (size === 's') {\n      classes.push('mc-text-input--s');\n    }\n\n    if (iconname) {\n      classes.push('mc-left-icon-input__input');\n    }\n\n    if (rightalign) {\n      classes.push('right-align');\n    }\n\n    return classes.join(' ');\n  }\n\n  const setType = (node: any) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    node.type = inputType;\n  };\n\n  function resetValue() {\n    value = '';\n    onclear('onclear');\n  }\n</script>\n\n{#snippet icon()}\n  <span class=\"mc-text-input__icon\">\n    <slot name=\"icon\" />\n  </span>\n{/snippet}\n<div class=\"{getClasses(isvalid, isinvalid, size, iconname)} \">\n  {#if hasicon}\n    <span class=\"mc-text-input__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <input\n    bind:value\n    use:setType\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    id={name}\n    {placeholder}\n    {disabled}\n    {min}\n    {max}\n    {minlength}\n    {maxlength}\n    spellcheck=\"false\"\n    {required}\n    {...events}\n  />\n  <!-- Control options -->\n  {#if displayClear}\n    <div class=\"mc-controls-options js-control-options\">\n      <!-- Clear Button -->\n      <button\n        type=\"button\"\n        class=\"mc-controls-options__button\"\n        onclick={resetValue}\n      >\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .right-align {\n    text-align: right;\n  }\n</style>\n"],"names":["action","dom","get_value","effect","payload","untrack","resetValue","_","value","onclear","name","$.prop","$$props","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max","minlength","maxlength","required","clearlabel","isclearable","hasicon","events","$.rest_props","inputType","displayClear","getClasses","isValid","isInvalid","classes","setType","node","$.get","$$render","consequent","consequent_1","$.template_effect","$0","$.set_class","div"],"mappings":"6UAYO,SAASA,GAAOC,EAAKD,EAAQE,EAAW,CAC9CC,EAAO,IAAM,CACZ,IAAIC,EAAUC,EAAQ,IAAML,EAAOC,EAAKC,GAAA,YAAAA,GAAa,GAAK,EAAE,EAwB5D,GAAIE,GAAA,MAAAA,EAAS,QACZ,MAAO,IAA+BA,EAAQ,QAAU,CAE3D,CAAE,CACF,CC+CW,SAAAE,GAAaC,EAAAC,EAAAC,EAAA,CACpBD,EAAQ,EAAE,EACVC,EAAO,EAAC,SAAS,CACnB;;;;;;;;0GA5FF,qBA4BIC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJJ,EAAKG,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EACXE,oBAAY,MAAM,EAClBC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EACPI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,EAAUT,EAAAC,EAAA,aAAA,CAAA,EACVS,EAAGV,EAAAC,EAAA,MAAA,CAAA,EACHU,EAAGX,EAAAC,EAAA,MAAA,CAAA,EACHW,EAASZ,EAAAC,EAAA,YAAA,CAAA,EACTY,EAASb,EAAAC,EAAA,YAAA,CAAA,EACTa,mBAAW,EAAK,EAChBC,qBAAa,eAAe,EAC5BC,sBAAc,EAAK,EACnBlB,EAAOE,EAAAC,EAAA,UAAA,CAAA,EACPgB,kBAAU,EAAK,EACZC,EAAAC,GAAAlB,EAAA,mPAGDmB,IAAqBjB,CAAS,EAC9BkB,QAAwB,GAAAL,EAAW,GAAInB,EAAQ,EAAY,WAEtDyB,EACPC,EACAC,EACAjB,EACAC,EACQ,OACFiB,EAAO,CAAI,gBAAiB,iBAAiB,EAE/C,OAAAF,GACFE,EAAQ,KAAK,UAAU,EAGrBD,GACFC,EAAQ,KAAK,YAAY,EAGvBlB,IAAS,KACXkB,EAAQ,KAAK,kBAAkB,EAG7BjB,GACFiB,EAAQ,KAAK,2BAA2B,EAGtChB,EAAU,GACZgB,EAAQ,KAAK,aAAa,EAGrBA,EAAQ,KAAK,GAAG,CACzB,OAEMC,EAAWC,GAAc,CAE7BA,EAAK,KAAIC,EAAGR,CAAS,CACtB,wFAcIH,EAAO,GAAAY,EAAAC,CAAA,gFASIzB,EAAS,cAEnBN,EAAI,8GASJmB,qIASSvB,GAAUE,EAAAC,CAAA,sDAQuBiB,EAAU,CAAA,CAAA,oBAdrDM,CAAY,GAAAQ,EAAAE,CAAA,gBAxBNC,EAAAC,GAAAC,GAAAC,EAAA,EAAA,GAAAF,GAAA,EAAA,IAAA,gBAAA,EAAA,CAAA,IAAAX,EAAWlB,IAASC,EAAW,EAAAE,IAAMC,EAAQ,CAAA,CAAA,CAAA,gNArE1C,OAAM,+JAGP,GAAK,6CACT,IAAG,uWAOC,GAAK,yDACH,gBAAe,2DACd,GAAK,sGAET,GAAK,YA+CnB","x_google_ignoreList":[0]}
+{"version":3,"file":"Textinput.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/actions.js","../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["/** @import { ActionPayload } from '#client' */\nimport { effect, render_effect } from '../../reactivity/effects.js';\nimport { safe_not_equal } from '../../reactivity/equality.js';\nimport { deep_read_state, untrack } from '../../runtime.js';\n\n/**\n * @template P\n * @param {Element} dom\n * @param {(dom: Element, value?: P) => ActionPayload<P>} action\n * @param {() => P} [get_value]\n * @returns {void}\n */\nexport function action(dom, action, get_value) {\n\teffect(() => {\n\t\tvar payload = untrack(() => action(dom, get_value?.()) || {});\n\n\t\tif (get_value && payload?.update) {\n\t\t\tvar inited = false;\n\t\t\t/** @type {P} */\n\t\t\tvar prev = /** @type {any} */ ({}); // initialize with something so it's never equal on first run\n\n\t\t\trender_effect(() => {\n\t\t\t\tvar value = get_value();\n\n\t\t\t\t// Action's update method is coarse-grained, i.e. when anything in the passed value changes, update.\n\t\t\t\t// This works in legacy mode because of mutable_source being updated as a whole, but when using $state\n\t\t\t\t// together with actions and mutation, it wouldn't notice the change without a deep read.\n\t\t\t\tdeep_read_state(value);\n\n\t\t\t\tif (inited && safe_not_equal(prev, value)) {\n\t\t\t\t\tprev = value;\n\t\t\t\t\t/** @type {Function} */ (payload.update)(value);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tinited = true;\n\t\t}\n\n\t\tif (payload?.destroy) {\n\t\t\treturn () => /** @type {Function} */ (payload.destroy)();\n\t\t}\n\t});\n}\n","<svelte:options customElement=\"m-textinput\" />\n\n<script lang=\"ts\">\n  import type { TextInputSize, TextInputType } from './textinput.types';\n  import type { Snippet } from 'svelte';\n\n  interface Props {\n    name: string;\n    value: string;\n    placeholder: string;\n    inputtype?: TextInputType;\n    isvalid: boolean;\n    isinvalid: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    size?: TextInputSize;\n    hasicon?: boolean;\n    icon?: Snippet;\n    rightalign: boolean;\n    min: string;\n    max: string;\n    minlength: number;\n    maxlength: number;\n    required?: boolean;\n    clearlabel?: string;\n    isclearable?: boolean;\n    onclear?: (arg: string) => void;\n    oninput?: (event: Event) => void;\n    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    name,\n    value,\n    placeholder,\n    inputtype = 'text',\n    isvalid,\n    isinvalid,\n    disabled = false,\n    readonly = false,\n    size = 'm',\n    hasicon = false,\n    icon,\n    rightalign,\n    min,\n    max,\n    minlength,\n    maxlength,\n    required = false,\n    clearlabel = 'Clear content',\n    isclearable = false,\n    onclear,\n    oninput,\n    onchange,\n    onblur,\n  }: Props = $props();\n\n  let inputType = $derived(inputtype);\n  let displayClear = $derived(isclearable && value ? true : false);\n  let hasIcon = $derived(!!hasicon || !!icon)\n\n  function getClasses(\n    isValid: boolean,\n    isInvalid: boolean,\n    size: TextInputSize,\n    hasIcon: boolean,\n  ): string {\n    const classes = ['mc-text-input', 'mc-field__input'];\n\n    if (isValid) {\n      classes.push('is-valid');\n    }\n\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n\n    if (size === 's') {\n      classes.push('mc-text-input--s');\n    }\n\n    if (hasIcon) {\n      classes.push('mc-left-icon-input__input');\n    }\n\n    if (rightalign) {\n      classes.push('right-align');\n    }\n\n    return classes.join(' ');\n  }\n\n  const setType = (node: any) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    node.type = inputType;\n  };\n\n  function resetValue() {\n    value = '';\n    onclear?.('onclear');\n  }\n</script>\n\n<div class=\"{getClasses(isvalid, isinvalid, size, hasIcon)} \">\n  {#if hasIcon}\n    <span class=\"mc-text-input__icon\">\n      {#if icon}\n       {@render icon()}\n      {:else}\n        <slot name=\"icon\" />\n      {/if}\n    </span>\n  {/if}\n  <input\n    bind:value\n    use:setType\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    id={name}\n    {placeholder}\n    {disabled}\n    {min}\n    {max}\n    {minlength}\n    {maxlength}\n    spellcheck=\"false\"\n    {required}\n    {...readonly ? { readonly: true } : {}}\n    {oninput}\n    {onchange}\n    {onblur}\n  />\n  <!-- Control options -->\n  {#if displayClear}\n    <div class=\"mc-controls-options js-control-options\">\n      <!-- Clear Button -->\n      <button\n        type=\"button\"\n        class=\"mc-controls-options__button\"\n        onclick={resetValue}\n      >\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .right-align {\n    text-align: right;\n  }\n</style>\n"],"names":["action","dom","get_value","effect","payload","untrack","resetValue","_","value","onclear","_a","name","$.prop","$$props","placeholder","inputtype","isvalid","isinvalid","disabled","readonly","size","hasicon","icon","rightalign","min","max","minlength","maxlength","required","clearlabel","isclearable","oninput","onchange","onblur","inputType","displayClear","hasIcon","$.derived","getClasses","isValid","isInvalid","classes","setType","node","$.get","$$render","consequent","alternate","consequent_1","consequent_2"],"mappings":"8XAYO,SAASA,GAAOC,EAAKD,EAAQE,EAAW,CAC9CC,EAAO,IAAM,CACZ,IAAIC,EAAUC,GAAQ,IAAML,EAAOC,EAAKC,GAAA,YAAAA,GAAa,GAAK,EAAE,EAwB5D,GAAIE,GAAA,MAAAA,EAAS,QACZ,MAAO,IAA+BA,EAAQ,QAAU,CAE3D,CAAE,CACF,CCwDW,SAAAE,GAAaC,EAAAC,EAAAC,EAAA,OACpBD,EAAQ,EAAE,GACVE,EAAAD,EAAO,IAAP,MAAAC,EAAU,UACZ;;;;;;;;0GArGF,uBAiCIC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJL,EAAKI,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EACXE,oBAAY,MAAM,EAClBC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EACPI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,mBAAW,EAAK,EAChBC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,kBAAU,EAAK,EACfC,EAAIV,EAAAC,EAAA,OAAA,CAAA,EACJU,EAAUX,EAAAC,EAAA,aAAA,CAAA,EACVW,EAAGZ,EAAAC,EAAA,MAAA,CAAA,EACHY,EAAGb,EAAAC,EAAA,MAAA,CAAA,EACHa,EAASd,EAAAC,EAAA,YAAA,CAAA,EACTc,EAASf,EAAAC,EAAA,YAAA,CAAA,EACTe,mBAAW,EAAK,EAChBC,qBAAa,eAAe,EAC5BC,sBAAc,EAAK,EACnBrB,EAAOG,EAAAC,EAAA,UAAA,CAAA,EACPkB,EAAOnB,EAAAC,EAAA,UAAA,CAAA,EACPmB,EAAQpB,EAAAC,EAAA,WAAA,CAAA,EACRoB,EAAMrB,EAAAC,EAAA,SAAA,CAAA,EAGJqB,IAAqBnB,CAAS,EAC9BoB,QAAwB,GAAAL,EAAW,GAAItB,EAAQ,EAAY,EAC3D4B,EAAOC,EAAA,IAAA,CAAA,CAAchB,KAAO,CAAA,CAAMC,GAAI,WAEjCgB,GACPC,EACAC,EACApB,EACAgB,EACQ,OACFK,EAAO,CAAI,gBAAiB,iBAAiB,EAE/C,OAAAF,GACFE,EAAQ,KAAK,UAAU,EAGrBD,GACFC,EAAQ,KAAK,YAAY,EAGvBrB,IAAS,KACXqB,EAAQ,KAAK,kBAAkB,EAG7BL,GACFK,EAAQ,KAAK,2BAA2B,EAGtClB,EAAU,GACZkB,EAAQ,KAAK,aAAa,EAGrBA,EAAQ,KAAK,GAAG,CACzB,OAEMC,EAAWC,GAAc,CAE7BA,EAAK,KAAIC,EAAGV,CAAS,CACtB,mFAYaZ,CAAI,mEADTA,EAAI,EAAAuB,EAAAC,CAAA,EAAAD,EAAAE,EAAA,EAAA,2BAFRX,CAAO,GAAAS,EAAAG,EAAA,gFAaI/B,EAAS,cAEnBN,EAAI,8GASJQ,EAAQ,EAAA,CAAK,SAAU,EAAI,EAAA,CAAA,2KAYlBb,GAAUE,EAAAC,CAAA,sDAQuBoB,EAAU,CAAA,CAAA,qBAdrDM,CAAY,GAAAU,EAAAI,EAAA,2DA/BN,IAAAX,GAAWtB,IAASC,EAAW,EAAAG,MAAMgB,CAAO,CAAA,kNApEzC,OAAM,+JAGP,GAAK,qDACL,GAAK,6CACT,IAAG,mDACA,GAAK,+VAOJ,GAAK,yDACH,gBAAe,2DACd,GAAK,wNAmDvB","x_google_ignoreList":[0]}

package/dist/{stories → components}/textinput/Textinput.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html-vite';
+import type { Meta } from '@storybook/html-vite';
 /**
  * Inputs are used to create input fields with text on a single line. Their states depend on the user interaction or the context.
  *
@@ -7,7 +7,7 @@ import type { StoryFn, Meta } from '@storybook/html-vite';
  */
 declare const _default: Meta;
 export default _default;
-export declare const Default: StoryFn;
-export declare const Invalid: StoryFn;
-export declare const Disabled: StoryFn;
+export declare const Default: any;
+export declare const Invalid: any;
+export declare const Disabled: any;
 //# sourceMappingURL=Textinput.stories.d.ts.map

package/dist/components/textinput/Textinput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA2EE,IAAI;AA1ET,wBA0EU;AAyBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AA4BzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,QAAQ,KAAoB,CAAC"}

package/dist/{stories → components}/textinput/Textinput.stories.js

@@ -31,6 +31,14 @@ export default {
             description: 'Specify whether the text input is invalid',
             control: 'boolean',
         },
+        required: {
+            description: 'Specify whether the text input is required',
+            control: 'boolean',
+        },
+        readonly: {
+            description: 'Specify whether the text input is readonly',
+            control: 'boolean',
+        },
         disabled: {
             description: 'Specify whether the text input is disabled',
             control: 'boolean',
@@ -85,8 +93,12 @@ const Template = (args) => {
         MTextInput.setAttribute('placeholder', args.placeholder);
     if (args.isinvalid)
         MTextInput.setAttribute('isinvalid', 'true');
+    if (args.require)
+        MTextInput.setAttribute('require', 'true');
     if (args.disabled)
         MTextInput.setAttribute('disabled', 'true');
+    if (args.readonly)
+        MTextInput.setAttribute('readonly', 'true');
     if (args.isclearable)
         MTextInput.setAttribute('isclearable', 'true');
     if (args.size)

package/dist/components/textinput/Textinput.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
   import type { TextInputSize, TextInputType } from './textinput.types';
+  import type { Snippet } from 'svelte';
 
   interface Props {
     name: string;
@@ -11,8 +12,10 @@
     isvalid: boolean;
     isinvalid: boolean;
     disabled?: boolean;
+    readonly?: boolean;
     size?: TextInputSize;
-    iconname: string;
+    hasicon?: boolean;
+    icon?: Snippet;
     rightalign: boolean;
     min: string;
     max: string;
@@ -21,8 +24,10 @@
     required?: boolean;
     clearlabel?: string;
     isclearable?: boolean;
-    hasicon?: boolean;
     onclear?: (arg: string) => void;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
   }
 
   let {
@@ -33,8 +38,10 @@
     isvalid,
     isinvalid,
     disabled = false,
+    readonly = false,
     size = 'm',
-    iconname,
+    hasicon = false,
+    icon,
     rightalign,
     min,
     max,
@@ -44,18 +51,20 @@
     clearlabel = 'Clear content',
     isclearable = false,
     onclear,
-    hasicon = false,
-    ...events
+    oninput,
+    onchange,
+    onblur,
   }: Props = $props();
 
   let inputType = $derived(inputtype);
   let displayClear = $derived(isclearable && value ? true : false);
+  let hasIcon = $derived(!!hasicon || !!icon)
 
   function getClasses(
     isValid: boolean,
     isInvalid: boolean,
     size: TextInputSize,
-    iconname: string,
+    hasIcon: boolean,
   ): string {
     const classes = ['mc-text-input', 'mc-field__input'];
 
@@ -71,7 +80,7 @@
       classes.push('mc-text-input--s');
     }
 
-    if (iconname) {
+    if (hasIcon) {
       classes.push('mc-left-icon-input__input');
     }
 
@@ -89,19 +98,18 @@
 
   function resetValue() {
     value = '';
-    onclear('onclear');
+    onclear?.('onclear');
   }
 </script>
 
-{#snippet icon()}
-  <span class="mc-text-input__icon">
-    <slot name="icon" />
-  </span>
-{/snippet}
-<div class="{getClasses(isvalid, isinvalid, size, iconname)} ">
-  {#if hasicon}
+<div class="{getClasses(isvalid, isinvalid, size, hasIcon)} ">
+  {#if hasIcon}
     <span class="mc-text-input__icon">
-      <slot name="icon" />
+      {#if icon}
+       {@render icon()}
+      {:else}
+        <slot name="icon" />
+      {/if}
     </span>
   {/if}
   <input
@@ -119,7 +127,10 @@
     {maxlength}
     spellcheck="false"
     {required}
-    {...events}
+    {...readonly ? { readonly: true } : {}}
+    {oninput}
+    {onchange}
+    {onblur}
   />
   <!-- Control options -->
   {#if displayClear}

package/dist/components/textinput/Textinput.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { TextInputSize, TextInputType } from './textinput.types';
+import type { Snippet } from 'svelte';
 interface Props {
     name: string;
     value: string;
@@ -7,8 +8,10 @@ interface Props {
     isvalid: boolean;
     isinvalid: boolean;
     disabled?: boolean;
+    readonly?: boolean;
     size?: TextInputSize;
-    iconname: string;
+    hasicon?: boolean;
+    icon?: Snippet;
     rightalign: boolean;
     min: string;
     max: string;
@@ -17,8 +20,10 @@ interface Props {
     required?: boolean;
     clearlabel?: string;
     isclearable?: boolean;
-    hasicon?: boolean;
     onclear?: (arg: string) => void;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/components/textinput/Textinput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGpE,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAyGH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,SAAS;;;;UAAmF,CAAC;AACjF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Textinput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/textinput/Textinput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AA6GH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,SAAS;;;;UAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/components/toggle/Toggle.js

@@ -1,4 +1,4 @@
-import{n as x,o as k,q as z,u as L,c as P,b as M,d as g,f as C,g as f,t as u,j as p,l as B,a as H,s as D,r as v,i as S,m as n,k as j}from"../../custom-element.js";import{i as q}from"../../if.js";import{r as T,s as E,a as Y}from"../../attributes.js";function A(a,e,{bubbles:l=!1,cancelable:r=!1}={}){return new CustomEvent(a,{detail:e,bubbles:l,cancelable:r})}function F(){const a=k;return a===null&&x(),(e,l,r)=>{var s;const i=(s=a.s.$$events)==null?void 0:s[e];if(i){const d=z(i)?i.slice():[i],h=A(e,l,r);for(const c of d)c.call(a.x,h);return!h.defaultPrevented}return!0}}function G(a,e,l){e(!e()),l("change",e())}var I=C('<span class="mc-toggle__label svelte-wiy2ed"> </span>'),J=C('<div><label class="mc-toggle__container svelte-wiy2ed"><input class="mc-toggle__input svelte-wiy2ed" type="checkbox"/> <!></label></div>');const K={hash:"svelte-wiy2ed",code:`/**
+import{n as z,c as L,p as M,a as P,b as r,f as _,d as f,t as b,e as B,o as H,h as E,i as j,j as i,s as D,r as v,g as F}from"../../custom-element.js";import{i as S}from"../../if.js";import{s as C,r as T}from"../../attributes.js";import{a as Y}from"../../input.js";import{c as q}from"../../custom-element-forward-events.js";var A=_('<span class="mc-toggle__label svelte-wiy2ed"> </span>'),G=_('<div><label class="mc-toggle__container svelte-wiy2ed"><input class="mc-toggle__input svelte-wiy2ed" type="checkbox"/> <!></label></div>');const I={hash:"svelte-wiy2ed",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-toggle.svelte-wiy2ed {width:fit-content;}.mc-toggle__container.svelte-wiy2ed {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-wiy2ed::before, .mc-toggle__container.svelte-wiy2ed::after {content:"";}.mc-toggle__container.svelte-wiy2ed::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-wiy2ed::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-wiy2ed {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-wiy2ed {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):checked) .mc-toggle__container:where(.svelte-wiy2ed)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):checked) .mc-toggle__container:where(.svelte-wiy2ed)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed) {cursor:not-allowed;}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed)::after {background-color:var(--forms-color-icon-disabled, #737373);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__label:where(.svelte-wiy2ed) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled:checked) .mc-toggle__container:where(.svelte-wiy2ed)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):focus-visible) .mc-toggle__container:where(.svelte-wiy2ed)::before {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-toggle--m.svelte-wiy2ed .mc-toggle__container:where(.svelte-wiy2ed)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-wiy2ed .mc-toggle__container:where(.svelte-wiy2ed)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-wiy2ed:has(:where(.svelte-wiy2ed):checked) .mc-toggle__container:where(.svelte-wiy2ed)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled:checked) .mc-toggle__container:where(.svelte-wiy2ed)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-wiy2ed .mc-toggle__label:where(.svelte-wiy2ed) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function N(a,e){H(e,!0),M(a,K);let l=g(e,"name",7),r=g(e,"checked",15),i=g(e,"disabled",7,!1),s=g(e,"size",7,"m"),d=g(e,"label",7),h=F();var c=J(),w=f(c),o=f(w);T(o),o.__click=[G,r,h];var b=D(o,2);{var _=t=>{var m=I(),y=f(m,!0);v(m),u(()=>j(y,d())),p(t,m)};q(b,t=>{d()&&t(_)})}return v(w),v(c),u(()=>{S(c,1,`mc-toggle ${d()?"":" mc-toggle--hide-label"} ${s()==="m"?" mc-toggle--m":""}`,"svelte-wiy2ed"),E(o,"id",l()),E(o,"name",l()),Y(o,r()),o.disabled=i()}),p(a,c),B({get name(){return l()},set name(t){l(t),n()},get checked(){return r()},set checked(t){r(t),n()},get disabled(){return i()},set disabled(t=!1){i(t),n()},get size(){return s()},set size(t="m"){s(t),n()},get label(){return d()},set label(t){d(t),n()}})}L(["click"]);customElements.define("m-toggle",P(N,{name:{},checked:{},disabled:{},size:{},label:{}},[],[],!0));
+ */.mc-toggle.svelte-wiy2ed {width:fit-content;}.mc-toggle__container.svelte-wiy2ed {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-wiy2ed::before, .mc-toggle__container.svelte-wiy2ed::after {content:"";}.mc-toggle__container.svelte-wiy2ed::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-wiy2ed::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-wiy2ed {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-wiy2ed {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):checked) .mc-toggle__container:where(.svelte-wiy2ed)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):checked) .mc-toggle__container:where(.svelte-wiy2ed)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed) {cursor:not-allowed;}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed)::after {background-color:var(--forms-color-icon-disabled, #737373);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__label:where(.svelte-wiy2ed) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled:checked) .mc-toggle__container:where(.svelte-wiy2ed)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-wiy2ed:has(:where(.svelte-wiy2ed):focus-visible) .mc-toggle__container:where(.svelte-wiy2ed)::before {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-toggle--m.svelte-wiy2ed .mc-toggle__container:where(.svelte-wiy2ed)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-wiy2ed .mc-toggle__container:where(.svelte-wiy2ed)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-wiy2ed:has(:where(.svelte-wiy2ed):checked) .mc-toggle__container:where(.svelte-wiy2ed)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled) .mc-toggle__container:where(.svelte-wiy2ed)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-wiy2ed:has(:where(.svelte-wiy2ed):disabled:checked) .mc-toggle__container:where(.svelte-wiy2ed)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-wiy2ed .mc-toggle__label:where(.svelte-wiy2ed) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function J(w,t){M(t,!0),P(w,I);let o=r(t,"name",7),g=r(t,"checked",15),c=r(t,"disabled",7,!1),n=r(t,"size",7,"m"),d=r(t,"label",7),h=r(t,"onchange",7),m=r(t,"onblur",7);var s=G();let u;var p=f(s),a=f(p);T(a),a.__change=function(...e){var l;(l=h())==null||l.apply(this,e)};var y=D(a,2);{var k=e=>{var l=A(),x=f(l,!0);v(l),b(()=>F(x,d())),E(e,l)};S(y,e=>{d()&&e(k)})}return v(p),v(s),b(e=>{u=B(s,1,"mc-toggle svelte-wiy2ed",null,u,e),C(a,"id",o()),C(a,"name",o()),a.disabled=c()},[()=>({"mc-toggle--hide-label":!d(),"mc-toggle--m":n()==="m"})]),H("blur",a,function(...e){var l;(l=m())==null||l.apply(this,e)}),Y(a,g),E(w,s),j({get name(){return o()},set name(e){o(e),i()},get checked(){return g()},set checked(e){g(e),i()},get disabled(){return c()},set disabled(e=!1){c(e),i()},get size(){return n()},set size(e="m"){n(e),i()},get label(){return d()},set label(e){d(e),i()},get onchange(){return h()},set onchange(e){h(e),i()},get onblur(){return m()},set onblur(e){m(e),i()}})}z(["change"]);customElements.define("m-toggle",L(J,{name:{},checked:{},disabled:{},size:{},label:{},onchange:{},onblur:{}},[],[],!0,q));
 //# sourceMappingURL=Toggle.js.map

package/dist/components/toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../node_modules/svelte/src/index-client.js","../../../src/components/toggle/Toggle.svelte"],"sourcesContent":["/** @import { ComponentContext, ComponentContextLegacy } from '#client' */\n/** @import { EventDispatcher } from './index.js' */\n/** @import { NotFunction } from './internal/types.js' */\nimport { active_reaction, untrack } from './internal/client/runtime.js';\nimport { is_array } from './internal/shared/utils.js';\nimport { user_effect } from './internal/client/index.js';\nimport * as e from './internal/client/errors.js';\nimport { legacy_mode_flag } from './internal/flags/index.js';\nimport { component_context } from './internal/client/context.js';\nimport { DEV } from 'esm-env';\n\nif (DEV) {\n\t/**\n\t * @param {string} rune\n\t */\n\tfunction throw_rune_error(rune) {\n\t\tif (!(rune in globalThis)) {\n\t\t\t// TODO if people start adjusting the \"this can contain runes\" config through v-p-s more, adjust this message\n\t\t\t/** @type {any} */\n\t\t\tlet value; // let's hope noone modifies this global, but belts and braces\n\t\t\tObject.defineProperty(globalThis, rune, {\n\t\t\t\tconfigurable: true,\n\t\t\t\t// eslint-disable-next-line getter-return\n\t\t\t\tget: () => {\n\t\t\t\t\tif (value !== undefined) {\n\t\t\t\t\t\treturn value;\n\t\t\t\t\t}\n\n\t\t\t\t\te.rune_outside_svelte(rune);\n\t\t\t\t},\n\t\t\t\tset: (v) => {\n\t\t\t\t\tvalue = v;\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tthrow_rune_error('$state');\n\tthrow_rune_error('$effect');\n\tthrow_rune_error('$derived');\n\tthrow_rune_error('$inspect');\n\tthrow_rune_error('$props');\n\tthrow_rune_error('$bindable');\n}\n\n/**\n * Returns an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.\n *\n * Must be called while a derived or effect is running.\n *\n * ```svelte\n * <script>\n * \timport { getAbortSignal } from 'svelte';\n *\n * \tlet { id } = $props();\n *\n * \tasync function getData(id) {\n * \t\tconst response = await fetch(`/items/${id}`, {\n * \t\t\tsignal: getAbortSignal()\n * \t\t});\n *\n * \t\treturn await response.json();\n * \t}\n *\n * \tconst data = $derived(await getData(id));\n * </script>\n * ```\n */\nexport function getAbortSignal() {\n\tif (active_reaction === null) {\n\t\te.get_abort_signal_outside_reaction();\n\t}\n\n\treturn (active_reaction.ac ??= new AbortController()).signal;\n}\n\n/**\n * `onMount`, like [`$effect`](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM.\n * Unlike `$effect`, the provided function only runs once.\n *\n * It must be called during the component's initialisation (but doesn't need to live _inside_ the component;\n * it can be called from an external module). If a function is returned _synchronously_ from `onMount`,\n * it will be called when the component is unmounted.\n *\n * `onMount` functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).\n *\n * @template T\n * @param {() => NotFunction<T> | Promise<NotFunction<T>> | (() => any)} fn\n * @returns {void}\n */\nexport function onMount(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onMount');\n\t}\n\n\tif (legacy_mode_flag && component_context.l !== null) {\n\t\tinit_update_callbacks(component_context).m.push(fn);\n\t} else {\n\t\tuser_effect(() => {\n\t\t\tconst cleanup = untrack(fn);\n\t\t\tif (typeof cleanup === 'function') return /** @type {() => void} */ (cleanup);\n\t\t});\n\t}\n}\n\n/**\n * Schedules a callback to run immediately before the component is unmounted.\n *\n * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the\n * only one that runs inside a server-side component.\n *\n * @param {() => any} fn\n * @returns {void}\n */\nexport function onDestroy(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('onDestroy');\n\t}\n\n\tonMount(() => () => untrack(fn));\n}\n\n/**\n * @template [T=any]\n * @param {string} type\n * @param {T} [detail]\n * @param {any}params_0\n * @returns {CustomEvent<T>}\n */\nfunction create_custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {\n\treturn new CustomEvent(type, { detail, bubbles, cancelable });\n}\n\n/**\n * Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events).\n * Event dispatchers are functions that can take two arguments: `name` and `detail`.\n *\n * Component events created with `createEventDispatcher` create a\n * [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent).\n * These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture).\n * The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail)\n * property and can contain any type of data.\n *\n * The event dispatcher can be typed to narrow the allowed event names and the type of the `detail` argument:\n * ```ts\n * const dispatch = createEventDispatcher<{\n *  loaded: null; // does not take a detail argument\n *  change: string; // takes a detail argument of type string, which is required\n *  optional: number | null; // takes an optional detail argument of type number\n * }>();\n * ```\n *\n * @deprecated Use callback props and/or the `$host()` rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)\n * @template {Record<string, any>} [EventMap = any]\n * @returns {EventDispatcher<EventMap>}\n */\nexport function createEventDispatcher() {\n\tconst active_component_context = component_context;\n\tif (active_component_context === null) {\n\t\te.lifecycle_outside_component('createEventDispatcher');\n\t}\n\n\treturn (type, detail, options) => {\n\t\tconst events = /** @type {Record<string, Function | Function[]>} */ (\n\t\t\tactive_component_context.s.$$events\n\t\t)?.[/** @type {any} */ (type)];\n\n\t\tif (events) {\n\t\t\tconst callbacks = is_array(events) ? events.slice() : [events];\n\t\t\t// TODO are there situations where events could be dispatched\n\t\t\t// in a server (non-DOM) environment?\n\t\t\tconst event = create_custom_event(/** @type {string} */ (type), detail, options);\n\t\t\tfor (const fn of callbacks) {\n\t\t\t\tfn.call(active_component_context.x, event);\n\t\t\t}\n\t\t\treturn !event.defaultPrevented;\n\t\t}\n\n\t\treturn true;\n\t};\n}\n\n// TODO mark beforeUpdate and afterUpdate as deprecated in Svelte 6\n\n/**\n * Schedules a callback to run immediately before the component is updated after any state change.\n *\n * The first time the callback runs will be before the initial `onMount`.\n *\n * In runes mode use `$effect.pre` instead.\n *\n * @deprecated Use [`$effect.pre`](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function beforeUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('beforeUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('beforeUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).b.push(fn);\n}\n\n/**\n * Schedules a callback to run immediately after the component has been updated.\n *\n * The first time the callback runs will be after the initial `onMount`.\n *\n * In runes mode use `$effect` instead.\n *\n * @deprecated Use [`$effect`](https://svelte.dev/docs/svelte/$effect) instead\n * @param {() => void} fn\n * @returns {void}\n */\nexport function afterUpdate(fn) {\n\tif (component_context === null) {\n\t\te.lifecycle_outside_component('afterUpdate');\n\t}\n\n\tif (component_context.l === null) {\n\t\te.lifecycle_legacy_only('afterUpdate');\n\t}\n\n\tinit_update_callbacks(component_context).a.push(fn);\n}\n\n/**\n * Legacy-mode: Init callbacks object for onMount/beforeUpdate/afterUpdate\n * @param {ComponentContext} context\n */\nfunction init_update_callbacks(context) {\n\tvar l = /** @type {ComponentContextLegacy} */ (context).l;\n\treturn (l.u ??= { a: [], b: [], m: [] });\n}\n\nexport { flushSync } from './internal/client/reactivity/batch.js';\nexport { getContext, getAllContexts, hasContext, setContext } from './internal/client/context.js';\nexport { hydrate, mount, unmount } from './internal/client/render.js';\nexport { tick, untrack, settled } from './internal/client/runtime.js';\nexport { createRawSnippet } from './internal/client/dom/blocks/snippet.js';\n","<svelte:options customElement=\"m-toggle\" />\n\n<script lang=\"ts\">\n  import type { ToggleSize } from './toggle.types';\n  import { createEventDispatcher } from 'svelte';\n\n  interface Props {\n    name: string;\n    checked: boolean;\n    disabled?: boolean;\n    size?: ToggleSize;\n    label: string;\n  }\n\n  let {\n    name,\n    checked = $bindable(),\n    disabled = false,\n    size = 'm',\n    label,\n  }: Props = $props();\n\n  let dispatch = createEventDispatcher();\n\n  function handleState(): void {\n    checked = !checked;\n    dispatch('change', checked);\n  }\n</script>\n\n<div\n  class=\"mc-toggle {!label ? ' mc-toggle--hide-label' : ''} {size === 'm'\n    ? ' mc-toggle--m'\n    : ''}\"\n>\n  <label class=\"mc-toggle__container\">\n    <input\n      class=\"mc-toggle__input\"\n      id={name}\n      {name}\n      type=\"checkbox\"\n      {checked}\n      {disabled}\n      onclick={handleState}\n    />\n    {#if label}\n      <span class=\"mc-toggle__label\">{label}</span>\n    {/if}\n  </label>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/toggle';\n</style>\n"],"names":["create_custom_event","type","detail","bubbles","cancelable","createEventDispatcher","active_component_context","component_context","e.lifecycle_outside_component","options","events","_a","callbacks","is_array","event","fn","handleState","_","checked","dispatch","name","$.prop","$$props","disabled","size","label","$$render","consequent"],"mappings":"yPAiIA,SAASA,EAAoBC,EAAMC,EAAQ,CAAE,QAAAC,EAAU,GAAO,WAAAC,EAAa,EAAO,EAAG,GAAI,CACxF,OAAO,IAAI,YAAYH,EAAM,CAAE,OAAAC,EAAQ,QAAAC,EAAS,WAAAC,EAAY,CAC7D,CAyBO,SAASC,GAAwB,CACvC,MAAMC,EAA2BC,EACjC,OAAID,IAA6B,MAChCE,EAAqD,EAG/C,CAACP,EAAMC,EAAQO,IAAY,OACjC,MAAMC,GACLC,EAAAL,EAAyB,EAAE,WAA3B,YAAAK,EACuBV,GAExB,GAAIS,EAAQ,CACX,MAAME,EAAYC,EAASH,CAAM,EAAIA,EAAO,MAAK,EAAK,CAACA,CAAM,EAGvDI,EAAQd,EAA2CC,EAAOC,EAAQO,CAAO,EAC/E,UAAWM,KAAMH,EAChBG,EAAG,KAAKT,EAAyB,EAAGQ,CAAK,EAE1C,MAAO,CAACA,EAAM,gBACjB,CAEE,MAAO,EACP,CACF,CC5JW,SAAAE,EAAoBC,EAAAC,EAAAC,EAAA,CAC3BD,GAAWA,GAAO,EAClBC,EAAS,SAAUD,GAAO,CAC5B;;srPA3BF,oBAeIE,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJJ,EAAOG,EAAAC,EAAA,UAAA,EAAA,EACPC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,EAAKJ,EAAAC,EAAA,QAAA,CAAA,EAGHH,EAAWd,EAAqB,0CAqBvBW,EAAWE,EAAAC,CAAA,6DAGYM,EAAK,CAAA,CAAA,kBADlCA,EAAK,GAAAC,EAAAC,CAAA,+CAdOF,EAAK,EAA8B,GAA3B,wBAA6B,IAAGD,EAAI,IAAK,IAChE,gBACA,EAAE,GAAA,eAAA,WAKEJ,GAAI,gMArBC,GAAK,6CACT,IAAG,2DAUd","x_google_ignoreList":[0]}
+{"version":3,"file":"Toggle.js","sources":["../../../src/components/toggle/Toggle.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-toggle',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { ToggleSize } from './toggle.types';\n  import { customElementForwardEvents } from '../../utils';\n\n  interface Props {\n    name: string;\n    checked: boolean;\n    disabled?: boolean;\n    size?: ToggleSize;\n    label: string;\n    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    name,\n    checked = $bindable(),\n    disabled = false,\n    size = 'm',\n    label,\n    onchange,\n    onblur\n  }: Props = $props();\n</script>\n\n<div\n  class=\"mc-toggle\"\n  class:mc-toggle--hide-label={!label}\n  class:mc-toggle--m={size === 'm'}\n>\n  <label class=\"mc-toggle__container\">\n    <input\n      class=\"mc-toggle__input\"\n      id={name}\n      {name}\n      type=\"checkbox\"\n      bind:checked\n      {disabled}\n      {onchange}\n      {onblur}\n    />\n    {#if label}\n      <span class=\"mc-toggle__label\">{label}</span>\n    {/if}\n  </label>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/toggle';\n</style>\n"],"names":["name","$.prop","$$props","checked","disabled","size","label","onchange","onblur","$$render","consequent","customElementForwardEvents"],"mappings":";;srPAAA,oBAsBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAOF,EAAAC,EAAA,UAAA,EAAA,EACPE,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,EAAKL,EAAAC,EAAA,QAAA,CAAA,EACLK,EAAQN,EAAAC,EAAA,WAAA,CAAA,EACRM,EAAAP,EAAAC,EAAA,SAAA,CAAA,oKAqBkCI,EAAK,CAAA,CAAA,kBADlCA,EAAK,GAAAG,EAAAC,CAAA,gFARJV,GAAI,kEANkBM,EAAK,EACf,eAAAD,EAAI,IAAK,oOAXhB,GAAK,6CACT,IAAG,iKAKd,qIA3BYM"}

package/dist/{stories → components}/toggle/Toggle.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html-vite';
+import type { Meta } from '@storybook/html-vite';
 /**
  * A toggle is used to choose between two possibilities and when the user needs instant feedback.
  * It is commonly used to show or hide content and act as an "on/off" switch.
@@ -8,8 +8,8 @@ import type { StoryFn, Meta } from '@storybook/html-vite';
  */
 declare const _default: Meta;
 export default _default;
-export declare const Default: StoryFn;
-export declare const Checked: StoryFn;
-export declare const Disabled: StoryFn;
-export declare const Small: StoryFn;
+export declare const Default: any;
+export declare const Checked: any;
+export declare const Disabled: any;
+export declare const Small: any;
 //# sourceMappingURL=Toggle.stories.d.ts.map

package/dist/components/toggle/Toggle.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBA2BE,IAAI;AAzBT,wBAyBU;AAaV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,OAAO,KAAoB,CAAC;AAQzC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAO1C,eAAO,MAAM,KAAK,KAAoB,CAAC"}

package/dist/components/toggle/Toggle.svelte

@@ -1,8 +1,13 @@
-<svelte:options customElement="m-toggle" />
+<svelte:options
+  customElement={{
+    tag: 'm-toggle',
+    extend: customElementForwardEvents,
+  }}
+/>
 
 <script lang="ts">
   import type { ToggleSize } from './toggle.types';
-  import { createEventDispatcher } from 'svelte';
+  import { customElementForwardEvents } from '../../utils';
 
   interface Props {
     name: string;
@@ -10,6 +15,8 @@
     disabled?: boolean;
     size?: ToggleSize;
     label: string;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
   }
 
   let {
@@ -18,20 +25,15 @@
     disabled = false,
     size = 'm',
     label,
+    onchange,
+    onblur
   }: Props = $props();
-
-  let dispatch = createEventDispatcher();
-
-  function handleState(): void {
-    checked = !checked;
-    dispatch('change', checked);
-  }
 </script>
 
 <div
-  class="mc-toggle {!label ? ' mc-toggle--hide-label' : ''} {size === 'm'
-    ? ' mc-toggle--m'
-    : ''}"
+  class="mc-toggle"
+  class:mc-toggle--hide-label={!label}
+  class:mc-toggle--m={size === 'm'}
 >
   <label class="mc-toggle__container">
     <input
@@ -39,9 +41,10 @@
       id={name}
       {name}
       type="checkbox"
-      {checked}
+      bind:checked
       {disabled}
-      onclick={handleState}
+      {onchange}
+      {onblur}
     />
     {#if label}
       <span class="mc-toggle__label">{label}</span>

package/dist/components/toggle/Toggle.svelte.d.ts

@@ -5,25 +5,10 @@ interface Props {
     disabled?: boolean;
     size?: ToggleSize;
     label: string;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Toggle: $$__sveltets_2_IsomorphicComponent<Props, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "checked">;
-type Toggle = InstanceType<typeof Toggle>;
+declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;
 //# sourceMappingURL=Toggle.svelte.d.ts.map

package/dist/components/toggle/Toggle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI/C,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAuCH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,MAAM;;;;qBAA6E,CAAC;AACxE,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAI/C,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAmCH,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/togglegroup/ToggleGroup.js

@@ -1,7 +1,7 @@
-import{c as I,p as O,a as S,b as T,d as s,e as Y,f as p,g as n,s as P,h as a,r as o,t as m,i as q,j as u,k as y,l as J,m as d}from"../../custom-element.js";import{i as B}from"../../if.js";import{e as K}from"../../each.js";import{r as N,s as b}from"../../attributes.js";import{b as Q}from"../../input.js";import{c as R}from"../../custom-element-forward-events.js";var U=p('<legend class="mc-field__legend svelte-7x6fn9"> </legend>'),V=p('<span class="mc-toggle__label svelte-7x6fn9"> </span>'),W=p('<div><label class="mc-toggle__container svelte-7x6fn9"><input class="mc-toggle__input svelte-7x6fn9" type="checkbox"/> <!></label></div>'),X=p('<fieldset class="mc-field mc-field--group svelte-7x6fn9"><!> <div class="mc-field__container svelte-7x6fn9"></div></fieldset>');const Z={hash:"svelte-7x6fn9",code:`/**
+import{c as I,k as O,a as S,b as s,f as p,t as m,h as u,i as T,p as Y,l as q,d as n,s as P,r as o,j as d,g as y,m as a,e as J}from"../../custom-element.js";import{i as B}from"../../if.js";import{e as K}from"../../each.js";import{s as b,r as N}from"../../attributes.js";import{b as Q}from"../../input.js";import{c as R}from"../../custom-element-forward-events.js";var U=p('<legend class="mc-field__legend svelte-7x6fn9"> </legend>'),V=p('<span class="mc-toggle__label svelte-7x6fn9"> </span>'),W=p('<div><label class="mc-toggle__container svelte-7x6fn9"><input class="mc-toggle__input svelte-7x6fn9" type="checkbox"/> <!></label></div>'),X=p('<fieldset class="mc-field mc-field--group svelte-7x6fn9"><!> <div class="mc-field__container svelte-7x6fn9"></div></fieldset>');const Z={hash:"svelte-7x6fn9",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */ .mc-field__legend.svelte-7x6fn9 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__legend.svelte-7x6fn9 {padding-inline:0;}.mc-field--group.svelte-7x6fn9 {border-width:0;margin-inline:0;padding:0;}
 
-/* stylelint-enable string-no-newline */.mc-toggle.svelte-7x6fn9 {width:fit-content;}.mc-toggle__container.svelte-7x6fn9 {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-7x6fn9::before, .mc-toggle__container.svelte-7x6fn9::after {content:"";}.mc-toggle__container.svelte-7x6fn9::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-7x6fn9::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-7x6fn9 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-7x6fn9 {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9) {cursor:not-allowed;}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::after {background-color:var(--forms-color-icon-disabled, #737373);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__label:where(.svelte-7x6fn9) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled:checked) .mc-toggle__container:where(.svelte-7x6fn9)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):focus-visible) .mc-toggle__container:where(.svelte-7x6fn9)::before {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-toggle--m.svelte-7x6fn9 .mc-toggle__container:where(.svelte-7x6fn9)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-7x6fn9 .mc-toggle__container:where(.svelte-7x6fn9)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled:checked) .mc-toggle__container:where(.svelte-7x6fn9)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-7x6fn9 .mc-toggle__label:where(.svelte-7x6fn9) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function $(C,r){const k=O();S(r,!0),T(C,Z);const H=[];let g=s(r,"name",7),f=s(r,"id",7,k),c=s(r,"options",7),h=s(r,"legend",7),v=s(r,"values",31,()=>Y([]));function j(e){var l;return((l=c()[e])==null?void 0:l.id)??`${f()}-${e}`}var x=X(),L=n(x);{var A=e=>{var l=U(),i=n(l,!0);o(l),m(()=>y(i,h())),u(e,l)};B(L,e=>{h()&&e(A)})}var w=P(L,2);return K(w,23,c,(e,l)=>j(l),(e,l)=>{var i=W(),z=n(i),t=n(z);N(t);var M,D=P(t,2);{var F=E=>{var _=V(),G=n(_,!0);o(_),m(()=>y(G,a(l).label)),u(E,_)};B(D,E=>{a(l).label&&E(F)})}o(z),o(i),m(()=>{q(i,1,`mc-toggle mc-field__item ${a(l).label?"":" mc-toggle--hide-label"} ${a(l).size==="m"?" mc-toggle--m":""}`,"svelte-7x6fn9"),b(t,"id",g()),b(t,"name",g()),t.disabled=a(l).disabled,M!==(M=a(l).value)&&(t.value=(t.__value=a(l).value)??"")}),Q(H,[],t,()=>(a(l).value,v()),v),u(e,i)}),o(w),o(x),m(()=>b(w,"id",f())),u(C,x),J({get name(){return g()},set name(e){g(e),d()},get id(){return f()},set id(e=k){f(e),d()},get options(){return c()},set options(e){c(e),d()},get legend(){return h()},set legend(e){h(e),d()},get values(){return v()},set values(e=[]){v(e),d()}})}customElements.define("m-toggle-group",I($,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},id:{},legend:{},values:{}},[],[],!0,R));
+/* stylelint-enable string-no-newline */.mc-toggle.svelte-7x6fn9 {width:fit-content;}.mc-toggle__container.svelte-7x6fn9 {display:flex;align-items:center;cursor:pointer;gap:0.5rem;position:relative;padding:0.25rem;}.mc-toggle__container.svelte-7x6fn9::before, .mc-toggle__container.svelte-7x6fn9::after {content:"";}.mc-toggle__container.svelte-7x6fn9::before {transition:box-shadow 200ms ease;height:1.5rem;width:2.5rem;background-color:var(--forms-color-background-unchecked, #666666);border-radius:var(--radius-l, 1rem);flex-shrink:0;}.mc-toggle__container.svelte-7x6fn9::after {height:1.25rem;width:1.25rem;background-color:var(--forms-color-icon-inverse, #ffffff);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");border-radius:var(--radius-full, 100%);background-position:center;left:0.375rem;position:absolute;top:50%;transform:translateY(-50%);}.mc-toggle__input.svelte-7x6fn9 {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-toggle__label.svelte-7x6fn9 {color:var(--forms-color-text-default, #000000);font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-m, 1.5);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::before {background-color:var(--forms-color-background-checked, #117f03);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1rem, -50%);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9) {cursor:not-allowed;}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::before {background-color:var(--forms-color-background-disabled, #d9d9d9);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::after {background-color:var(--forms-color-icon-disabled, #737373);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.364a.75.75 0 1 0-1.06-1.061L10 8.939 6.364 5.303a.75.75 0 0 0-1.06 1.06L8.94 10l-3.637 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.061-1.06L11.061 10z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__label:where(.svelte-7x6fn9) {color:var(--forms-color-text-disabled, #737373);}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled:checked) .mc-toggle__container:where(.svelte-7x6fn9)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 20 20'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M14.697 6.553a.75.75 0 0 1 0 1.06l-5.833 5.834a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 0 1 1.06-1.06l1.97 1.97 5.303-5.304a.75.75 0 0 1 1.06 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle.svelte-7x6fn9:has(:where(.svelte-7x6fn9):focus-visible) .mc-toggle__container:where(.svelte-7x6fn9)::before {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-toggle--m.svelte-7x6fn9 .mc-toggle__container:where(.svelte-7x6fn9)::before {height:2rem;width:3.5rem;}.mc-toggle--m.svelte-7x6fn9 .mc-toggle__container:where(.svelte-7x6fn9)::after {height:1.5rem;width:1.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-unchecked, %23666666)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");left:0.5rem;}.mc-toggle--m.svelte-7x6fn9:has(:where(.svelte-7x6fn9):checked) .mc-toggle__container:where(.svelte-7x6fn9)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-checked, %23117f03)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");transform:translate(1.5rem, -50%);}.mc-toggle--m.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled) .mc-toggle__container:where(.svelte-7x6fn9)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--m.svelte-7x6fn9:has(:where(.svelte-7x6fn9):disabled:checked) .mc-toggle__container:where(.svelte-7x6fn9)::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' fill='var(--forms-color-background-disabled, %23d9d9d9)' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M17.707 7.793a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L10 14.086l6.293-6.293a1 1 0 0 1 1.414 0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");}.mc-toggle--hide-label.svelte-7x6fn9 .mc-toggle__label:where(.svelte-7x6fn9) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}`};function $(C,r){const k=O();Y(r,!0),S(C,Z);const H=[];let g=s(r,"name",7),f=s(r,"id",7,k),c=s(r,"options",7),h=s(r,"legend",7),v=s(r,"values",31,()=>q([]));function j(e){var l;return((l=c()[e])==null?void 0:l.id)??`${f()}-${e}`}var x=X(),L=n(x);{var A=e=>{var l=U(),i=n(l,!0);o(l),m(()=>y(i,h())),u(e,l)};B(L,e=>{h()&&e(A)})}var w=P(L,2);return K(w,23,c,(e,l)=>j(l),(e,l)=>{var i=W(),z=n(i),t=n(z);N(t);var M,D=P(t,2);{var F=E=>{var _=V(),G=n(_,!0);o(_),m(()=>y(G,a(l).label)),u(E,_)};B(D,E=>{a(l).label&&E(F)})}o(z),o(i),m(()=>{J(i,1,`mc-toggle mc-field__item ${a(l).label?"":" mc-toggle--hide-label"} ${a(l).size==="m"?" mc-toggle--m":""}`,"svelte-7x6fn9"),b(t,"id",g()),b(t,"name",g()),t.disabled=a(l).disabled,M!==(M=a(l).value)&&(t.value=(t.__value=a(l).value)??"")}),Q(H,[],t,()=>(a(l).value,v()),v),u(e,i)}),o(w),o(x),m(()=>b(w,"id",f())),u(C,x),T({get name(){return g()},set name(e){g(e),d()},get id(){return f()},set id(e=k){f(e),d()},get options(){return c()},set options(e){c(e),d()},get legend(){return h()},set legend(e){h(e),d()},get values(){return v()},set values(e=[]){v(e),d()}})}customElements.define("m-toggle-group",I($,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},id:{},legend:{},values:{}},[],[],!0,R));
 //# sourceMappingURL=ToggleGroup.js.map