@synergy-design-system/mcp 0.1.0 → 1.1.0

package/metadata/packages/components/components/syn-range/component.angular.ts

@@ -0,0 +1,334 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/angular wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  Input,
+  Output,
+  EventEmitter,
+  AfterContentInit,
+} from '@angular/core';
+import type { SynRange } from '@synergy-design-system/components';
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynChangeEvent } from '@synergy-design-system/components';
+import type { SynFocusEvent } from '@synergy-design-system/components';
+import type { SynInputEvent } from '@synergy-design-system/components';
+import type { SynInvalidEvent } from '@synergy-design-system/components';
+import type { SynMoveEvent } from '@synergy-design-system/components';
+import '@synergy-design-system/components/components/range/range.js';
+
+/**
+ * @summary Ranges allow the user to select values within a given range using one or two thumbs.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
+ * @status stable
+ *
+ * @dependency syn-tooltip
+ *
+ * @slot label - The range's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the range.
+ * @slot suffix - Used to append a presentational icon or similar element to the range.
+ * @slot help-text - Text that describes how to use the range.
+ * Alternatively, you can use the `help-text` attribute.
+ * @slot ticks - Used to display tick marks at specific intervals along the range.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity
+ * and its constraints aren't satisfied.
+ * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.
+ * Use `Event.preventDefault()` to prevent movement.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart input-wrapper - The container that wraps the input track and ticks.
+ * @csspart track-wrapper - The wrapper for the track.
+ * @csspart track - The inactive track.
+ * @csspart active-track - The active track.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart ticks - The container that wraps the tick marks.
+ * @csspart thumb - The thumb(s) that the user can drag to change the range.
+ *
+ * @csspart tooltip__base - The base of the tooltip
+ * @csspart tooltip__arrow - The arrow of the tooltip
+ * @csspart tooltip__popup - The popup of the tooltip
+ * @csspart tooltip__body - The body of the tooltip
+ *
+ * @cssproperty --thumb-size - The size of a thumb.
+ * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.
+ * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).
+ * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).
+ * @cssproperty --track-color-active - Color of the track representing the current value.
+ * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.
+ * @cssproperty --track-height - The height of the track.
+ * @cssproperty --track-active-offset - The point of origin of the active track,
+ * starting at the left side of the range.
+ */
+@Component({
+  selector: 'syn-range',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynRangeComponent {
+  public nativeElement: SynRange;
+  private _ngZone: NgZone;
+  private modelSignal = new AbortController();
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+    this.nativeElement.addEventListener('syn-blur', (e: SynBlurEvent) => {
+      this.synBlurEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-change', (e: SynChangeEvent) => {
+      this.synChangeEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-focus', (e: SynFocusEvent) => {
+      this.synFocusEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-input', (e: SynInputEvent) => {
+      this.synInputEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-invalid', (e: SynInvalidEvent) => {
+      this.synInvalidEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-move', (e: SynMoveEvent) => {
+      this.synMoveEvent.emit(e);
+    });
+    this.ngModelUpdateOn = 'syn-change';
+  }
+
+  /**
+   * The event that will trigger the ngModel update.
+   * By default, this is set to "syn-change".
+   */
+  @Input()
+  set ngModelUpdateOn(v: keyof HTMLElementEventMap) {
+    this.modelSignal.abort();
+    this.modelSignal = new AbortController();
+    const option = v || 'syn-change';
+    this.nativeElement.addEventListener(
+      option,
+      () => {
+        this.valueChange.emit(this.value);
+      },
+      {
+        signal: this.modelSignal.signal,
+      },
+    );
+  }
+  get ngModelUpdateOn(): keyof HTMLElementEventMap {
+    return this.ngModelUpdateOn;
+  }
+
+  /**
+   * The name of the range, submitted as a name/value pair with form data.
+   */
+  @Input()
+  set name(v: SynRange['name']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.name = v));
+  }
+  get name(): SynRange['name'] {
+    return this.nativeElement.name;
+  }
+
+  /**
+   * The range's label.
+   * If you need to display HTML, use the `label` slot instead.
+   */
+  @Input()
+  set label(v: SynRange['label']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
+  }
+  get label(): SynRange['label'] {
+    return this.nativeElement.label;
+  }
+
+  /**
+   * The range's help text.
+   * If you need to display HTML, use the help-text slot instead.
+   */
+  @Input()
+  set helpText(v: SynRange['helpText']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.helpText = v));
+  }
+  get helpText(): SynRange['helpText'] {
+    return this.nativeElement.helpText;
+  }
+
+  /**
+   * Disables the range.
+   */
+  @Input()
+  set disabled(v: '' | SynRange['disabled']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.disabled = v === '' || v),
+    );
+  }
+  get disabled(): SynRange['disabled'] {
+    return this.nativeElement.disabled;
+  }
+
+  /**
+   * The minimum acceptable value of the range.
+   */
+  @Input()
+  set min(v: SynRange['min']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.min = v));
+  }
+  get min(): SynRange['min'] {
+    return this.nativeElement.min;
+  }
+
+  /**
+   * The maximum acceptable value of the range.
+   */
+  @Input()
+  set max(v: SynRange['max']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.max = v));
+  }
+  get max(): SynRange['max'] {
+    return this.nativeElement.max;
+  }
+
+  /**
+   * The interval at which the range will increase and decrease.
+   */
+  @Input()
+  set step(v: SynRange['step']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.step = v));
+  }
+  get step(): SynRange['step'] {
+    return this.nativeElement.step;
+  }
+
+  /**
+   * The range's size.
+   */
+  @Input()
+  set size(v: SynRange['size']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
+  }
+  get size(): SynRange['size'] {
+    return this.nativeElement.size;
+  }
+
+  /**
+   * The preferred placement of the range's tooltip.
+   * Use "none" to disable the tooltip
+   */
+  @Input()
+  set tooltipPlacement(v: SynRange['tooltipPlacement']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.tooltipPlacement = v),
+    );
+  }
+  get tooltipPlacement(): SynRange['tooltipPlacement'] {
+    return this.nativeElement.tooltipPlacement;
+  }
+
+  /**
+   * The current values of the input (in ascending order) as a string of space separated values
+   */
+  @Input()
+  set value(v: SynRange['value']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
+  }
+  get value(): SynRange['value'] {
+    return this.nativeElement.value;
+  }
+
+  /**
+* Set to true to restrict the movement of a thumb to its next and previous thumb.
+This only affects multi range components
+ */
+  @Input()
+  set restrictMovement(v: '' | SynRange['restrictMovement']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.restrictMovement = v === '' || v),
+    );
+  }
+  get restrictMovement(): SynRange['restrictMovement'] {
+    return this.nativeElement.restrictMovement;
+  }
+
+  /**
+* By default, form controls are associated with the nearest containing `<form>` element.
+This attribute allows you to place the form control outside of a form
+and associate it with the form that has this `id`.
+The form must be in the same document or shadow root for this to work.
+ */
+  @Input()
+  set form(v: SynRange['form']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.form = v));
+  }
+  get form(): SynRange['form'] {
+    return this.nativeElement.form;
+  }
+
+  /**
+* A function used to format the tooltip's value.
+The value of the thumb is passed as the only argument.
+The function should return a string to display in the tooltip.
+ */
+  @Input()
+  set tooltipFormatter(v: SynRange['tooltipFormatter']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.tooltipFormatter = v),
+    );
+  }
+  get tooltipFormatter(): SynRange['tooltipFormatter'] {
+    return this.nativeElement.tooltipFormatter;
+  }
+
+  /**
+   * Emitted when the control loses focus.
+   */
+  @Output() synBlurEvent = new EventEmitter<SynBlurEvent>();
+
+  /**
+   * Emitted when an alteration to the control's value is committed by the user.
+   */
+  @Output() synChangeEvent = new EventEmitter<SynChangeEvent>();
+
+  /**
+   * Emitted when the control gains focus.
+   */
+  @Output() synFocusEvent = new EventEmitter<SynFocusEvent>();
+
+  /**
+   * Emitted when the control receives input.
+   */
+  @Output() synInputEvent = new EventEmitter<SynInputEvent>();
+
+  /**
+   * Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   */
+  @Output() synInvalidEvent = new EventEmitter<SynInvalidEvent>();
+
+  /**
+   * Emitted when the user moves a thumb, either via touch or keyboard.
+   * Use `Event.preventDefault()` to prevent movement.
+   */
+  @Output() synMoveEvent = new EventEmitter<SynMoveEvent>();
+
+  /**
+   * Support for two way data binding
+   */
+  @Output() valueChange = new EventEmitter<SynRange['value']>();
+}
+
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';
+export type { SynMoveEvent } from '@synergy-design-system/components';

package/metadata/packages/components/components/syn-range/component.react.ts

@@ -0,0 +1,92 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '@synergy-design-system/components/components/range/range.component.js';
+
+import { type EventName } from '@lit/react';
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynChangeEvent } from '@synergy-design-system/components';
+import type { SynFocusEvent } from '@synergy-design-system/components';
+import type { SynInputEvent } from '@synergy-design-system/components';
+import type { SynInvalidEvent } from '@synergy-design-system/components';
+import type { SynMoveEvent } from '@synergy-design-system/components';
+
+const tagName = 'syn-range';
+Component.define('syn-range');
+
+/**
+ * @summary Ranges allow the user to select values within a given range using one or two thumbs.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
+ * @status stable
+ *
+ * @dependency syn-tooltip
+ *
+ * @slot label - The range's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the range.
+ * @slot suffix - Used to append a presentational icon or similar element to the range.
+ * @slot help-text - Text that describes how to use the range.
+ * Alternatively, you can use the `help-text` attribute.
+ * @slot ticks - Used to display tick marks at specific intervals along the range.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity
+ * and its constraints aren't satisfied.
+ * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.
+ * Use `Event.preventDefault()` to prevent movement.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart input-wrapper - The container that wraps the input track and ticks.
+ * @csspart track-wrapper - The wrapper for the track.
+ * @csspart track - The inactive track.
+ * @csspart active-track - The active track.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart ticks - The container that wraps the tick marks.
+ * @csspart thumb - The thumb(s) that the user can drag to change the range.
+ *
+ * @csspart tooltip__base - The base of the tooltip
+ * @csspart tooltip__arrow - The arrow of the tooltip
+ * @csspart tooltip__popup - The popup of the tooltip
+ * @csspart tooltip__body - The body of the tooltip
+ *
+ * @cssproperty --thumb-size - The size of a thumb.
+ * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.
+ * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).
+ * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).
+ * @cssproperty --track-color-active - Color of the track representing the current value.
+ * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.
+ * @cssproperty --track-height - The height of the track.
+ * @cssproperty --track-active-offset - The point of origin of the active track,
+ * starting at the left side of the range.
+ */
+export const SynRange = createComponent({
+  displayName: 'SynRange',
+  elementClass: Component,
+  events: {
+    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,
+    onSynChange: 'syn-change' as EventName<SynChangeEvent>,
+    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,
+    onSynInput: 'syn-input' as EventName<SynInputEvent>,
+    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,
+    onSynMove: 'syn-move' as EventName<SynMoveEvent>,
+  },
+  react: React,
+  tagName,
+});
+
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';
+export type { SynMoveEvent } from '@synergy-design-system/components';

package/metadata/packages/components/components/syn-range/component.styles.ts

@@ -0,0 +1,284 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    /*
+     * Values here apply for the default size of "medium"
+     * For other sizes, see below
+     */
+    --thumb-size: var(--syn-spacing-medium);
+    --thumb-hit-area-size: 1.4;
+    --track-hit-area-size: var(--syn-spacing-medium);
+    --track-active-offset: 0px;
+    --track-color-active: var(--syn-color-primary-600);
+    --track-color-inactive: var(--syn-color-neutral-200);
+    --track-height: var(--syn-spacing-2x-small);
+
+    /* This is needed to get the full with of the element, including the border */
+    --full-thumb-size: calc(var(--thumb-size) + (var(--syn-focus-ring-width) * 2));
+
+    /*
+     * There are multiple places where we need the half width of the thumb
+     * This is needed for example to position the knob on the track or
+     * provide the spacing to the left and right for the track to make it stand "over"
+     */
+    --half-thumb-size: calc(var(--full-thumb-size) / 2);
+  }
+
+  /* Sizes */
+  :host([size='small']) {
+    --thumb-size: var(--syn-spacing-small);
+  }
+
+  :host([size='large']) {
+    --thumb-size: var(--syn-spacing-medium-large);
+  }
+
+  .form-control {
+    align-items: stretch;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    writing-mode: horizontal-tb;
+  }
+
+  .base {
+    align-items: center;
+    cursor: text;
+    display: inline-flex;
+    flex: 1 1 auto;
+    font-family: var(--syn-input-font-family);
+    font-size: var(--syn-input-font-size-medium);
+    font-weight: var(--syn-input-font-weight);
+    justify-content: start;
+    letter-spacing: var(--syn-input-letter-spacing);
+    position: relative;
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    touch-action: none; /* Prevent misbehavior in mobile by disabling native touch */
+    -webkit-touch-callout: none;
+    transition: var(--syn-transition-fast) color, var(--syn-transition-fast) border, var(--syn-transition-fast) box-shadow, var(--syn-transition-fast) background-color;
+    /* stylelint-disable-next-line property-no-vendor-prefix */
+    -webkit-user-select: none;
+    vertical-align: middle;
+    width: 100%;
+  }
+
+  .input__wrapper {
+    flex: 1 0 auto;
+    margin: 0 var(--half-thumb-size);
+    position: relative;
+  }
+
+  :host([disabled]) .base {
+    opacity: var(--syn-input-disabled-opacity);
+  }
+
+  .input__prefix,
+  .input__suffix {
+    align-items: center;
+    color: var(--syn-input-icon-color);
+    cursor: default;
+    display: inline-flex;
+    flex: 0 0 auto;
+  }
+
+  /* Sizing for the prefix and suffix */
+  .form-control--small .input__prefix ::slotted(*) {
+    font-size: var(--syn-input-font-size-small);
+    margin-inline-end: var(--syn-spacing-x-small);
+  }
+
+  .form-control--small .input__suffix ::slotted(*) {
+    font-size: var(--syn-input-font-size-small);
+    margin-inline-start: var(--syn-spacing-x-small);
+  }
+
+  .form-control--medium .input__prefix ::slotted(*) {
+    margin-inline-end: var(--syn-input-spacing-small);
+  }
+
+  .form-control--medium .input__suffix ::slotted(*) {
+    margin-inline-start: var(--syn-input-spacing-small);
+  }
+
+  .form-control--large .input__prefix ::slotted(*) {
+    font-size: var(--syn-input-font-size-large);
+    margin-inline-end: var(--syn-input-spacing-medium);
+  }
+
+  .form-control--large .input__suffix ::slotted(*) {
+    font-size: var(--syn-input-font-size-large);
+    margin-inline-start: var(--syn-input-spacing-medium);
+  }
+
+  .form-control--small .input__prefix ::slotted(syn-icon),
+  .form-control--small .input__suffix ::slotted(syn-icon) {
+    font-size: var(--syn-font-size-medium);
+  }
+
+  .form-control--medium .input__prefix ::slotted(syn-icon),
+  .form-control--medium .input__suffix ::slotted(syn-icon) {
+    font-size: var(--syn-font-size-x-large);
+  }
+  
+  .form-control--large .input__prefix ::slotted(syn-icon),
+  .form-control--large .input__suffix ::slotted(syn-icon) {
+    font-size: var(--syn-font-size-2x-large);
+  }
+
+  .track__wrapper {
+    cursor: pointer;
+    position: relative;
+  }
+
+  /* Internal helper for a better click surface on tracks */
+  .track__click-helper {
+    inset: calc(var(--track-hit-area-size) * -1) calc(var(--half-thumb-size) * -1);
+    position: absolute;
+  }
+
+  .track {
+    background-color: var(--track-color-inactive);
+    border-radius: var(--syn-border-radius-small);
+    height: var(--track-height);
+    margin: calc((var(--full-thumb-size) - var(--track-height)) / 2) calc(var(--half-thumb-size) * -1);
+  }
+
+  .active-track {
+    background-color: var(--track-color-active);
+    border-radius: var(--syn-border-radius-small);
+    height: var(--track-height);
+    margin: 0 calc(var(--half-thumb-size) * -1);
+    position: absolute;
+    top: 0;
+    z-index: 2;
+  }
+
+  .thumb {
+    background-color: var(--syn-color-primary-600);
+    border: var(--syn-focus-ring-width) solid var(--syn-color-neutral-0);
+    border-radius: var(--syn-border-radius-circle);
+    cursor: pointer;
+    display: block;
+    height: var(--full-thumb-size);
+    position: absolute;
+    top: 0;
+    transition: transform var(--syn-transition-fast) ease-in-out, background-color var(--syn-transition-fast) ease-in-out, box-shadow var(--syn-transition-fast) ease-in-out;
+    user-select: none;
+    width: var(--full-thumb-size);
+    z-index: 3;
+  }
+
+  /**
+   * Adds some space to the thumb that makes it easier to click and drag
+   */
+  .thumb::after {
+    background: transparent;
+    border-radius: var(--syn-border-radius-circle);
+    content: "";
+    display: block;
+  
+    /* The --thumb-size needs to be used to subtract from, because the border of the thumb is not calculated into the inset */
+    inset: calc((var(--thumb-size) - (var(--full-thumb-size) * var(--thumb-hit-area-size)) ) / 2);
+
+    /* This is needed as we also attach a pointerleave listener that stops */
+    pointer-events: none;
+    position: absolute;
+  }
+
+  .thumb:hover {
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    cursor: grab;
+  }
+
+  .thumb.grabbed {
+    background: var(--syn-color-primary-950);
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    cursor: grabbing;
+  }
+
+  .thumb:focus-visible {
+    outline: none;
+  }
+
+  .thumb:not(.grabbed):focus-visible {
+    background: var(--syn-color-primary-600);
+    outline: var(--syn-focus-ring);
+    outline-offset: 0;
+  }
+
+  :host([disabled]) .track__wrapper,
+  :host([disabled]) .thumb,
+  :host([disabled]) .thumb.grabbed {
+    cursor: not-allowed;
+  }
+
+  /*
+   * Guard against mobile devices not removing the transform
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover
+   */
+  @media (any-hover: hover) {
+    :host(:not([disabled])) .thumb:hover  {
+      transform: scale(var(--thumb-hit-area-size));
+    }
+
+    :host(:not([disabled])) .thumb:not(.grabbed):hover  {
+      background: var(--syn-color-primary-900);
+    }
+    
+    :host(:not([disabled])) .thumb:hover::after  {
+      /* Unset the area of the thumb click and drag area space, so it does not scale with the hover */
+      inset: unset;
+    }
+  }
+
+  /* Ticks */
+  .ticks {
+    cursor: pointer;
+    margin: 1px 0;
+    position: relative;
+    user-select: none;
+  }
+
+  .form-control--small .ticks ::slotted(*) {
+    font-size: var(--syn-font-size-small);
+  }
+
+  .form-control--large .ticks ::slotted(*) {
+    font-size: var(--syn-font-size-large);
+  }
+
+  /**
+   * Visually hide elements without display:none to make aria and other accessibility stuff work correctly
+   * This is necessary for accessibility reasons and e.g. for the native html input validation popup to be
+   * shown.
+   */
+  .visually-hidden {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  /**
+   * Position the validation input to the bottom and center of the range track
+   */
+  .range__validation-input {
+    bottom: 0;
+    left: 50%;
+  }
+  
+
+  :host([data-user-invalid]) .active-track {
+    --track-color-active: var(--syn-input-border-color-focus-error);
+  }
+
+  :host([data-user-invalid]) .thumb {
+    background-color: var(--syn-input-border-color-focus-error);
+  }
+`;