@mozaic-ds/web-components 1.0.0-beta.6 → 1.0.0-beta.7

package/dist/components/pincode/Pincode.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pincode.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/bindings/this.js","../../../node_modules/svelte/src/internal/client/dom/legacy/event-modifiers.js","../../../src/components/pincode/Pincode.svelte"],"sourcesContent":["import { STATE_SYMBOL } from '#client/constants';\nimport { effect, render_effect } from '../../../reactivity/effects.js';\nimport { untrack } from '../../../runtime.js';\nimport { queue_micro_task } from '../../task.js';\n\n/**\n * @param {any} bound_value\n * @param {Element} element_or_component\n * @returns {boolean}\n */\nfunction is_bound_this(bound_value, element_or_component) {\n\treturn (\n\t\tbound_value === element_or_component || bound_value?.[STATE_SYMBOL] === element_or_component\n\t);\n}\n\n/**\n * @param {any} element_or_component\n * @param {(value: unknown, ...parts: unknown[]) => void} update\n * @param {(...parts: unknown[]) => unknown} get_value\n * @param {() => unknown[]} [get_parts] Set if the this binding is used inside an each block,\n * \t\t\t\t\t\t\t\t\t\treturns all the parts of the each block context that are used in the expression\n * @returns {void}\n */\nexport function bind_this(element_or_component = {}, update, get_value, get_parts) {\n\teffect(() => {\n\t\t/** @type {unknown[]} */\n\t\tvar old_parts;\n\n\t\t/** @type {unknown[]} */\n\t\tvar parts;\n\n\t\trender_effect(() => {\n\t\t\told_parts = parts;\n\t\t\t// We only track changes to the parts, not the value itself to avoid unnecessary reruns.\n\t\t\tparts = get_parts?.() || [];\n\n\t\t\tuntrack(() => {\n\t\t\t\tif (element_or_component !== get_value(...parts)) {\n\t\t\t\t\tupdate(element_or_component, ...parts);\n\t\t\t\t\t// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at\n\t\t\t\t\t// the previous position if it isn't already taken over by a different effect.\n\t\t\t\t\tif (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {\n\t\t\t\t\t\tupdate(null, ...old_parts);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\t// We cannot use effects in the teardown phase, we we use a microtask instead.\n\t\t\tqueue_micro_task(() => {\n\t\t\t\tif (parts && is_bound_this(get_value(...parts), element_or_component)) {\n\t\t\t\t\tupdate(null, ...parts);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\t});\n\n\treturn element_or_component;\n}\n","import { noop } from '../../../shared/utils.js';\nimport { user_pre_effect } from '../../reactivity/effects.js';\nimport { on } from '../elements/events.js';\n\n/**\n * Substitute for the `trusted` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function trusted(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tif (event.isTrusted) {\n\t\t\t// @ts-ignore\n\t\t\tfn?.apply(this, args);\n\t\t}\n\t};\n}\n\n/**\n * Substitute for the `self` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function self(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\t// @ts-ignore\n\t\tif (event.target === this) {\n\t\t\t// @ts-ignore\n\t\t\tfn?.apply(this, args);\n\t\t}\n\t};\n}\n\n/**\n * Substitute for the `stopPropagation` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function stopPropagation(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tevent.stopPropagation();\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `once` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function once(fn) {\n\tvar ran = false;\n\n\treturn function (...args) {\n\t\tif (ran) return;\n\t\tran = true;\n\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `stopImmediatePropagation` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function stopImmediatePropagation(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tevent.stopImmediatePropagation();\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `preventDefault` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function preventDefault(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tevent.preventDefault();\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `passive` event modifier, implemented as an action\n * @deprecated\n * @param {HTMLElement} node\n * @param {[event: string, handler: () => EventListener]} options\n */\nexport function passive(node, [event, handler]) {\n\tuser_pre_effect(() => {\n\t\treturn on(node, event, handler() ?? noop, {\n\t\t\tpassive: true\n\t\t});\n\t});\n}\n\n/**\n * Substitute for the `nonpassive` event modifier, implemented as an action\n * @deprecated\n * @param {HTMLElement} node\n * @param {[event: string, handler: () => EventListener]} options\n */\nexport function nonpassive(node, [event, handler]) {\n\tuser_pre_effect(() => {\n\t\treturn on(node, event, handler() ?? noop, {\n\t\t\tpassive: false\n\t\t});\n\t});\n}\n","<svelte:options customElement={{ tag: 'm-pincode' }} />\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n\n  type PincodeLen = 4 | 5 | 6;\n  interface Props {\n    id: string;\n    length?: PincodeLen | string; // <- peut arriver en string via l'attribut\n    name?: string;\n    value?: string | number;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    [key: string]: any;\n  }\n\n  const dispatch = createEventDispatcher();\n\n  let {\n    id,\n    length = 6,\n    name,\n    value = '',\n    isInvalid = false,\n    disabled = false,\n    readonly = false,\n    ...attrsAndEvents\n  }: Props = $props();\n\n  // Normalisation: length numérique (ex. \"6\" -> 6)\n  const L = $derived(\n    typeof length === 'string' ? parseInt(length, 10) || 6 : length,\n  );\n\n  // État minimal\n  let otp = $state<string[]>(Array(L).fill(''));\n  let inputs = $state<HTMLInputElement[]>([]);\n\n  // Sync depuis props (value/length normalisé)\n  $effect(() => {\n    const incoming = String(value ?? '');\n    otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');\n  });\n\n  function focusInput(i: number) {\n    queueMicrotask(() => inputs?.[i]?.focus());\n  }\n\n  function emit() {\n    const joined = otp.join('');\n    dispatch('input', { value: joined });\n    dispatch('change', { value: joined });\n  }\n\n  function onInput(e: Event, index: number) {\n    const el = e.target as HTMLInputElement;\n    const digit = el.value.replace(/\\D/g, '').slice(0, 1);\n    otp[index] = digit;\n    emit();\n    if (digit && index + 1 < L) focusInput(index + 1);\n  }\n\n  function onKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'ArrowLeft' && index > 0) {\n      e.preventDefault();\n      focusInput(index - 1);\n    } else if (e.key === 'ArrowRight' && index < L - 1) {\n      e.preventDefault();\n      focusInput(index + 1);\n    } else if (e.key === 'Backspace' && otp[index] === '' && index > 0) {\n      otp[index - 1] = '';\n      emit();\n      focusInput(index - 1);\n    }\n  }\n\n  function onPaste(e: ClipboardEvent) {\n    e.preventDefault();\n    const pasted = (e.clipboardData?.getData('text') ?? '')\n      .replace(/\\D/g, '')\n      .slice(0, L);\n    otp = Array.from({ length: L }, (_, i) => pasted[i] ?? '');\n    emit();\n    focusInput(Math.min(pasted.length, L - 1));\n  }\n</script>\n\n<div\n  class=\"mc-pincode-input\"\n  on:paste|preventDefault={onPaste}\n  class:is-invalid={isInvalid}\n  {...attrsAndEvents}\n>\n  {#each Array(L) as _, i}\n    <input\n      id={`pincodeItem${i}`}\n      bind:this={inputs[i]}\n      class=\"mc-pincode-input__control\"\n      class:is-invalid={isInvalid}\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      pattern=\"\\d*\"\n      autocomplete=\"one-time-code\"\n      name={name ?? `pincode-${id}`}\n      {disabled}\n      {readonly}\n      value={otp[i]}\n      on:input={(e) => onInput(e, i)}\n      on:keydown={(e) => onKeyDown(e as KeyboardEvent, i)}\n    />\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pincode-input';\n</style>\n"],"names":["is_bound_this","bound_value","element_or_component","STATE_SYMBOL","bind_this","update","get_value","get_parts","effect","old_parts","parts","render_effect","untrack","queue_micro_task","preventDefault","fn","args","event","dispatch","createEventDispatcher","id","$.prop","$$props","length","name","value","isInvalid","disabled","readonly","attrsAndEvents","$.rest_props","L","$.derived","otp","$.get","inputs","$.state","$.proxy","$.user_effect","incoming","$.set","_","focusInput","i","emit","joined","onInput","index","digit","onKeyDown","onPaste","pasted","_a","$.attribute_effect","div","$0","$.index","$$anchor","$$value","$.set_attribute","input","$.set_value","$.event","e"],"mappings":"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","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Pincode.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/bindings/this.js","../../../node_modules/svelte/src/internal/client/dom/legacy/event-modifiers.js","../../../src/components/pincode/Pincode.svelte"],"sourcesContent":["import { STATE_SYMBOL } from '#client/constants';\nimport { effect, render_effect } from '../../../reactivity/effects.js';\nimport { untrack } from '../../../runtime.js';\nimport { queue_micro_task } from '../../task.js';\n\n/**\n * @param {any} bound_value\n * @param {Element} element_or_component\n * @returns {boolean}\n */\nfunction is_bound_this(bound_value, element_or_component) {\n\treturn (\n\t\tbound_value === element_or_component || bound_value?.[STATE_SYMBOL] === element_or_component\n\t);\n}\n\n/**\n * @param {any} element_or_component\n * @param {(value: unknown, ...parts: unknown[]) => void} update\n * @param {(...parts: unknown[]) => unknown} get_value\n * @param {() => unknown[]} [get_parts] Set if the this binding is used inside an each block,\n * \t\t\t\t\t\t\t\t\t\treturns all the parts of the each block context that are used in the expression\n * @returns {void}\n */\nexport function bind_this(element_or_component = {}, update, get_value, get_parts) {\n\teffect(() => {\n\t\t/** @type {unknown[]} */\n\t\tvar old_parts;\n\n\t\t/** @type {unknown[]} */\n\t\tvar parts;\n\n\t\trender_effect(() => {\n\t\t\told_parts = parts;\n\t\t\t// We only track changes to the parts, not the value itself to avoid unnecessary reruns.\n\t\t\tparts = get_parts?.() || [];\n\n\t\t\tuntrack(() => {\n\t\t\t\tif (element_or_component !== get_value(...parts)) {\n\t\t\t\t\tupdate(element_or_component, ...parts);\n\t\t\t\t\t// If this is an effect rerun (cause: each block context changes), then nullfiy the binding at\n\t\t\t\t\t// the previous position if it isn't already taken over by a different effect.\n\t\t\t\t\tif (old_parts && is_bound_this(get_value(...old_parts), element_or_component)) {\n\t\t\t\t\t\tupdate(null, ...old_parts);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\t// We cannot use effects in the teardown phase, we we use a microtask instead.\n\t\t\tqueue_micro_task(() => {\n\t\t\t\tif (parts && is_bound_this(get_value(...parts), element_or_component)) {\n\t\t\t\t\tupdate(null, ...parts);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\t});\n\n\treturn element_or_component;\n}\n","import { noop } from '../../../shared/utils.js';\nimport { user_pre_effect } from '../../reactivity/effects.js';\nimport { on } from '../elements/events.js';\n\n/**\n * Substitute for the `trusted` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function trusted(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tif (event.isTrusted) {\n\t\t\t// @ts-ignore\n\t\t\tfn?.apply(this, args);\n\t\t}\n\t};\n}\n\n/**\n * Substitute for the `self` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function self(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\t// @ts-ignore\n\t\tif (event.target === this) {\n\t\t\t// @ts-ignore\n\t\t\tfn?.apply(this, args);\n\t\t}\n\t};\n}\n\n/**\n * Substitute for the `stopPropagation` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function stopPropagation(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tevent.stopPropagation();\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `once` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function once(fn) {\n\tvar ran = false;\n\n\treturn function (...args) {\n\t\tif (ran) return;\n\t\tran = true;\n\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `stopImmediatePropagation` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function stopImmediatePropagation(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tevent.stopImmediatePropagation();\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `preventDefault` event modifier\n * @deprecated\n * @param {(event: Event, ...args: Array<unknown>) => void} fn\n * @returns {(event: Event, ...args: unknown[]) => void}\n */\nexport function preventDefault(fn) {\n\treturn function (...args) {\n\t\tvar event = /** @type {Event} */ (args[0]);\n\t\tevent.preventDefault();\n\t\t// @ts-ignore\n\t\treturn fn?.apply(this, args);\n\t};\n}\n\n/**\n * Substitute for the `passive` event modifier, implemented as an action\n * @deprecated\n * @param {HTMLElement} node\n * @param {[event: string, handler: () => EventListener]} options\n */\nexport function passive(node, [event, handler]) {\n\tuser_pre_effect(() => {\n\t\treturn on(node, event, handler() ?? noop, {\n\t\t\tpassive: true\n\t\t});\n\t});\n}\n\n/**\n * Substitute for the `nonpassive` event modifier, implemented as an action\n * @deprecated\n * @param {HTMLElement} node\n * @param {[event: string, handler: () => EventListener]} options\n */\nexport function nonpassive(node, [event, handler]) {\n\tuser_pre_effect(() => {\n\t\treturn on(node, event, handler() ?? noop, {\n\t\t\tpassive: false\n\t\t});\n\t});\n}\n","<svelte:options customElement={{ tag: 'm-pincode' }} />\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n\n  type PincodeLen = 4 | 5 | 6;\n  interface Props {\n    id: string;\n    length?: PincodeLen | string; // <- peut arriver en string via l'attribut\n    name?: string;\n    value?: string | number;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readonly?: boolean;\n    [key: string]: any;\n  }\n\n  const dispatch = createEventDispatcher();\n\n  let {\n    id,\n    length = 6,\n    name,\n    value = '',\n    isInvalid = false,\n    disabled = false,\n    readonly = false,\n    ...attrsAndEvents\n  }: Props = $props();\n\n  // Normalisation: length numérique (ex. \"6\" -> 6)\n  const L = $derived(\n    typeof length === 'string' ? parseInt(length, 10) || 6 : length,\n  );\n\n  // État minimal\n  let otp = $state<string[]>(Array(L).fill(''));\n  let inputs = $state<HTMLInputElement[]>([]);\n\n  // Sync depuis props (value/length normalisé)\n  $effect(() => {\n    const incoming = String(value ?? '');\n    otp = Array.from({ length: L }, (_, i) => incoming[i] ?? '');\n  });\n\n  function focusInput(i: number) {\n    queueMicrotask(() => inputs?.[i]?.focus());\n  }\n\n  function emit() {\n    const joined = otp.join('');\n    dispatch('input', { value: joined });\n    dispatch('change', { value: joined });\n  }\n\n  function onInput(e: Event, index: number) {\n    const el = e.target as HTMLInputElement;\n    const digit = el.value.replace(/\\D/g, '').slice(0, 1);\n    otp[index] = digit;\n    emit();\n    if (digit && index + 1 < L) focusInput(index + 1);\n  }\n\n  function onKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'ArrowLeft' && index > 0) {\n      e.preventDefault();\n      focusInput(index - 1);\n    } else if (e.key === 'ArrowRight' && index < L - 1) {\n      e.preventDefault();\n      focusInput(index + 1);\n    } else if (e.key === 'Backspace' && otp[index] === '' && index > 0) {\n      otp[index - 1] = '';\n      emit();\n      focusInput(index - 1);\n    }\n  }\n\n  function onPaste(e: ClipboardEvent) {\n    e.preventDefault();\n    const pasted = (e.clipboardData?.getData('text') ?? '')\n      .replace(/\\D/g, '')\n      .slice(0, L);\n    otp = Array.from({ length: L }, (_, i) => pasted[i] ?? '');\n    emit();\n    focusInput(Math.min(pasted.length, L - 1));\n  }\n</script>\n\n<div\n  class=\"mc-pincode-input\"\n  on:paste|preventDefault={onPaste}\n  class:is-invalid={isInvalid}\n  {...attrsAndEvents}\n>\n  {#each Array(L) as _, i}\n    <input\n      id={`pincodeItem${i}`}\n      bind:this={inputs[i]}\n      class=\"mc-pincode-input__control\"\n      class:is-invalid={isInvalid}\n      type=\"text\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      pattern=\"\\d*\"\n      autocomplete=\"one-time-code\"\n      name={name ?? `pincode-${id}`}\n      {disabled}\n      {readonly}\n      value={otp[i]}\n      on:input={(e) => onInput(e, i)}\n      on:keydown={(e) => onKeyDown(e as KeyboardEvent, i)}\n    />\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pincode-input';\n</style>\n"],"names":["is_bound_this","bound_value","element_or_component","STATE_SYMBOL","bind_this","update","get_value","get_parts","effect","old_parts","parts","render_effect","untrack","queue_micro_task","preventDefault","fn","args","event","dispatch","createEventDispatcher","id","$.prop","$$props","length","name","value","isInvalid","disabled","readonly","attrsAndEvents","$.rest_props","L","$.derived","otp","$.get","inputs","$.state","$.proxy","$.user_effect","incoming","$.set","_","i","focusInput","emit","joined","onInput","index","digit","onKeyDown","onPaste","pasted","_a","$.attribute_effect","div","$0","$.index","$$anchor","$$value","$.set_attribute","input","$.set_value","$.event","e"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/components/pincode/Pincode.svelte

@@ -116,9 +116,6 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-pincode-input {
   display: inline-flex;
   column-gap: 0.5rem;
@@ -130,45 +127,45 @@
   }
 }
 .mc-pincode-input__control {
-  font-size: 1.75rem;
+  font-size: var(--font-size-400, 1.75rem);
   transition: box-shadow 200ms ease;
-  background-color: #ffffff;
-  border: 1px solid #666666;
-  border-radius: 0.25rem;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--forms-radius-border, 0.25rem);
   transition: all ease 200ms;
-  color: #000000;
+  color: var(--forms-color-text-default, #000000);
   display: block;
   width: 3rem;
   box-sizing: border-box;
   height: 4rem;
   text-align: center;
-  line-height: 1.3;
+  line-height: var(--line-height-s, 1.3);
 }
 .mc-pincode-input__control::placeholder {
-  color: #666666;
+  color: var(--forms-color-placeholder, #666666);
 }
 .mc-pincode-input__control:focus-within {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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-pincode-input__control:hover:not(:focus-within) {
-  border-color: #4d4d4d;
-  box-shadow: 0 0 0 1px #4d4d4d;
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-pincode-input__control:disabled {
-  background-color: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
   border-color: transparent;
   box-shadow: none;
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
   pointer-events: none;
 }
 .mc-pincode-input__control.is-invalid {
-  border-color: #ea302d;
-  box-shadow: 0 0 0 1px #ea302d;
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-pincode-input__control.is-invalid:hover:not(:focus-within) {
-  border-color: #c61112;
-  box-shadow: 0 0 0 1px #c61112;
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);
 }</style>

package/dist/components/quantityselector/QuantitySelector.js

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

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

@@ -1 +1 @@
-{"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: '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\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1\"/></svg>","<svelte:options customElement={{ tag: '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\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><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-6z\"/></svg>","<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  import type { QuantitySelectorSize } from './quantitySelector.types';\n  interface Props {\n    id?: string | undefined;\n    quantity?: number;\n    min?: number;\n    max?: number;\n    size?: QuantitySelectorSize;\n    decrementlabel?: string;\n    inputarialabel?: string;\n    incrementlabel?: string;\n    disabled?: boolean;\n    isinvalid?: boolean;\n    required?: boolean;\n    name?: string;\n    step?: number;\n    increment?: (qty: number) => void;\n    decrement?: (qty: number) => void;\n    inputqty?: (qty: number) => void;\n    oninput?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    id = undefined,\n    quantity = $bindable(1),\n    min = 1,\n    max = 100,\n    size = 'm',\n    decrementlabel = 'Decrement',\n    inputarialabel = 'Quantity Selector',\n    incrementlabel = 'Increment',\n    disabled = false,\n    isinvalid = false,\n    required = false,\n    name = 'quantity-selector-input',\n    step = 1,\n    increment,\n    decrement,\n    inputqty,\n    oninput,\n    onblur,\n  }: Props = $props();\n\n  function handleValue(event: Event): void {\n    if (quantity > max) {\n      quantity = max;\n    }\n    if (quantity < min) {\n      quantity = min;\n    }\n    inputqty?.(quantity);\n    oninput?.(event);\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\n  function getClasses(\n    isInvalid: boolean,\n    size: QuantitySelectorSize,\n  ): string {\n    const classes = ['mc-quantity-selector'];\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n\n    if (size === 's') {\n      classes.push('mc-quantity-selector--s');\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class=\"{getClasses(isinvalid, size)}\">\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value={quantity}\n    oninput={handleValue}\n    {onblur}\n    class=\"mc-quantity-selector__control\"\n    aria-label={inputarialabel}\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={quantity}\n    aria-invalid={isinvalid}\n    spellcheck=\"false\"\n    {disabled}\n    {required}\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","event","quantity","max","min","inputqty","oninput","_a","_b","handleDecrement","_","step","decrement","handleIncrement","__1","increment","decrementlabel","inputarialabel","incrementlabel","disabled","isinvalid","required","name","$.prop","$$props","onblur","getClasses","isInvalid","classes"],"mappings":"ggBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,8VCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,uGC6CWE,GAAYC,EAAoBC,EAAAC,EAAAC,EAAAC,EAAAC,EAAA,SACnCJ,EAAQ,EAAGC,KACbD,EAAWC,EAAG,CAAA,EAEZD,EAAQ,EAAGE,KACbF,EAAWE,EAAG,CAAA,GAEhBG,EAAAF,EAAQ,IAAR,MAAAE,EAAWL,MACXM,EAAAF,EAAO,IAAP,MAAAE,EAAUP,EACZ,CAES,SAAAQ,GAAwBC,EAAAR,EAAAS,EAAAP,EAAAQ,EAAA,OAC3BV,IAAW,OAAOS,EAAI,CAAA,EAAIP,EAAG,GAC/BF,EAAWA,EAAW,EAAA,OAAOS,EAAI,CAAA,CAAA,GAEnCJ,EAAAK,EAAS,IAAT,MAAAL,EAAYL,IACd,CAES,SAAAW,GAAwBC,EAAAZ,EAAAS,EAAAR,EAAAY,EAAA,OAC3Bb,IAAW,OAAOS,EAAI,CAAA,EAAIR,EAAG,GAC/BD,EAAWA,EAAW,EAAA,OAAOS,EAAI,CAAA,CAAA,GAEnCJ,EAAAQ,EAAS,IAAT,MAAAR,EAAYL,IACd;;;;;;;qqFA3EF,kBAgCI,IAAAP,aAAK,MAAS,EACdO,oBAAqB,CAAC,EACtBE,cAAM,CAAC,EACPD,cAAM,GAAG,EACTJ,eAAO,GAAG,EACViB,yBAAiB,WAAW,EAC5BC,yBAAiB,mBAAmB,EACpCC,yBAAiB,WAAW,EAC5BC,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,eAAO,yBAAyB,EAChCX,eAAO,CAAC,EACRI,EAASQ,EAAAC,EAAA,YAAA,CAAA,EACTZ,EAASW,EAAAC,EAAA,YAAA,CAAA,EACTnB,EAAQkB,EAAAC,EAAA,WAAA,CAAA,EACRlB,EAAOiB,EAAAC,EAAA,UAAA,CAAA,EACPC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EA4BC,SAAAE,EACPC,EACA5B,EACQ,CACF,MAAA6B,GAAW,sBAAsB,EACnC,OAAAD,GACFC,EAAQ,KAAK,YAAY,EAGvB7B,IAAS,KACX6B,EAAQ,KAAK,yBAAyB,EAGjCA,EAAQ,KAAK,GAAG,CACzB,oCASW5B,GAAWE,EAAAC,EAAAC,EAAAC,EAAAC,CAAA,0BAiBXO,GAAeX,EAAAS,EAAAR,EAAAY,CAAA,0FAafN,GAAeP,EAAAS,EAAAP,EAAAQ,CAAA,4JA3BZK,GAAc,sBACXb,GAAG,sBACHD,GAAG,sBACHD,GAAQ,qBACTkB,GAAS,oDAORzB,GAAE,aAIPO,EAAQ,IAAKC,EAAG,GAAIgB,EAAQ,MAKKH,GAAc,sBAI1CrB,GAAE,aAIPO,EAAQ,IAAKE,EAAG,GAAIe,EAAQ,MAKKD,GAAc,QA1ChDQ,EAAWN,EAAS,EAAErB,EAAI,CAAA,CAAA,0EAKvBG,CAAQ,0CAnEf,OAAS,qDACO,EAAC,2CAChB,EAAC,2CACD,IAAG,6CACF,IAAG,iEACO,YAAW,iEACX,oBAAmB,iEACnB,YAAW,qDACjB,GAAK,uDACJ,GAAK,qDACN,GAAK,6CACT,0BAAyB,6CACzB,EAAC,mRAgDZ","x_google_ignoreList":[0,1]}
+{"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: '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\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1\"/></svg>","<svelte:options customElement={{ tag: '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\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><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-6z\"/></svg>","<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  import type { QuantitySelectorSize } from './quantitySelector.types';\n  interface Props {\n    id?: string | undefined;\n    quantity?: number;\n    min?: number;\n    max?: number;\n    size?: QuantitySelectorSize;\n    decrementlabel?: string;\n    inputarialabel?: string;\n    incrementlabel?: string;\n    disabled?: boolean;\n    isinvalid?: boolean;\n    required?: boolean;\n    name?: string;\n    step?: number;\n    increment?: (qty: number) => void;\n    decrement?: (qty: number) => void;\n    inputqty?: (qty: number) => void;\n    oninput?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    id = undefined,\n    quantity = $bindable(1),\n    min = 1,\n    max = 100,\n    size = 'm',\n    decrementlabel = 'Decrement',\n    inputarialabel = 'Quantity Selector',\n    incrementlabel = 'Increment',\n    disabled = false,\n    isinvalid = false,\n    required = false,\n    name = 'quantity-selector-input',\n    step = 1,\n    increment,\n    decrement,\n    inputqty,\n    oninput,\n    onblur,\n  }: Props = $props();\n\n  function handleValue(event: Event): void {\n    if (quantity > max) {\n      quantity = max;\n    }\n    if (quantity < min) {\n      quantity = min;\n    }\n    inputqty?.(quantity);\n    oninput?.(event);\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\n  function getClasses(\n    isInvalid: boolean,\n    size: QuantitySelectorSize,\n  ): string {\n    const classes = ['mc-quantity-selector'];\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n\n    if (size === 's') {\n      classes.push('mc-quantity-selector--s');\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class=\"{getClasses(isinvalid, size)}\">\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value={quantity}\n    oninput={handleValue}\n    {onblur}\n    class=\"mc-quantity-selector__control\"\n    aria-label={inputarialabel}\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={quantity}\n    aria-invalid={isinvalid}\n    spellcheck=\"false\"\n    {disabled}\n    {required}\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","event","quantity","max","min","inputqty","oninput","_a","_b","handleDecrement","_","step","decrement","handleIncrement","__1","increment","decrementlabel","inputarialabel","incrementlabel","disabled","isinvalid","required","name","$.prop","$$props","onblur","getClasses","isInvalid","classes"],"mappings":"ggBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,8VCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,iRAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,eAF3E,uGC6CWE,GAAYC,EAAYC,EAAAC,EAAAC,EAAAC,EAAAC,EAAQ,SACnCJ,EAAQ,EAAGC,KACbD,EAAWC,EAAG,CAAA,EAEZD,EAAQ,EAAGE,KACbF,EAAWE,EAAG,CAAA,GAEhBG,EAAAF,EAAQ,IAAR,MAAAE,EAAWL,MACXM,EAAAF,EAAO,IAAP,MAAAE,EAAUP,EACZ,CAES,SAAAQ,GAAeC,EAAAR,EAAAS,EAAAP,EAAAQ,EAAS,OAC3BV,EAAQ,EAAG,OAAOS,EAAI,CAAA,EAAIP,EAAG,GAC/BF,EAAWA,EAAQ,EAAG,OAAOS,EAAI,CAAA,CAAA,GAEnCJ,EAAAK,EAAS,IAAT,MAAAL,EAAYL,IACd,CAES,SAAAW,GAAeC,EAAAZ,EAAAS,EAAAR,EAAAY,EAAS,OAC3Bb,EAAQ,EAAG,OAAOS,EAAI,CAAA,EAAIR,EAAG,GAC/BD,EAAWA,EAAQ,EAAG,OAAOS,EAAI,CAAA,CAAA,GAEnCJ,EAAAQ,EAAS,IAAT,MAAAR,EAAYL,IACd;;;i3GA3EF,kBAgCI,IAAAP,aAAK,MAAS,EACdO,oBAAqB,CAAC,EACtBE,cAAM,CAAC,EACPD,cAAM,GAAG,EACTJ,eAAO,GAAG,EACViB,yBAAiB,WAAW,EAC5BC,yBAAiB,mBAAmB,EACpCC,yBAAiB,WAAW,EAC5BC,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,eAAO,yBAAyB,EAChCX,eAAO,CAAC,EACRI,EAASQ,EAAAC,EAAA,YAAA,CAAA,EACTZ,EAASW,EAAAC,EAAA,YAAA,CAAA,EACTnB,EAAQkB,EAAAC,EAAA,WAAA,CAAA,EACRlB,EAAOiB,EAAAC,EAAA,UAAA,CAAA,EACPC,EAAMF,EAAAC,EAAA,SAAA,CAAA,EA4BC,SAAAE,EACPC,EACA5B,EACQ,CACF,MAAA6B,GAAW,sBAAsB,EACnC,OAAAD,GACFC,EAAQ,KAAK,YAAY,EAGvB7B,IAAS,KACX6B,EAAQ,KAAK,yBAAyB,EAGjCA,EAAQ,KAAK,GAAG,CACzB,sCA3DO,OAAS,qDACO,EAAC,2CAChB,EAAC,2CACD,IAAG,6CACF,IAAG,iEACO,YAAW,iEACX,oBAAmB,iEACnB,YAAW,qDACjB,GAAK,uDACJ,GAAK,qDACN,GAAK,6CACT,0BAAyB,6CACzB,EAAC,kTAwDC5B,GAAWE,EAAAC,EAAAC,EAAAC,EAAAC,CAAA,0BAiBXO,GAAeX,EAAAS,EAAAR,EAAAY,CAAA,0FAafN,GAAeP,EAAAS,EAAAP,EAAAQ,CAAA,6JA3BZK,GAAc,sBACXb,GAAG,sBACHD,GAAG,sBACHD,GAAQ,qBACTkB,GAAS,oDAORzB,GAAE,aAIPO,EAAQ,IAAKC,EAAG,GAAIgB,EAAQ,MAKKH,GAAc,sBAI1CrB,GAAE,aAIPO,EAAQ,IAAKE,EAAG,GAAIe,EAAQ,OAKKD,GAAc,QA1ChDQ,EAAWN,EAAS,EAAErB,EAAI,CAAA,CAAA,0EAKvBG,CAAQ,aAPxB","x_google_ignoreList":[0,1]}

package/dist/components/quantityselector/QuantitySelector.svelte

@@ -141,19 +141,16 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-quantity-selector {
-  background-color: #ffffff;
-  border: 1px solid #666666;
-  border-radius: 0.25rem;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: var(--border-s, 1px) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--forms-radius-border, 0.25rem);
   transition: all ease 200ms;
-  color: #000000;
+  color: var(--forms-color-text-default, #000000);
   display: block;
   width: 100%;
   height: 3rem;
-  border-radius: 0.25rem;
+  border-radius: var(--radius-s, 0.25rem);
   box-sizing: border-box;
   display: flex;
   gap: 0.25rem;
@@ -166,29 +163,33 @@
   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] {
   /* 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] {
+  /* For Gecko rendering engine */
+  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 {
+  padding: 0;
+  font-size: inherit;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-m, 1.5);
+  font-weight: var(--font-weight-semi-bold, 600);
+  cursor: inherit;
+  text-align: center;
+  flex-grow: 1;
+}
 .mc-quantity-selector__control::placeholder {
-  color: #666666;
+  color: var(--forms-color-placeholder, #666666);
 }
 .mc-quantity-selector__button {
   background-color: transparent;
@@ -201,19 +202,19 @@
   padding: 0;
   height: 2.5rem;
   width: 2.5rem;
-  border-radius: 100%;
-  color: #242938;
+  border-radius: var(--radius-full, 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: #d9d9d9;
+  color: var(--quantity-selector-color-button-text-disabled, #d9d9d9);
   cursor: not-allowed;
 }
 .mc-quantity-selector__button:hover:not(:disabled) {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: var(--quantity-selector-color-button-background-hover, rgba(255, 255, 255, 0.1));
 }
 .mc-quantity-selector__button--decrease {
   order: -1;
@@ -235,7 +236,7 @@
 }
 .mc-quantity-selector::after {
   transition: box-shadow 200ms ease;
-  border-radius: 0.25rem;
+  border-radius: var(--radius-s, 0.25rem);
   content: "";
   position: absolute;
   inset: -0.125rem var(--inset-x, 3rem);
@@ -243,22 +244,22 @@
   display: block;
 }
 .mc-quantity-selector:hover:not(:focus-within) {
-  border-color: #4d4d4d;
-  box-shadow: 0 0 0 1px #4d4d4d;
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-quantity-selector:has(input:disabled) {
-  background-color: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
   border-color: transparent;
   box-shadow: none;
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
   pointer-events: none;
 }
 .mc-quantity-selector:has(input:disabled) .mc-quantity-selector__button:disabled {
-  color: #737373;
+  color: var(--forms-color-icon-disabled, #737373);
 }
 .mc-quantity-selector:has(input[readonly]) {
-  border-color: #cccccc;
+  border-color: var(--forms-color-border-read-only, #cccccc);
   pointer-events: none;
 }
 .mc-quantity-selector:has(input[readonly]) .mc-quantity-selector__control[readonly] {
@@ -266,7 +267,7 @@
   padding-left: 0.5rem;
 }
 .mc-quantity-selector:has(input:focus)::after {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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;
 }
@@ -283,12 +284,12 @@
   width: 1.25rem;
 }
 .mc-quantity-selector.is-invalid {
-  border-color: #ea302d;
-  box-shadow: 0 0 0 1px #ea302d;
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);
 }
 .mc-quantity-selector.is-invalid:hover:not(:focus-within) {
-  border-color: #c61112;
-  box-shadow: 0 0 0 1px #c61112;
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);
 }
 .mc-quantity-selector * {
   box-sizing: border-box;

package/dist/components/radio/Radio.js

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

package/dist/components/radio/Radio.svelte

@@ -43,9 +43,6 @@
 <style>/**
  * Do not edit directly, this file was auto-generated.
  */
-/**
- * Do not edit directly, this file was auto-generated.
- */
 .mc-radio {
   align-items: center;
   display: flex;
@@ -53,9 +50,9 @@
   padding: 0.375rem;
 }
 .mc-radio__label {
-  font-size: 1rem;
-  line-height: 1.3;
-  color: #000000;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-s, 1.3);
+  color: var(--forms-color-text-default, #000000);
   cursor: pointer;
 }
 .mc-radio__input {
@@ -64,8 +61,8 @@
   cursor: pointer;
   flex-shrink: 0;
   transition: box-shadow 200ms ease;
-  background-color: #ffffff;
-  border: 0.125rem solid #666666;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);
   border-radius: 100%;
   transition: all ease 200ms;
   height: 1.25rem;
@@ -73,7 +70,7 @@
   position: relative;
 }
 .mc-radio__input::before {
-  border-radius: 100%;
+  border-radius: var(--radius-full, 100%);
   content: "";
   display: block;
   height: 0.5rem;
@@ -84,39 +81,39 @@
   width: 0.5rem;
 }
 .mc-radio__input:hover {
-  border-color: #4d4d4d;
+  border-color: var(--forms-color-border-hover, #4d4d4d);
 }
 .mc-radio__input:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);
+  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: #117f03;
+  background-color: var(--forms-color-background-checked, #117f03);
 }
 .mc-radio__input:checked::before {
-  background-color: #ffffff;
+  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: #d9d9d9;
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
   cursor: not-allowed;
 }
 .mc-radio__input:disabled:checked::before {
-  background-color: #737373;
+  background-color: var(--forms-color-icon-disabled, #737373);
 }
 .mc-radio__input:disabled + .mc-radio__label {
-  color: #737373;
+  color: var(--forms-color-text-disabled, #737373);
   cursor: not-allowed;
 }
 .mc-radio__input:not(:disabled):checked:hover {
-  background-color: #006902;
+  background-color: var(--forms-color-background-checked-hover, #006902);
 }
 .mc-radio__input.is-invalid:not(:checked) {
-  border-color: #ea302d;
+  border-color: var(--forms-color-border-invalid, #ea302d);
 }
 .mc-radio__input.is-invalid:not(:checked):hover {
-  border-color: #c61112;
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
 }</style>

package/dist/components/radiogroup/RadioGroup.js

@@ -1,11 +1,8 @@
-import{n as J,c as K,p as L,a as M,b as o,f as D,s as S,d as g,t as y,h as E,i as N,j as l,r as a,e as q,g as B,m as r,o as O}from"../../custom-element.js";import{i as P}from"../../if.js";import{e as Q}from"../../each.js";import{s as f,r as T}from"../../attributes.js";import{b as U}from"../../input.js";import{c as V}from"../../custom-element-forward-events.js";var W=D('<legend class="mc-field__legend svelte-1gxunzo"> </legend>'),X=D('<div class="mc-radio mc-field__item svelte-1gxunzo"><input type="radio"/> <label class="mc-radio__label svelte-1gxunzo"> </label></div>'),Y=D('<div class="radio-group-container"><fieldset class="mc-field mc-field--group svelte-1gxunzo"><!> <div></div></fieldset></div>');const Z={hash:"svelte-1gxunzo",code:`/**
+import{n as K,c as L,p as M,a as N,b as i,f as j,s as S,d as u,t as z,h as E,i as O,j as t,r as n,e as q,g as B,m as a,o as P}from"../../custom-element.js";import{i as Q}from"../../if.js";import{e as T}from"../../each.js";import{s as _,r as U}from"../../attributes.js";import{b as V}from"../../input.js";import{c as W}from"../../custom-element-forward-events.js";var X=j('<legend class="mc-field__legend svelte-clvmul"> </legend>'),Y=j('<div class="mc-radio mc-field__item svelte-clvmul"><input type="radio"/> <label class="mc-radio__label svelte-clvmul"> </label></div>'),Z=j('<div class="radio-group-container"><fieldset class="mc-field mc-field--group svelte-clvmul"><!> <div></div></fieldset></div>');const $={hash:"svelte-clvmul",code:`/**
  * Do not edit directly, this file was auto-generated.
- */
-/**
- * Do not edit directly, this file was auto-generated.
- */.mc-radio.svelte-1gxunzo {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-1gxunzo {font-size:1rem;line-height:1.3;color:#000000;cursor:pointer;}.mc-radio__input.svelte-1gxunzo {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:#ffffff;border:0.125rem solid #666666;border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-1gxunzo::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-1gxunzo:hover {border-color:#4d4d4d;}.mc-radio__input.svelte-1gxunzo:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, #ffffff), 0 0 0 0.25rem var(--focus-color-outer, #000000);outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-radio__input.svelte-1gxunzo:checked {background-color:#117f03;}.mc-radio__input.svelte-1gxunzo:checked::before {background-color:#ffffff;}.mc-radio__input.svelte-1gxunzo:checked, .mc-radio__input.svelte-1gxunzo:disabled {border-color:transparent;}.mc-radio__input.svelte-1gxunzo:disabled {background-color:#d9d9d9;cursor:not-allowed;}.mc-radio__input.svelte-1gxunzo:disabled:checked::before {background-color:#737373;}.mc-radio__input.svelte-1gxunzo:disabled + .mc-radio__label:where(.svelte-1gxunzo) {color:#737373;cursor:not-allowed;}.mc-radio__input.svelte-1gxunzo:not(:disabled):checked:hover {background-color:#006902;}.mc-radio__input.is-invalid.svelte-1gxunzo:not(:checked) {border-color:#ea302d;}.mc-radio__input.is-invalid.svelte-1gxunzo:not(:checked):hover {border-color:#c61112;}
+ */.mc-radio.svelte-clvmul {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-clvmul {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-clvmul {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-m, 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-clvmul::before {border-radius:var(--radius-full, 100%);content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-clvmul:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-clvmul: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-clvmul:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-clvmul:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-clvmul:checked, .mc-radio__input.svelte-clvmul:disabled {border-color:transparent;}.mc-radio__input.svelte-clvmul:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-clvmul:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-clvmul:disabled + .mc-radio__label:where(.svelte-clvmul) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-clvmul:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-clvmul:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-clvmul:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 
-/* stylelint-disable string-no-newline */ .mc-field__legend.svelte-1gxunzo {font-size:0.875rem;line-height:1.3;font-weight:400;color:#000000;}.mc-field__legend.svelte-1gxunzo {padding-inline:0;}.mc-field__content.svelte-1gxunzo {margin-top:0.5rem;}.mc-field--group.svelte-1gxunzo {border-width:0;margin-inline:0;padding:0;}.mc-field--group.svelte-1gxunzo .mc-field__content:where(.svelte-1gxunzo) {display:flex;flex-direction:column;flex-shrink:0;gap:0.25rem;}.mc-field--group.svelte-1gxunzo .mc-field__content:where(.svelte-1gxunzo):where(.mc-field__content--inline:where(.svelte-1gxunzo)) {flex-flow:row wrap;gap:0.25rem 1rem;}
+/* stylelint-disable string-no-newline */ .mc-field__legend.svelte-clvmul {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__legend.svelte-clvmul {padding-inline:0;}.mc-field__content.svelte-clvmul {margin-top:0.5rem;}.mc-field--group.svelte-clvmul {border-width:0;margin-inline:0;padding:0;}.mc-field--group.svelte-clvmul .mc-field__content:where(.svelte-clvmul) {display:flex;flex-direction:column;flex-shrink:0;gap:0.25rem;}.mc-field--group.svelte-clvmul .mc-field__content:where(.svelte-clvmul):where(.mc-field__content--inline:where(.svelte-clvmul)) {flex-flow:row wrap;gap:0.25rem 1rem;}
 
-/* stylelint-enable string-no-newline */`};function $(j,t){L(t,!0),M(j,Z);const C=[];let _=o(t,"id",7),m=o(t,"selectedvalue",15),p=o(t,"options",7),s=o(t,"legend",7),b=o(t,"inline",7),h=o(t,"isinvalid",7,!1),x=o(t,"onchange",7),z=o(t,"onblur",7);var v=Y(),A=g(v),F=g(A);{var H=e=>{var n=W(),d=g(n,!0);a(n),y(()=>B(d,s())),E(e,n)};P(F,e=>{s()&&s().length&&e(H)})}var w=S(F,2);return Q(w,21,p,e=>e.id,(e,n)=>{var d=X(),i=g(d);T(i);let G;i.__change=function(...c){var u;(u=x())==null||u.apply(this,c)};var R,k=S(i,2),I=g(k,!0);a(k),a(d),y(c=>{G=q(i,1,"mc-radio__input svelte-1gxunzo",null,G,c),f(i,"id",r(n).id),f(i,"name",r(n).name),i.disabled=r(n).disabled,R!==(R=r(n).value)&&(i.value=(i.__value=r(n).value)??""),f(k,"for",r(n).id),B(I,r(n).label)},[()=>({"is-invalid":h()})]),O("blur",i,function(...c){var u;(u=z())==null||u.apply(this,c)}),U(C,[],i,()=>(r(n).value,m()),m),E(e,d)}),a(w),a(A),a(v),y(()=>{f(v,"id",_()),q(w,1,`mc-field__content ${b()?"mc-field__content--inline":""}`,"svelte-1gxunzo")}),E(j,v),N({get id(){return _()},set id(e){_(e),l()},get selectedvalue(){return m()},set selectedvalue(e){m(e),l()},get options(){return p()},set options(e){p(e),l()},get legend(){return s()},set legend(e){s(e),l()},get inline(){return b()},set inline(e){b(e),l()},get isinvalid(){return h()},set isinvalid(e=!1){h(e),l()},get onchange(){return x()},set onchange(e){x(e),l()},get onblur(){return z()},set onblur(e){z(e),l()}})}J(["change"]);customElements.define("m-radio-group",K($,{options:{attribute:"options",type:"Array"},id:{},selectedvalue:{},legend:{},inline:{},isinvalid:{},onchange:{},onblur:{}},[],[],!0,V));
+/* stylelint-enable string-no-newline */`};function ee(A,o){M(o,!0),N(A,$);const C=[];let g=i(o,"id",7),m=i(o,"selectedvalue",15),b=i(o,"options",7),d=i(o,"legend",7),h=i(o,"inline",7),p=i(o,"isinvalid",7,!1),k=i(o,"onchange",7),w=i(o,"onblur",7);var H={get id(){return g()},set id(e){g(e),t()},get selectedvalue(){return m()},set selectedvalue(e){m(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 h()},set inline(e){h(e),t()},get isinvalid(){return p()},set isinvalid(e=!1){p(e),t()},get onchange(){return k()},set onchange(e){k(e),t()},get onblur(){return w()},set onblur(e){w(e),t()}},f=Z(),D=u(f),F=u(D);{var I=e=>{var l=X(),s=u(l,!0);n(l),z(()=>B(s,d())),E(e,l)};Q(F,e=>{d()&&d().length&&e(I)})}var x=S(F,2);return T(x,21,b,e=>e.id,(e,l)=>{var s=Y(),r=u(s);U(r);let G;r.__change=function(...c){var v;(v=k())==null||v.apply(this,c)};var R,y=S(r,2),J=u(y,!0);n(y),n(s),z(c=>{G=q(r,1,"mc-radio__input svelte-clvmul",null,G,c),_(r,"id",a(l).id),_(r,"name",a(l).name),r.disabled=a(l).disabled,R!==(R=a(l).value)&&(r.value=(r.__value=a(l).value)??""),_(y,"for",a(l).id),B(J,a(l).label)},[()=>({"is-invalid":p()})]),P("blur",r,function(...c){var v;(v=w())==null||v.apply(this,c)}),V(C,[],r,()=>(a(l).value,m()),m),E(e,s)}),n(x),n(D),n(f),z(()=>{_(f,"id",g()),q(x,1,`mc-field__content ${h()?"mc-field__content--inline":""}`,"svelte-clvmul")}),E(A,f),O(H)}K(["change"]);customElements.define("m-radio-group",L(ee,{options:{attribute:"options",type:"Array"},id:{},selectedvalue:{},legend:{},inline:{},isinvalid:{},onchange:{},onblur:{}},[],[],!0,W));
 //# 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    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    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    id,\n    selectedvalue = $bindable(),\n    options,\n    legend,\n    inline,\n    isinvalid = false,\n    onchange,\n    onblur,\n  }: Props = $props();\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}\n            {onblur}\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":["id","$.prop","$$props","selectedvalue","options","legend","inline","isinvalid","onchange","onblur","$$render","consequent","$.each","div_1","opt","$.set_attribute","input","$.get","input_value","label","$.set_text","text_1","customElementForwardEvents"],"mappings":";;;;;;;;;0DAAA,+BA0BIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAaF,EAAAC,EAAA,gBAAA,EAAA,EACbE,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAML,EAAAC,EAAA,SAAA,CAAA,EACNK,oBAAY,EAAK,EACjBC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAMR,EAAAC,EAAA,SAAA,CAAA,wEAQDG,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAIA,EAAM,EAAC,QAAMK,EAAAC,CAAA,iBAOnBC,OAAAA,EAAAC,EAAA,GAAAT,EAAWU,GAAKA,EAAI,MAATA,IAAG,yLAMXC,EAAAC,EAAA,KAAAC,EAAAH,CAAG,EAAC,EAAE,EACJC,EAAAC,EAAA,OAAAC,EAAAH,CAAG,EAAC,IAAI,EAGJE,EAAA,SAAAC,EAAAH,CAAG,EAAC,SADPI,KAAAA,EAAAD,EAAAH,CAAG,EAAC,SAAJE,EAAA,OAAAA,EAAA,QAAAC,EAAAH,CAAG,EAAC,QAAK,IAKNC,EAAAI,EAAA,MAAAF,EAAAH,CAAG,EAAC,EAAE,EAA2BM,EAAAC,EAAAJ,EAAAH,CAAG,EAAC,KAAK,uBATlCP,EAAS,GAAA,kFAIpBU,EAAAH,CAAG,EAAC,MADCX,EAAa,GAAbA,2EATWG,EAAM,EAAG,4BAA8B,EAAE,GAAA,gBAAA,uTAd5D,GAAK,kHAIrB,6LA7BYgB"}
+{"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    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    id,\n    selectedvalue = $bindable(),\n    options,\n    legend,\n    inline,\n    isinvalid = false,\n    onchange,\n    onblur,\n  }: Props = $props();\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}\n            {onblur}\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":["id","$.prop","$$props","selectedvalue","options","legend","inline","isinvalid","onchange","onblur","$$render","consequent","$.each","div_1","opt","$.set_attribute","input","$.get","input_value","label","$.set_text","text_1","customElementForwardEvents"],"mappings":";;;;;;2DAAA,+BA0BIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAaF,EAAAC,EAAA,gBAAA,EAAA,EACbE,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAML,EAAAC,EAAA,SAAA,CAAA,EACNK,oBAAY,EAAK,EACjBC,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAMR,EAAAC,EAAA,SAAA,CAAA,kTAFM,GAAK,oLAUZG,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAIA,EAAM,EAAC,QAAMK,EAAAC,CAAA,iBAOnBC,OAAAA,EAAAC,EAAA,GAAAT,EAAWU,GAAKA,EAAI,MAATA,IAAG,wLAMXC,EAAAC,EAAA,KAAAC,EAAAH,CAAG,EAAC,EAAE,EACJC,EAAAC,EAAA,OAAAC,EAAAH,CAAG,EAAC,IAAI,EAGJE,EAAA,SAAAC,EAAAH,CAAG,EAAC,SADPI,KAAAA,EAAAD,EAAAH,CAAG,EAAC,SAAJE,EAAA,OAAAA,EAAA,QAAAC,EAAAH,CAAG,EAAC,QAAK,IAKNC,EAAAI,EAAA,MAAAF,EAAAH,CAAG,EAAC,EAAE,EAA2BM,EAAAC,EAAAJ,EAAAH,CAAG,EAAC,KAAK,uBATlCP,EAAS,GAAA,kFAIpBU,EAAAH,CAAG,EAAC,MADCX,EAAa,GAAbA,2EATWG,EAAM,EAAG,4BAA8B,EAAE,GAAA,eAAA,eAV5E,8LA7BYgB"}