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

package/dist/{components/overlay → overlay}/OverlayLoader.js

@@ -1,4 +1,4 @@
-import{c as m,p as h,a as b,b as r,t as y,e as v,f as g,g as x,h as u,i as l,r as f,k as w}from"../../custom-element.js";import{s as k}from"../../attributes.js";import{L as z}from"../loader/Loader.js";import"../../if.js";var _=y('<div><div role="dialog" tabindex="-1" class="svelte-ne5o65"><!></div></div>');const M={hash:"svelte-ne5o65",code:`/**
+import{c as m,p as h,a as b,b as r,t as y,e as v,f as g,g as x,h as u,i as l,r as f,k as w}from"../custom-element.js";import{s as k}from"../attributes.js";import{L as z}from"../loader/Loader.js";import"../if.js";var _=y('<div><div role="dialog" tabindex="-1" class="svelte-ne5o65"><!></div></div>');const M={hash:"svelte-ne5o65",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 

package/dist/overlay/OverlayLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLoader.js","sources":["../../src/components/overlay/OverlayLoader.svelte"],"sourcesContent":["<svelte:options customElement=\"m-overlay-loader\" />\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  interface Props {\n    isvisible?: boolean;\n    text: string;\n    dialoglabel: string;\n  }\n\n  let { isvisible = false, text, dialoglabel }: Props = $props();\n</script>\n\n<div class=\"mc-overlay-loader\" class:is-visible={isvisible}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    <Loader size=\"l\" theme=\"inverse\" {text} />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["isvisible","text","$.prop","$$props","dialoglabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oYAUQ,IAAAA,oBAAY,EAAK,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,kLAGKH,EAAS,EAAA,wBACNI,GAAW,0DAJ3C,GAAK"}

package/dist/overlay/OverlayLoader.svelte

@@ -0,0 +1,200 @@
+<svelte:options customElement="m-overlay-loader" />
+
+<script lang="ts">
+  import Loader from '../loader/Loader.svelte';
+  interface Props {
+    isvisible?: boolean;
+    text: string;
+    dialoglabel: string;
+  }
+
+  let { isvisible = false, text, dialoglabel }: Props = $props();
+</script>
+
+<div class="mc-overlay-loader" class:is-visible={isvisible}>
+  <div role="dialog" tabindex="-1" aria-labelledby={dialoglabel}>
+    <Loader size="l" theme="inverse" {text} />
+  </div>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-loader {
+  color: var(--loader-color-standard, #464e63);
+  align-items: center;
+  display: inline-flex;
+  flex-direction: column;
+}
+.mc-loader .mc-loader__spinner {
+  height: 2rem;
+  width: 2rem;
+}
+.mc-loader .mc-loader__path {
+  stroke-width: 4;
+}
+.mc-loader .mc-loader__path {
+  stroke: currentColor;
+}
+.mc-loader__spinner:not(:only-child) {
+  margin-bottom: 1rem;
+}
+.mc-loader__icon {
+  animation: rotate-loader 2s linear infinite;
+  transform-origin: center;
+}
+.mc-loader__path {
+  fill: none;
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+  animation: animate-dash-loader 2s ease-in-out infinite;
+}
+.mc-loader__text {
+  font-size: 1rem;
+  color: currentcolor;
+}
+.mc-loader:not(.mc-loader--text-visible) .mc-loader__text {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}
+.mc-loader--s .mc-loader__spinner {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.mc-loader--s .mc-loader__path {
+  stroke-width: 4;
+}
+.mc-loader--l .mc-loader__spinner {
+  height: 4rem;
+  width: 4rem;
+}
+.mc-loader--l .mc-loader__path {
+  stroke-width: 8;
+}
+.mc-loader--accent {
+  color: var(--loader-color-accent, #117f03);
+}
+.mc-loader--accent .mc-loader__path {
+  stroke: currentColor;
+}
+.mc-loader--inverse {
+  color: var(--loader-color-inverse, #ffffff);
+}
+.mc-loader--inverse .mc-loader__path {
+  stroke: currentColor;
+}
+
+@keyframes rotate-loader {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+@keyframes animate-dash-loader {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+/**
+ * Maps to store shadow properties for top shadows.
+ * @type Map
+ */
+/**
+ * Maps to store shadow properties for bottom shadows.
+ * @type Map
+ */
+/**
+ * Mixin to define the box-shadow properties for a given direction and size.
+ *
+ * @param {String} $direction - The direction of the shadow ('top' or 'bottom').
+ * @param {String} $size - The size of the shadow ('xs', 's', 'm', 'l').
+ */
+/**
+ * Mixin to generate shadow classes for the specified direction (top or bottom).
+ * This mixin iterates over the predefined sizes and creates a CSS class for each size.
+ *
+ * @param {String} $direction - The direction of the shadow ('top' or 'bottom').
+ */
+.shadow--top-xs {
+  box-shadow: 0px -3px 5px -2px;
+}
+
+.shadow--top-s {
+  box-shadow: 0px -5px 10px -2px;
+}
+
+.shadow--top-m {
+  box-shadow: 0px -10px 20px -4px;
+}
+
+.shadow--top-l {
+  box-shadow: 0px -20px 40px -8px;
+}
+
+.shadow--bottom-xs {
+  box-shadow: 0px 3px 5px -2px;
+}
+
+.shadow--bottom-s {
+  box-shadow: 0px 5px 10px -2px;
+}
+
+.shadow--bottom-m {
+  box-shadow: 0px 10px 20px -4px;
+}
+
+.shadow--bottom-l {
+  box-shadow: 0px 20px 40px -8px;
+}
+
+.mc-overlay {
+  filter: blur(1px);
+  inset: 0;
+  opacity: 0;
+  position: fixed;
+  pointer-events: none;
+  transition: opacity 0.4s ease, visibility 0ms 0.4s;
+  z-index: 1999999998;
+}
+.mc-overlay.is-visible {
+  opacity: 1;
+  pointer-events: all;
+  transition: opacity 0.4s ease, visibility 0ms;
+  visibility: visible;
+}
+
+.mc-overlay-loader {
+  inset: 0;
+  opacity: 0;
+  position: fixed;
+  pointer-events: none;
+  transition: opacity 0.4s ease, visibility 0ms 0.4s;
+  z-index: 1999999998;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.mc-overlay-loader.is-visible {
+  opacity: 1;
+  pointer-events: all;
+  transition: opacity 0.4s ease, visibility 0ms;
+  visibility: visible;
+}</style>

package/dist/overlay/OverlayLoader.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    isvisible?: boolean;
+    text: string;
+    dialoglabel: string;
+}
+declare const OverlayLoader: import("svelte").Component<Props, {}, "">;
+type OverlayLoader = ReturnType<typeof OverlayLoader>;
+export default OverlayLoader;
+//# sourceMappingURL=OverlayLoader.svelte.d.ts.map

package/dist/overlay/OverlayLoader.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayLoader.svelte.d.ts","sourceRoot":"","sources":["../../src/components/overlay/OverlayLoader.svelte.ts"],"names":[],"mappings":"AAKE,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB;AAoBH,QAAA,MAAM,aAAa,2CAAsC,CAAC;AAC1D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/{components/quantityselector → quantityselector}/QuantitySelector.js

@@ -1,4 +1,4 @@
-import{d as W,c as A,p as C,a as H,b as n,t as J,e as c,s as h,k as I,f as L,g as M,h as O,i as o,r as d,j as B}from"../../custom-element.js";import{r as P,s as i}from"../../attributes.js";import{b as R}from"../../input.js";function T(m,e,l,r,a){e()>l()&&e(l()),e()<r()&&e(r()),a()(e())}function U(m,e,l,r,a){e()-Number(l())>r()&&e(e()-Number(l())),a()(e())}function X(m,e,l,r,a){e()+Number(l())<r()&&e(e()+Number(l())),a()(e())}var Y=J('<div><input type="number" class="mc-quantity-selector__control svelte-rbl4od" spellcheck="false"> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-rbl4od" tabindex="-1"><span class="mc-quantity-selector__icon svelte-rbl4od"><ui-more-24></ui-more-24></span> <span class="mc-quantity-selector__label svelte-rbl4od"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-rbl4od" tabindex="-1"><span class="mc-quantity-selector__icon svelte-rbl4od"><ui-less-24></ui-less-24></span> <span class="mc-quantity-selector__label svelte-rbl4od"> </span></button></div>',2);const Z={hash:"svelte-rbl4od",code:`/**
+import{d as W,c as A,p as C,a as H,b as n,t as J,e as c,s as h,k as I,f as L,g as M,h as O,i as o,r as d,j as B}from"../custom-element.js";import{r as P,s as i}from"../attributes.js";import{b as R}from"../input.js";function T(m,e,l,r,a){e()>l()&&e(l()),e()<r()&&e(r()),a()(e())}function U(m,e,l,r,a){e()-Number(l())>r()&&e(e()-Number(l())),a()(e())}function X(m,e,l,r,a){e()+Number(l())<r()&&e(e()+Number(l())),a()(e())}var Y=J('<div><input type="number" class="mc-quantity-selector__control svelte-rbl4od" spellcheck="false"> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--increase svelte-rbl4od" tabindex="-1"><span class="mc-quantity-selector__icon svelte-rbl4od"><ui-more-24></ui-more-24></span> <span class="mc-quantity-selector__label svelte-rbl4od"> </span></button> <button type="button" class="mc-quantity-selector__button mc-quantity-selector__button--decrease svelte-rbl4od" tabindex="-1"><span class="mc-quantity-selector__icon svelte-rbl4od"><ui-less-24></ui-less-24></span> <span class="mc-quantity-selector__label svelte-rbl4od"> </span></button></div>',2);const Z={hash:"svelte-rbl4od",code:`/**
  * Do not edit directly, this file was auto-generated.
  */.mc-quantity-selector.svelte-rbl4od {background-color:var(--forms-color-background-default, #ffffff);border:1px solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;color:var(--forms-color-text-default, #000000);display:block;width:100%;height:3rem;border-radius:0.25rem;display:flex;gap:0.25rem;padding:0.1875rem;position:relative;}.mc-quantity-selector.svelte-rbl4od,
 .mc-quantity-selector.svelte-rbl4od :where(.svelte-rbl4od) {box-sizing:border-box;}.mc-quantity-selector__control.svelte-rbl4od {background-color:transparent;border-width:0;color:inherit;font-family:inherit;outline:none;

package/dist/quantityselector/QuantitySelector.js.map

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

package/dist/quantityselector/QuantitySelector.svelte

@@ -0,0 +1,260 @@
+<svelte:options
+  customElement={{
+    tag: 'm-qty-selector',
+    shadow: 'none',
+  }}
+/>
+
+<script lang="ts">
+  interface Props {
+    id?: string | undefined;
+    quantity?: number;
+    min?: number;
+    max?: number;
+    small?: boolean;
+    decrementlabel?: string;
+    inputarialabel?: string;
+    incrementlabel?: string;
+    disabled?: boolean;
+    name?: string;
+    step?: number;
+    [key: string]: any;
+  }
+
+  let {
+    id = undefined,
+    quantity = $bindable(1),
+    min = 1,
+    max = 100,
+    small = false,
+    decrementlabel = 'Decrement',
+    inputarialabel = 'Quantity Selector',
+    incrementlabel = 'Increment',
+    disabled = false,
+    name = 'quantity-selector-input',
+    step = 1,
+    increment,
+    decrement,
+    inputqty,
+  }: Props = $props();
+
+  function handleValue(): void {
+    if (quantity > max) {
+      quantity = max;
+    }
+    if (quantity < min) {
+      quantity = min;
+    }
+    inputqty(quantity);
+  }
+
+  function handleDecrement(): void {
+    if (quantity - Number(step) > min) {
+      quantity = quantity - Number(step);
+    }
+    decrement(quantity);
+  }
+
+  function handleIncrement(): void {
+    if (quantity + Number(step) < max) {
+      quantity = quantity + Number(step);
+    }
+    increment(quantity);
+  }
+</script>
+
+<div class="mc-quantity-selector" class:mc-quantity-selector--s={small}>
+  <input
+    type="number"
+    {id}
+    {name}
+    bind:value={quantity}
+    oninput={handleValue}
+    class="mc-quantity-selector__control"
+    aria-label={inputarialabel}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-valuenow={quantity}
+    spellcheck="false"
+    {disabled}
+  />
+  <button
+    type="button"
+    aria-controls={id}
+    class="mc-quantity-selector__button mc-quantity-selector__button--increase"
+    tabindex="-1"
+    onclick={handleIncrement}
+    disabled={quantity === max || disabled}
+  >
+    <span class="mc-quantity-selector__icon">
+      <ui-more-24></ui-more-24>
+    </span>
+    <span class="mc-quantity-selector__label">{decrementlabel}</span>
+  </button>
+  <button
+    type="button"
+    aria-controls={id}
+    class="mc-quantity-selector__button mc-quantity-selector__button--decrease"
+    tabindex="-1"
+    onclick={handleDecrement}
+    disabled={quantity === min || disabled}
+  >
+    <span class="mc-quantity-selector__icon">
+      <ui-less-24></ui-less-24>
+    </span>
+    <span class="mc-quantity-selector__label">{incrementlabel}</span>
+  </button>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-quantity-selector {
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: 1px solid var(--forms-color-border-default, #666666);
+  border-radius: 0.25rem;
+  transition: all ease 200ms;
+  color: var(--forms-color-text-default, #000000);
+  display: block;
+  width: 100%;
+  height: 3rem;
+  border-radius: 0.25rem;
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.1875rem;
+  position: relative;
+}
+.mc-quantity-selector,
+.mc-quantity-selector * {
+  box-sizing: border-box;
+}
+.mc-quantity-selector__control {
+  background-color: transparent;
+  border-width: 0;
+  color: inherit;
+  font-family: inherit;
+  outline: none;
+  /* For Blink & WebKit rendering engines */
+  /* For Gecko rendering engine */
+  padding: 0;
+  font-size: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+  font-weight: 600;
+  cursor: inherit;
+  text-align: center;
+  flex-grow: 1;
+}
+.mc-quantity-selector__control[type=number]::-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;
+}
+.mc-quantity-selector__control::placeholder {
+  color: var(--forms-color-placeholder, #666666);
+}
+.mc-quantity-selector__button {
+  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:disabled {
+  color: var(--quantity-selector-color-button-text-disabled, #d9d9d9);
+  cursor: not-allowed;
+}
+.mc-quantity-selector__button:hover:not(:disabled) {
+  background-color: var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1));
+}
+.mc-quantity-selector__button--decrease {
+  order: -1;
+}
+.mc-quantity-selector__icon {
+  height: 1.5rem;
+  width: 1.5rem;
+  fill: currentcolor;
+}
+.mc-quantity-selector__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-quantity-selector::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: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: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-quantity-selector:has(input:disabled) .mc-quantity-selector__button:disabled {
+  color: var(--forms-color-icon-disabled, #737373);
+}
+.mc-quantity-selector:has(input[readonly]) {
+  border-color: var(--forms-color-border-read-only, #cccccc);
+  pointer-events: none;
+}
+.mc-quantity-selector:has(input[readonly]) .mc-quantity-selector__control[readonly] {
+  text-align: left;
+  padding-left: 0.5rem;
+}
+.mc-quantity-selector:has(input: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 {
+  --inset-x: 2rem;
+  height: 2rem;
+}
+.mc-quantity-selector--s .mc-quantity-selector__button {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.mc-quantity-selector--s .mc-quantity-selector__icon {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.mc-quantity-selector.is-invalid {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 1px var(--forms-color-border-invalid, #ea302d);
+}
+.mc-quantity-selector.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);
+}</style>

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

@@ -0,0 +1,18 @@
+interface Props {
+    id?: string | undefined;
+    quantity?: number;
+    min?: number;
+    max?: number;
+    small?: boolean;
+    decrementlabel?: string;
+    inputarialabel?: string;
+    incrementlabel?: string;
+    disabled?: boolean;
+    name?: string;
+    step?: number;
+    [key: string]: any;
+}
+declare const QuantitySelector: import("svelte").Component<Props, {}, "quantity">;
+type QuantitySelector = ReturnType<typeof QuantitySelector>;
+export default QuantitySelector;
+//# sourceMappingURL=QuantitySelector.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuantitySelector.svelte.d.ts","sourceRoot":"","sources":["../../src/components/quantityselector/QuantitySelector.svelte.ts"],"names":[],"mappings":"AAGE,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;AAuEH,QAAA,MAAM,gBAAgB,mDAAsC,CAAC;AAC7D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/{components/radio → radio}/Radio.js

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

package/dist/radio/Radio.js.map

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

package/dist/radio/Radio.svelte

@@ -0,0 +1,109 @@
+<svelte:options customElement={{ tag: 'm-radio' }} />
+
+<script lang="ts">
+  let {
+    id = '',
+    name = '',
+    checked = false,
+    disabled = false,
+    isinvalid = false,
+    label = '',
+  } = $props();
+
+  function getClasses(isInvalid: boolean): string {
+    const classes = ['mc-radio__input'];
+    if (isInvalid) {
+      classes.push('is-invalid');
+    }
+    return classes.join(' ');
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div class="mc-radio">
+  <input
+    {id}
+    type="radio"
+    class={getClasses(isinvalid)}
+    {name}
+    {checked}
+    {disabled}
+  />
+  <label for={id} class="mc-radio__label">{label}</label>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-radio {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+.mc-radio__label {
+  font-size: 1rem;
+  line-height: 1.3;
+  color: var(--forms-color-text-default, #000000);
+  cursor: pointer;
+}
+.mc-radio__input {
+  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::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:hover {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-radio__input:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-radio__input:checked {
+  background-color: var(--forms-color-background-checked, #117f03);
+}
+.mc-radio__input:checked::before {
+  background-color: var(--forms-color-background-default, #ffffff);
+}
+.mc-radio__input:checked, .mc-radio__input:disabled {
+  border-color: transparent;
+}
+.mc-radio__input:disabled {
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
+  cursor: not-allowed;
+}
+.mc-radio__input:disabled:checked::before {
+  background-color: var(--forms-color-icon-disabled, #737373);
+}
+.mc-radio__input:disabled + .mc-radio__label {
+  color: var(--forms-color-text-disabled, #737373);
+  cursor: not-allowed;
+}
+.mc-radio__input:not(:disabled):checked:hover {
+  background-color: var(--forms-color-background-checked-hover, #006902);
+}
+.mc-radio__input.is-invalid:not(:checked) {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+}
+.mc-radio__input.is-invalid:not(:checked):hover {
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+}</style>

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

@@ -0,0 +1,11 @@
+declare const Radio: import("svelte").Component<{
+    id?: string;
+    name?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    isinvalid?: boolean;
+    label?: string;
+}, {}, "">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;
+//# sourceMappingURL=Radio.svelte.d.ts.map

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

@@ -0,0 +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"}