@mozaic-ds/web-components 1.0.0-alpha.8 → 1.0.0-beta.0

package/dist/components/button/IconButton.js

@@ -1,4 +1,4 @@
-import{c as p,p as w,a as y,b as r,t as x,f as z,g as _,h as S,i as e,e as C,r as I,o as j}from"../../custom-element.js";import{h as A}from"../../html.js";import{b as B,C as D}from"../../attributes.js";var E=x("<button><!></button>");const L={hash:"svelte-afhc2k",code:`/**
+import{a as m,p as k,b as h,e as r,t as p,f as w,g as y,v as _,h as x,j as z,k as e,r as S}from"../../custom-element.js";import{s as j}from"../../slot.js";import{b as C,C as A}from"../../attributes.js";var B=p("<button><!></button>");const D={hash:"svelte-1f7fovg",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-button.svelte-afhc2k {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);font-weight:600;padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:0.25rem;transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button.svelte-afhc2k:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-afhc2k:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--s.svelte-afhc2k {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-afhc2k {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-afhc2k {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button__label.svelte-afhc2k {font-size:1rem;}.mc-button__icon.svelte-afhc2k {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-afhc2k: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-button--icon-only.svelte-afhc2k {padding:0.25rem;}.mc-button--outlined.svelte-afhc2k {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-afhc2k:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-afhc2k:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-afhc2k {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-afhc2k:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-afhc2k:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-afhc2k {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-afhc2k:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-afhc2k:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-afhc2k {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-afhc2k:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-afhc2k:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-afhc2k {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-afhc2k:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-afhc2k:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-afhc2k {border-radius:100%;padding:0;}.mc-button--outlined.mc-button--standard.svelte-afhc2k {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-afhc2k:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-afhc2k:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-afhc2k {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-afhc2k:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-afhc2k:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-afhc2k {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-afhc2k:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-afhc2k:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-afhc2k {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-afhc2k:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-afhc2k:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-afhc2k {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-afhc2k:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-afhc2k:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-afhc2k {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-afhc2k:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-afhc2k:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-afhc2k {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-afhc2k:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-afhc2k:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-afhc2k {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-afhc2k:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-afhc2k:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-afhc2k:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function N(v,t){w(t,!0),y(v,L);let c=r(t,"appearance",7,"standard"),a=r(t,"size",7,"m"),l=r(t,"ghost",7,!1),b=r(t,"outlined",7,!1),u=r(t,"iconname",7),s=r(t,"disabled",7,!1),i=r(t,"type",7,"button"),f=j(t,["$$slots","$$events","$$legacy","$$host","appearance","size","ghost","outlined","iconname","disabled","type"]);function k(o,m){let d;switch(o){case"s":d="20px";break;case"m":d="24px";break;case"l":d="32px";break}return`${m} size="${d}" `}var n=E();let g;var h=C(n);return A(h,()=>`<${k(a(),u())} />`),I(n),z(()=>g=B(n,g,{class:`mc-button mc-button--icon-button ${(a()?`mc-button--${a()}`:"")??""} ${(c()?`mc-button--${c()}`:"")??""}`,disabled:s(),type:i(),...f,[D]:{"mc-button--ghost":l(),"mc-button--outlined":b()}},"svelte-afhc2k")),_(v,n),S({get appearance(){return c()},set appearance(o="standard"){c(o),e()},get size(){return a()},set size(o="m"){a(o),e()},get ghost(){return l()},set ghost(o=!1){l(o),e()},get outlined(){return b()},set outlined(o=!1){b(o),e()},get iconname(){return u()},set iconname(o){u(o),e()},get disabled(){return s()},set disabled(o=!1){s(o),e()},get type(){return i()},set type(o="button"){i(o),e()}})}customElements.define("m-icon-button",p(N,{appearance:{},size:{},ghost:{},outlined:{},iconname:{},disabled:{},type:{}},[],[],!1));
+ */.mc-button.svelte-1f7fovg {color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63);font-weight:600;padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:0.25rem;transition:all ease 200ms;transition:box-shadow 200ms ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:0.25rem;cursor:pointer;}.mc-button.svelte-1f7fovg:hover {background-color:var(--button-color-filled-standard-hover-background, #343b4c);}.mc-button.svelte-1f7fovg:active {background-color:var(--button-color-filled-standard-active-background, #242938);}.mc-button.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button__label.svelte-1f7fovg {font-size:1rem;}.mc-button__icon.svelte-1f7fovg {flex-shrink:0;width:1.5rem;height:1.5rem;}.mc-button.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button.svelte-1f7fovg: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-button--s.svelte-1f7fovg {padding:0 calc(0.75rem - 0.125rem);min-height:2rem;min-width:2rem;}.mc-button--m.svelte-1f7fovg {padding:0 calc(1rem - 0.125rem);min-height:3rem;min-width:3rem;}.mc-button--l.svelte-1f7fovg {padding:0 calc(1.25rem - 0.125rem);min-height:4rem;min-width:4rem;}.mc-button--icon-only.svelte-1f7fovg {padding:0.25rem;}.mc-button--outlined.svelte-1f7fovg {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.svelte-1f7fovg:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.svelte-1f7fovg:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.svelte-1f7fovg {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.svelte-1f7fovg:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.svelte-1f7fovg:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--accent.svelte-1f7fovg {color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03);}.mc-button--accent.svelte-1f7fovg:hover {background-color:var(--button-color-filled-accent-hover-background, #006902);}.mc-button--accent.svelte-1f7fovg:active {background-color:var(--button-color-filled-accent-active-background, #035010);}.mc-button--accent.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--danger.svelte-1f7fovg {color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112);}.mc-button--danger.svelte-1f7fovg:hover {background-color:var(--button-color-filled-danger-hover-background, #8c0003);}.mc-button--danger.svelte-1f7fovg:active {background-color:var(--button-color-filled-danger-active-background, #530000);}.mc-button--danger.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--inverse.svelte-1f7fovg {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff);}.mc-button--inverse.svelte-1f7fovg:hover {background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6);}.mc-button--inverse.svelte-1f7fovg:active {background-color:var(--button-color-filled-inverse-active-background, #cccccc);}.mc-button--inverse.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--icon-button.svelte-1f7fovg {border-radius:100%;padding:0;}.mc-button--outlined.mc-button--standard.svelte-1f7fovg {color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff);}.mc-button--outlined.mc-button--standard.svelte-1f7fovg:hover {background-color:var(--button-color-outlined-standard-hover-background, #eff1f6);}.mc-button--outlined.mc-button--standard.svelte-1f7fovg:active {background-color:var(--button-color-outlined-standard-active-background, #c9d0de);}.mc-button--outlined.mc-button--standard.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--accent.svelte-1f7fovg {color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff);}.mc-button--outlined.mc-button--accent.svelte-1f7fovg:hover {background-color:var(--button-color-outlined-accent-hover-background, #ebf5de);}.mc-button--outlined.mc-button--accent.svelte-1f7fovg:active {background-color:var(--button-color-outlined-accent-active-background, #c5e39e);}.mc-button--outlined.mc-button--accent.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--danger.svelte-1f7fovg {color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff);}.mc-button--outlined.mc-button--danger.svelte-1f7fovg:hover {background-color:var(--button-color-outlined-danger-hover-background, #fdeaea);}.mc-button--outlined.mc-button--danger.svelte-1f7fovg:active {background-color:var(--button-color-outlined-danger-active-background, #f8bcbb);}.mc-button--outlined.mc-button--danger.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--outlined.mc-button--inverse.svelte-1f7fovg {color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--outlined.mc-button--inverse.svelte-1f7fovg:hover {background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--outlined.mc-button--inverse.svelte-1f7fovg:active {background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--outlined.mc-button--inverse.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--standard.svelte-1f7fovg {color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--standard.svelte-1f7fovg:hover {background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));}.mc-button--ghost.mc-button--standard.svelte-1f7fovg:active {background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));}.mc-button--ghost.mc-button--standard.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--accent.svelte-1f7fovg {color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--accent.svelte-1f7fovg:hover {background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));}.mc-button--ghost.mc-button--accent.svelte-1f7fovg:active {background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));}.mc-button--ghost.mc-button--accent.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--danger.svelte-1f7fovg {color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--danger.svelte-1f7fovg:hover {background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));}.mc-button--ghost.mc-button--danger.svelte-1f7fovg:active {background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));}.mc-button--ghost.mc-button--danger.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}.mc-button--ghost.mc-button--inverse.svelte-1f7fovg {color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));}.mc-button--ghost.mc-button--inverse.svelte-1f7fovg:hover {background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));}.mc-button--ghost.mc-button--inverse.svelte-1f7fovg:active {background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));}.mc-button--ghost.mc-button--inverse.svelte-1f7fovg:disabled {background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed;}`};function E(s,t){k(t,!0),h(s,D);let n=r(t,"appearance",7,"standard"),a=r(t,"size",7,"m"),d=r(t,"ghost",7,!1),l=r(t,"outlined",7,!1),v=r(t,"iconname",7),b=r(t,"disabled",7,!1),u=r(t,"type",7,"button"),f=_(t,["$$slots","$$events","$$legacy","$$host","appearance","size","ghost","outlined","iconname","disabled","type"]);var c=B();let g;var i=w(c);return j(i,t,"icon",{}),S(c),y(o=>g=C(c,g,{class:`mc-button mc-button--icon-button ${a()?`mc-button--${a()}`:""} ${n()?`mc-button--${n()}`:""}`,disabled:b(),type:u(),...f,[A]:o},"svelte-1f7fovg"),[()=>({"mc-button--ghost":d(),"mc-button--outlined":l()})]),x(s,c),z({get appearance(){return n()},set appearance(o="standard"){n(o),e()},get size(){return a()},set size(o="m"){a(o),e()},get ghost(){return d()},set ghost(o=!1){d(o),e()},get outlined(){return l()},set outlined(o=!1){l(o),e()},get iconname(){return v()},set iconname(o){v(o),e()},get disabled(){return b()},set disabled(o=!1){b(o),e()},get type(){return u()},set type(o="button"){u(o),e()}})}customElements.define("m-icon-button",m(E,{appearance:{},size:{},ghost:{},outlined:{},iconname:{},disabled:{},type:{}},["icon"],[],!0));
 //# sourceMappingURL=IconButton.js.map

package/dist/components/button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-icon-button', shadow: 'none' }} />\n\n<script lang=\"ts\">\n  import type { ButtonSize, ButtonStyle, ButtonType } from './button.types';\n\n  interface Props {\n    appearance?: ButtonStyle | undefined;\n    size?: ButtonSize;\n    ghost?: boolean;\n    outlined?: boolean;\n    iconname: string;\n    disabled?: boolean;\n    type?: ButtonType;\n    [key: string]: any;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    ghost = false,\n    outlined = false,\n    iconname,\n    disabled = false,\n    type = 'button',\n    ...events\n  }: Props = $props();\n\n  function generateIconName(size: ButtonSize, iconName: string): string {\n    let iconSize: string;\n\n    switch (size) {\n      case 's':\n        iconSize = '20px';\n        break;\n      case 'm':\n        iconSize = '24px';\n        break;\n      case 'l':\n        iconSize = '32px';\n        break;\n    }\n\n    return `${iconName} size=\"${iconSize}\" `;\n  }\n</script>\n\n<button\n  class=\"mc-button mc-button--icon-button {size\n    ? `mc-button--${size}`\n    : ''} {appearance ? `mc-button--${appearance}` : ''}\"\n  class:mc-button--ghost={ghost}\n  class:mc-button--outlined={outlined}\n  {disabled}\n  {type}\n  {...events}\n>\n  {@html `<${generateIconName(size, iconname)} />`}\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["appearance","size","ghost","outlined","iconname","$.prop","$$props","disabled","type","events","$.rest_props","generateIconName","iconName","iconSize"],"mappings":";;69VAiBI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,gBAAQ,EAAK,EACbC,mBAAW,EAAK,EAChBC,EAAQC,EAAAC,EAAA,WAAA,CAAA,EACRC,mBAAW,EAAK,EAChBC,eAAO,QAAQ,EACZC,EAAAC,EAAAJ,EAAA,gHAGI,SAAAK,EAAiBV,EAAkBW,EAA0B,KAChEC,SAEIZ,EAAI,KACL,IACHY,EAAW,iBAER,IACHA,EAAW,iBAER,IACHA,EAAW,aAIL,MAAA,GAAAD,CAAQ,UAAUC,CAAQ,IACtC,+CAaWF,EAAiBV,EAAI,EAAEG,EAAQ,CAAA,CAAA,KAAA,iEATDH,EACvB,EAAA,cAAAA,MACd,KAAE,EAAA,KAAGD,EAA2B,EAAA,cAAAA,EAAU,IAAK,KAAE,EAAA,4BAKjDS,0BAJoBP,EAAK,wBACFC,EAAQ,8EAlCpB,WAAU,6CAChB,IAAG,+CACF,GAAK,qDACF,GAAK,0GAEL,GAAK,6CACT,SAAQ"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-icon-button' }} />\n\n<script lang=\"ts\">\n  import type { ButtonSize, ButtonStyle, ButtonType } from './button.types';\n\n  interface Props {\n    appearance?: ButtonStyle | undefined;\n    size?: ButtonSize;\n    ghost?: boolean;\n    outlined?: boolean;\n    iconname: string;\n    disabled?: boolean;\n    type?: ButtonType;\n    [key: string]: any;\n  }\n\n  let {\n    appearance = 'standard',\n    size = 'm',\n    ghost = false,\n    outlined = false,\n    iconname,\n    disabled = false,\n    type = 'button',\n    ...events\n  }: Props = $props();\n\n  function generateIconName(size: ButtonSize, iconName: string): string {\n    let iconSize: string;\n\n    switch (size) {\n      case 's':\n        iconSize = '20px';\n        break;\n      case 'm':\n        iconSize = '24px';\n        break;\n      case 'l':\n        iconSize = '32px';\n        break;\n    }\n\n    return `${iconName} size=\"${iconSize}\" `;\n  }\n</script>\n\n<button\n  class=\"mc-button mc-button--icon-button {size\n    ? `mc-button--${size}`\n    : ''} {appearance ? `mc-button--${appearance}` : ''}\"\n  class:mc-button--ghost={ghost}\n  class:mc-button--outlined={outlined}\n  {disabled}\n  {type}\n  {...events}\n>\n  <slot name=\"icon\" />\n</button>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/button';\n</style>\n"],"names":["appearance","size","ghost","outlined","iconname","$.prop","$$props","disabled","type","events","$.rest_props"],"mappings":";;kjWAiBI,IAAAA,qBAAa,UAAU,EACvBC,eAAO,GAAG,EACVC,gBAAQ,EAAK,EACbC,mBAAW,EAAK,EAChBC,EAAQC,EAAAC,EAAA,WAAA,CAAA,EACRC,mBAAW,EAAK,EAChBC,eAAO,QAAQ,EACZC,EAAAC,EAAAJ,EAAA,gOAuBoCL,EACvB,EAAA,cAAAA,EAAI,IAClB,EAAE,IAAGD,EAAU,EAAiB,cAAAA,MAAe,EAAE,4BAKjDS,qDAJoBP,EAAK,wBACFC,EAAQ,8DAlCpB,WAAU,6CAChB,IAAG,+CACF,GAAK,qDACF,GAAK,0GAEL,GAAK,6CACT,SAAQ"}

package/dist/components/button/IconButton.svelte

@@ -1,4 +1,4 @@
-<svelte:options customElement={{ tag: 'm-icon-button', shadow: 'none' }} />
+<svelte:options customElement={{ tag: 'm-icon-button' }} />
 
 <script lang="ts">
   import type { ButtonSize, ButtonStyle, ButtonType } from './button.types';
@@ -54,7 +54,7 @@
   {type}
   {...events}
 >
-  {@html `<${generateIconName(size, iconname)} />`}
+  <slot name="icon" />
 </button>
 
 <style>/**
@@ -77,6 +77,7 @@
   transition: box-shadow 200ms ease;
   align-items: center;
   box-sizing: border-box;
+  font-family: inherit;
   fill: currentcolor;
   gap: 0.25rem;
   cursor: pointer;
@@ -96,6 +97,25 @@
 .mc-button .mc-button__label {
   font-size: 1rem;
 }
+.mc-button__label {
+  font-size: 1rem;
+}
+.mc-button__icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button: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-button--s {
   padding: 0 calc(0.75rem - 0.125rem);
   min-height: 2rem;
@@ -144,25 +164,6 @@
   width: 2rem;
   height: 2rem;
 }
-.mc-button__label {
-  font-size: 1rem;
-}
-.mc-button__icon {
-  flex-shrink: 0;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.mc-button:disabled {
-  background-color: var(--button-state-disabled-background, #d9d9d9);
-  border-color: transparent;
-  color: var(--button-state-disabled-color, #737373);
-  cursor: not-allowed;
-}
-.mc-button: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-button--icon-only {
   padding: 0.25rem;
 }

package/dist/components/button/IconButton.svelte.d.ts

@@ -9,7 +9,24 @@ interface Props {
     type?: ButtonType;
     [key: string]: any;
 }
-declare const IconButton: import("svelte").Component<Props, {}, "">;
-type IconButton = ReturnType<typeof IconButton>;
+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 IconButton: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+}, {}, "">;
+type IconButton = InstanceType<typeof IconButton>;
 export default IconButton;
 //# sourceMappingURL=IconButton.svelte.d.ts.map

package/dist/components/button/IconButton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/button/IconButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGxE,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA+CH,QAAA,MAAM,UAAU,2CAAsC,CAAC;AACvD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/button/IconButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGxE,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA+CH,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,UAAU;;;;UAAmF,CAAC;AAClF,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}

package/dist/components/checkbox/Checkbox.js

@@ -1,10 +1,10 @@
-import{c as z,p as B,a as M,b as r,z as S,A,t as x,s as H,e as p,f as g,m as j,g as k,h as D,i,r as _,C as L,j as q,o as F}from"../../custom-element.js";import{i as G}from"../../if.js";import{r as I,s as J,b as K,C as N}from"../../attributes.js";import{c as O}from"../../input.js";var P=x('<label class="mc-checkbox__label svelte-1vlbnyp"> </label>'),Q=x('<div class="mc-checkbox svelte-1vlbnyp"><input> <!></div>');const R={hash:"svelte-1vlbnyp",code:`/**
+import{a as y,p as z,b as B,e as t,z as M,A as S,t as p,s as A,f as g,g as k,v as H,o as j,h as _,j as D,k as r,r as x,C as L,l as F}from"../../custom-element.js";import{i as G}from"../../if.js";import{b as I,C as J,r as K,s as N}from"../../attributes.js";import{c as O}from"../../input.js";var P=p('<label class="mc-checkbox__label svelte-vdifq2"> </label>'),Q=p('<div class="mc-checkbox svelte-vdifq2"><input> <!></div>');const R={hash:"svelte-vdifq2",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* stylelint-disable string-no-newline */.mc-checkbox.svelte-1vlbnyp {align-items:center;display:flex;gap:0.5rem;}.mc-checkbox__label.svelte-1vlbnyp {font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-checkbox__input.svelte-1vlbnyp {appearance:none;margin:0;cursor:pointer;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:0.125rem solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-1vlbnyp:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-1vlbnyp: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-1vlbnyp: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-1vlbnyp: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-1vlbnyp:checked, .mc-checkbox__input.svelte-1vlbnyp:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-1vlbnyp:checked, .mc-checkbox__input.svelte-1vlbnyp:indeterminate, .mc-checkbox__input.svelte-1vlbnyp:disabled {border-color:transparent;}.mc-checkbox__input.svelte-1vlbnyp:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-1vlbnyp: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-1vlbnyp: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-1vlbnyp:disabled + .mc-checkbox__label:where(.svelte-1vlbnyp) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-1vlbnyp:not(:disabled):checked:hover, .mc-checkbox__input.svelte-1vlbnyp:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-1vlbnyp:not(:checked):not(:indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-1vlbnyp:not(:checked):not(:indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
+/* stylelint-disable string-no-newline */.mc-checkbox.svelte-vdifq2 {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox__label.svelte-vdifq2 {font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-checkbox__input.svelte-vdifq2 {appearance:none;margin:0;cursor:pointer;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:0.125rem solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-vdifq2:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-vdifq2: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-vdifq2: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-vdifq2: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-vdifq2:checked, .mc-checkbox__input.svelte-vdifq2:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-vdifq2:checked, .mc-checkbox__input.svelte-vdifq2:indeterminate, .mc-checkbox__input.svelte-vdifq2:disabled {border-color:transparent;}.mc-checkbox__input.svelte-vdifq2:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-vdifq2: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-vdifq2: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-vdifq2:disabled + .mc-checkbox__label:where(.svelte-vdifq2) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-vdifq2:not(:disabled):checked:hover, .mc-checkbox__input.svelte-vdifq2:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-vdifq2:not(:checked):not(:indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-vdifq2:not(:checked):not(:indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 
 /* stylelint-enable string-no-newline */
 /* stylelint-disable string-no-newline */
 
-/* stylelint-enable string-no-newline */`};function T(h,t){B(t,!0),M(h,R);let a=r(t,"name",7,"checkbox"),c=r(t,"id",7),d=r(t,"indeterminate",7),v=r(t,"disabled",7,!1),l=r(t,"isinvalid",7,!1),o=r(t,"label",7),b=r(t,"ischecked",7),y=F(t,["$$slots","$$events","$$legacy","$$host","name","id","indeterminate","disabled","isinvalid","label","ischecked"]),u=S(A(b()));var m=Q(),n=p(m);I(n);let f;var w=H(n,2);{var C=e=>{var s=P(),E=p(s,!0);_(s),g(()=>{J(s,"for",a()),q(E,o())}),k(e,s)};G(w,e=>{o()&&e(C)})}return _(m),g(()=>f=K(n,f,{id:c(),type:"checkbox",class:"mc-checkbox__input","aria-invalid":l(),name:a(),disabled:v(),indeterminate:d(),...y,[N]:{"is-invalid":l()}},"svelte-1vlbnyp")),O(n,()=>j(u),e=>L(u,e)),k(h,m),D({get name(){return a()},set name(e="checkbox"){a(e),i()},get id(){return c()},set id(e){c(e),i()},get indeterminate(){return d()},set indeterminate(e){d(e),i()},get disabled(){return v()},set disabled(e=!1){v(e),i()},get isinvalid(){return l()},set isinvalid(e=!1){l(e),i()},get label(){return o()},set label(e){o(e),i()},get ischecked(){return b()},set ischecked(e){b(e),i()}})}customElements.define("m-checkbox",z(T,{name:{},id:{},indeterminate:{},disabled:{},isinvalid:{},label:{},ischecked:{}},[],[],!0));
+/* stylelint-enable string-no-newline */`};function T(b,i){z(i,!0),B(b,R);let a=t(i,"name",7,"checkbox"),c=t(i,"id",7),n=t(i,"indeterminate",7),v=t(i,"disabled",7,!1),o=t(i,"isinvalid",7,!1),s=t(i,"label",7),m=t(i,"ischecked",7),w=H(i,["$$slots","$$events","$$legacy","$$host","name","id","indeterminate","disabled","isinvalid","label","ischecked"]),h=M(S(m()));var f=Q(),d=g(f);K(d);let u;var q=A(d,2);{var C=e=>{var l=P(),E=g(l,!0);x(l),k(()=>{N(l,"for",a()),F(E,s())}),_(e,l)};G(q,e=>{s()&&e(C)})}return x(f),k(e=>u=I(d,u,{id:c(),type:"checkbox",class:"mc-checkbox__input","aria-invalid":o(),name:a(),disabled:v(),indeterminate:n(),...w,[J]:e},"svelte-vdifq2"),[()=>({"is-invalid":o()})]),O(d,()=>j(h),e=>L(h,e)),_(b,f),D({get name(){return a()},set name(e="checkbox"){a(e),r()},get id(){return c()},set id(e){c(e),r()},get indeterminate(){return n()},set indeterminate(e){n(e),r()},get disabled(){return v()},set disabled(e=!1){v(e),r()},get isinvalid(){return o()},set isinvalid(e=!1){o(e),r()},get label(){return s()},set label(e){s(e),r()},get ischecked(){return m()},set ischecked(e){m(e),r()}})}customElements.define("m-checkbox",y(T,{name:{},id:{},indeterminate:{},disabled:{},isinvalid:{},label:{},ischecked:{}},[],[],!0));
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox',\n  }}\n/>\n\n<script lang=\"ts\">\n  interface Props {\n    name: string;\n    id: string;\n    checked: boolean;\n    indeterminate: boolean;\n    disabled?: boolean;\n    isinvalid?: boolean;\n    label: string;\n    ischecked: boolean;\n  }\n\n  let {\n    name = 'checkbox',\n    id,\n    indeterminate,\n    disabled = false,\n    isinvalid = false,\n    label,\n    ischecked,\n    ...events\n  }: Props = $props();\n\n  let isChecked = $state(ischecked);\n</script>\n\n<div class=\"mc-checkbox\">\n  <input\n    {id}\n    type=\"checkbox\"\n    class=\"mc-checkbox__input\"\n    class:is-invalid={isinvalid}\n    aria-invalid={isinvalid}\n    {name}\n    {disabled}\n    {indeterminate}\n    bind:checked={isChecked}\n    {...events}\n  />\n  {#if label}\n    <label for={name} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\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":["name","id","$.prop","$$props","indeterminate","disabled","isinvalid","label","ischecked","events","$.rest_props","isChecked","$$render","consequent","$.bind_checked","input","$.get","$$value"],"mappings":";;;;;;;;0EAmBI,IAAAA,eAAO,UAAU,EACjBC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAaF,EAAAC,EAAA,gBAAA,CAAA,EACbE,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,EAAKL,EAAAC,EAAA,QAAA,CAAA,EACLK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACNM,EAAAC,EAAAP,EAAA,mHAGDQ,MAAmBH,EAAS,CAAA,CAAA,gGAiBlBR,GAAI,MAA8BO,GAAK,oBADhDA,EAAK,GAAAK,EAAAC,CAAA,gGAPMP,EAAS,6CAKnBG,oBANcH,EAAS,CAAA,sBAKbQ,EAAAC,EAAA,IAAAC,EAAAL,CAAS,OAATA,EAASM,CAAA,CAAA,8CAvBhB,WAAU,6JAGN,GAAK,uDACJ,GAAK"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox',\n  }}\n/>\n\n<script lang=\"ts\">\n  interface Props {\n    name: string;\n    id: string;\n    checked: boolean;\n    indeterminate: boolean;\n    disabled?: boolean;\n    isinvalid?: boolean;\n    label: string;\n    ischecked: boolean;\n  }\n\n  let {\n    name = 'checkbox',\n    id,\n    indeterminate,\n    disabled = false,\n    isinvalid = false,\n    label,\n    ischecked,\n    ...events\n  }: Props = $props();\n\n  let isChecked = $state(ischecked);\n</script>\n\n<div class=\"mc-checkbox\">\n  <input\n    {id}\n    type=\"checkbox\"\n    class=\"mc-checkbox__input\"\n    class:is-invalid={isinvalid}\n    aria-invalid={isinvalid}\n    {name}\n    {disabled}\n    {indeterminate}\n    bind:checked={isChecked}\n    {...events}\n  />\n  {#if label}\n    <label for={name} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\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":["name","id","$.prop","$$props","indeterminate","disabled","isinvalid","label","ischecked","events","$.rest_props","isChecked","$$render","consequent","$.bind_checked","input","$.get","$$value"],"mappings":";;;;;;;;0EAmBI,IAAAA,eAAO,UAAU,EACjBC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAaF,EAAAC,EAAA,gBAAA,CAAA,EACbE,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,EAAKL,EAAAC,EAAA,QAAA,CAAA,EACLK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACNM,EAAAC,EAAAP,EAAA,mHAGDQ,MAAmBH,EAAS,CAAA,CAAA,gGAiBlBR,GAAI,MAA8BO,GAAK,oBADhDA,EAAK,GAAAK,EAAAC,CAAA,+FAPMP,EAAS,6CAKnBG,8CANcH,EAAS,GAAA,GAKbQ,EAAAC,EAAA,IAAAC,EAAAL,CAAS,OAATA,EAASM,CAAA,CAAA,8CAvBhB,WAAU,6JAGN,GAAK,uDACJ,GAAK"}

package/dist/components/checkbox/Checkbox.svelte

@@ -56,6 +56,7 @@
   align-items: center;
   display: flex;
   gap: 0.5rem;
+  padding: 0.375rem;
 }
 .mc-checkbox__label {
   font-size: 1rem;
@@ -130,11 +131,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;
@@ -150,21 +147,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;
@@ -190,10 +172,19 @@
   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--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;
+  gap: 0.25rem;
+}
+.mc-field--group .mc-field__content:where(.mc-field__content--inline) {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+}
 
 /* stylelint-enable string-no-newline */</style>

package/dist/components/checkboxgroup/checkboxGroup.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.js","sources":["../../../src/components/checkboxgroup/checkboxGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { CheckboxGroupOption } from './checkboxgroup.types';\n\n  interface Props {\n    id: string;\n    options: Array<CheckboxGroupOption>;\n    legend: string;\n    selected: Array<String>;\n  }\n\n  let { id, options, legend, selected, onchange }: Props = $props();\n  let selectedValues = $state(selected);\n  function selectValue() {\n    onchange(selectedValues);\n  }\n</script>\n\n<div class=\"checkbox-group-container\" {id}>\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend && legend.length}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n    <div class=\"mc-field__container\">\n      {#each options as opt (opt.id)}\n        <div class=\"mc-checkbox mc-field__item\">\n          <input\n            type=\"checkbox\"\n            class=\"mc-checkbox__input {opt.isinvalid ? ' is-invalid' : ''}\"\n            id={opt.id}\n            name={opt.name}\n            checked={opt.checked}\n            disabled={opt.disabled}\n            indeterminate={opt.indeterminate}\n            aria-invalid={opt.isinvalid}\n            bind:group={selectedValues}\n            value={opt.name}\n            onchange={selectValue}\n          />\n          {#if opt.label}\n            <label for={opt.id} class=\"mc-checkbox__label\">{opt.label}</label>\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":["selectValue","_","onchange","selectedValues","id","$.prop","$$props","options","legend","selected","$$render","consequent","$.each","div_1","opt","$.set_attribute","label","$.get","$.set_text","text_1","consequent_1","$.set_class","input","$.set_checked","input_value","$$value"],"mappings":"qUAsBW,SAAAA,EAAcC,EAAAC,EAAAC,EAAA,CACrBD,MAASC,CAAc,CAAA,CACzB;;;;;;;;2FAJMC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAOF,EAAAC,EAAA,UAAA,CAAA,EAAEE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EAAEG,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAAEJ,EAAQG,EAAAC,EAAA,WAAA,CAAA,EACzCH,MAAwBM,EAAQ,CAAA,CAAA,wEAU7BD,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAIA,EAAM,EAAC,QAAME,EAAAC,CAAA,iBAMnBC,OAAAA,EAAAC,EAAA,GAAAN,EAAWO,GAAKA,EAAI,MAATA,IAAG,yCAaLd,EAAWE,EAAAC,CAAA,0DAGTY,EAAAC,EAAA,MAAAC,EAAAH,CAAG,EAAC,EAAE,EAA8BI,EAAAC,EAAAF,EAAAH,CAAG,EAAC,KAAK,oBADtDG,EAAAH,CAAG,EAAC,OAAKJ,EAAAU,CAAA,gBAXeC,EAAAC,EAAA,EAAA,uBAAAL,EAAAH,CAAG,EAAC,UAAY,cAAgB,KAAE,EAAA,GAAA,gBAAA,EACzDC,EAAAO,EAAA,KAAAL,EAAAH,CAAG,EAAC,EAAE,EACJC,EAAAO,EAAA,OAAAL,EAAAH,CAAG,EAAC,IAAI,EACLS,EAAAD,EAAAL,EAAAH,CAAG,EAAC,OAAO,EACVQ,EAAA,SAAAL,EAAAH,CAAG,EAAC,SACCQ,EAAA,cAAAL,EAAAH,CAAG,EAAC,cACLC,EAAAO,EAAA,eAAAL,EAAAH,CAAG,EAAC,SAAS,EAEpBU,KAAAA,EAAAP,EAAAH,CAAG,EAAC,QAAJQ,EAAA,OAAAA,EAAA,QAAAL,EAAAH,CAAG,EAAC,OAAJ,KAAA,GAAAG,EAAAH,CAAG,EAAC,sBAAJG,EAAAH,CAAG,EAAC,OADCX,CAAc,QAAdA,EAAcsB,CAAA"}
+{"version":3,"file":"checkboxGroup.js","sources":["../../../src/components/checkboxgroup/checkboxGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { CheckboxGroupOption } from './checkboxgroup.types';\n\n  interface Props {\n    id: string;\n    options: Array<CheckboxGroupOption>;\n    legend: string;\n    selected: Array<String>;\n  }\n\n  let { id, options, legend, selected, onchange }: Props = $props();\n  let selectedValues = $state(selected);\n  function selectValue() {\n    onchange(selectedValues);\n  }\n</script>\n\n<div class=\"checkbox-group-container\" {id}>\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend && legend.length}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n    <div class=\"mc-field__container\">\n      {#each options as opt (opt.id)}\n        <div class=\"mc-checkbox mc-field__item\">\n          <input\n            type=\"checkbox\"\n            class=\"mc-checkbox__input {opt.isinvalid ? ' is-invalid' : ''}\"\n            id={opt.id}\n            name={opt.name}\n            disabled={opt.disabled}\n            indeterminate={opt.indeterminate}\n            aria-invalid={opt.isinvalid}\n            bind:group={selectedValues}\n            value={opt.name}\n            onchange={selectValue}\n          />\n          {#if opt.label}\n            <label for={opt.id} class=\"mc-checkbox__label\">{opt.label}</label>\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":["selectValue","onchange","selectedValues","id","$.prop","$$props","options","legend","selected","$$render","consequent","$.each","div_1","opt","$.set_attribute","label","$.get","$.set_text","text_1","consequent_1","$.set_class","input","input_value","$$value"],"mappings":"8TAsBW,SAAAA,EAAc,EAAAC,EAAAC,EAAA,CACrBD,MAASC,CAAc,CAAA,CACzB;;;;;;;;0FAJMC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAOF,EAAAC,EAAA,UAAA,CAAA,EAAEE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EAAEG,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAAEJ,EAAQG,EAAAC,EAAA,WAAA,CAAA,EACzCH,MAAwBM,EAAQ,CAAA,CAAA,wEAU7BD,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAIA,EAAM,EAAC,QAAME,EAAAC,CAAA,iBAMnBC,OAAAA,EAAAC,EAAA,GAAAN,EAAWO,GAAKA,EAAI,MAATA,IAAG,yCAYLb,EAAWC,EAAAC,CAAA,0DAGTY,EAAAC,EAAA,MAAAC,EAAAH,CAAG,EAAC,EAAE,EAA8BI,EAAAC,EAAAF,EAAAH,CAAG,EAAC,KAAK,oBADtDG,EAAAH,CAAG,EAAC,OAAKJ,EAAAU,CAAA,gBAVeC,EAAAC,EAAA,EAAA,sBAAAL,EAAAH,CAAG,EAAC,UAAY,cAAgB,EAAE,GAAA,eAAA,EACzDC,EAAAO,EAAA,KAAAL,EAAAH,CAAG,EAAC,EAAE,EACJC,EAAAO,EAAA,OAAAL,EAAAH,CAAG,EAAC,IAAI,EACJQ,EAAA,SAAAL,EAAAH,CAAG,EAAC,SACCQ,EAAA,cAAAL,EAAAH,CAAG,EAAC,cACLC,EAAAO,EAAA,eAAAL,EAAAH,CAAG,EAAC,SAAS,EAEpBS,KAAAA,EAAAN,EAAAH,CAAG,EAAC,QAAJQ,EAAA,OAAAA,EAAA,QAAAL,EAAAH,CAAG,EAAC,OAAI,oBAARG,EAAAH,CAAG,EAAC,OADCX,CAAc,QAAdA,EAAcqB,CAAA"}

package/dist/components/checkboxgroup/checkboxGroup.svelte

@@ -40,7 +40,6 @@
             class="mc-checkbox__input {opt.isinvalid ? ' is-invalid' : ''}"
             id={opt.id}
             name={opt.name}
-            checked={opt.checked}
             disabled={opt.disabled}
             indeterminate={opt.indeterminate}
             aria-invalid={opt.isinvalid}
@@ -65,6 +64,7 @@
   align-items: center;
   display: flex;
   gap: 0.5rem;
+  padding: 0.375rem;
 }
 .mc-checkbox__label {
   font-size: 1rem;
@@ -139,11 +139,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;
@@ -159,21 +155,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;
@@ -199,10 +180,19 @@
   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--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;
+  gap: 0.25rem;
+}
+.mc-field--group .mc-field__content:where(.mc-field__content--inline) {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+}
 
 /* stylelint-enable string-no-newline */</style>

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

@@ -4,7 +4,7 @@ export interface CheckboxGroupOption {
     label?: string;
     value: string;
     disabled?: boolean | undefined;
-    checked?: boolean | undefined;
+    ischecked?: boolean | undefined;
     indeterminate?: boolean | undefined;
     isinvalid?: boolean | undefined;
 }

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,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,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACjC"}

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{a as G,p as H,b as I,e as t,t as x,s as g,f as r,g as _,h,j as J,k as a,r as d,l 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=x('<span class="mc-field__requirement svelte-1o7qw0x" aria-hidden="true"> </span>'),P=x('<span class="mc-field__help svelte-1o7qw0x"> </span>'),Q=x("<span> </span>"),R=x('<div class="mc-field"><label class="mc-field__label svelte-1o7qw0x"> <!></label> <!> <div class="mc-field__content svelte-1o7qw0x"><!></div> <!></div>');const T={hash:"svelte-1o7qw0x",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-1o7qw0x {font-size:0.875rem;line-height:1.3;font-weight:400;color:var(--field-color-label, #000000);}.mc-field__requirement.svelte-1o7qw0x, .mc-field__help.svelte-1o7qw0x {font-size:0.75rem;line-height:1.5;font-weight:400;vertical-align:top;color:var(--field-color-requirement, #666666);}.mc-field__help.svelte-1o7qw0x {display:block;margin-top:0.125rem;}.mc-field__content.svelte-1o7qw0x {margin-top:0.5rem;}.mc-field__validation-message.svelte-1o7qw0x {font-size:0.875rem;line-height:1.5;display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.svelte-1o7qw0x::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-1o7qw0x {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-1o7qw0x::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-1o7qw0x {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-1o7qw0x::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 w=t(l,"id",7),p=t(l,"label",7),n=t(l,"requirementtext",7),o=t(l,"helpid",7),v=t(l,"helptext",7),q=t(l,"messageid",7),b=t(l,"message",7),m=t(l,"isinvalid",7,!1),c=t(l,"isvalid",7,!1);var y=R(),f=r(y),M=r(f),B=g(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(f);var z=g(f,2);{var D=e=>{var i=P(),s=r(i,!0);d(i),_(()=>{C(i,"id",o()),u(s,v())}),h(e,i)};Z(z,e=>{o()&&v()&&e(D)})}var E=g(z,2),F=r(E);N(F,l,"default",{}),d(E);var L=g(E,2);{var S=e=>{var i=Q();let s;var V=r(i,!0);d(i),_(A=>{C(i,"id",q()),s=K(i,1,"mc-field__validation-message svelte-1o7qw0x",null,s,A),u(V,b())},[()=>({"is-valid":c(),"is-invalid":m()})]),h(e,i)};Z(L,e=>{(m()||c())&&e(S)})}return d(y),_(()=>{C(f,"for",w()),u(M,`${p()??""} `)}),h(k,y),J({get id(){return w()},set id(e){w(e),a()},get label(){return p()},set label(e){p(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 q()},set messageid(e){q(e),a()},get message(){return b()},set message(e){b(e),a()},get isinvalid(){return m()},set isinvalid(e=!1){m(e),a()},get isvalid(){return c()},set isvalid(e=!1){c(e),a()}})}customElements.define("m-field",G(U,{id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{},isinvalid:{},isvalid:{}},["default"],[],!1));
 //# 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    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,2HAUfN,GAAS,sEAKZC,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

@@ -72,11 +72,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 +88,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;
@@ -132,10 +113,19 @@
   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--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;
+  gap: 0.25rem;
+}
+.mc-field--group .mc-field__content:where(.mc-field__content--inline) {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+}
 
 /* stylelint-enable string-no-newline */</style>