@synergy-design-system/components 3.4.1 → 3.5.0

package/dist/chunks/{chunk.SJKOVTL7.js → chunk.3AZ6O5UW.js}

@@ -1,9 +1,9 @@
 import {
   SynTooltip
-} from "./chunk.FIRUUZ72.js";
+} from "./chunk.KT6MHQM6.js";
 import {
   range_styles_default
-} from "./chunk.IM54DI3K.js";
+} from "./chunk.KEO5PHF2.js";
 import {
   arraysDiffer,
   getNormalizedValueFromClientX,
@@ -13,9 +13,8 @@ import {
   defaultValue
 } from "./chunk.3JDUKQRN.js";
 import {
-  form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.PTRCO527.js";
+} from "./chunk.34WYIU4C.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -32,10 +31,10 @@ import {
 } from "./chunk.YACUYJZN.js";
 import {
   component_styles_default
-} from "./chunk.FXJLG622.js";
+} from "./chunk.2NT3B5WJ.js";
 import {
   SynergyElement
-} from "./chunk.BYE5W5XF.js";
+} from "./chunk.V4GFOKBI.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -58,6 +57,7 @@ var SynRange = class extends SynergyElement {
     this.label = "";
     this.helpText = "";
     this.disabled = false;
+    this.readonly = false;
     this.min = 0;
     this.max = 100;
     this.step = 1;
@@ -237,7 +237,7 @@ var SynRange = class extends SynergyElement {
           trigger="focus"
         >
           <div
-            aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
+            aria-disabled=${ifDefined(this.disabled || this.readonly ? "true" : void 0)}
             aria-labelledby=${ariaLabeledBy}
             aria-label=${ariaLabel}
             aria-valuemax="${this.max}"
@@ -281,6 +281,7 @@ var SynRange = class extends SynergyElement {
       "form-control--has-prefix": hasPrefixSlot,
       "form-control--has-suffix": hasSuffixSlot,
       "form-control--is-disabled": this.disabled,
+      "form-control--is-readonly": this.readonly,
       "form-control--large": this.size === "large",
       "form-control--medium": this.size === "medium",
       "form-control--small": this.size === "small"
@@ -366,6 +367,11 @@ rtl_get = function() {
 };
 onClickTrack_fn = function(event, focusThumb = true) {
   if (this.disabled) return;
+  if (this.readonly) {
+    event.preventDefault();
+    this.focus();
+    return;
+  }
   const { clientX } = event;
   const thumbs = Array.from(this.thumbs);
   const pos = getNormalizedValueFromClientX(this.baseDiv, clientX, __privateGet(this, _SynRange_instances, rtl_get));
@@ -429,7 +435,7 @@ movementBoundariesForThumb_fn = function(thumb, value) {
   };
 };
 onClickThumb_fn = async function(event) {
-  if (this.disabled) return;
+  if (this.disabled || this.readonly) return;
   const thumb = event.target;
   __privateMethod(this, _SynRange_instances, updateTooltip_fn).call(this, thumb);
   if (thumb.dataset.pointerId) {
@@ -441,7 +447,7 @@ onClickThumb_fn = async function(event) {
   await thumb.parentElement.show();
 };
 onDragThumb_fn = function(event) {
-  if (this.disabled) return;
+  if (this.disabled || this.readonly) return;
   const thumb = event.target;
   const rangeId = +thumb.dataset.rangeId;
   if (!__privateGet(this, _rangeValues).has(rangeId)) return;
@@ -479,6 +485,7 @@ onDragThumb_fn = function(event) {
   }
 };
 onReleaseThumb_fn = async function(event) {
+  if (this.disabled || this.readonly) return;
   const thumb = event.target;
   if (!thumb.dataset.pointerId || event.pointerId !== +thumb.dataset.pointerId) return;
   thumb.classList.remove("grabbed");
@@ -519,6 +526,7 @@ updateActiveTrack_fn = function() {
   activeTrack.style.insetInlineEnd = `calc(100% - ${end}%)`;
 };
 onKeyPress_fn = function(event) {
+  if (this.readonly) return;
   const thumb = event.target;
   const rangeId = +thumb.dataset.rangeId;
   const currentValue = __privateGet(this, _rangeValues).get(rangeId);
@@ -645,7 +653,6 @@ updatePrefixSuffixPosition_fn = function(height) {
 SynRange.styles = [
   component_styles_default,
   form_control_styles_default,
-  form_control_custom_styles_default,
   range_styles_default
 ];
 SynRange.dependencies = {
@@ -663,6 +670,9 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true, type: Boolean })
 ], SynRange.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SynRange.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Number })
 ], SynRange.prototype, "min", 2);
@@ -715,4 +725,4 @@ SynRange = __decorateClass([
 export {
   SynRange
 };
-//# sourceMappingURL=chunk.SJKOVTL7.js.map
+//# sourceMappingURL=chunk.3AZ6O5UW.js.map

package/dist/chunks/chunk.3AZ6O5UW.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/range/range.component.ts"],
+  "sourcesContent": ["/* eslint-disable complexity */\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query, queryAll } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController, customErrorValidityState, validValidityState } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynTooltip from '../tooltip/tooltip.component.js';\nimport {\n  arraysDiffer,\n  getNormalizedValueFromClientX,\n  numericSort,\n} from './utility.js';\nimport styles from './range.styles.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Ranges allow the user to select values within a given range using one or two thumbs.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs\n * @status stable\n *\n * @dependency syn-tooltip\n *\n * @slot label - The range's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the range.\n * @slot suffix - Used to append a presentational icon or similar element to the range.\n * @slot help-text - Text that describes how to use the range.\n * Alternatively, you can use the `help-text` attribute.\n * @slot ticks - Used to display tick marks at specific intervals along the range.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity\n * and its constraints aren't satisfied.\n * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.\n * Use `Event.preventDefault()` to prevent movement.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the input track and ticks.\n * @csspart track-wrapper - The wrapper for the track.\n * @csspart track - The inactive track.\n * @csspart active-track - The active track.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart ticks - The container that wraps the tick marks.\n * @csspart thumb - The thumb(s) that the user can drag to change the range.\n *\n * @csspart tooltip__base - The base of the tooltip\n * @csspart tooltip__arrow - The arrow of the tooltip\n * @csspart tooltip__popup - The popup of the tooltip\n * @csspart tooltip__body - The body of the tooltip\n *\n * @cssproperty --thumb-size - The size of a thumb.\n * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.\n * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).\n * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).\n * @cssproperty --track-color-active - Color of the track representing the current value.\n * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.\n * @cssproperty --track-height - The height of the track.\n * @cssproperty --track-active-offset - The point of origin of the active track,\n * starting at the left side of the range.\n */\n@enableDefaultSettings('SynRange')\nexport default class SynRange extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [\n    componentStyles,\n    formControlStyles,\n    styles,\n  ];\n\n  static dependencies = {\n    'syn-tooltip': SynTooltip,\n  };\n\n  /** The name of the range, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The range's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /** The range's help text. If you need to display HTML, use the help-text slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Disables the range. */\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  /** Sets the range to a readonly state. */\n  @property({ reflect: true, type: Boolean }) readonly = false;\n\n  /** The minimum acceptable value of the range. */\n  @property({ type: Number }) min = 0;\n\n  /** The maximum acceptable value of the range. */\n  @property({ type: Number }) max = 100;\n\n  /** The interval at which the range will increase and decrease. */\n  @property({ type: Number }) step = 1;\n\n  /** The range's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The preferred placement of the range's tooltip. Use \"none\" to disable the tooltip */\n  @property({ attribute: 'tooltip-placement', type: String }) tooltipPlacement: 'top' | 'bottom' | 'none' = 'top';\n\n  /** The current values of the input (in ascending order) as a string of space separated values */\n  @property({ type: String })\n  set value(value: string | null) {\n    this.#value = value\n      ? value.split(' ').map(Number).sort(numericSort)\n      : [];\n  }\n\n  get value() {\n    return this.#value.slice().sort(numericSort).join(' ');\n  }\n\n  /**\n   * Set to true to restrict the movement of a thumb to its next and previous thumb.\n   * This only affects multi range components\n   */\n  @property({ attribute: 'restrict-movement', type: Boolean }) restrictMovement = false;\n\n  /** Gets or sets the current values of the range as an array of numbers */\n  set valueAsArray(value: readonly number[] | null) {\n    const oldValue = this.#value;\n    this.#value = Array.isArray(value) ? value.slice().sort(numericSort) : value || [];\n    if (arraysDiffer(oldValue, this.#value)) {\n      this.requestUpdate('value', oldValue.join(' '));\n    }\n  }\n\n  get valueAsArray() {\n    return [...this.#value].sort(numericSort);\n  }\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue() defaultValue = '0';\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element.\n   * This attribute allows you to place the form control outside of a form\n   * and associate it with the form that has this `id`.\n   * The form must be in the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /**\n   * A function used to format the tooltip's value.\n   * The value of the thumb is passed as the only argument.\n   * The function should return a string to display in the tooltip.\n   */\n  @property({ attribute: false }) tooltipFormatter: (value: number) => string;\n\n  @query('.input__wrapper') baseDiv: HTMLDivElement;\n\n  @query('.active-track') activeTrack: HTMLDivElement;\n\n  @query('.ticks') ticks: HTMLDivElement;\n\n  @queryAll('.thumb') thumbs: NodeListOf<HTMLDivElement>;\n\n  @query('.range__validation-input') validationInput: HTMLInputElement;\n\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label', 'prefix', 'suffix', 'ticks');\n\n  private readonly formControlController = new FormControlController(this, { assumeInteractionOn: ['syn-change'] });\n\n  private localize = new LocalizeController(this);\n\n  private visibilityObserver: IntersectionObserver;\n\n  #value: readonly number[] = [0];\n\n  #rangeValues = new Map<number, number>();\n\n  #hasFocus = false;\n\n  #validationError = '';\n\n  #validationTimeout: NodeJS.Timeout;\n\n  #lastChangeValue: number [] = [];\n\n  get #rtl() {\n    return this.localize.dir() === 'rtl';\n  }\n\n  constructor() {\n    super();\n    this.tooltipFormatter = this.localize.number.bind(this.localize);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this?.visibilityObserver?.disconnect();\n  }\n\n  firstUpdated() {\n    // #727: Check if the ticks are visible and update the prefix and suffix position when they are.\n    this.visibilityObserver = new IntersectionObserver((entries) => {\n      const entry = entries.at(0);\n      if (entry && entry.isIntersecting && entry.target.checkVisibility()) {\n        this.#updatePrefixSuffixPosition(entry.boundingClientRect.height);\n      }\n    }, {\n      // We bind the root to the parent element of the ticks to make sure we are only called\n      // when the ticks are visible, not when the ticks are scrolled out of the viewport.\n      root: this.ticks.parentElement,\n    });\n    this.visibilityObserver.observe(this.ticks);\n\n    this.formControlController.updateValidity();\n    // initialize the lastChangeValue with the initial value\n    this.#lastChangeValue = Array.from(this.#value);\n    /**\n     * Silence the screen reader for the tooltip.\n     * Otherwise it will read the new value on change multiple times instead of just one time.\n     * The aria-hidden needs to be set where the aria-live attribute is set, to silence it.\n     */\n    this.thumbs.forEach((thumb) => {\n      const tooltip = thumb.parentElement as SynTooltip;\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      tooltip.updateComplete.then(() => {\n        const tooltipBody = tooltip.shadowRoot!.querySelector('.tooltip__body');\n        tooltipBody?.setAttribute('aria-hidden', 'true');\n      });\n    });\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues) {\n    super.willUpdate(changedProperties);\n\n    // When the proposed min is bigger than the max value,\n    // we need to swap the values to make sure the min is always smaller than the max\n    // @example <syn-range min=\"50\" max=\"10\"> becomes <syn-range min=\"10\" max=\"50\">\n    if (this.min > this.max) {\n      [this.min, this.max] = [this.max, this.min];\n    }\n\n    if (this.step > this.max - this.min) {\n      this.step = this.max - this.min;\n    }\n\n    if (this.step <= 0) {\n      this.step = 1;\n    }\n\n    const adjustedValue = this.#value\n      .map(value => {\n        if (value <= this.min) return this.min;\n        if (value >= this.max) return this.max;\n        const nextValue = this.min + this.step * Math.round((value - this.min) / this.step);\n        if (nextValue > this.max) return this.max;\n        return nextValue;\n      });\n\n    if (arraysDiffer(this.#value, adjustedValue)) {\n      this.#value = adjustedValue;\n    }\n  }\n\n  protected override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    // eslint-disable-next-line no-restricted-syntax\n    for (const thumb of this.thumbs) {\n      const rangeId = +thumb.dataset.rangeId!;\n      // eslint-disable-next-line no-continue\n      if (!this.#rangeValues.has(rangeId)) continue;\n      this.#moveThumb(thumb, this.#rangeValues.get(rangeId)!);\n    }\n    this.#updateActiveTrack();\n  }\n\n  override focus(options?: FocusOptions) {\n    const firstThumb = this.thumbs.item(0);\n    if (firstThumb) {\n      firstThumb.focus(options);\n    } else {\n      super.focus(options);\n    }\n  }\n\n  /**\n   * Checks for validity but does not show a validation message.\n   * Returns `true` when valid and `false` when invalid.\n   */\n  public checkValidity() {\n    if (this.disabled) return true;\n    const isValid = !this.#validationError;\n\n    if (!isValid) {\n      this.formControlController.emitInvalidEvent();\n    }\n\n    return isValid;\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    if (this.disabled) return true;\n\n    const isValid = this.validity.valid;\n\n    this.formControlController.setValidity(isValid);\n    this.validationInput.hidden = true;\n    clearTimeout(this.#validationTimeout);\n\n    if (!isValid) {\n      // Show the browser's constraint validation message\n      this.validationInput.hidden = false;\n      this.validationInput.reportValidity();\n      this.#validationTimeout = setTimeout(() => {\n        this.validationInput.hidden = true;\n      }, 10000);\n    }\n\n    return isValid;\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  public setCustomValidity(message: string) {\n    this.#validationError = message;\n    this.validationInput.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  /** Gets the associated form, if one exists. */\n  public getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Gets the validity state object */\n  public get validity(): ValidityState {\n    if (this.#validationError) return customErrorValidityState;\n\n    return validValidityState;\n  }\n\n  /** Gets the validation message */\n  public get validationMessage() {\n    return this.#validationError;\n  }\n\n  #onClickTrack(event: PointerEvent, focusThumb = true) {\n    if (this.disabled) return;\n    if (this.readonly) {\n      event.preventDefault();\n      this.focus();\n      return;\n    }\n\n    const { clientX } = event;\n\n    const thumbs = Array.from(this.thumbs);\n    const pos = getNormalizedValueFromClientX(this.baseDiv, clientX, this.#rtl);\n    const unit = this.step / (this.max - this.min);\n    const nextValue = this.min + this.step * Math.round(pos / unit);\n\n    // Get the thumb that is placed closest to the click position\n    const thumb = thumbs.reduce((prev, curr) => {\n      const currValue = this.#rangeValues.get(+curr.dataset.rangeId!)!;\n      const prevValue = this.#rangeValues.get(+prev.dataset.rangeId!)!;\n\n      const currDiff = Math.abs(currValue - nextValue);\n      const prevDiff = Math.abs(prevValue - nextValue);\n\n      if (currDiff === prevDiff) {\n        // If the difference is the same, we use the thumb which has the correct order.\n        // left track click --> prev, right track click --> curr\n        return currValue < nextValue ? curr : prev;\n      }\n\n      return currDiff < prevDiff ? curr : prev;\n    });\n\n    const rangeId = +thumb.dataset.rangeId!;\n\n    if (!rangeId) return;\n\n    this.#rangeValues.set(rangeId, nextValue);\n    this.#moveThumb(thumb, nextValue);\n\n    const prevValue = this.#value;\n    this.#value = Array.from(this.#rangeValues.values());\n    this.#updateActiveTrack();\n\n    if (arraysDiffer(prevValue, this.#value)) {\n      this.#lastChangeValue = Array.from(this.#value);\n      this.emit('syn-input');\n      this.emit('syn-change');\n    }\n\n    // #595: Redispatch the original event to start dragging the thumb\n    // whenever the user clicked on the track.\n    // The check for focusThumb makes sure this does not happen when clicking on the track items\n    const newEvt = new PointerEvent('pointerdown', event);\n    if (focusThumb) {\n      if (thumb.dispatchEvent(newEvt)) {\n        this.#updateTooltip(thumb);\n      }\n    }\n  }\n\n  /**\n   * Special method for handling clicks on track items\n   * When clicking track items, we do not want the thumb to have focus\n   */\n  #onClickTrackItem(event: PointerEvent) {\n    this.#onClickTrack(event, false);\n  }\n\n  /**\n   * Get the boundaries of a given thumb\n   * @param thumb The thumb element that was moved\n   * @param value The current value of a thumb\n   * @returns An object containing information about the current boundaries\n   */\n  #movementBoundariesForThumb(thumb: HTMLDivElement, value: number) {\n    // If we are in restrict mode, we should not move the thumb\n    // if it is smaller than the previous thumb or larger than the next thumb\n    const values = this.valueAsArray!;\n    const thumbs = Array.from(this.thumbs);\n    const thumbIndex = thumbs.indexOf(thumb);\n\n    // Get the previous and next thumb and see what are our valid ranges\n    const prevValue = values[thumbIndex - 1] || this.min;\n    const nextValue = values[thumbIndex + 1] || this.max;\n\n    const isRestricted = value < prevValue || value > nextValue;\n    const finalValue = Math.max(prevValue, Math.min(nextValue, value));\n\n    return {\n      finalValue,\n      isRestricted,\n      nextValue,\n      prevValue,\n    };\n  }\n\n  async #onClickThumb(event: PointerEvent) {\n    if (this.disabled || this.readonly) return;\n\n    const thumb = event.target as HTMLDivElement;\n    this.#updateTooltip(thumb);\n\n    if (thumb.dataset.pointerId) {\n      thumb.releasePointerCapture(+thumb.dataset.pointerId);\n    }\n\n    thumb.dataset.pointerId = event.pointerId.toString();\n    thumb.setPointerCapture(event.pointerId);\n    thumb.classList.add('grabbed');\n\n    await (thumb.parentElement as SynTooltip).show();\n  }\n\n  #onDragThumb(event: PointerEvent) {\n    if (this.disabled || this.readonly) return;\n\n    const thumb = event.target as HTMLDivElement;\n    const rangeId = +thumb.dataset.rangeId!;\n    if (!this.#rangeValues.has(rangeId)) return;\n\n    const pointerId = thumb.dataset.pointerId ? +thumb.dataset.pointerId : null;\n    if (pointerId !== event.pointerId) return;\n\n    const pos = getNormalizedValueFromClientX(this.baseDiv, event.clientX, this.#rtl);\n    const unit = this.step / (this.max - this.min);\n    let value = this.min + this.step * Math.round(pos / unit);\n\n    const synMove = this.emit('syn-move', {\n      cancelable: true,\n      detail: {\n        element: thumb,\n        value,\n      },\n    });\n\n    if (synMove.defaultPrevented) {\n      return;\n    }\n\n    if (this.restrictMovement) {\n      const movementData = this.#movementBoundariesForThumb(thumb, value);\n      if (movementData.isRestricted) {\n        value = movementData.finalValue;\n        // Make sure the thumb has the highest z-index of all thumbs\n        thumb.style.zIndex = (3 + this.thumbs.length).toFixed(0);\n      } else {\n        thumb.style.zIndex = '3';\n      }\n    }\n\n    this.#rangeValues.set(rangeId, value);\n    this.#moveThumb(thumb, value);\n\n    const prevValue = this.#value;\n    this.#value = Array.from(this.#rangeValues.values());\n    this.#updateActiveTrack();\n\n    if (arraysDiffer(prevValue, this.#value)) {\n      this.emit('syn-input');\n    }\n  }\n\n  async #onReleaseThumb(event: PointerEvent) {\n    if (this.disabled || this.readonly) return;\n\n    const thumb = event.target as HTMLDivElement;\n    if (!thumb.dataset.pointerId || event.pointerId !== +thumb.dataset.pointerId) return;\n\n    thumb.classList.remove('grabbed');\n    thumb.releasePointerCapture(event.pointerId);\n    delete thumb.dataset.pointerId;\n\n    if (arraysDiffer(this.#lastChangeValue, this.#value)) {\n      this.#lastChangeValue = Array.from(this.#value);\n      this.emit('syn-change');\n    }\n\n    await (thumb.parentElement as SynTooltip).hide();\n  }\n\n  #moveThumb(thumb: HTMLDivElement, value: number) {\n    thumb.setAttribute('aria-valuenow', value.toString());\n    thumb.setAttribute('aria-valuetext', this.tooltipFormatter(value));\n    const pos = (value - this.min) / (this.max - this.min);\n    // eslint-disable-next-line no-param-reassign\n    thumb.style.insetInlineStart = `calc(${100 * pos}% - var(--half-thumb-size))`;\n    this.#updateTooltip(thumb);\n  }\n\n  #updateActiveTrack() {\n    const { activeTrack } = this;\n    if (!activeTrack) return;\n\n    // Special case: User set min and max to the same values.\n    // To not show the active track in this case.\n    if (this.min === this.max) {\n      activeTrack.style.insetInlineStart = '0%';\n      activeTrack.style.insetInlineEnd = '0%';\n      return;\n    }\n\n    // If there is only one thumb, the active track should start at the beginning\n    // and end at the thumb\n    if (this.#value.length === 1) {\n      const start = getComputedStyle(this).getPropertyValue('--track-active-offset') || '0%';\n      const end = (100 * (this.#value[0] - this.min)) / (this.max - this.min);\n\n      activeTrack.style.insetInlineStart = `min(${start}, ${end}%)`;\n      activeTrack.style.insetInlineEnd = `min(calc(100% - ${start}), calc(100% - ${end}%))`;\n\n      return;\n    }\n\n    // The render order of the thumbs is not guaranteed to be the same as the value order.\n    const sortedValues = this.#value.slice().sort(numericSort);\n\n    // Multi thumb: Place the active track between the first and last thumb\n    const start = (100 * (sortedValues[0] - this.min)) / (this.max - this.min);\n    const end = (100 * (sortedValues[sortedValues.length - 1] - this.min)) / (this.max - this.min);\n\n    activeTrack.style.insetInlineStart = `${start}%`;\n    activeTrack.style.insetInlineEnd = `calc(100% - ${end}%)`;\n  }\n\n  #onKeyPress(event: KeyboardEvent) {\n    if (this.readonly) return;\n\n    const thumb = event.target as HTMLDivElement;\n    const rangeId = +thumb.dataset.rangeId!;\n\n    const currentValue = this.#rangeValues.get(rangeId);\n    if (currentValue === undefined) return;\n\n    let value = currentValue;\n\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'Up':\n        value = Math.min(currentValue + this.step, this.max);\n        break;\n      case 'ArrowDown':\n      case 'Down':\n        value = Math.max(currentValue - this.step, this.min);\n        break;\n      case 'ArrowLeft':\n      case 'Left':\n        value = this.#rtl\n          ? Math.min(currentValue + this.step, this.max)\n          : Math.max(currentValue - this.step, this.min);\n        break;\n      case 'ArrowRight':\n      case 'Right':\n        value = this.#rtl\n          ? Math.max(currentValue - this.step, this.min)\n          : Math.min(currentValue + this.step, this.max);\n        break;\n      case 'PageUp':\n        value = Math.min(\n          currentValue + ((this.max - this.min) / 5),\n          this.max,\n        );\n        break;\n      case 'PageDown':\n        value = Math.max(\n          (currentValue - (this.max - this.min) / 5),\n          this.min,\n        );\n        break;\n      case 'Home':\n        value = this.min;\n        break;\n      case 'End':\n        value = this.max;\n        break;\n      default:\n        return;\n    }\n\n    if (value !== currentValue) {\n      // Make sure the user is able to intercept movement\n      const synMove = this.emit('syn-move', {\n        cancelable: true,\n        detail: {\n          element: thumb,\n          value,\n        },\n      });\n\n      if (synMove.defaultPrevented) {\n        return;\n      }\n\n      if (this.restrictMovement) {\n        const movementData = this.#movementBoundariesForThumb(thumb, value);\n        if (movementData.isRestricted) {\n          value = movementData.finalValue;\n        }\n      }\n\n      this.#moveThumb(thumb, value);\n\n      this.#rangeValues.set(rangeId, value);\n      this.#value = Array.from(this.#rangeValues.values());\n\n      this.#updateActiveTrack();\n      this.#updateTooltip(thumb);\n\n      this.#lastChangeValue = Array.from(this.#value);\n      this.emit('syn-input');\n      this.emit('syn-change');\n    }\n\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  #onBlur(event: FocusEvent) {\n    if (event.relatedTarget && this.shadowRoot?.contains(event.relatedTarget as Node)) return;\n    this.emit('syn-blur');\n    this.#hasFocus = false;\n  }\n\n  #updateTooltip(thumb: HTMLDivElement) {\n    if (this.tooltipPlacement === 'none') return;\n    const rangeId = +thumb.dataset.rangeId!;\n    if (!this.#rangeValues.has(rangeId)) return;\n    const value = this.#rangeValues.get(rangeId)!;\n    const tooltip = thumb.parentElement as SynTooltip;\n    tooltip.content = this.tooltipFormatter(value);\n  }\n\n  #onFocusThumb(event: FocusEvent) {\n    if (this.disabled) return;\n    if (!this.#hasFocus) {\n      this.#hasFocus = true;\n      this.emit('syn-focus');\n    }\n    const thumb = event.target as HTMLDivElement;\n    if (!thumb?.dataset?.rangeId) return;\n    this.#updateTooltip(thumb);\n  }\n\n  #handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  #updatePrefixSuffixPosition(height?: number) {\n    const hasTicksSlot = this.hasSlotController.test('ticks');\n    const hasPrefixSlot = this.hasSlotController.test('prefix');\n    const hasSuffixSlot = this.hasSlotController.test('suffix');\n\n    if (!hasTicksSlot) {\n      return;\n    }\n\n    let ticksHeight = height || this.shadowRoot?.querySelector('.ticks')?.clientHeight;\n    if (ticksHeight) {\n      // Add two pixels as the 1px margin on top and bottom are not included in the clientHeight\n      ticksHeight += 2;\n\n      ticksHeight /= 2;\n\n      if (hasPrefixSlot) {\n        const prefix = this.shadowRoot?.querySelector('.input__prefix') as HTMLElement;\n        prefix.style.transform = `translateY(-${ticksHeight}px)`;\n      }\n\n      if (hasSuffixSlot) {\n        const suffix = this.shadowRoot?.querySelector('.input__suffix') as HTMLElement;\n        suffix.style.transform = `translateY(-${ticksHeight}px)`;\n      }\n    }\n  }\n\n  /* eslint-disable @typescript-eslint/unbound-method */\n  private renderThumbs(hasLabel: boolean) {\n    // Aria special handling:\n    // 1. When there is only one label: Use the provided label as the aria-label for the thumb\n    // 2. When we have multiple label: Set the label for the first and last item to itself\n    const isMultiple = this.#value.length > 1;\n\n    this.#rangeValues.clear();\n    return this.#value.map((value, index) => {\n      const rangeId = index + 1;\n      this.#rangeValues.set(rangeId, value);\n\n      const id = `thumb-${rangeId}`;\n\n      let ariaLabel = '';\n      let ariaLabeledBy = '';\n\n      if (!isMultiple) {\n        ariaLabeledBy = hasLabel ? 'label aria-label-hidden' : '';\n      } else {\n        ariaLabeledBy = hasLabel ? `label aria-label-hidden ${id}` : `aria-label-hidden ${id}`;\n\n        if (index === 0) {\n          ariaLabel = `${this.localize.term('rangeMin')} (${this.tooltipFormatter(value)})`;\n        } else if (index === this.#value.length - 1) {\n          ariaLabel = `${this.localize.term('rangeMax')} (${this.tooltipFormatter(value)})`;\n        } else {\n          ariaLabel = this.tooltipFormatter(value);\n        }\n      }\n\n      return html`\n        <syn-tooltip\n          exportparts=\"base:tooltip__base, base__arrow:tooltip__arrow, base__popup:tooltip__popup, body:tooltip__body\"\n          .disabled=${this.tooltipPlacement === 'none' || this.disabled}\n          .placement=${this.tooltipPlacement as 'top' | 'bottom'}\n          trigger=\"focus\"\n        >\n          <div\n            aria-disabled=${ifDefined((this.disabled || this.readonly) ? 'true' : undefined)}\n            aria-labelledby=${ariaLabeledBy}\n            aria-label=${ariaLabel}\n            aria-valuemax=\"${this.max}\"\n            aria-valuemin=\"${this.min}\"\n            aria-valuenow=\"${value}\"\n            aria-valuetext=\"${this.tooltipFormatter(value)}\"\n            class=\"thumb\"\n            data-range-id=\"${rangeId}\"\n            id=${id}\n            part=\"thumb\"\n            role=\"slider\"\n            tabindex=\"${this.disabled ? -1 : 0}\"\n            @pointerdown=${this.#onClickThumb}\n            @pointermove=${this.#onDragThumb}\n            @pointerup=${this.#onReleaseThumb}\n            @pointercancel=${this.#onReleaseThumb}\n            @pointerleave=${this.#onReleaseThumb}\n            @keydown=${this.#onKeyPress}\n            @focus=${this.#onFocusThumb}\n          ></div>\n        </syn-tooltip>\n      `;\n    });\n  }\n  /* eslint-enable @typescript-eslint/unbound-method */\n\n  /* eslint-disable @typescript-eslint/unbound-method */\n  override render() {\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasPrefixSlot = this.hasSlotController.test('prefix');\n    const hasSuffixSlot = this.hasSlotController.test('suffix');\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--has-help-text': hasHelpText,\n          'form-control--has-label': hasLabel,\n          'form-control--has-prefix': hasPrefixSlot,\n          'form-control--has-suffix': hasSuffixSlot,\n          'form-control--is-disabled': this.disabled,\n          'form-control--is-readonly': this.readonly,\n          'form-control--large': this.size === 'large',\n          'form-control--medium': this.size === 'medium',\n          'form-control--small': this.size === 'small',\n        })}\n        @focusout=${this.#onBlur}\n      >\n        <label\n          id=\"label\"\n          part=\"form-control-label\"\n          class=\"form-control__label\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n          @click=${this.focus}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <label id=\"aria-label-hidden\" class=\"visually-hidden\">\n          (${this.#value.map(this.tooltipFormatter).join(' - ')})\n        </label>\n\n        <div class=\"base input__control\" part=\"base\">\n          <span part=\"prefix\" class=\"input__prefix\">\n            <slot name=\"prefix\"></slot>\n          </span>\n\n          <div class=\"input__wrapper\" part=\"input-wrapper\">\n            <input\n              class=\"range__validation-input visually-hidden\"\n              tabindex=\"-1\"\n              hidden\n              @invalid=${this.#handleInvalid}\n            />\n\n            <div\n              class=\"track__wrapper\"\n              @pointerdown=${this.#onClickTrack}\n              part=\"track-wrapper\"\n              role=\"presentation\"\n            >\n              <div class=\"track__click-helper\"></div>\n              <div class=\"track\" part=\"track\"></div>\n              <div class=\"active-track\" part=\"active-track\"></div>\n            </div>\n\n            ${this.renderThumbs(hasLabel)}\n\n            <div\n              class=\"ticks\"\n              part=\"ticks\"\n              @pointerdown=${this.#onClickTrackItem}\n              role=\"presentation\"\n            >\n              <slot name=\"ticks\"></slot>\n            </div>\n          </div>\n\n          <span part=\"suffix\" class=\"input__suffix\">\n            <slot name=\"suffix\"></slot>\n          </span>\n        </div>\n\n        <div\n          part=\"form-control-help-text\"\n          class=\"form-control__help-text\"\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n  /* eslint-enable @typescript-eslint/unbound-method */\n}\n"],
+  "mappings": "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",
+  "names": ["prevValue", "start", "end"]
+}

package/dist/chunks/{chunk.NK4LRKZH.js → chunk.3DCW4HDA.js}

@@ -1,6 +1,6 @@
 import {
   SynTooltip
-} from "./chunk.FIRUUZ72.js";
+} from "./chunk.KT6MHQM6.js";
 
 // src/components/tooltip/tooltip.ts
 var tooltip_default = SynTooltip;
@@ -9,4 +9,4 @@ SynTooltip.define("syn-tooltip");
 export {
   tooltip_default
 };
-//# sourceMappingURL=chunk.NK4LRKZH.js.map
+//# sourceMappingURL=chunk.3DCW4HDA.js.map

package/dist/chunks/{chunk.NQ4QB2MM.js → chunk.3XQ5VLXY.js}

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "./chunk.REYQATVI.js";
+} from "./chunk.BQ7JABKS.js";
 
 // src/components/textarea/textarea.ts
 var textarea_default = SynTextarea;
@@ -9,4 +9,4 @@ SynTextarea.define("syn-textarea");
 export {
   textarea_default
 };
-//# sourceMappingURL=chunk.NQ4QB2MM.js.map
+//# sourceMappingURL=chunk.3XQ5VLXY.js.map

package/dist/chunks/chunk.432DTUIX.js

@@ -0,0 +1,184 @@
+// src/components/radio/radio.styles.ts
+import { css } from "lit";
+var radio_styles_default = css`
+  /* stylelint-disable no-descending-specificity */
+  :host {
+    display: block;
+  }
+
+  :host(:focus-visible) {
+    outline: 0;
+  }
+
+  .radio {
+    align-items: flex-start;
+    color: var(--syn-input-label-color);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--syn-input-font-family);
+    font-size: var(--syn-input-font-size-medium);
+    font-weight: var(--syn-input-font-weight);
+    vertical-align: middle;
+  }
+
+  .radio--small {
+    --toggle-size: var(--syn-toggle-size-small);
+
+    font-size: var(--syn-input-font-size-small);
+  }
+
+  .radio--medium {
+    --toggle-size: var(--syn-toggle-size-medium);
+
+    font-size: var(--syn-input-font-size-medium);
+  }
+
+  .radio--large {
+    --toggle-size: var(--syn-toggle-size-large);
+
+    font-size: var(--syn-input-font-size-large);
+  }
+
+  .radio__checked-icon {
+    display: inline-flex;
+    height: var(--toggle-size);
+
+    /**
+     * #920: The new icons are instances in figma.
+     * The width of the system icon is 12px x 12px, so there is no inner padding.
+     * To accommodate for this, we need to set the width and height of the icon to 50% to get the same result as before.
+     */
+    scale: 0.5;
+    width: var(--toggle-size);
+
+  }
+
+  .radio__control {
+    align-items: center;
+    background-color: var(--syn-input-background-color);
+    border: solid var(--syn-input-border-width) var(--syn-input-border-color);
+    border-radius: 50%;
+    color: transparent;
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: var(--toggle-size);
+    justify-content: center;
+    position: relative;
+    transition:
+      var(--syn-transition-fast) border-color,
+      var(--syn-transition-fast) background-color,
+      var(--syn-transition-fast) color,
+      var(--syn-transition-fast) box-shadow;
+    width: var(--toggle-size);
+  }
+
+  .radio__input {
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  /* Hover */
+  .radio:not(.radio--checked):not(.radio--disabled):not(.radio--readonly):hover .radio__control {
+    border-color: var(--syn-input-border-color-hover);
+  }
+
+  /* Checked */
+  .radio--checked .radio__control {
+    background-color: var(--syn-interactive-emphasis-color);
+    border-color: var(--syn-interactive-emphasis-color);
+    color: var(--syn-color-neutral-0);
+  }
+
+  /* Checked + hover */
+  .radio.radio--checked:not(.radio--disabled):not(.radio--readonly):hover .radio__control {
+    background-color: var(--syn-interactive-emphasis-color-hover);
+    border-color: var(--syn-interactive-emphasis-color-hover);
+  }
+
+  /* Checked + active */
+  .radio.radio--checked:not(.radio--disabled):not(.radio--readonly):active .radio__control {
+    background-color: var(--syn-interactive-emphasis-color-active);
+    border-color: var(--syn-interactive-emphasis-color-active);
+  }
+
+  /* Not-Checked + active */
+  .radio:not(.radio--checked):not(.radio--disabled):not(.radio--readonly):active .radio__control {
+    border-color: var(--syn-input-border-color-active);
+  }
+
+  /* Checked + focus */
+  :host(:focus-visible) .radio__control {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-width);
+  }
+
+  .radio--disabled {
+    cursor: not-allowed;
+
+    /** #429: Use token for opacity */
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
+  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
+  .radio:not(.radio--checked) svg circle {
+    opacity: 0;
+  }
+
+  /* Fix#456: Multi line radio fixes */
+  .radio__label {
+    align-self: center;
+    color: var(--syn-input-label-color);
+    display: inline-block;
+    line-height: var(--toggle-size);
+    margin-inline-start: var(--syn-spacing-x-small);
+    margin-top: -1px;
+    user-select: none;
+  }
+
+  .radio--small .radio__label {
+    font: var(--syn-body-small-regular);
+    margin-inline-start: var(--syn-spacing-x-small);
+  }
+
+  .radio--medium .radio__label {
+    font: var(--syn-body-medium-regular);
+  }
+
+  .radio--large .radio__label {
+    font: var(--syn-body-large-regular);
+    margin-inline-start: var(--syn-spacing-x-small);
+  }
+
+  /* /Fix#456 */
+
+  /**
+   * #1174: Readonly state
+   */
+  .radio.radio--readonly {
+    cursor: default;
+  }
+
+  .radio.radio--readonly .radio__label {
+    user-select: auto;
+  }
+
+  .radio.radio--readonly .radio__control {
+    background: var(--syn-input-readonly-background-color);
+    border-color: var(--syn-input-readonly-background-color);
+    color: var(--syn-readonly-indicator-color);
+    cursor: default;
+  }
+
+  :host(:focus) .radio--readonly .radio__control {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-width);
+  }
+`;
+
+export {
+  radio_styles_default
+};
+//# sourceMappingURL=chunk.432DTUIX.js.map

package/dist/chunks/chunk.432DTUIX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio/radio.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /* stylelint-disable no-descending-specificity */\n  :host {\n    display: block;\n  }\n\n  :host(:focus-visible) {\n    outline: 0;\n  }\n\n  .radio {\n    align-items: flex-start;\n    color: var(--syn-input-label-color);\n    cursor: pointer;\n    display: inline-flex;\n    font-family: var(--syn-input-font-family);\n    font-size: var(--syn-input-font-size-medium);\n    font-weight: var(--syn-input-font-weight);\n    vertical-align: middle;\n  }\n\n  .radio--small {\n    --toggle-size: var(--syn-toggle-size-small);\n\n    font-size: var(--syn-input-font-size-small);\n  }\n\n  .radio--medium {\n    --toggle-size: var(--syn-toggle-size-medium);\n\n    font-size: var(--syn-input-font-size-medium);\n  }\n\n  .radio--large {\n    --toggle-size: var(--syn-toggle-size-large);\n\n    font-size: var(--syn-input-font-size-large);\n  }\n\n  .radio__checked-icon {\n    display: inline-flex;\n    height: var(--toggle-size);\n\n    /**\n     * #920: The new icons are instances in figma.\n     * The width of the system icon is 12px x 12px, so there is no inner padding.\n     * To accommodate for this, we need to set the width and height of the icon to 50% to get the same result as before.\n     */\n    scale: 0.5;\n    width: var(--toggle-size);\n\n  }\n\n  .radio__control {\n    align-items: center;\n    background-color: var(--syn-input-background-color);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n    border-radius: 50%;\n    color: transparent;\n    display: inline-flex;\n    flex: 0 0 auto;\n    height: var(--toggle-size);\n    justify-content: center;\n    position: relative;\n    transition:\n      var(--syn-transition-fast) border-color,\n      var(--syn-transition-fast) background-color,\n      var(--syn-transition-fast) color,\n      var(--syn-transition-fast) box-shadow;\n    width: var(--toggle-size);\n  }\n\n  .radio__input {\n    margin: 0;\n    opacity: 0;\n    padding: 0;\n    pointer-events: none;\n    position: absolute;\n  }\n\n  /* Hover */\n  .radio:not(.radio--checked):not(.radio--disabled):not(.radio--readonly):hover .radio__control {\n    border-color: var(--syn-input-border-color-hover);\n  }\n\n  /* Checked */\n  .radio--checked .radio__control {\n    background-color: var(--syn-interactive-emphasis-color);\n    border-color: var(--syn-interactive-emphasis-color);\n    color: var(--syn-color-neutral-0);\n  }\n\n  /* Checked + hover */\n  .radio.radio--checked:not(.radio--disabled):not(.radio--readonly):hover .radio__control {\n    background-color: var(--syn-interactive-emphasis-color-hover);\n    border-color: var(--syn-interactive-emphasis-color-hover);\n  }\n\n  /* Checked + active */\n  .radio.radio--checked:not(.radio--disabled):not(.radio--readonly):active .radio__control {\n    background-color: var(--syn-interactive-emphasis-color-active);\n    border-color: var(--syn-interactive-emphasis-color-active);\n  }\n\n  /* Not-Checked + active */\n  .radio:not(.radio--checked):not(.radio--disabled):not(.radio--readonly):active .radio__control {\n    border-color: var(--syn-input-border-color-active);\n  }\n\n  /* Checked + focus */\n  :host(:focus-visible) .radio__control {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-width);\n  }\n\n  .radio--disabled {\n    cursor: not-allowed;\n\n    /** #429: Use token for opacity */\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */\n  .radio:not(.radio--checked) svg circle {\n    opacity: 0;\n  }\n\n  /* Fix#456: Multi line radio fixes */\n  .radio__label {\n    align-self: center;\n    color: var(--syn-input-label-color);\n    display: inline-block;\n    line-height: var(--toggle-size);\n    margin-inline-start: var(--syn-spacing-x-small);\n    margin-top: -1px;\n    user-select: none;\n  }\n\n  .radio--small .radio__label {\n    font: var(--syn-body-small-regular);\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .radio--medium .radio__label {\n    font: var(--syn-body-medium-regular);\n  }\n\n  .radio--large .radio__label {\n    font: var(--syn-body-large-regular);\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  /* /Fix#456 */\n\n  /**\n   * #1174: Readonly state\n   */\n  .radio.radio--readonly {\n    cursor: default;\n  }\n\n  .radio.radio--readonly .radio__label {\n    user-select: auto;\n  }\n\n  .radio.radio--readonly .radio__control {\n    background: var(--syn-input-readonly-background-color);\n    border-color: var(--syn-input-readonly-background-color);\n    color: var(--syn-readonly-indicator-color);\n    cursor: default;\n  }\n\n  :host(:focus) .radio--readonly .radio__control {\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-width);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,uBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.6USNG4EL.js → chunk.45MATNO2.js}

@@ -1,6 +1,10 @@
-// src/components/radio-group/radio-group.custom.styles.ts
+// src/components/radio-group/radio-group.styles.ts
 import { css } from "lit";
-var radio_group_custom_styles_default = css`
+var radio_group_styles_default = css`
+  :host {
+    display: block;
+  }
+
   :host([data-user-invalid]) {
     --syn-input-border-color: var(--syn-input-border-color-focus-error);
     --syn-input-border-color-hover: var(--syn-input-border-color-focus-error);
@@ -13,8 +17,33 @@ var radio_group_custom_styles_default = css`
     --syn-interactive-emphasis-color-active: var(--syn-input-border-color-focus-error);
   }
 
-  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
-    margin-top: var(--syn-spacing-x-small);
+  .form-control {
+    border: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+  }
+
+  .form-control__label {
+    padding: 0;
+  }
+
+  .radio-group--required .radio-group__label::after {
+    content: var(--syn-input-required-content);
+    margin-inline-start: var(--syn-input-required-content-offset);
+  }
+
+  .visually-hidden {
+    border: 0;
+    /* stylelint-disable-next-line property-no-deprecated */
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
   }
 
   .form-control-input {
@@ -22,9 +51,13 @@ var radio_group_custom_styles_default = css`
     flex-direction: column;
     gap: var(--syn-spacing-x-small);
   }
+
+  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
+    margin-top: var(--syn-spacing-x-small);
+  }
 `;
 
 export {
-  radio_group_custom_styles_default
+  radio_group_styles_default
 };
-//# sourceMappingURL=chunk.6USNG4EL.js.map
+//# sourceMappingURL=chunk.45MATNO2.js.map

package/dist/chunks/chunk.45MATNO2.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio-group/radio-group.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n  }\n\n  :host([data-user-invalid]) {\n    --syn-input-border-color: var(--syn-input-border-color-focus-error);\n    --syn-input-border-color-hover: var(--syn-input-border-color-focus-error);\n    --syn-color-primary-600: var(--syn-input-border-color-focus-error);\n    --syn-color-primary-900: var(--syn-color-error-900);\n    --syn-color-primary-950: var(--syn-color-error-950);\n    --syn-color-neutral-1000: var(--syn-input-border-color-focus-error);\n    --syn-interactive-emphasis-color: var(--syn-input-border-color-focus-error);\n    --syn-interactive-emphasis-color-hover: var(--syn-input-border-color-focus-error);\n    --syn-interactive-emphasis-color-active: var(--syn-input-border-color-focus-error);\n  }\n\n  .form-control {\n    border: none;\n    margin: 0;\n    padding: 0;\n    position: relative;\n  }\n\n  .form-control__label {\n    padding: 0;\n  }\n\n  .radio-group--required .radio-group__label::after {\n    content: var(--syn-input-required-content);\n    margin-inline-start: var(--syn-input-required-content-offset);\n  }\n\n  .visually-hidden {\n    border: 0;\n    /* stylelint-disable-next-line property-no-deprecated */\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  .form-control-input {\n    display: flex;\n    flex-direction: column;\n    gap: var(--syn-spacing-x-small);\n  }\n\n  .form-control--has-help-text.form-control--radio-group .form-control__help-text {\n    margin-top: var(--syn-spacing-x-small);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,6BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}