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

package/dist/components/passwordinput/PasswordInput.svelte

@@ -0,0 +1,263 @@
+<svelte:options
+  customElement={{
+    tag: 'm-password-input',
+  }}
+/>
+
+<script lang="ts">
+  import Button from '../button/Button.svelte';
+  interface Props {
+    id: string;
+    name?: string;
+    value?: string | number;
+    placeholder?: string;
+    isinvalid?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    isclearable?: boolean;
+    clearlabel?: string;
+    buttonlabel?: {
+      show: string;
+      hide: string;
+    };
+    [key: string]: any;
+  }
+
+  let {
+    id,
+    name,
+    value = $bindable(''),
+    placeholder = '',
+    isinvalid = false,
+    disabled = false,
+    readonly = false,
+    isclearable = false,
+    clearlabel = 'Clear content',
+    buttonlabel = { show: 'Show', hide: 'Hide' },
+    onclear,
+    ontoggle,
+    ...events
+  }: Props = $props();
+
+  let isVisible = $state(false);
+
+  function toggleVisibility() {
+    isVisible = !isVisible;
+    ontoggle(isVisible);
+  }
+
+  function clearValue() {
+    value = '';
+    onclear();
+  }
+</script>
+
+<div class="mc-password-input mc-text-input {isinvalid ? 'is-invalid' : ''}">
+  <input
+    class="mc-password-input__control mc-text-input__control"
+    {id}
+    {name}
+    type={isVisible ? 'text' : 'password'}
+    bind:value
+    {placeholder}
+    {disabled}
+    {readonly}
+    aria-invalid={isinvalid}
+    {...events}
+  />
+  {#if isclearable && value}
+    <div class="mc-controls-options">
+      <button
+        class="mc-controls-options__button"
+        type="button"
+        onclick={clearValue}
+      >
+        <svg class="mc-controls-options__icon" aria-hidden="true">
+          <path
+            fill-rule="evenodd"
+            d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z"
+          />
+        </svg>
+        <span class="mc-controls-options__label">{clearlabel}</span>
+      </button>
+    </div>
+  {/if}
+
+  <Button
+    type="button"
+    role="switch"
+    tabindex="0"
+    aria-checked={isVisible}
+    size="s"
+    ghost={true}
+    {disabled}
+    onclick={toggleVisibility}
+  >
+    <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>
+  </Button>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-password-input .mc-button {
+  min-width: 4rem;
+  margin: 0.5rem;
+}
+
+/* stylelint-disable string-no-newline */
+.mc-text-input {
+  transition: box-shadow 200ms ease;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: 1px solid var(--forms-color-border-default, #666666);
+  border-radius: 0.25rem;
+  transition: all ease 200ms;
+  color: var(--forms-color-text-default, #000000);
+  display: block;
+  width: 100%;
+  height: 3rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.mc-text-input__control {
+  background-color: transparent;
+  border-width: 0;
+  font-family: inherit;
+  outline: none;
+  padding: 0.75rem 0.6875rem;
+  font-size: 1rem;
+  line-height: 1.3;
+  font-weight: 400;
+  flex-grow: 1;
+}
+.mc-text-input__control[type=number] {
+  /* For Blink & WebKit rendering engines */
+  /* For Gecko rendering engine */
+  appearance: textfield;
+}
+.mc-text-input__control[type=number]::-webkit-inner-spin-button, .mc-text-input__control[type=number]::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+.mc-text-input__control[type=search]::-webkit-search-decoration, .mc-text-input__control[type=search]::-webkit-search-cancel-button {
+  appearance: none;
+}
+.mc-text-input__control::placeholder {
+  color: var(--forms-color-placeholder, #666666);
+}
+.mc-text-input__icon {
+  fill: var(--forms-color-icon-default, #666666);
+  height: 1.5rem;
+  width: 1.5rem;
+  flex-shrink: 0;
+}
+.mc-text-input:focus-within {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-text-input:hover:not(:focus-within) {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 1px var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-text-input:has(input:disabled) {
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
+  cursor: not-allowed;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--forms-color-text-disabled, #737373);
+  pointer-events: none;
+}
+.mc-text-input:has(input[readonly]) {
+  border-color: var(--forms-color-border-read-only, #cccccc);
+  pointer-events: none;
+}
+.mc-text-input:has(.mc-text-input__icon) {
+  padding-inline-start: 0.6875rem;
+}
+.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control {
+  padding-inline-start: 0;
+}
+.mc-text-input:has(.mc-controls-options) {
+  padding-inline-end: 0.6875rem;
+}
+.mc-text-input:has(.mc-controls-options) .mc-text-input__control {
+  padding-inline-end: 0;
+}
+.mc-text-input--s {
+  height: 2rem;
+}
+.mc-text-input--s .mc-text-input__control {
+  padding: 0.375rem 0.6875rem;
+  font-size: 0.875rem;
+  line-height: 1.3;
+}
+.mc-text-input--s:has(.mc-text-input__icon) {
+  padding-inline-start: 0.4375rem;
+}
+.mc-text-input--s:has(.mc-controls-options) {
+  padding-inline-end: 0.4375rem;
+}
+.mc-text-input.is-invalid {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 1px var(--forms-color-border-invalid, #ea302d);
+}
+.mc-text-input.is-invalid:hover:not(:focus-within) {
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 1px var(--forms-color-border-invalid-hover, #c61112);
+}
+.mc-text-input * {
+  box-sizing: border-box;
+}
+
+/* stylelint-enable string-no-newline */
+.mc-controls-options {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.mc-controls-options__button {
+  background-color: transparent;
+  border-width: 0;
+  color: initial;
+  font-family: inherit;
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+  padding: 0;
+  border-radius: 100%;
+}
+.mc-controls-options__button:hover .mc-controls-options__icon {
+  fill: var(--forms-color-icon-clear-hover, #4d4d4d);
+}
+.mc-controls-options__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-controls-options__icon {
+  fill: var(--forms-color-icon-clear, #666666);
+}
+.mc-controls-options__button, .mc-controls-options__icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.mc-controls-options__label {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}
+.mc-controls-options__unit {
+  font-size: 1rem;
+  line-height: 1.3;
+  font-weight: 600;
+  color: var(--forms-color-text-default, #000000);
+}</style>

package/dist/components/passwordinput/PasswordInput.svelte.d.ts

@@ -0,0 +1,20 @@
+interface Props {
+    id: string;
+    name?: string;
+    value?: string | number;
+    placeholder?: string;
+    isinvalid?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    isclearable?: boolean;
+    clearlabel?: string;
+    buttonlabel?: {
+        show: string;
+        hide: string;
+    };
+    [key: string]: any;
+}
+declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;
+//# sourceMappingURL=PasswordInput.svelte.d.ts.map

package/dist/components/passwordinput/PasswordInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/passwordinput/PasswordInput.svelte.ts"],"names":[],"mappings":"AAKE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AA4DH,QAAA,MAAM,aAAa,gDAAsC,CAAC;AAC1D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/quantityselector/QuantitySelector.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.js","sources":["../../../node_modules/svelte/src/internal/flags/legacy.js","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/Less24/Less24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/More24/More24.svelte","../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["import { enable_legacy_mode_flag } from './index.js';\n\nenable_legacy_mode_flag();\n","<svelte:options customElement={{ tag: 'ui-less-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" width={size} height={size} id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n  <g clip-path=\"url(#a)\">\n    <path fill-rule=\"evenodd\" d=\"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Z\"/>\n  </g>\n  <defs>\n    <clipPath id=\"a\">\n      <rect width=\"24\" height=\"24\" fill=\"#fff\"/>\n    </clipPath>\n  </defs>\n</svg>\n","<svelte:options customElement={{ tag: 'ui-more-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" width={size} height={size} id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n  <g clip-path=\"url(#a)\">\n    <path fill-rule=\"evenodd\" d=\"M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6V5Z\"/>\n  </g>\n  <defs>\n    <clipPath id=\"a\">\n      <rect width=\"24\" height=\"24\" fill=\"#fff\"/>\n    </clipPath>\n  </defs>\n</svg>\n","<svelte:options\n  customElement={{\n    tag: 'm-quantityselector',\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';\n  import More24 from '@mozaic-ds/icons-svelte/svelte/More24/More24.svelte';\n  interface Props {\n    id?: string | undefined;\n    quantity?: number;\n    min?: number;\n    max?: number;\n    small?: boolean;\n    decrementlabel?: string;\n    inputarialabel?: string;\n    incrementlabel?: string;\n    disabled?: boolean;\n    name?: string;\n    step?: number;\n    [key: string]: any;\n  }\n\n  let {\n    id = undefined,\n    quantity = $bindable(1),\n    min = 1,\n    max = 100,\n    small = false,\n    decrementlabel = 'Decrement',\n    inputarialabel = 'Quantity Selector',\n    incrementlabel = 'Increment',\n    disabled = false,\n    name = 'quantity-selector-input',\n    step = 1,\n    increment,\n    decrement,\n    inputqty,\n  }: Props = $props();\n\n  function handleValue(): void {\n    if (quantity > max) {\n      quantity = max;\n    }\n    if (quantity < min) {\n      quantity = min;\n    }\n    inputqty(quantity);\n  }\n\n  function handleDecrement(): void {\n    if (quantity - Number(step) > min) {\n      quantity = quantity - Number(step);\n    }\n    decrement(quantity);\n  }\n\n  function handleIncrement(): void {\n    if (quantity + Number(step) < max) {\n      quantity = quantity + Number(step);\n    }\n    increment(quantity);\n  }\n</script>\n\n<div class=\"mc-quantity-selector\" class:mc-quantity-selector--s={small}>\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value={quantity}\n    oninput={handleValue}\n    class=\"mc-quantity-selector__control\"\n    aria-label={inputarialabel}\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={quantity}\n    spellcheck=\"false\"\n    {disabled}\n  />\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n    tabindex=\"-1\"\n    onclick={handleIncrement}\n    disabled={quantity === max || disabled}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <More24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{decrementlabel}</span>\n  </button>\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--decrease\"\n    tabindex=\"-1\"\n    onclick={handleDecrement}\n    disabled={quantity === min || disabled}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <Less24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{incrementlabel}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n"],"names":["enable_legacy_mode_flag","id","style","className","fill","size","handleValue","_","quantity","max","min","inputqty","handleDecrement","__1","step","decrement","handleIncrement","__2","increment","small","decrementlabel","inputarialabel","incrementlabel","disabled","name","$.prop","$$props"],"mappings":"uPAEAA,EAAyB,2UCAZ,IAAAC,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,uCAGGA,GAAI,eAAUA,GAAI,WAAMJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,6rBCPzF,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,uCAGGA,GAAI,eAAUA,GAAI,WAAMJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,yVCiC3F,SAAAE,GAAoBC,EAAAC,EAAAC,EAAAC,EAAAC,EAAA,CACvBH,EAAQ,EAAGC,KACbD,EAAWC,EAAG,CAAA,EAEZD,EAAQ,EAAGE,KACbF,EAAWE,EAAG,CAAA,EAEhBC,EAAQ,EAACH,GAAQ,CACnB,CAES,SAAAI,GAAwBC,EAAAL,EAAAM,EAAAJ,EAAAK,EAAA,CAC3BP,IAAW,OAAOM,EAAI,CAAA,EAAIJ,EAAG,GAC/BF,EAAWA,EAAW,EAAA,OAAOM,EAAI,CAAA,CAAA,EAEnCC,EAAS,EAACP,GAAQ,CACpB,CAES,SAAAQ,GAAwBC,EAAAT,EAAAM,EAAAL,EAAAS,EAAA,CAC3BV,IAAW,OAAOM,EAAI,CAAA,EAAIL,EAAG,GAC/BD,EAAWA,EAAW,EAAA,OAAOM,EAAI,CAAA,CAAA,EAEnCI,EAAS,EAACV,GAAQ,CACpB;;;;slGAtCE,IAAAP,aAAK,MAAS,EACdO,oBAAqB,CAAC,EACtBE,cAAM,CAAC,EACPD,cAAM,GAAG,EACTU,gBAAQ,EAAK,EACbC,yBAAiB,WAAW,EAC5BC,yBAAiB,mBAAmB,EACpCC,yBAAiB,WAAW,EAC5BC,mBAAW,EAAK,EAChBC,eAAO,yBAAyB,EAChCV,eAAO,CAAC,EACRI,EAASO,EAAAC,EAAA,YAAA,CAAA,EACTX,EAASU,EAAAC,EAAA,YAAA,CAAA,EACTf,EAAQc,EAAAC,EAAA,WAAA,CAAA,8CAkCCpB,GAAWE,EAAAC,EAAAC,EAAAC,CAAA,0BAcXK,oGAaAJ,qMAzBGS,GAAc,sBACXX,GAAG,sBACHD,GAAG,sBACHD,GAAQ,qCAMRP,GAAE,aAIPO,EAAQ,IAAKC,EAAG,GAAIc,EAAQ,MAKKH,GAAc,sBAI1CnB,GAAE,aAIPO,EAAQ,IAAKE,EAAG,GAAIa,EAAQ,MAKKD,GAAc,oCAvCIH,GAAK,SAKtDX,CAAQ,0CA9Cf,OAAS,qDACO,EAAC,2CAChB,EAAC,2CACD,IAAG,+CACD,GAAK,iEACI,YAAW,iEACX,oBAAmB,iEACnB,YAAW,qDACjB,GAAK,6CACT,0BAAyB,6CACzB,EAAC","x_google_ignoreList":[0,1,2]}
+{"version":3,"file":"QuantitySelector.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/Less24/Less24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/More24/More24.svelte","../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'ui-less-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" width={size} height={size} id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n  <g clip-path=\"url(#a)\">\n    <path fill-rule=\"evenodd\" d=\"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Z\"/>\n  </g>\n  <defs>\n    <clipPath id=\"a\">\n      <rect width=\"24\" height=\"24\" fill=\"#fff\"/>\n    </clipPath>\n  </defs>\n</svg>\n","<svelte:options customElement={{ tag: 'ui-more-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" width={size} height={size} id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n  <g clip-path=\"url(#a)\">\n    <path fill-rule=\"evenodd\" d=\"M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6V5Z\"/>\n  </g>\n  <defs>\n    <clipPath id=\"a\">\n      <rect width=\"24\" height=\"24\" fill=\"#fff\"/>\n    </clipPath>\n  </defs>\n</svg>\n","<svelte:options\n  customElement={{\n    tag: 'm-quantityselector',\n  }}\n/>\n\n<script lang=\"ts\">\n  import Less24 from '@mozaic-ds/icons-svelte/svelte/Less24/Less24.svelte';\n  import More24 from '@mozaic-ds/icons-svelte/svelte/More24/More24.svelte';\n  interface Props {\n    id?: string | undefined;\n    quantity?: number;\n    min?: number;\n    max?: number;\n    small?: boolean;\n    decrementlabel?: string;\n    inputarialabel?: string;\n    incrementlabel?: string;\n    disabled?: boolean;\n    name?: string;\n    step?: number;\n    [key: string]: any;\n  }\n\n  let {\n    id = undefined,\n    quantity = $bindable(1),\n    min = 1,\n    max = 100,\n    small = false,\n    decrementlabel = 'Decrement',\n    inputarialabel = 'Quantity Selector',\n    incrementlabel = 'Increment',\n    disabled = false,\n    name = 'quantity-selector-input',\n    step = 1,\n    increment,\n    decrement,\n    inputqty,\n  }: Props = $props();\n\n  function handleValue(): void {\n    if (quantity > max) {\n      quantity = max;\n    }\n    if (quantity < min) {\n      quantity = min;\n    }\n    inputqty(quantity);\n  }\n\n  function handleDecrement(): void {\n    if (quantity - Number(step) > min) {\n      quantity = quantity - Number(step);\n    }\n    decrement(quantity);\n  }\n\n  function handleIncrement(): void {\n    if (quantity + Number(step) < max) {\n      quantity = quantity + Number(step);\n    }\n    increment(quantity);\n  }\n</script>\n\n<div class=\"mc-quantity-selector\" class:mc-quantity-selector--s={small}>\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value={quantity}\n    oninput={handleValue}\n    class=\"mc-quantity-selector__control\"\n    aria-label={inputarialabel}\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={quantity}\n    spellcheck=\"false\"\n    {disabled}\n  />\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n    tabindex=\"-1\"\n    onclick={handleIncrement}\n    disabled={quantity === max || disabled}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <More24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{decrementlabel}</span>\n  </button>\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--decrease\"\n    tabindex=\"-1\"\n    onclick={handleDecrement}\n    disabled={quantity === min || disabled}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <Less24 />\n    </span>\n    <span class=\"mc-quantity-selector__label\">{incrementlabel}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n"],"names":["id","style","className","fill","size","handleValue","_","quantity","max","min","inputqty","handleDecrement","__1","step","decrement","handleIncrement","__2","increment","small","decrementlabel","inputarialabel","incrementlabel","disabled","name","$.prop","$$props"],"mappings":"qlBAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,sCAGGA,GAAI,eAAUA,GAAI,WAAMJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,6rBCPzF,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,uCAGGA,GAAI,eAAUA,GAAI,WAAMJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,yVCgC3F,SAAAE,GAAoBC,EAAAC,EAAAC,EAAAC,EAAAC,EAAA,CACvBH,EAAQ,EAAGC,KACbD,EAAWC,EAAG,CAAA,EAEZD,EAAQ,EAAGE,KACbF,EAAWE,EAAG,CAAA,EAEhBC,EAAQ,EAACH,GAAQ,CACnB,CAES,SAAAI,GAAwBC,EAAAL,EAAAM,EAAAJ,EAAAK,EAAA,CAC3BP,IAAW,OAAOM,EAAI,CAAA,EAAIJ,EAAG,GAC/BF,EAAWA,EAAW,EAAA,OAAOM,EAAI,CAAA,CAAA,EAEnCC,EAAS,EAACP,GAAQ,CACpB,CAES,SAAAQ,GAAwBC,EAAAT,EAAAM,EAAAL,EAAAS,EAAA,CAC3BV,IAAW,OAAOM,EAAI,CAAA,EAAIL,EAAG,GAC/BD,EAAWA,EAAW,EAAA,OAAOM,EAAI,CAAA,CAAA,EAEnCI,EAAS,EAACV,GAAQ,CACpB;;;;i6FAtCE,IAAAP,aAAK,MAAS,EACdO,oBAAqB,CAAC,EACtBE,cAAM,CAAC,EACPD,cAAM,GAAG,EACTU,gBAAQ,EAAK,EACbC,yBAAiB,WAAW,EAC5BC,yBAAiB,mBAAmB,EACpCC,yBAAiB,WAAW,EAC5BC,mBAAW,EAAK,EAChBC,eAAO,yBAAyB,EAChCV,eAAO,CAAC,EACRI,EAASO,EAAAC,EAAA,YAAA,CAAA,EACTX,EAASU,EAAAC,EAAA,YAAA,CAAA,EACTf,EAAQc,EAAAC,EAAA,WAAA,CAAA,8CAkCCpB,GAAWE,EAAAC,EAAAC,EAAAC,CAAA,0BAcXK,oGAaAJ,qMAzBGS,GAAc,sBACXX,GAAG,sBACHD,GAAG,sBACHD,GAAQ,qCAMRP,GAAE,aAIPO,EAAQ,IAAKC,EAAG,GAAIc,EAAQ,MAKKH,GAAc,sBAI1CnB,GAAE,aAIPO,EAAQ,IAAKE,EAAG,GAAIa,EAAQ,MAKKD,GAAc,oCAvCIH,GAAK,SAKtDX,CAAQ,0CA9Cf,OAAS,qDACO,EAAC,2CAChB,EAAC,2CACD,IAAG,+CACD,GAAK,iEACI,YAAW,iEACX,oBAAmB,iEACnB,YAAW,qDACjB,GAAK,6CACT,0BAAyB,6CACzB,EAAC","x_google_ignoreList":[0,1]}

package/dist/components/quantityselector/QuantitySelector.svelte

@@ -1,7 +1,6 @@
 <svelte:options
   customElement={{
     tag: 'm-quantityselector',
-    shadow: 'none',
   }}
 />
 
@@ -133,8 +132,6 @@
   color: inherit;
   font-family: inherit;
   outline: none;
-  /* For Blink & WebKit rendering engines */
-  /* For Gecko rendering engine */
   padding: 0;
   font-size: inherit;
   font-size: 1rem;
@@ -144,13 +141,15 @@
   text-align: center;
   flex-grow: 1;
 }
+.mc-quantity-selector__control[type=number] {
+  /* For Blink & WebKit rendering engines */
+  /* For Gecko rendering engine */
+  appearance: textfield;
+}
 .mc-quantity-selector__control[type=number]::-webkit-inner-spin-button, .mc-quantity-selector__control[type=number]::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
-.mc-quantity-selector__control[type=number] {
-  appearance: textfield;
-}
 .mc-quantity-selector__control[type=search]::-webkit-search-decoration, .mc-quantity-selector__control[type=search]::-webkit-search-cancel-button {
   appearance: none;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/quantityselector/QuantitySelector.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAyEH,QAAA,MAAM,gBAAgB,mDAAsC,CAAC;AAC7D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"QuantitySelector.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/quantityselector/QuantitySelector.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAwEH,QAAA,MAAM,gBAAgB,mDAAsC,CAAC;AAC7D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/radio/Radio.js

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

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

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

package/dist/components/radio/Radio.svelte

@@ -1,6 +1,12 @@
-<svelte:options customElement={{ tag: 'm-radio' }} />
+<svelte:options
+  customElement={{
+    tag: 'm-radio',
+    extend: customElementForwardEvents,
+  }}
+/>
 
 <script lang="ts">
+  import { customElementForwardEvents } from '../../utils';
   let {
     id = '',
     name = '',
@@ -8,6 +14,7 @@
     disabled = false,
     isinvalid = false,
     label = '',
+    ...events
   } = $props();
 
   function getClasses(isInvalid: boolean): string {
@@ -28,6 +35,7 @@
     {name}
     {checked}
     {disabled}
+    {...events}
   />
   <label for={id} class="mc-radio__label">{label}</label>
 </div>
@@ -51,6 +59,7 @@
   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);

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

@@ -5,7 +5,7 @@ declare const Radio: import("svelte").Component<{
     disabled?: boolean;
     isinvalid?: boolean;
     label?: string;
-}, {}, "">;
+} & Record<string, any>, {}, "">;
 type Radio = ReturnType<typeof Radio>;
 export default Radio;
 //# sourceMappingURL=Radio.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.svelte.ts"],"names":[],"mappings":"AAkCA,QAAA,MAAM,KAAK;SA/BuC,MAAM;WAAS,MAAM;cAAY,OAAO;eAAa,OAAO;gBAAc,OAAO;YAAU,MAAM;UA+BlG,CAAC;AAClD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.svelte.ts"],"names":[],"mappings":"AAyCA,QAAA,MAAM,KAAK;SAnCyC,MAAM;WAAS,MAAM;cAAY,OAAO;eAAa,OAAO;gBAAc,OAAO;YAAU,MAAM;gCAmCpG,CAAC;AAClD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/radiogroup/RadioGroup.js

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

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

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