@mozaic-ds/web-components 1.0.0-alpha.9 → 1.0.0-beta.1

package/dist/components/checkboxgroup/CheckboxGroup.js

@@ -0,0 +1,10 @@
+import{Y,Z,c as J,p as K,a as N,b as P,d as m,e as Q,f as q,s as j,g as h,t as x,h as w,i as R,j as g,r as d,k as A,l as a,m as T}from"../../custom-element.js";import{i as D}from"../../if.js";import{e as U}from"../../each.js";import{r as V,s as u}from"../../attributes.js";import{b as W}from"../../input.js";import{c as X}from"../../custom-element-forward-events.js";function $(v,t,i,E,s){var l=()=>{E(i[v])};i.addEventListener(t,l),s?Y(()=>{i[v]=s()}):l(),(i===document.body||i===window||i===document)&&Z(()=>{i.removeEventListener(t,l)})}var ee=q('<legend class="mc-field__legend svelte-14qag3h"> </legend>'),re=q('<label class="mc-checkbox__label svelte-14qag3h"> </label>'),ae=q('<div class="mc-checkbox mc-field__item svelte-14qag3h"><input type="checkbox"/> <!></div>'),oe=q('<div class="checkbox-group-container"><fieldset class="mc-field mc-field--group svelte-14qag3h"><!> <div class="mc-field__container"></div></fieldset></div>');const ie={hash:"svelte-14qag3h",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */.mc-checkbox.svelte-14qag3h {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox__label.svelte-14qag3h {font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-checkbox__input.svelte-14qag3h {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:0.125rem solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-14qag3h:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-14qag3h: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-checkbox__input.svelte-14qag3h:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-14qag3h:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-14qag3h:checked, .mc-checkbox__input.svelte-14qag3h:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-14qag3h:checked, .mc-checkbox__input.svelte-14qag3h:indeterminate, .mc-checkbox__input.svelte-14qag3h:disabled {border-color:transparent;}.mc-checkbox__input.svelte-14qag3h:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-14qag3h:disabled:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-14qag3h:disabled:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-14qag3h:disabled + .mc-checkbox__label:where(.svelte-14qag3h) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-14qag3h:not(:disabled):checked:hover, .mc-checkbox__input.svelte-14qag3h:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-14qag3h:not(:checked):not(:indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-14qag3h:not(:checked):not(:indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
+
+/* stylelint-enable string-no-newline */
+/* stylelint-disable string-no-newline */ .mc-field__legend.svelte-14qag3h {font-size:0.875rem;line-height:1.3;font-weight:400;color:var(--field-color-label, #000000);}.mc-field__legend.svelte-14qag3h {padding-inline:0;}.mc-field--group.svelte-14qag3h {border-width:0;margin-inline:0;padding:0;}
+
+/* stylelint-enable string-no-newline */`};function te(v,t){const i=K();N(t,!0),P(v,ie);const E=[];let s=m(t,"name",7),l=m(t,"id",7,i),f=m(t,"options",7),b=m(t,"legend",7),_=m(t,"values",31,()=>Q([]));function y(e){var r;return((r=f()[e])==null?void 0:r.id)??`${l()}-${e}`}var p=oe(),z=h(p),B=h(z);{var F=e=>{var r=ee(),k=h(r,!0);d(r),x(()=>A(k,b())),w(e,r)};D(B,e=>{b()&&e(F)})}var M=j(B,2);return U(M,23,f,(e,r)=>y(r),(e,r,k)=>{var C=ae(),o=h(C);V(o);let H;var L,G=j(o,2);{var I=n=>{var c=re(),O=h(c,!0);d(c),x(S=>{u(c,"for",S),A(O,a(r).label)},[()=>y(a(k))]),w(n,c)};D(G,n=>{a(r).label&&n(I)})}d(C),x((n,c)=>{H=T(o,1,"mc-checkbox__input svelte-14qag3h",null,H,n),u(o,"id",c),u(o,"name",s()),o.disabled=a(r).disabled,u(o,"aria-invalid",a(r).isinvalid),L!==(L=a(r).value)&&(o.value=(o.__value=a(r).value)??"")},[()=>({"is-invalid":a(r).isinvalid}),()=>y(a(k))]),$("indeterminate","change",o,n=>a(r).indeterminate=n,()=>a(r).indeterminate),W(E,[],o,()=>(a(r).value,_()),_),w(e,C)}),d(M),d(z),d(p),x(()=>u(p,"id",l())),w(v,p),R({get name(){return s()},set name(e){s(e),g()},get id(){return l()},set id(e=i){l(e),g()},get options(){return f()},set options(e){f(e),g()},get legend(){return b()},set legend(e){b(e),g()},get values(){return _()},set values(e=[]){_(e),g()}})}customElements.define("m-checkbox-group",J(te,{options:{attribute:"options",reflect:!0,type:"Array"},name:{},id:{},legend:{},values:{}},[],[],!0,X));
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist/components/checkboxgroup/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/bindings/universal.js","../../../src/components/checkboxgroup/CheckboxGroup.svelte"],"sourcesContent":["import { render_effect, teardown } from '../../../reactivity/effects.js';\nimport { listen } from './shared.js';\n\n/**\n * @param {'innerHTML' | 'textContent' | 'innerText'} property\n * @param {HTMLElement} element\n * @param {() => unknown} get\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_content_editable(property, element, get, set = get) {\n\telement.addEventListener('input', () => {\n\t\t// @ts-ignore\n\t\tset(element[property]);\n\t});\n\n\trender_effect(() => {\n\t\tvar value = get();\n\n\t\tif (element[property] !== value) {\n\t\t\tif (value == null) {\n\t\t\t\t// @ts-ignore\n\t\t\t\tvar non_null_value = element[property];\n\t\t\t\tset(non_null_value);\n\t\t\t} else {\n\t\t\t\t// @ts-ignore\n\t\t\t\telement[property] = value + '';\n\t\t\t}\n\t\t}\n\t});\n}\n\n/**\n * @param {string} property\n * @param {string} event_name\n * @param {Element} element\n * @param {(value: unknown) => void} set\n * @param {() => unknown} [get]\n * @returns {void}\n */\nexport function bind_property(property, event_name, element, set, get) {\n\tvar handler = () => {\n\t\t// @ts-ignore\n\t\tset(element[property]);\n\t};\n\n\telement.addEventListener(event_name, handler);\n\n\tif (get) {\n\t\trender_effect(() => {\n\t\t\t// @ts-ignore\n\t\t\telement[property] = get();\n\t\t});\n\t} else {\n\t\thandler();\n\t}\n\n\t// @ts-ignore\n\tif (element === document.body || element === window || element === document) {\n\t\tteardown(() => {\n\t\t\telement.removeEventListener(event_name, handler);\n\t\t});\n\t}\n}\n\n/**\n * @param {HTMLElement} element\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_focused(element, set) {\n\tlisten(element, ['focus', 'blur'], () => {\n\t\tset(element === document.activeElement);\n\t});\n}\n","<svelte:options\n  customElement={{\n    tag: 'm-checkbox-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { CheckboxGroupOption } from './checkboxgroup.types';\n  import { customElementForwardEvents } from '../../utils';\n\n  interface Props {\n    options: Array<CheckboxGroupOption>;\n    name: string;\n    id?: string;\n    legend?: string;\n    values?: Array<string | number>;\n  }\n\n  const uid = $props.id();\n  let {\n    name,\n    id = uid,\n    options,\n    legend,\n    values = $bindable([]),\n  }: Props = $props();\n\n  function getOptionId(index: number): string {\n    return options[index]?.id ?? `${id}-${index}`;\n  }\n</script>\n\n<div class=\"checkbox-group-container\" {id}>\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n    <div class=\"mc-field__container\">\n      {#each options as opt, index (getOptionId(index))}\n        <div class=\"mc-checkbox mc-field__item\">\n          <input\n            type=\"checkbox\"\n            class=\"mc-checkbox__input\"\n            class:is-invalid={opt.isinvalid}\n            id={getOptionId(index)}\n            {name}\n            disabled={opt.disabled}\n            bind:indeterminate={opt.indeterminate}\n            aria-invalid={opt.isinvalid}\n            bind:group={values}\n            value={opt.value}\n          />\n          {#if opt.label}\n            <label for={getOptionId(index)} class=\"mc-checkbox__label\"\n              >{opt.label}</label\n            >\n          {/if}\n        </div>\n      {/each}\n    </div>\n  </fieldset>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["bind_property","property","event_name","element","set","get","handler","render_effect","teardown","uid","$.props_id","name","$.prop","$$props","id","options","legend","values","$.proxy","getOptionId","index","_a","$$render","consequent","$.each","div_1","opt","$.set_text","text_1","$.get","consequent_1","input","$.set_attribute","input_value","$.bind_property","$$value","customElementForwardEvents"],"mappings":"+WAwCO,SAASA,EAAcC,EAAUC,EAAYC,EAASC,EAAKC,EAAK,CACtE,IAAIC,EAAU,IAAM,CAEnBF,EAAID,EAAQF,CAAQ,CAAC,CACrB,EAEDE,EAAQ,iBAAiBD,EAAYI,CAAO,EAExCD,EACHE,EAAc,IAAM,CAEnBJ,EAAQF,CAAQ,EAAII,EAAK,CAC5B,CAAG,EAEDC,EAAS,GAINH,IAAY,SAAS,MAAQA,IAAY,QAAUA,IAAY,WAClEK,EAAS,IAAM,CACdL,EAAQ,oBAAoBD,EAAYI,CAAO,CAClD,CAAG,CAEH;;;;;;;;kECzCQG,EAAGC,EAAA,iCAEPC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,aAAKL,CAAG,EACRM,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAML,EAAAC,EAAA,SAAA,GAAA,IAAAK,EAAA,CAAA,CAAA,CAAA,WAGCC,EAAYC,EAAuB,OACnC,QAAAC,EAAAN,EAAO,EAACK,CAAK,IAAb,YAAAC,EAAgB,KAAS,GAAAP,OAAMM,CAAK,EAC7C,yEAOOJ,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAAM,EAAAC,CAAA,iBAMFC,OAAAA,EAAAC,EAAA,GAAAV,GAAWW,EAAGN,IAASD,EAAYC,CAAK,KAA7BM,EAAGN,IAAA,qGAgBXO,EAAAC,EAAAC,EAAAH,CAAG,EAAC,KAAK,GADD,CAAA,IAAAP,IAAYC,CAAK,CAAA,CAAA,mBAD1BS,EAAAH,CAAG,EAAC,OAAKJ,EAAAQ,CAAA,qGANFC,EAAA,SAAAF,EAAAH,CAAG,EAAC,SAEAM,EAAAD,EAAA,eAAAF,EAAAH,CAAG,EAAC,SAAS,EAEpBO,KAAAA,EAAAJ,EAAAH,CAAG,EAAC,SAAJK,EAAA,OAAAA,EAAA,QAAAF,EAAAH,CAAG,EAAC,QAAK,MAPE,KAAA,CAAA,aAAAG,EAAAH,CAAG,EAAC,SAAS,GAC3B,IAAAP,IAAYC,CAAK,CAAA,IAGDc,EAAA,gBAAA,SAAAH,EAAAI,GAAAN,EAAAH,CAAG,EAAC,cAAJS,EAAA,IAAAN,EAAAH,CAAG,EAAC,aAAa,gBAG9BG,EAAAH,CAAG,EAAC,MADCT,EAAM,GAANA,qIA9BfR,EAAG,sTAnBA2B","x_google_ignoreList":[0]}

package/dist/components/checkboxgroup/CheckboxGroup.svelte

@@ -0,0 +1,213 @@
+<svelte:options
+  customElement={{
+    tag: 'm-checkbox-group',
+    props: {
+      options: { reflect: true, type: 'Array', attribute: 'options' },
+    },
+    extend: customElementForwardEvents,
+  }}
+/>
+
+<script lang="ts">
+  import type { CheckboxGroupOption } from './checkboxgroup.types';
+  import { customElementForwardEvents } from '../../utils';
+
+  interface Props {
+    options: Array<CheckboxGroupOption>;
+    name: string;
+    id?: string;
+    legend?: string;
+    values?: Array<string | number>;
+  }
+
+  const uid = $props.id();
+  let {
+    name,
+    id = uid,
+    options,
+    legend,
+    values = $bindable([]),
+  }: Props = $props();
+
+  function getOptionId(index: number): string {
+    return options[index]?.id ?? `${id}-${index}`;
+  }
+</script>
+
+<div class="checkbox-group-container" {id}>
+  <fieldset class="mc-field mc-field--group">
+    {#if legend}
+      <legend class="mc-field__legend">
+        {legend}
+      </legend>
+    {/if}
+    <div class="mc-field__container">
+      {#each options as opt, index (getOptionId(index))}
+        <div class="mc-checkbox mc-field__item">
+          <input
+            type="checkbox"
+            class="mc-checkbox__input"
+            class:is-invalid={opt.isinvalid}
+            id={getOptionId(index)}
+            {name}
+            disabled={opt.disabled}
+            bind:indeterminate={opt.indeterminate}
+            aria-invalid={opt.isinvalid}
+            bind:group={values}
+            value={opt.value}
+          />
+          {#if opt.label}
+            <label for={getOptionId(index)} class="mc-checkbox__label"
+              >{opt.label}</label
+            >
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </fieldset>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */
+.mc-checkbox {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.375rem;
+}
+.mc-checkbox__label {
+  font-size: 1rem;
+  line-height: 1.3;
+  color: var(--forms-color-text-default, #000000);
+  cursor: pointer;
+}
+.mc-checkbox__input {
+  appearance: none;
+  margin: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: box-shadow 200ms ease;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: 0.125rem solid var(--forms-color-border-default, #666666);
+  border-radius: 0.25rem;
+  transition: all ease 200ms;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.mc-checkbox__input:hover {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-checkbox__input: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-checkbox__input:checked {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
+}
+.mc-checkbox__input:indeterminate {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
+}
+.mc-checkbox__input:checked, .mc-checkbox__input:indeterminate {
+  background-color: var(--forms-color-background-checked, #117f03);
+  background-size: 1rem 1rem;
+  background-position: center;
+}
+.mc-checkbox__input:checked, .mc-checkbox__input:indeterminate, .mc-checkbox__input:disabled {
+  border-color: transparent;
+}
+.mc-checkbox__input:disabled {
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
+  cursor: not-allowed;
+}
+.mc-checkbox__input:disabled:checked {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
+}
+.mc-checkbox__input:disabled:indeterminate {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
+}
+.mc-checkbox__input:disabled + .mc-checkbox__label {
+  color: var(--forms-color-text-disabled, #737373);
+  cursor: not-allowed;
+}
+.mc-checkbox__input:not(:disabled):checked:hover, .mc-checkbox__input:not(:disabled):indeterminate:hover {
+  background-color: var(--forms-color-background-checked-hover, #006902);
+}
+.mc-checkbox__input.is-invalid:not(:checked):not(:indeterminate) {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+}
+.mc-checkbox__input.is-invalid:not(:checked):not(:indeterminate):hover {
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+}
+
+/* stylelint-enable string-no-newline */
+/* stylelint-disable string-no-newline */
+.mc-field__label, .mc-field__legend {
+  font-size: 0.875rem;
+  line-height: 1.3;
+  font-weight: 400;
+  color: var(--field-color-label, #000000);
+}
+.mc-field__legend {
+  padding-inline: 0;
+}
+.mc-field__requirement, .mc-field__help {
+  font-size: 0.75rem;
+  line-height: 1.5;
+  font-weight: 400;
+  vertical-align: top;
+  color: var(--field-color-requirement, #666666);
+}
+.mc-field__help {
+  display: block;
+  margin-top: 0.125rem;
+}
+.mc-field__content {
+  margin-top: 0.5rem;
+}
+.mc-field__validation-message {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  display: inline-flex;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+.mc-field__validation-message.is-valid::before, .mc-field__validation-message.is-invalid::before {
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.mc-field__validation-message.is-valid {
+  color: var(--field-color-validation-valid, #117f03);
+}
+.mc-field__validation-message.is-valid::before {
+  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(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
+}
+.mc-field__validation-message.is-invalid {
+  color: var(--field-color-validation-invalid, #c61112);
+}
+.mc-field__validation-message.is-invalid::before {
+  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(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
+}
+.mc-field__validation-message.is-loading {
+  color: var(--field-color-validation-loading, #666666);
+}
+.mc-field--group {
+  border-width: 0;
+  margin-inline: 0;
+  padding: 0;
+}
+.mc-field--group .mc-field__content {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 0.25rem;
+}
+.mc-field--group .mc-field__content:where(.mc-field__content--inline) {
+  flex-flow: row wrap;
+  gap: 0.25rem 1rem;
+}
+
+/* stylelint-enable string-no-newline */</style>

package/dist/components/checkboxgroup/CheckboxGroup.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { CheckboxGroupOption } from './checkboxgroup.types';
+interface Props {
+    options: Array<CheckboxGroupOption>;
+    name: string;
+    id?: string;
+    legend?: string;
+    values?: Array<string | number>;
+}
+declare const CheckboxGroup: import("svelte").Component<Props, {}, "values">;
+type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
+export default CheckboxGroup;
+//# sourceMappingURL=CheckboxGroup.svelte.d.ts.map

package/dist/components/checkboxgroup/CheckboxGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/checkboxgroup/CheckboxGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAI/D,UAAU,KAAK;IACb,OAAO,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;CACjC;AAoDH,QAAA,MAAM,aAAa,iDAAsC,CAAC;AAC1D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/checkboxgroup/checkboxgroup.types.d.ts

@@ -1,11 +1,9 @@
 export interface CheckboxGroupOption {
-    id: string | undefined;
-    name?: string | undefined;
-    label?: string;
     value: string;
-    disabled?: boolean | undefined;
-    checked?: boolean | undefined;
-    indeterminate?: boolean | undefined;
-    isinvalid?: boolean | undefined;
+    id?: string;
+    label?: string;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    isinvalid?: boolean;
 }
 //# sourceMappingURL=checkboxgroup.types.d.ts.map

package/dist/components/checkboxgroup/checkboxgroup.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxgroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/checkboxgroup/checkboxgroup.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACjC"}
+{"version":3,"file":"checkboxgroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/checkboxgroup/checkboxgroup.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/components/field/Field.js

@@ -1,7 +1,7 @@
-import{c as A,p as G,a as H,b as t,t as u,s as f,e as d,f as _,g as p,h as I,i as a,r,j as h,k as J}from"../../custom-element.js";import{i as Z}from"../../if.js";import{a as K}from"../../slot.js";import{s as C}from"../../attributes.js";var N=u('<span class="mc-field__requirement svelte-dg1po7" aria-hidden="true"> </span>'),O=u('<span class="mc-field__help svelte-dg1po7"> </span>'),P=u("<span> </span>"),Q=u('<div class="mc-field"><label class="mc-field__label svelte-dg1po7"> <!></label> <!> <div class="mc-field__content svelte-dg1po7"><!></div> <!></div>');const R={hash:"svelte-dg1po7",code:`/**
+import{c as G,a as H,b as I,d as t,f as p,s as f,g as r,t as _,h,i as J,j as a,r as d,k as u,m as K}from"../../custom-element.js";import{i as Z}from"../../if.js";import{s as N}from"../../slot.js";import{s as C}from"../../attributes.js";var O=p('<span class="mc-field__requirement svelte-994g6" aria-hidden="true"> </span>'),P=p('<span class="mc-field__help svelte-994g6"> </span>'),Q=p("<span> </span>"),R=p('<div class="mc-field"><label class="mc-field__label svelte-994g6"> <!></label> <!> <div class="mc-field__content svelte-994g6"><!></div> <!></div>');const T={hash:"svelte-994g6",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* stylelint-disable string-no-newline */.mc-field__label.svelte-dg1po7 {font-size:0.875rem;line-height:1.3;font-weight:400;color:var(--field-color-label, #000000);}.mc-field__requirement.svelte-dg1po7, .mc-field__help.svelte-dg1po7 {font-size:0.75rem;line-height:1.5;font-weight:400;vertical-align:top;color:var(--field-color-requirement, #666666);}.mc-field__help.svelte-dg1po7 {display:block;margin-top:0.125rem;}.mc-field__content.svelte-dg1po7 {margin-top:0.5rem;}.mc-field__validation-message.svelte-dg1po7 {font-size:0.875rem;line-height:1.5;display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.svelte-dg1po7::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-dg1po7 {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-dg1po7::before {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(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-invalid.svelte-dg1po7 {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-dg1po7::before {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(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");}
+/* stylelint-disable string-no-newline */.mc-field__label.svelte-994g6 {font-size:0.875rem;line-height:1.3;font-weight:400;color:var(--field-color-label, #000000);}.mc-field__requirement.svelte-994g6, .mc-field__help.svelte-994g6 {font-size:0.75rem;line-height:1.5;font-weight:400;vertical-align:top;color:var(--field-color-requirement, #666666);}.mc-field__help.svelte-994g6 {display:block;margin-top:0.125rem;}.mc-field__content.svelte-994g6 {margin-top:0.5rem;}.mc-field__validation-message.svelte-994g6 {font-size:0.875rem;line-height:1.5;display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.is-valid.svelte-994g6::before, .mc-field__validation-message.is-invalid.svelte-994g6::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-994g6 {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-994g6::before {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(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-invalid.svelte-994g6 {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-994g6::before {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(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");}
 
-/* stylelint-enable string-no-newline */`};function T(k,l){G(l,!0),H(k,R);let b=t(l,"id",7),x=t(l,"label",7),n=t(l,"requirementtext",7),o=t(l,"helpid",7),v=t(l,"helptext",7),w=t(l,"messageid",7),q=t(l,"message",7),m=t(l,"isinvalid",7,!1),g=t(l,"isvalid",7,!1);var y=Q(),c=d(y),M=d(c),B=f(M);{var j=e=>{var i=N(),s=d(i,!0);r(i),_(()=>h(s,n())),p(e,i)};Z(B,e=>{n()&&e(j)})}r(c);var z=f(c,2);{var D=e=>{var i=O(),s=d(i,!0);r(i),_(()=>{C(i,"id",o()),h(s,v())}),p(e,i)};Z(z,e=>{o()&&v()&&e(D)})}var E=f(z,2),F=d(E);K(F,l,"default",{}),r(E);var L=f(E,2);{var S=e=>{var i=P();let s;var V=d(i,!0);r(i),_(()=>{C(i,"id",w()),s=J(i,1,"mc-field__validation-message svelte-dg1po7",null,s,{"is-valid":g(),"is-invalid":m()}),h(V,q())}),p(e,i)};Z(L,e=>{(m()||g())&&e(S)})}return r(y),_(()=>{C(c,"for",b()),h(M,`${x()??""} `)}),p(k,y),I({get id(){return b()},set id(e){b(e),a()},get label(){return x()},set label(e){x(e),a()},get requirementtext(){return n()},set requirementtext(e){n(e),a()},get helpid(){return o()},set helpid(e){o(e),a()},get helptext(){return v()},set helptext(e){v(e),a()},get messageid(){return w()},set messageid(e){w(e),a()},get message(){return q()},set message(e){q(e),a()},get isinvalid(){return m()},set isinvalid(e=!1){m(e),a()},get isvalid(){return g()},set isvalid(e=!1){g(e),a()}})}customElements.define("m-field",A(T,{id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{},isinvalid:{},isvalid:{}},["default"],[],!1));
+/* stylelint-enable string-no-newline */`};function U(k,l){H(l,!0),I(k,T);let b=t(l,"id",7),x=t(l,"label",7),n=t(l,"requirementtext",7),v=t(l,"helpid",7),m=t(l,"helptext",7),w=t(l,"messageid",7),q=t(l,"message",7),o=t(l,"isinvalid",7,!1),g=t(l,"isvalid",7,!1);var y=R(),c=r(y),M=r(c),B=f(M);{var j=e=>{var i=O(),s=r(i,!0);d(i),_(()=>u(s,n())),h(e,i)};Z(B,e=>{n()&&e(j)})}d(c);var z=f(c,2);{var D=e=>{var i=P(),s=r(i,!0);d(i),_(()=>{C(i,"id",v()),u(s,m())}),h(e,i)};Z(z,e=>{v()&&m()&&e(D)})}var E=f(z,2),F=r(E);N(F,l,"default",{}),d(E);var L=f(E,2);{var S=e=>{var i=Q();let s;var V=r(i,!0);d(i),_(A=>{C(i,"id",w()),s=K(i,1,"mc-field__validation-message svelte-994g6",null,s,A),u(V,q())},[()=>({"is-valid":g(),"is-invalid":o()})]),h(e,i)};Z(L,e=>{(o()||g())&&e(S)})}return d(y),_(()=>{C(c,"for",b()),u(M,`${x()??""} `)}),h(k,y),J({get id(){return b()},set id(e){b(e),a()},get label(){return x()},set label(e){x(e),a()},get requirementtext(){return n()},set requirementtext(e){n(e),a()},get helpid(){return v()},set helpid(e){v(e),a()},get helptext(){return m()},set helptext(e){m(e),a()},get messageid(){return w()},set messageid(e){w(e),a()},get message(){return q()},set message(e){q(e),a()},get isinvalid(){return o()},set isinvalid(e=!1){o(e),a()},get isvalid(){return g()},set isvalid(e=!1){g(e),a()}})}customElements.define("m-field",G(U,{id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{},isinvalid:{},isvalid:{}},["default"],[],!0));
 //# sourceMappingURL=Field.js.map

package/dist/components/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-field',\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  interface Props {\n    id: string;\n    label: string;\n    requirementtext: string;\n    helpid: string;\n    helptext: string;\n    messageid: string;\n    message: string;\n    isinvalid?: boolean;\n    isvalid?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    label,\n    requirementtext,\n    helpid,\n    helptext,\n    messageid,\n    message,\n    isinvalid = false,\n    isvalid = false,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-field\">\n  <label for={id} class=\"mc-field__label\">\n    {label}\n    {#if requirementtext}\n      <span class=\"mc-field__requirement\" aria-hidden=\"true\">\n        {requirementtext}\n      </span>\n    {/if}\n  </label>\n  {#if helpid && helptext}\n    <span id={helpid} class=\"mc-field__help\">\n      {helptext}\n    </span>\n  {/if}\n  <div class=\"mc-field__content\">\n    <slot />\n  </div>\n  {#if isinvalid || isvalid}\n    <span\n      id={messageid}\n      class=\"mc-field__validation-message\"\n      class:is-valid={isvalid}\n      class:is-invalid={isinvalid}\n    >\n      {message}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","label","requirementtext","helpid","helptext","messageid","message","isinvalid","isvalid","$$render","consequent","consequent_1","consequent_2"],"mappings":";;;;;8EAsBIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAeH,EAAAC,EAAA,kBAAA,CAAA,EACfG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,oBAAY,EAAK,EACjBC,kBAAU,EAAK,+EASVN,EAAe,CAAA,CAAA,kBAFfA,EAAe,GAAAO,EAAAC,CAAA,0EAOVP,GAAM,MACbC,GAAQ,oBAFRD,EAAM,GAAIC,KAAQK,EAAAE,CAAA,4HAUfN,GAAS,0EAEGG,EAAO,eACLD,EAAS,QAE1BD,GAAO,qBAPPC,EAAS,GAAIC,MAAOC,EAAAG,CAAA,iCAhBbd,GAAE,SACXG,EAAK,GAAA,EAAA,GAAA,qaAPM,GAAK,mDACP,GAAK"}
+{"version":3,"file":"Field.js","sources":["../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-field',\n  }}\n/>\n\n<script lang=\"ts\">\n  interface Props {\n    id: string;\n    label: string;\n    requirementtext: string;\n    helpid: string;\n    helptext: string;\n    messageid: string;\n    message: string;\n    isinvalid?: boolean;\n    isvalid?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    label,\n    requirementtext,\n    helpid,\n    helptext,\n    messageid,\n    message,\n    isinvalid = false,\n    isvalid = false,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-field\">\n  <label for={id} class=\"mc-field__label\">\n    {label}\n    {#if requirementtext}\n      <span class=\"mc-field__requirement\" aria-hidden=\"true\">\n        {requirementtext}\n      </span>\n    {/if}\n  </label>\n  {#if helpid && helptext}\n    <span id={helpid} class=\"mc-field__help\">\n      {helptext}\n    </span>\n  {/if}\n  <div class=\"mc-field__content\">\n    <slot />\n  </div>\n  {#if isinvalid || isvalid}\n    <span\n      id={messageid}\n      class=\"mc-field__validation-message\"\n      class:is-valid={isvalid}\n      class:is-invalid={isinvalid}\n    >\n      {message}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","label","requirementtext","helpid","helptext","messageid","message","isinvalid","isvalid","$$render","consequent","consequent_1","consequent_2"],"mappings":";;;;;8EAqBIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAeH,EAAAC,EAAA,kBAAA,CAAA,EACfG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,oBAAY,EAAK,EACjBC,kBAAU,EAAK,+EASVN,EAAe,CAAA,CAAA,kBAFfA,EAAe,GAAAO,EAAAC,CAAA,0EAOVP,GAAM,MACbC,GAAQ,oBAFRD,EAAM,GAAIC,KAAQK,EAAAE,CAAA,2HAUfN,GAAS,oEAKZC,GAAO,qBAHQE,EAAO,eACLD,EAAS,uBAL1BA,EAAS,GAAIC,MAAOC,EAAAG,CAAA,iCAhBbd,GAAE,SACXG,EAAK,GAAA,EAAA,GAAA,qaAPM,GAAK,mDACP,GAAK"}

package/dist/components/field/Field.svelte

@@ -1,7 +1,6 @@
 <svelte:options
   customElement={{
     tag: 'm-field',
-    shadow: 'none',
   }}
 />
 
@@ -72,11 +71,7 @@
   color: var(--field-color-label, #000000);
 }
 .mc-field__legend {
-  padding-left: 0;
-  padding-right: 0;
-}
-.mc-field__legend + .mc-field__container, .mc-field__help + .mc-field__container {
-  margin-top: 0.5rem;
+  padding-inline: 0;
 }
 .mc-field__requirement, .mc-field__help {
   font-size: 0.75rem;
@@ -92,21 +87,6 @@
 .mc-field__content {
   margin-top: 0.5rem;
 }
-.mc-field__container--inline, .mc-field__element--inline {
-  display: flex;
-  flex-wrap: wrap;
-}
-.mc-field__container--inline__item:not(:last-child), .mc-field__element--inline__item:not(:last-child) {
-  margin-bottom: 0.25rem;
-  margin-right: 1rem;
-}
-.mc-field__item {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-}
-.mc-field__item:not(:last-child) {
-  margin-bottom: 0.25rem;
-}
 .mc-field__validation-message {
   font-size: 0.875rem;
   line-height: 1.5;
@@ -114,7 +94,7 @@
   gap: 0.25rem;
   margin-top: 0.25rem;
 }
-.mc-field__validation-message::before {
+.mc-field__validation-message.is-valid::before, .mc-field__validation-message.is-invalid::before {
   content: "";
   height: 1.25rem;
   width: 1.25rem;
@@ -131,11 +111,23 @@
 .mc-field__validation-message.is-invalid::before {
   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(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
 }
+.mc-field__validation-message.is-loading {
+  color: var(--field-color-validation-loading, #666666);
+}
 .mc-field--group {
-  border: none;
-  margin-left: 0;
-  margin-right: 0;
+  border-width: 0;
+  margin-inline: 0;
   padding: 0;
 }
+.mc-field--group .mc-field__content {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: 0.25rem;
+}
+.mc-field--group .mc-field__content:where(.mc-field__content--inline) {
+  flex-flow: row wrap;
+  gap: 0.25rem 1rem;
+}
 
 /* stylelint-enable string-no-newline */</style>

package/dist/components/field/Field.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAkDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;UAAmF,CAAC;AAC7E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Field.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/field/Field.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAiDH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;;;;;UAAmF,CAAC;AAC7E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/components/link/Link.js

@@ -1,4 +1,4 @@
-import{v as Q,D as R,E as F,F as G,u as T,G as U,m,H as D,n as V,w as W,I as X,c as Y,J as H,p as Z,a as $,b as f,K as z,L as ee,t as E,s as I,e as w,f as te,M as ne,N as J,O as se,g as C,h as le,i as u,C as K,r as b}from"../../custom-element.js";import{i as M}from"../../if.js";import{a as j}from"../../slot.js";import{b as ae}from"../../attributes.js";function ie(a=!1){const t=Q,n=t.l.u;if(!n)return;let o=()=>D(t.s);if(a){let i=0,s={};const v=V(()=>{let d=!1;const c=t.s;for(const r in c)c[r]!==s[r]&&(s[r]=c[r],d=!0);return d&&i++,i});o=()=>m(v)}n.b.length&&R(()=>{N(t,o),G(n.b)}),F(()=>{const i=T(()=>n.m.map(U));return()=>{for(const s of i)typeof s=="function"&&s()}}),n.a.length&&F(()=>{N(t,o),G(n.a)})}function N(a,t){if(a.l.s)for(const n of a.l.s)m(n);t()}function oe(a,t){var s;var n=(s=a.$$events)==null?void 0:s[t.type],o=W(n)?n.slice():n==null?[]:[n];for(var i of o)i.call(this,t)}X();var re=E('<span class="mc-link__icon svelte-1da7u2w"><!></span>'),ce=E('<span class="mc-link__icon svelte-1da7u2w"><!></span>'),fe=E('<a><!> <span class="mc-link__label svelte-1da7u2w"><!></span> <!></a>');const ue={hash:"svelte-1da7u2w",code:`/**
+import{c as S,a as A,b as B,d as i,f as b,w as F,s as w,g as c,h as g,i as G,j as a,r as v}from"../../custom-element.js";import{i as y}from"../../if.js";import{s as p}from"../../slot.js";import{b as H}from"../../attributes.js";var I=b('<span class="mc-link__icon svelte-8v9qua"><!></span>'),J=b('<span class="mc-link__icon svelte-8v9qua"><!></span>'),K=b('<a><!> <span class="mc-link__label svelte-8v9qua"><!></span> <!></a>');const M={hash:"svelte-8v9qua",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-link.svelte-1da7u2w {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);}.mc-link__label.svelte-1da7u2w {font-size:0.875rem;line-height:1.3;}.mc-link__icon.svelte-1da7u2w {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-1da7u2w:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-1da7u2w) {text-decoration:underline;}.mc-link.svelte-1da7u2w:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-link--m.svelte-1da7u2w {min-height:2rem;}.mc-link--m.svelte-1da7u2w .mc-link__label:where(.svelte-1da7u2w) {font-size:1rem;}.mc-link--secondary.svelte-1da7u2w {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-1da7u2w {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-1da7u2w {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-1da7u2w {min-height:2rem;font-weight:600;}.mc-link--stand-alone.svelte-1da7u2w .mc-link__label:where(.svelte-1da7u2w) {border-bottom:1px solid currentColor;}.mc-link--stand-alone.svelte-1da7u2w:hover .mc-link__label:where(.svelte-1da7u2w) {border-color:transparent;}.mc-link--inline.svelte-1da7u2w {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-1da7u2w .mc-link__label:where(.svelte-1da7u2w) {font-size:inherit;line-height:1;}.mc-link--inline.svelte-1da7u2w:hover {text-decoration:none;}`};function de(a,t){const n=H(t,["children","$$slots","$$events","$$legacy","$$host"]),o=H(n,["href","target","style","disabled","size","inline","iconposition"]);Z(t,!1),$(a,ue);const i=J(),s=J();let v=f(t,"href",12),d=f(t,"target",12),c=f(t,"style",12,void 0),r=f(t,"disabled",12,!1),p=f(t,"size",12,"m"),y=f(t,"inline",12,!1),g=f(t,"iconposition",12,void 0);function O(e,l,h){const k=["mc-link"];return e&&k.push(`mc-link--${e}`),l&&k.push(`mc-link--${l}`),h?k.push("mc-link--inline"):k.push("mc-link--stand-alone"),k.join(" ")}z(()=>D(n),()=>{K(i,n.class)}),z(()=>D(o),()=>{K(s,{...o})}),z(()=>m(s),()=>{delete m(s).class}),ee(),ie();var _=fe();let L;var q=w(_);{var P=e=>{var l=re(),h=w(l);j(h,t,"icon",{}),b(l),C(e,l)};M(q,e=>{g()==="left"&&e(P)})}var x=I(q,2),S=w(x);j(S,t,"default",{}),b(x);var A=I(x,2);{var B=e=>{var l=ce(),h=w(l);j(h,t,"icon",{}),b(l),C(e,l)};M(A,e=>{g()==="right"&&e(B)})}return b(_),te(e=>L=ae(_,L,{href:v(),target:d(),class:`${e??""} ${(r()?"is-disabled":"")??""} ${m(i)??""}`,...m(s)},"svelte-1da7u2w"),[()=>O(c(),p(),y())],ne),se("click",_,function(e){oe.call(this,t,e)}),C(a,_),le({get href(){return v()},set href(e){v(e),u()},get target(){return d()},set target(e){d(e),u()},get style(){return c()},set style(e){c(e),u()},get disabled(){return r()},set disabled(e){r(e),u()},get size(){return p()},set size(e){p(e),u()},get inline(){return y()},set inline(e){y(e),u()},get iconposition(){return g()},set iconposition(e){g(e),u()}})}customElements.define("m-link",Y(de,{href:{},target:{},style:{},disabled:{},size:{},inline:{},iconposition:{}},["icon","default"],[],!0));
+ */.mc-link.svelte-8v9qua {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);font-size:0.875rem;}.mc-link__label.svelte-8v9qua {line-height:1.3;}.mc-link__icon.svelte-8v9qua {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-8v9qua:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-8v9qua) {text-decoration:underline;}.mc-link.svelte-8v9qua:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-link--m.svelte-8v9qua {min-height:2rem;font-size:1rem;}.mc-link--secondary.svelte-8v9qua {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-8v9qua {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-8v9qua {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-8v9qua {min-height:2rem;font-weight:600;}.mc-link--stand-alone.svelte-8v9qua .mc-link__label:where(.svelte-8v9qua) {border-bottom:1px solid currentColor;}.mc-link--stand-alone.svelte-8v9qua:hover .mc-link__label:where(.svelte-8v9qua) {border-color:transparent;}.mc-link--inline.svelte-8v9qua {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-8v9qua .mc-link__label:where(.svelte-8v9qua) {line-height:1;}.mc-link--inline.svelte-8v9qua:hover {text-decoration:none;}`};function N(q,n){A(n,!0),B(q,M);let u=i(n,"href",7),f=i(n,"target",7),m=i(n,"appearance",7,void 0),d=i(n,"disabled",7,!1),h=i(n,"size",7,"m"),k=i(n,"inline",7,!1),o=i(n,"iconposition",7,void 0),z=F(n,["$$slots","$$events","$$legacy","$$host","href","target","appearance","disabled","size","inline","iconposition"]);function j(e,t,l){const s=["mc-link"];return e&&s.push(`mc-link--${e}`),t&&s.push(`mc-link--${t}`),l?s.push("mc-link--inline"):s.push("mc-link--stand-alone"),s.join(" ")}var r=K();H(r,e=>({href:u(),target:f(),class:`${e??""} ${d()?"is-disabled":""} `,...z}),[()=>j(m(),h(),k())],"svelte-8v9qua");var x=c(r);{var C=e=>{var t=I(),l=c(t);p(l,n,"icon",{}),v(t),g(e,t)};y(x,e=>{o()==="left"&&e(C)})}var _=w(x,2),D=c(_);p(D,n,"default",{}),v(_);var E=w(_,2);{var L=e=>{var t=J(),l=c(t);p(l,n,"icon",{}),v(t),g(e,t)};y(E,e=>{o()==="right"&&e(L)})}return v(r),g(q,r),G({get href(){return u()},set href(e){u(e),a()},get target(){return f()},set target(e){f(e),a()},get appearance(){return m()},set appearance(e=void 0){m(e),a()},get disabled(){return d()},set disabled(e=!1){d(e),a()},get size(){return h()},set size(e="m"){h(e),a()},get inline(){return k()},set inline(e=!1){k(e),a()},get iconposition(){return o()},set iconposition(e=void 0){o(e),a()}})}customElements.define("m-link",S(N,{href:{},target:{},appearance:{},disabled:{},size:{},inline:{},iconposition:{}},["icon","default"],[],!0));
 //# sourceMappingURL=Link.js.map

package/dist/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../node_modules/svelte/src/internal/client/dom/legacy/lifecycle.js","../../../node_modules/svelte/src/internal/client/dom/legacy/misc.js","../../../node_modules/svelte/src/internal/flags/legacy.js","../../../src/components/link/Link.svelte"],"sourcesContent":["/** @import { ComponentContextLegacy } from '#client' */\nimport { run, run_all } from '../../../shared/utils.js';\nimport { component_context } from '../../context.js';\nimport { derived } from '../../reactivity/deriveds.js';\nimport { user_pre_effect, user_effect } from '../../reactivity/effects.js';\nimport { deep_read_state, get, untrack } from '../../runtime.js';\n\n/**\n * Legacy-mode only: Call `onMount` callbacks and set up `beforeUpdate`/`afterUpdate` effects\n * @param {boolean} [immutable]\n */\nexport function init(immutable = false) {\n\tconst context = /** @type {ComponentContextLegacy} */ (component_context);\n\n\tconst callbacks = context.l.u;\n\tif (!callbacks) return;\n\n\tlet props = () => deep_read_state(context.s);\n\n\tif (immutable) {\n\t\tlet version = 0;\n\t\tlet prev = /** @type {Record<string, any>} */ ({});\n\n\t\t// In legacy immutable mode, before/afterUpdate only fire if the object identity of a prop changes\n\t\tconst d = derived(() => {\n\t\t\tlet changed = false;\n\t\t\tconst props = context.s;\n\t\t\tfor (const key in props) {\n\t\t\t\tif (props[key] !== prev[key]) {\n\t\t\t\t\tprev[key] = props[key];\n\t\t\t\t\tchanged = true;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (changed) version++;\n\t\t\treturn version;\n\t\t});\n\n\t\tprops = () => get(d);\n\t}\n\n\t// beforeUpdate\n\tif (callbacks.b.length) {\n\t\tuser_pre_effect(() => {\n\t\t\tobserve_all(context, props);\n\t\t\trun_all(callbacks.b);\n\t\t});\n\t}\n\n\t// onMount (must run before afterUpdate)\n\tuser_effect(() => {\n\t\tconst fns = untrack(() => callbacks.m.map(run));\n\t\treturn () => {\n\t\t\tfor (const fn of fns) {\n\t\t\t\tif (typeof fn === 'function') {\n\t\t\t\t\tfn();\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t});\n\n\t// afterUpdate\n\tif (callbacks.a.length) {\n\t\tuser_effect(() => {\n\t\t\tobserve_all(context, props);\n\t\t\trun_all(callbacks.a);\n\t\t});\n\t}\n}\n\n/**\n * Invoke the getter of all signals associated with a component\n * so they can be registered to the effect this function is called in.\n * @param {ComponentContextLegacy} context\n * @param {(() => void)} props\n */\nfunction observe_all(context, props) {\n\tif (context.l.s) {\n\t\tfor (const signal of context.l.s) get(signal);\n\t}\n\n\tprops();\n}\n","import { set, source } from '../../reactivity/sources.js';\nimport { get } from '../../runtime.js';\nimport { is_array } from '../../../shared/utils.js';\n\n/**\n * Under some circumstances, imports may be reactive in legacy mode. In that case,\n * they should be using `reactive_import` as part of the transformation\n * @param {() => any} fn\n */\nexport function reactive_import(fn) {\n\tvar s = source(0);\n\n\treturn function () {\n\t\tif (arguments.length === 1) {\n\t\t\tset(s, get(s) + 1);\n\t\t\treturn arguments[0];\n\t\t} else {\n\t\t\tget(s);\n\t\t\treturn fn();\n\t\t}\n\t};\n}\n\n/**\n * @this {any}\n * @param {Record<string, unknown>} $$props\n * @param {Event} event\n * @returns {void}\n */\nexport function bubble_event($$props, event) {\n\tvar events = /** @type {Record<string, Function[] | Function>} */ ($$props.$$events)?.[\n\t\tevent.type\n\t];\n\n\tvar callbacks = is_array(events) ? events.slice() : events == null ? [] : [events];\n\n\tfor (var fn of callbacks) {\n\t\t// Preserve \"this\" context\n\t\tfn.call(this, event);\n\t}\n}\n\n/**\n * Used to simulate `$on` on a component instance when `compatibility.componentApi === 4`\n * @param {Record<string, any>} $$props\n * @param {string} event_name\n * @param {Function} event_callback\n */\nexport function add_legacy_event_listener($$props, event_name, event_callback) {\n\t$$props.$$events ||= {};\n\t$$props.$$events[event_name] ||= [];\n\t$$props.$$events[event_name].push(event_callback);\n}\n\n/**\n * Used to simulate `$set` on a component instance when `compatibility.componentApi === 4`.\n * Needs component accessors so that it can call the setter of the prop. Therefore doesn't\n * work for updating props in `$$props` or `$$restProps`.\n * @this {Record<string, any>}\n * @param {Record<string, any>} $$new_props\n */\nexport function update_legacy_props($$new_props) {\n\tfor (var key in $$new_props) {\n\t\tif (key in this) {\n\t\t\tthis[key] = $$new_props[key];\n\t\t}\n\t}\n}\n","import { enable_legacy_mode_flag } from './index.js';\n\nenable_legacy_mode_flag();\n","<svelte:options customElement=\"m-link\" />\n\n<script lang=\"ts\">\n  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';\n  export let href: string;\n  export let target: string;\n  export let style: LinkStyle = undefined;\n  export let disabled = false;\n  export let size: LinkSize = 'm';\n  export let inline = false;\n  export let iconposition: LinkIconPosition | undefined = undefined;\n\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function setClasses(\n    style: LinkStyle,\n    size: LinkSize,\n    inline: boolean,\n  ): string {\n    const classes = ['mc-link'];\n\n    if (style) {\n      classes.push(`mc-link--${style}`);\n    }\n    if (size) {\n      classes.push(`mc-link--${size}`);\n    }\n    if (inline) {\n      classes.push('mc-link--inline');\n    } else {\n      classes.push('mc-link--stand-alone');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<a\n  on:click\n  {href}\n  {target}\n  class=\"{setClasses(style, size, inline)} {disabled\n    ? 'is-disabled'\n    : ''} {userClass}\"\n  {...attributes}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["init","immutable","context","component_context","callbacks","props","deep_read_state","version","prev","d","derived","changed","key","get","user_pre_effect","observe_all","run_all","user_effect","fns","untrack","run","fn","signal","bubble_event","$$props","event","events","_a","is_array","enable_legacy_mode_flag","href","$.prop","target","style","disabled","size","inline","iconposition","setClasses","classes","$.set","userClass","attributes","$$restProps","$.get","$$render","consequent","consequent_1","$0"],"mappings":"kWAWO,SAASA,GAAKC,EAAY,GAAO,CACvC,MAAMC,EAAiDC,EAEjDC,EAAYF,EAAQ,EAAE,EAC5B,GAAI,CAACE,EAAW,OAEhB,IAAIC,EAAQ,IAAMC,EAAgBJ,EAAQ,CAAC,EAE3C,GAAID,EAAW,CACd,IAAIM,EAAU,EACVC,EAA2C,CAAA,EAG/C,MAAMC,EAAIC,EAAQ,IAAM,CACvB,IAAIC,EAAU,GACd,MAAMN,EAAQH,EAAQ,EACtB,UAAWU,KAAOP,EACbA,EAAMO,CAAG,IAAMJ,EAAKI,CAAG,IAC1BJ,EAAKI,CAAG,EAAIP,EAAMO,CAAG,EACrBD,EAAU,IAGZ,OAAIA,GAASJ,IACNA,CACV,CAAG,EAEDF,EAAQ,IAAMQ,EAAIJ,CAAC,CACrB,CAGKL,EAAU,EAAE,QACfU,EAAgB,IAAM,CACrBC,EAAYb,EAASG,CAAK,EAC1BW,EAAQZ,EAAU,CAAC,CACtB,CAAG,EAIFa,EAAY,IAAM,CACjB,MAAMC,EAAMC,EAAQ,IAAMf,EAAU,EAAE,IAAIgB,CAAG,CAAC,EAC9C,MAAO,IAAM,CACZ,UAAWC,KAAMH,EACZ,OAAOG,GAAO,YACjBA,EAAI,CAGN,CACH,CAAE,EAGGjB,EAAU,EAAE,QACfa,EAAY,IAAM,CACjBF,EAAYb,EAASG,CAAK,EAC1BW,EAAQZ,EAAU,CAAC,CACtB,CAAG,CAEH,CAQA,SAASW,EAAYb,EAASG,EAAO,CACpC,GAAIH,EAAQ,EAAE,EACb,UAAWoB,KAAUpB,EAAQ,EAAE,EAAGW,EAAIS,CAAM,EAG7CjB,EAAO,CACR,CCpDO,SAASkB,GAAaC,EAASC,EAAO,OAC5C,IAAIC,GAA+DC,EAAAH,EAAQ,WAAR,YAAAG,EAClEF,EAAM,MAGHrB,EAAYwB,EAASF,CAAM,EAAIA,EAAO,MAAO,EAAGA,GAAU,KAAO,CAAE,EAAG,CAACA,CAAM,EAEjF,QAASL,KAAMjB,EAEdiB,EAAG,KAAK,KAAMI,CAAK,CAErB,CCtCAI,EAAyB;;s/DCEZC,EAAYC,EAAAP,EAAA,OAAA,EAAA,EACZQ,EAAcD,EAAAP,EAAA,SAAA,EAAA,EACdS,iBAAmB,MAAS,EAC5BC,oBAAW,EAAK,EAChBC,gBAAiB,GAAG,EACpBC,kBAAS,EAAK,EACdC,wBAA6C,MAAS,EAMxD,SAAAC,EACPL,EACAE,EACAC,EACQ,CACF,MAAAG,GAAW,SAAS,EAEtB,OAAAN,GACFM,EAAQ,KAAI,YAAaN,CAAK,EAAA,EAE5BE,GACFI,EAAQ,KAAI,YAAaJ,CAAI,EAAA,EAE3BC,EACFG,EAAQ,KAAK,iBAAiB,EAE9BA,EAAQ,KAAK,sBAAsB,EAE9BA,EAAQ,KAAK,GAAG,CACzB,iBAvBGC,EAAAC,IAAoB,KAAK,oBACzBD,EAAAE,MAAkBC,EAAW,oBACtB,OAAAC,EAAAF,CAAU,EAAC,iHAiChBL,MAAiB,QAAMQ,EAAAC,CAAA,iIAQvBT,MAAiB,SAAOQ,EAAAE,CAAA,oDAba,MAAA,GAAAC,GAAA,EAAA,KAAAd,EAAA,EACtC,cACA,KAAE,EAAA,IAAAU,EAAGH,CAAS,GAAA,EAAA,QACdC,CAAU,sBAHN,IAAAJ,EAAWL,EAAK,EAAEE,EAAI,EAAEC,EAAM,CAAA","x_google_ignoreList":[0,1,2]}
+{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.svelte"],"sourcesContent":["<svelte:options customElement=\"m-link\" />\n\n<script lang=\"ts\">\n  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';\n  interface Props {\n    href: string;\n    target: string;\n    appearance?: LinkStyle;\n    disabled?: boolean;\n    size?: LinkSize;\n    inline?: boolean;\n    iconposition?: LinkIconPosition | undefined;\n    [key: string]: any;\n  }\n\n  let {\n    href,\n    target,\n    appearance = undefined,\n    disabled = false,\n    size = 'm',\n    inline = false,\n    iconposition = undefined,\n    ...events\n  }: Props = $props();\n\n  function setClasses(\n    appearance: LinkStyle,\n    size: LinkSize,\n    inline: boolean,\n  ): string {\n    const classes = ['mc-link'];\n\n    if (appearance) {\n      classes.push(`mc-link--${appearance}`);\n    }\n    if (size) {\n      classes.push(`mc-link--${size}`);\n    }\n    if (inline) {\n      classes.push('mc-link--inline');\n    } else {\n      classes.push('mc-link--stand-alone');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<a\n  {href}\n  {target}\n  class=\"{setClasses(appearance, size, inline)} {disabled\n    ? 'is-disabled'\n    : ''} \"\n  {...events}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["href","$.prop","$$props","target","appearance","disabled","size","inline","iconposition","events","$.rest_props","setClasses","classes","$$render","consequent","consequent_1"],"mappings":";;2uDAgBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EACNE,qBAAa,MAAS,EACtBC,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,iBAAS,EAAK,EACdC,uBAAe,MAAS,EACrBC,EAAAC,EAAAR,EAAA,mHAGI,SAAAS,EACPP,EACAE,EACAC,EACQ,CACF,MAAAK,GAAW,SAAS,EAEtB,OAAAR,GACFQ,EAAQ,KAAI,YAAaR,CAAU,EAAA,EAEjCE,GACFM,EAAQ,KAAI,YAAaN,CAAI,EAAA,EAE3BC,EACFK,EAAQ,KAAK,iBAAiB,EAE9BA,EAAQ,KAAK,sBAAsB,EAE9BA,EAAQ,KAAK,GAAG,CACzB,0DAM+CP,IAC3C,cACA,EAAE,OACFI,KAHI,IAAAE,EAAWP,EAAU,EAAEE,EAAI,EAAEC,EAAM,CAAA,iGAKtCC,MAAiB,QAAMK,EAAAC,CAAA,gIAQvBN,MAAiB,SAAOK,EAAAE,CAAA,sKA9Cd,OAAS,qDACX,GAAK,6CACT,IAAG,iDACD,GAAK,6DACC,OAAS"}

package/dist/components/link/Link.svelte

@@ -2,27 +2,37 @@
 
 <script lang="ts">
   import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';
-  export let href: string;
-  export let target: string;
-  export let style: LinkStyle = undefined;
-  export let disabled = false;
-  export let size: LinkSize = 'm';
-  export let inline = false;
-  export let iconposition: LinkIconPosition | undefined = undefined;
+  interface Props {
+    href: string;
+    target: string;
+    appearance?: LinkStyle;
+    disabled?: boolean;
+    size?: LinkSize;
+    inline?: boolean;
+    iconposition?: LinkIconPosition | undefined;
+    [key: string]: any;
+  }
 
-  $: userClass = $$props.class;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
+  let {
+    href,
+    target,
+    appearance = undefined,
+    disabled = false,
+    size = 'm',
+    inline = false,
+    iconposition = undefined,
+    ...events
+  }: Props = $props();
 
   function setClasses(
-    style: LinkStyle,
+    appearance: LinkStyle,
     size: LinkSize,
     inline: boolean,
   ): string {
     const classes = ['mc-link'];
 
-    if (style) {
-      classes.push(`mc-link--${style}`);
+    if (appearance) {
+      classes.push(`mc-link--${appearance}`);
     }
     if (size) {
       classes.push(`mc-link--${size}`);
@@ -37,13 +47,12 @@
 </script>
 
 <a
-  on:click
   {href}
   {target}
-  class="{setClasses(style, size, inline)} {disabled
+  class="{setClasses(appearance, size, inline)} {disabled
     ? 'is-disabled'
-    : ''} {userClass}"
-  {...attributes}
+    : ''} "
+  {...events}
 >
   {#if iconposition === 'left'}
     <span class="mc-link__icon">
@@ -72,9 +81,9 @@
   min-height: 1.5rem;
   text-decoration: none;
   color: var(--link-color-text-primary, #000000);
+  font-size: 0.875rem;
 }
 .mc-link__label {
-  font-size: 0.875rem;
   line-height: 1.3;
 }
 .mc-link__icon {
@@ -94,8 +103,6 @@
 }
 .mc-link--m {
   min-height: 2rem;
-}
-.mc-link--m .mc-link__label {
   font-size: 1rem;
 }
 .mc-link--secondary {
@@ -124,7 +131,6 @@
   text-decoration: underline;
 }
 .mc-link--inline .mc-link__label {
-  font-size: inherit;
   line-height: 1;
 }
 .mc-link--inline:hover {