@umbraco-ui/uui 2.0.0 → 2.0.1

package/dist/components/range-slider/range-slider.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-slider.element.js","sources":["../../../src/components/range-slider/range-slider.element.ts"],"sourcesContent":["import { css, html, LitElement, svg } from 'lit';\nimport { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { UUIRangeSliderEvent } from './UUIRangeSliderEvent.js';\nimport { clamp } from '../../internal/utils/index.js';\n\nconst Z_INDEX = {\n  TOP: 3,\n  CENTER: 2,\n  BACK: 1,\n};\n\nconst THUMB_SIZE = 18;\nconst TRACK_HEIGHT = 3;\nconst TRACK_PADDING = 12;\nconst STEP_MIN_WIDTH = 24;\n\nconst CountDecimalPlaces = (num: number) => {\n  const decimalIndex = num.toString().indexOf('.');\n  return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;\n};\n\n// TODO: ability to focus on the range, to enable keyboard interaction to move the range.\n// TODO: Ability to click outside a range, to move the range if the maxGap has been reached.\n/**\n * @element uui-range-slider\n * @description - Range slider with two handles. Use uui-slider for a single handle.\n * @fires UUIRangeSliderEvent#input on input\n * @fires UUIRangeSliderEvent#change on change\n * @extends UUIFormControlMixin\n */\nexport class UUIRangeSliderElement extends UUIFormControlWithBasicsMixin(\n  LitElement,\n  '',\n) {\n  static readonly formAssociated = true;\n\n  /**\n   * Label to be used for aria-label and eventually as visual label. Adds \"low-end value\" and \"high-end value\" endings for the two values.\n   * @type {string}\n   * @attr\n   */\n  @property({ type: String })\n  label!: string;\n\n  /**\n   * Disables the input.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Sets the minimum allowed value.\n   * @type {number}\n   * @attr min\n   * @default 0\n   */\n  @property({ type: Number })\n  get min() {\n    return this._min;\n  }\n  set min(newVal) {\n    this._min = newVal;\n    this.#transferValueToInternalValues();\n  }\n  _min = 0;\n\n  /**\n   * Sets the maximum allowed value.\n   * @type {number}\n   * @attr max\n   * @default 100\n   */\n  @property({ type: Number })\n  get max() {\n    return this._max;\n  }\n  set max(newVal) {\n    this._max = newVal;\n    this.#transferValueToInternalValues();\n  }\n  _max = 0;\n\n  /**\n   * Hides the numbers representing the value of each steps. Dots will still be visible\n   * @type {boolean}\n   * @attr 'hide-step-values'\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-step-values' })\n  hideStepValues = false;\n\n  /**\n   * This reflects the behavior of a native input step attribute.\n   * @type {number}\n   * @attr\n   * @default 1\n   */\n  @property({ type: Number })\n  get step() {\n    return this._step;\n  }\n  set step(newVal) {\n    this._step = newVal;\n    this.#transferValueToInternalValues();\n  }\n  _step = 1;\n\n  /**\n   * Minimum value gap between the the two picked values. Cannot be lower than the step value and cannot be higher than the maximum gap\n   * @type {number}\n   * @attr min-gap\n   * @default undefined\n   */\n  @property({ type: Number, attribute: 'min-gap' })\n  get minGap() {\n    return this._minGap;\n  }\n  set minGap(newVal) {\n    this._minGap = newVal;\n    this.#transferValueToInternalValues();\n  }\n  _minGap?: number;\n\n  /**\n   * Maximum value gap between the the two picked values. Cannot be lower than the minimum gap.\n   * @type {number}\n   * @attr max-gap\n   * @default undefined\n   */\n  @property({ type: Number, attribute: 'max-gap' })\n  get maxGap() {\n    return this._maxGap;\n  }\n  set maxGap(newVal) {\n    this._maxGap = newVal;\n    this.#transferValueToInternalValues();\n  }\n  _maxGap?: number;\n\n  /**\n   * This is a value property of the uui-range-slider. Split the two values with comma, for example 10,50 sets the values to 10 and 50.\n   * @type {string}\n   * @attr\n   * @default 0,0\n   */\n  @property({ type: String })\n  get value() {\n    return super.value;\n  }\n  set value(newVal) {\n    super.value = newVal;\n    this.#transferValueToInternalValues();\n  }\n\n  private _currentFocus?: HTMLInputElement;\n\n  @state()\n  private _movement = false;\n\n  private startPoint = {\n    mouse: 0,\n    low: 0,\n    high: 0,\n  };\n\n  @state()\n  private _lowInputValue = 0;\n\n  @state()\n  private _highInputValue = 0;\n\n  @state()\n  private _trackWidth = 0;\n\n  @state()\n  _lowValuePercentStart = 0;\n  @state()\n  _highValuePercentEnd = 100;\n\n  protected setValueLow(low: number) {\n    // Clamp value to ensure it fits within its restrictions\n    const clampMin = this.maxGap\n      ? Math.max(this._highInputValue - this.maxGap, this.min)\n      : this.min;\n    const clampMax = this.minGap\n      ? this._highInputValue - this.minGap\n      : this._highInputValue - this.step;\n    low = clamp(low, clampMin, clampMax);\n    this.setValue(low, this._highInputValue);\n  }\n\n  protected setValueHigh(high: number) {\n    // Clamp value to ensure it fits within its restrictions\n    const clampMin = this.minGap\n      ? this._lowInputValue + this.minGap\n      : this._lowInputValue + this.step;\n    const clampMax = this.maxGap\n      ? Math.min(this.maxGap + this._lowInputValue, this.max)\n      : this.max;\n    high = clamp(high, clampMin, clampMax);\n    this.setValue(this._lowInputValue, high);\n  }\n\n  protected setValue(low: number, high: number, lockValueRange?: boolean) {\n    if (lockValueRange) {\n      // Get the length of the range\n      const length = this.startPoint.high - this.startPoint.low;\n\n      // Clamp values to make sure it keeps its length:\n      low = clamp(low, this.min, this.max - length);\n      high = clamp(high, this.min + length, this.max);\n    }\n\n    // Overwrite input value, to enforce the calculated value and avoid the native slider moving to a invalid position:\n    this._inputLow.value = low.toString();\n    this._inputHigh.value = high.toString();\n\n    this.value = `${low},${high}`;\n  }\n\n  #transferValueToInternalValues() {\n    const valueSplit = (this.value as string).split(',');\n    let low = Number(valueSplit[0]) || 0;\n    let high = Number(valueSplit[1]) || 0;\n\n    // First secure that the high value are within range (low does not need as its being handled below)\n    high = clamp(high, this._min, this._max);\n\n    // Make sure it matches the steps:\n    low = this._min + Math.round((low - this._min) / this._step) * this._step;\n    high = this._min + Math.round((high - this._min) / this._step) * this._step;\n\n    // Fit with gaps:\n    this._lowInputValue = clamp(\n      low,\n      this._min,\n      this._minGap ? high - this._minGap : high - this._step,\n    );\n    this._highInputValue = clamp(\n      high,\n      this._minGap\n        ? this._lowInputValue + this._minGap\n        : this._lowInputValue + this._step,\n      Math.min(this._maxGap ? low + this._maxGap : this._max, this._max),\n    );\n\n    this._updateInnerColor();\n    this.requestUpdate();\n  }\n\n  protected getFormElement(): HTMLInputElement {\n    return this._currentFocus ?? this._inputLow;\n  }\n\n  async focus() {\n    await this.updateComplete;\n    this.getFormElement().focus();\n  }\n  async blur() {\n    await this.updateComplete;\n    this.getFormElement().blur();\n  }\n\n  /** Elements */\n\n  @query('#range-slider')\n  private readonly _outerTrack!: HTMLElement;\n\n  @query('#inputLow')\n  private readonly _inputLow!: HTMLInputElement;\n\n  @query('#inputHigh')\n  private readonly _inputHigh!: HTMLInputElement;\n\n  @query('.color')\n  private readonly _innerColor!: HTMLElement;\n\n  @query('#inner-color-thumb')\n  private readonly _innerColorThumb!: HTMLElement;\n\n  /** Constructor and Validator */\n\n  constructor() {\n    super();\n    // Keyboard\n    this.addEventListener('keydown', this.#onKeyDown);\n    // Mouse\n    this.addEventListener('mousedown', this._onMouseDown);\n    // Touch\n    this.addEventListener('touchstart', this._onTouchStart);\n\n    window.addEventListener('resize', () => {\n      this._trackWidth = this._outerTrack?.offsetWidth;\n    });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.value) {\n      // Lack value. Defaulting to the min and max attributes\n      this.value = `${this._min},${this._max}`;\n    }\n  }\n\n  firstUpdated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    this._trackWidth = this._outerTrack.offsetWidth;\n    this._runPropertiesChecks();\n  }\n\n  private _runPropertiesChecks() {\n    // Note: We are checking if the attributes set makes any sense.\n\n    const regex = new RegExp(/^-?\\d+(\\.\\d+)?,-?\\d+(\\.\\d+)?$/); // regex: Number Comma Number (optional: decimals and negatives)\n    if (!regex.test(this.value as string))\n      console.error(`Range slider (Value error occurred): Bad input`);\n\n    if (this._highInputValue === this._lowInputValue) {\n      console.error(\n        `Range slider (Value error occurred): Low-end and high-end value should never be equal. Use <uui-slider></uui-slider> instead.`,\n      );\n    }\n\n    if (this._lowInputValue > this._highInputValue) {\n      console.error(\n        `Range slider (Value error occurred): Low-end value should never be higher than high-end value.`,\n      );\n    }\n\n    if (this._highInputValue > this._max || this._highInputValue < this._min) {\n      this.setValueHigh(this._max);\n      console.warn(\n        `Conflict with the high-end value and max value. High-end value has been converted to the max value (${this._max})`,\n      );\n    }\n\n    if (this._lowInputValue < this._min || this._lowInputValue > this._max) {\n      this.setValueLow(this._min);\n      console.warn(\n        `Conflict with the low-end value and min value. Low-end value has been converted to the min value (${this._min})`,\n      );\n    }\n\n    // Step vs value logic\n    if (this._step <= 0) {\n      this._step = 1;\n      console.warn(\n        `Property step needs a value higher than 0. Converted the step value to 1 (default)`,\n      );\n    }\n\n    if (((this._max - this._min) / this._step) % 1 !== 0) {\n      console.error(\n        `Conflict with step value and the min and max values. May experience bad side effects`,\n      );\n    }\n\n    this._runGapChecks();\n  }\n\n  private _runGapChecks() {\n    if (this._minGap && this._minGap < this._step) {\n      this._minGap = undefined;\n      console.warn(\n        `Conflict with min-gap and step value. The min-gap needs to be higher than the step value. Removed the min-gap property.`,\n      );\n    }\n\n    if (this._minGap && this._maxGap && this._minGap > this._maxGap) {\n      this._minGap = undefined;\n      this._maxGap = undefined;\n      console.warn(\n        `Conflict with min-gap and max-gap. Removed the min-gap and max-gap properties.`,\n      );\n    }\n\n    if (this._minGap && this._max - this._min < this._minGap) {\n      this._minGap = undefined;\n      console.warn(\n        `Conflict with the min-gap and the total range. Removed the min-gap.`,\n      );\n    }\n\n    if (\n      this._maxGap &&\n      this._highInputValue - this._lowInputValue > this._maxGap\n    ) {\n      this.setValueHigh(this._lowInputValue + this._maxGap);\n      console.warn(\n        `Conflict with value and max-gap. High-end value has been converted to the highest possible value based on the low-end value and the max gap value (${this._highInputValue})`,\n      );\n    }\n\n    if (\n      this._minGap &&\n      this._highInputValue - this._lowInputValue < this._minGap\n    ) {\n      const minGap = this._minGap;\n      if (this._highInputValue - minGap < this._min) {\n        this.setValueHigh(this._lowInputValue + minGap);\n        console.warn(\n          `Conflict with value and min gap. High-end value has been converted to the lowest possible value based on the low-end value and the min gap value (${this._highInputValue}).`,\n        );\n      } else {\n        this.setValueLow(this._highInputValue - minGap);\n        console.warn(\n          `Conflict with value and min gap. Low-end value has been converted to the highest possible value based on the high-end value and the min gap value (${this._lowInputValue}).`,\n        );\n      }\n    }\n  }\n\n  private _updateInnerColor() {\n    const scopeLength = this._max - this._min;\n    const scopedLow = this._lowInputValue - this._min;\n    const scopedHigh = this._highInputValue - this._min;\n\n    const leftPercent = (scopedLow / scopeLength) * 100;\n    const rightPercent = 100 - (scopedHigh / scopeLength) * 100;\n\n    this._lowValuePercentStart = clamp(leftPercent, 0, 100);\n    this._highValuePercentEnd = clamp(rightPercent, 0, 100);\n  }\n\n  private _getClickedValue(pageX: number) {\n    const outerTrackMargin = this._outerTrack.getBoundingClientRect().left;\n    const mouseXPosition = pageX - outerTrackMargin - TRACK_PADDING;\n    const clickPercent =\n      mouseXPosition / (this._trackWidth - TRACK_PADDING * 2);\n\n    const clickedValue = clickPercent * (this._max - this._min) + this._min;\n    return Math.round(clickedValue / this._step) * this._step;\n  }\n\n  /** Events */\n\n  readonly #onKeyDown = (e: KeyboardEvent) => {\n    if (e.key == 'Enter') {\n      this.submit();\n    }\n  };\n\n  /** Touch Event */\n  private readonly _onTouchStart = (e: TouchEvent) => {\n    if (this.disabled) return;\n\n    const target = e.composedPath()[0];\n    if (target === this._outerTrack) return;\n    //Clicked on the inner track.\n\n    if (target === this._innerColor || target === this._innerColorThumb) {\n      // If we clicked in the colored area\n\n      window.addEventListener('touchend', this._onTouchEnd);\n      window.addEventListener('touchcancel', this._onTouchEnd);\n      window.addEventListener('touchmove', this._onTouchMove);\n\n      this._movement = true;\n      this._saveStartPoints(e.touches[0].pageX);\n    } else {\n      // Else move just 1 thumb\n      const value = this._getClickedValue(e.touches[0].pageX);\n      const diffLow = Math.abs(this._lowInputValue - value);\n      const diffHigh = Math.abs(this._highInputValue - value);\n      if (diffLow < diffHigh) {\n        this.setValueLow(value);\n      } else {\n        this.setValueHigh(value);\n      }\n    }\n  };\n\n  private readonly _onTouchMove = (e: TouchEvent) => {\n    this._dragBothValuesByMousePos(e.touches[0].pageX);\n  };\n\n  private readonly _onTouchEnd = () => {\n    this._movement = false;\n    this.onChanged();\n    window.removeEventListener('touchend', this._onTouchEnd);\n    window.removeEventListener('touchcancel', this._onTouchEnd);\n    window.removeEventListener('touchmove', this._onTouchMove);\n  };\n\n  /** Mouse Event */\n  private readonly _onMouseDown = (e: MouseEvent) => {\n    if (this.disabled) return;\n    if (this.readonly) return;\n\n    const target = e.composedPath()[0];\n    if (target === this._outerTrack) return;\n    //Clicked on the inner track.\n\n    if (target === this._innerColor || target === this._innerColorThumb) {\n      // If we clicked in the colored area\n      window.addEventListener('mouseup', this._onMouseUp);\n      window.addEventListener('mousemove', this._onMouseMove);\n\n      this._movement = true;\n      this._saveStartPoints(e.pageX);\n    } else {\n      // Else move just 1 thumb\n      const value = this._getClickedValue(e.pageX);\n      const diffLow = Math.abs(this._lowInputValue - value);\n      const diffHigh = Math.abs(this._highInputValue - value);\n      if (diffLow < diffHigh) {\n        this.setValueLow(value);\n      } else {\n        this.setValueHigh(value);\n      }\n    }\n  };\n\n  private readonly _onMouseMove = (e: MouseEvent) => {\n    e.preventDefault();\n    this._dragBothValuesByMousePos(e.pageX);\n  };\n\n  private readonly _onMouseUp = () => {\n    this._movement = false;\n    this.onChanged();\n    window.removeEventListener('mouseup', this._onMouseUp);\n    window.removeEventListener('mousemove', this._onMouseMove);\n  };\n\n  /** Drag both thumbs logics */\n  private _saveStartPoints(pageX: number) {\n    this.startPoint = {\n      mouse: pageX,\n      low: this._lowInputValue,\n      high: this._highInputValue,\n    };\n  }\n\n  private _dragBothValuesByMousePos(pageX: number) {\n    const trackWidth = this._outerTrack.offsetWidth;\n\n    const drag = pageX - this.startPoint.mouse;\n    const trackDiff = this._max - this._min;\n\n    const dragPercent = drag / (trackWidth + TRACK_PADDING * 2);\n    const dragValue =\n      Math.round((dragPercent * trackDiff) / this._step) * this._step;\n\n    const newValueLow = this.startPoint.low + dragValue;\n    const newValueHigh = this.startPoint.high + dragValue;\n\n    this.setValue(newValueLow, newValueHigh, true);\n    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));\n  }\n\n  /** Input Events */\n  private _onLowInput(e: Event) {\n    if (this.disabled) e.preventDefault();\n    if (this.readonly) e.preventDefault();\n\n    this._currentFocus = this._inputLow;\n    const newValue = Number((e.target as HTMLInputElement).value);\n\n    this.setValueLow(newValue);\n    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));\n  }\n\n  private _onHighInput(e: Event) {\n    if (this.disabled) e.preventDefault();\n    if (this.readonly) e.preventDefault();\n\n    this._currentFocus = this._inputHigh;\n    const newValue = Number((e.target as HTMLInputElement).value);\n\n    this.setValueHigh(newValue);\n    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));\n  }\n\n  /** Change Events */\n  private _onLowChange() {\n    this.setValueLow(Number(this._inputLow.value));\n    this.onChanged();\n  }\n\n  private _onHighChange() {\n    this.setValueHigh(Number(this._inputHigh.value));\n    this.onChanged();\n  }\n\n  protected onChanged() {\n    this.pristine = false;\n    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.CHANGE));\n  }\n\n  /** Render */\n\n  render() {\n    return html`\n      <div id=\"range-slider\">\n        ${this._renderNativeInputs()}\n        <div id=\"inner-track\">\n          <div\n            id=\"inner-color-thumb\"\n            class=\"${this._movement ? 'active' : ''}\"\n            style=\"left: ${this._lowValuePercentStart}%; right: ${this\n              ._highValuePercentEnd}%\">\n            ${this._renderThumbValues()}\n            <div class=\"${this._movement ? 'color active' : 'color'}\"></div>\n          </div>\n          ${this._renderSteps()}\n        </div>\n      </div>\n    `;\n  }\n\n  private _renderThumbValues() {\n    return html`<div class=\"thumb-values\">\n      <span\n        ><span\n          >${this._lowInputValue.toFixed(CountDecimalPlaces(this._step))}</span\n        ></span\n      >\n      <span\n        ><span\n          >${this._highInputValue.toFixed(CountDecimalPlaces(this._step))}</span\n        ></span\n      >\n    </div>`;\n  }\n\n  private _renderSteps() {\n    const stepAmount = (this._max - this._min) / this._step;\n    const stepWidth = (this._trackWidth - TRACK_PADDING * 2) / stepAmount;\n\n    if (stepWidth < STEP_MIN_WIDTH) return;\n    if (stepAmount % 1 !== 0) return;\n\n    let index = 0;\n    const stepPositions = new Array(stepAmount + 1)\n      .fill(stepWidth)\n      .map(stepWidth => stepWidth * index++);\n\n    return html`<div class=\"step-wrapper\">\n      <svg height=\"100%\" width=\"100%\">\n        <rect x=\"9\" y=\"9\" height=\"${TRACK_HEIGHT}\" rx=\"2\" />\n        ${this._renderStepCircles(stepPositions)}\n      </svg>\n      ${this._renderStepValues(stepAmount)}\n    </div>`;\n  }\n\n  private _renderStepValues(stepAmount: number) {\n    if (this.hideStepValues || stepAmount > 20) return;\n\n    let index = 0;\n    const stepValues = new Array(stepAmount + 1)\n      .fill(this._step)\n      .map(step =>\n        (this._min + step * index++).toFixed(CountDecimalPlaces(this._step)),\n      );\n\n    return html`<div class=\"step-values\">\n      ${stepValues.map(value => html`<span><span>${value}</span></span>`)}\n    </div>`;\n  }\n\n  private _renderStepCircles(stepPositionArray: Array<number>) {\n    const trackValue = this._trackWidth / (this._max - this._min);\n\n    return svg`${stepPositionArray.map(position => {\n      const cx = position + TRACK_PADDING;\n      const colorStart = this._lowInputValue - this._min;\n      const colorEnd = this._highInputValue - this._min;\n\n      if (cx / trackValue >= colorStart && cx / trackValue <= colorEnd) {\n        return svg`<circle class=\"track-step filled\" cx=\"${cx}\" cy=\"${TRACK_HEIGHT * 2}\" r=\"4.5\" />`;\n      } else {\n        return svg`<circle class=\"track-step regular\" cx=\"${cx}\" cy=\"${TRACK_HEIGHT * 2}\" r=\"4.5\" />`;\n      }\n    })}`;\n  }\n\n  private _renderNativeInputs() {\n    return html` <div class=\"native-wrapper\">\n      <input\n        id=\"inputLow\"\n        class=\"${this._movement ? 'focus' : ''}\"\n        type=\"range\"\n        min=${this._min}\n        max=${this._max}\n        step=${this._step}\n        .value=${this._lowInputValue.toString()}\n        aria-label=\"${this.label} low-end value\"\n        ?disabled=\"${this.disabled || this.readonly}\"\n        @input=${this._onLowInput}\n        @change=${this._onLowChange} />\n      <input\n        id=\"inputHigh\"\n        class=\"${this._movement ? 'focus' : ''}\"\n        type=\"range\"\n        min=\"${this._min}\"\n        max=\"${this._max}\"\n        step=\"${this._step}\"\n        .value=${this._highInputValue.toString()}\n        aria-label=\"${this.label} high-end value\"\n        ?disabled=\"${this.disabled || this.readonly}\"\n        @input=${this._onHighInput}\n        @change=${this._onHighChange} />\n    </div>`;\n  }\n\n  /** Style */\n  static override readonly styles = [\n    css`\n      :host {\n        --color-interactive: var(--uui-color-selected);\n        --color-hover: var(--uui-color-selected-emphasis);\n        --color-focus: var(--uui-color-focus);\n        min-height: 30px;\n      }\n\n      :host([error]) {\n        --color-interactive: var(--uui-color-invalid-standalone);\n        --color-hover: var(--uui-color-invalid);\n      }\n\n      #range-slider {\n        min-height: 30px;\n        box-sizing: border-box;\n        position: relative;\n        display: flex;\n        align-items: center;\n      }\n\n      /** Track */\n\n      #inner-track {\n        user-select: none;\n        background-color: var(--uui-color-border-standalone);\n        position: absolute;\n        height: ${TRACK_HEIGHT}px;\n        left: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n        right: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n      }\n\n      :host(:not([disabled]):not([readonly]):hover) #inner-track,\n      :host(:not([disabled]):not([readonly]):active) #inner-track {\n        background-color: var(--uui-color-border-emphasis);\n      }\n\n      #inner-color-thumb {\n        margin: -9px 0 0;\n        position: absolute;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        height: ${THUMB_SIZE}px;\n        cursor: grab;\n        user-select: none;\n        z-index: ${Z_INDEX.CENTER};\n      }\n\n      :host([disabled]) #inner-color-thumb,\n      :host([readonly]) #inner-color-thumb {\n        cursor: default;\n      }\n\n      /** Colored part of track */\n\n      :host([disabled]) #range-slider #inner-color-thumb .color {\n        background-color: var(--uui-palette-mine-grey) !important;\n      }\n\n      #inner-color-thumb:focus .color {\n        background-color: var(--color-focus);\n      }\n\n      #inner-color-thumb:hover .color,\n      #inner-color-thumb .color.active {\n        background-color: var(--color-hover);\n      }\n\n      :host(:not([readonly])) #inner-color-thumb:hover .color {\n        height: ${TRACK_HEIGHT + 2}px;\n        background-color: var(--color-hover);\n        transform: translateY(-1px);\n      }\n\n      .color {\n        user-select: none;\n        position: absolute;\n        inset-inline: 0;\n        height: ${TRACK_HEIGHT}px;\n        top: 50%;\n        transform: translateY(0);\n        background-color: var(--color-interactive);\n        transition:\n          height 60ms,\n          transform 60ms,\n          background-color 120ms;\n      }\n\n      :host([error]) .color {\n        background-color: var(--uui-color-invalid-standalone);\n      }\n      :host([error]:not([disabled]):not([readonly]))\n        #inner-color-thumb:hover\n        ~ .color,\n      :host([error]:not([disabled]):not([readonly]))\n        #inner-color-thumb:focus\n        ~ .color {\n        background-color: var(--uui-color-invalid-emphasis);\n      }\n\n      /** Steps */\n      .step-wrapper {\n        margin: 0 ${-1 * TRACK_PADDING}px;\n        height: 10.5px;\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: -10px;\n      }\n\n      /** Step circles */\n      .track-step {\n        fill: var(--uui-color-border);\n      }\n\n      :host(:not([disabled]):not([readonly]):hover)\n        #inner-track\n        .track-step.regular,\n      :host(:not([disabled]):not([readonly]):active)\n        #inner-track\n        .track-step.regular {\n        fill: var(--uui-color-border-emphasis);\n      }\n\n      :host .track-step.filled {\n        fill: var(--color-interactive);\n      }\n\n      :host([error]) .track-step.filled {\n        fill: var(--uui-color-invalid-emphasis);\n      }\n\n      :host #inner-color-thumb.active ~ .step-wrapper .track-step.filled,\n      :host(:not([disabled]):not([readonly]))\n        #inner-color-thumb:hover\n        ~ .step-wrapper\n        .track-step.filled {\n        fill: var(--color-hover);\n      }\n\n      :host(:not([disabled]):not([readonly])):has(#inner-color-thumb:hover)\n        input::-moz-range-thumb {\n        border-color: var(--color-hover);\n        border-width: 4px;\n      }\n      :host(:not([disabled]):not([readonly])):has(#inner-color-thumb:hover)\n        input::-webkit-slider-thumb {\n        border-color: var(--color-hover);\n        border-width: 4px;\n      }\n\n      :host([disabled]) #range-slider .track-step.filled {\n        fill: var(--uui-palette-mine-grey) !important;\n      }\n\n      /** Step values */\n\n      .step-values {\n        box-sizing: border-box;\n        margin: 0 ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n        display: flex;\n        justify-content: space-between;\n        font-size: var(--uui-type-small-size);\n      }\n\n      .step-values > span {\n        position: relative;\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      :host(:not([disabled]):not([readonly]):hover) .step-values > span,\n      :host(:not([disabled]):not([readonly]):active) .step-values > span {\n        color: var(--uui-color-border-emphasis);\n      }\n\n      .step-values > span > span {\n        position: absolute;\n        transform: translateX(-50%);\n      }\n\n      /** Input */\n\n      .native-wrapper {\n        position: relative;\n        width: 100%;\n        inset-inline: 0px;\n        margin: -22px 5px 0 1px;\n      }\n\n      input {\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n        pointer-events: none;\n        position: absolute;\n        cursor: pointer;\n        background-color: transparent;\n        inset-inline: 0;\n        width: 100%;\n        border-radius: 20px;\n      }\n\n      input:focus-within {\n        outline: none;\n      }\n\n      /** Thumb values */\n      .thumb-values {\n        box-sizing: border-box;\n        display: flex;\n        justify-content: space-between;\n        color: var(--color-interactive);\n        font-weight: bold;\n        transition: 120ms opacity;\n        opacity: 0;\n      }\n\n      .thumb-values > span {\n        width: 0;\n      }\n\n      .thumb-values > span > span {\n        bottom: 15px;\n        position: absolute;\n        transform: translateX(-50%);\n      }\n\n      :host([disabled]) .thumb-values {\n        color: var(--uui-palette-mine-grey);\n      }\n\n      :host([readonly]) .thumb-values {\n        opacity: 1;\n      }\n\n      :host(:not([disabled]):not([readonly]))\n        #range-slider:hover\n        .thumb-values {\n        opacity: 1;\n      }\n\n      /** Native thumbs */\n      /** Chrome */\n      input::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        pointer-events: all;\n        cursor: grab;\n        position: relative;\n        z-index: ${Z_INDEX.TOP};\n        width: ${THUMB_SIZE}px;\n        height: ${THUMB_SIZE}px;\n        border-radius: 24px;\n        overflow: visible;\n        border: 3px solid var(--color-interactive);\n        background-color: var(--uui-color-surface);\n        transition:\n          border-color 120ms,\n          border-width 120ms;\n      }\n\n      :host([disabled]) input::-webkit-slider-thumb,\n      :host([readonly]) input::-webkit-slider-thumb {\n        cursor: default;\n      }\n\n      input:focus-within::-webkit-slider-thumb,\n      input.focus::-webkit-slider-thumb {\n        border-color: var(--color-focus);\n        outline: 2px solid var(--color-focus);\n        outline-offset: 1px;\n      }\n      :host(:not([disabled]):not([readonly]))\n        input::-webkit-slider-thumb:hover {\n        border-color: var(--color-hover);\n        border-width: 4px;\n      }\n\n      :host([disabled]) #range-slider input::-webkit-slider-thumb {\n        border-color: var(--uui-palette-mine-grey);\n      }\n\n      /** Mozilla */\n\n      input::-moz-range-thumb {\n        -moz-appearance: none;\n        pointer-events: all;\n        cursor: grab;\n        position: relative;\n        z-index: ${Z_INDEX.TOP};\n        width: ${THUMB_SIZE}px;\n        height: ${THUMB_SIZE}px;\n        border-radius: 24px;\n        overflow: visible;\n        border: 3px solid var(--color-interactive);\n        background-color: var(--uui-color-surface);\n        transition:\n          border-color 120ms,\n          border-width 120ms;\n      }\n      :host([disabled]) input::-moz-range-thumb,\n      :host([readonly]) input::-moz-range-thumb {\n        cursor: default;\n      }\n\n      input:focus-within::-moz-range-thumb,\n      input.focus::-moz-range-thumb {\n        border-color: var(--color-focus);\n        outline: 2px solid var(--color-focus);\n        outline-offset: 1px;\n      }\n      :host(:not([disabled]):not([readonly])) input::-moz-range-thumb:hover {\n        border-color: var(--color-hover);\n        border-width: 4px;\n      }\n\n      :host([disabled]) #range-slider input::-moz-range-thumb {\n        border-color: var(--uui-palette-mine-grey);\n      }\n    `,\n  ];\n}\n"],"names":["stepWidth"],"mappings":"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"}
+{"version":3,"file":"range-slider.element.js","names":["#transferValueToInternalValues","#onKeyDown"],"sources":["../../../src/components/range-slider/range-slider.element.ts"],"sourcesContent":["import { css, html, LitElement, svg } from 'lit';\nimport { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { UUIRangeSliderEvent } from './UUIRangeSliderEvent.js';\nimport { clamp } from '../../internal/utils/index.js';\n\nconst Z_INDEX = {\n  TOP: 3,\n  CENTER: 2,\n  BACK: 1,\n};\n\nconst THUMB_SIZE = 18;\nconst TRACK_HEIGHT = 3;\nconst TRACK_PADDING = 12;\nconst STEP_MIN_WIDTH = 24;\n\nconst CountDecimalPlaces = (num: number) => {\n  const decimalIndex = num.toString().indexOf('.');\n  return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;\n};\n\n// TODO: ability to focus on the range, to enable keyboard interaction to move the range.\n// TODO: Ability to click outside a range, to move the range if the maxGap has been reached.\n/**\n * @element uui-range-slider\n * @description - Range slider with two handles. Use uui-slider for a single handle.\n * @fires UUIRangeSliderEvent#input on input\n * @fires UUIRangeSliderEvent#change on change\n * @extends UUIFormControlMixin\n */\nexport class UUIRangeSliderElement extends UUIFormControlWithBasicsMixin(\n  LitElement,\n  '',\n) {\n  static readonly formAssociated = true;\n\n  /**\n   * Label to be used for aria-label and eventually as visual label. Adds \"low-end value\" and \"high-end value\" endings for the two values.\n   * @type {string}\n   * @attr\n   */\n  @property({ type: String })\n  label!: string;\n\n  /**\n   * Disables the input.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Sets the minimum allowed value.\n   * @type {number}\n   * @attr min\n   * @default 0\n   */\n  @property({ type: Number })\n  get min() {\n    return this._min;\n  }\n  set min(newVal) {\n    this._min = newVal;\n    this.#transferValueToInternalValues();\n  }\n  _min = 0;\n\n  /**\n   * Sets the maximum allowed value.\n   * @type {number}\n   * @attr max\n   * @default 100\n   */\n  @property({ type: Number })\n  get max() {\n    return this._max;\n  }\n  set max(newVal) {\n    this._max = newVal;\n    this.#transferValueToInternalValues();\n  }\n  _max = 0;\n\n  /**\n   * Hides the numbers representing the value of each steps. Dots will still be visible\n   * @type {boolean}\n   * @attr 'hide-step-values'\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-step-values' })\n  hideStepValues = false;\n\n  /**\n   * This reflects the behavior of a native input step attribute.\n   * @type {number}\n   * @attr\n   * @default 1\n   */\n  @property({ type: Number })\n  get step() {\n    return this._step;\n  }\n  set step(newVal) {\n    this._step = newVal;\n    this.#transferValueToInternalValues();\n  }\n  _step = 1;\n\n  /**\n   * Minimum value gap between the the two picked values. Cannot be lower than the step value and cannot be higher than the maximum gap\n   * @type {number}\n   * @attr min-gap\n   * @default undefined\n   */\n  @property({ type: Number, attribute: 'min-gap' })\n  get minGap() {\n    return this._minGap;\n  }\n  set minGap(newVal) {\n    this._minGap = newVal;\n    this.#transferValueToInternalValues();\n  }\n  _minGap?: number;\n\n  /**\n   * Maximum value gap between the the two picked values. Cannot be lower than the minimum gap.\n   * @type {number}\n   * @attr max-gap\n   * @default undefined\n   */\n  @property({ type: Number, attribute: 'max-gap' })\n  get maxGap() {\n    return this._maxGap;\n  }\n  set maxGap(newVal) {\n    this._maxGap = newVal;\n    this.#transferValueToInternalValues();\n  }\n  _maxGap?: number;\n\n  /**\n   * This is a value property of the uui-range-slider. Split the two values with comma, for example 10,50 sets the values to 10 and 50.\n   * @type {string}\n   * @attr\n   * @default 0,0\n   */\n  @property({ type: String })\n  get value() {\n    return super.value;\n  }\n  set value(newVal) {\n    super.value = newVal;\n    this.#transferValueToInternalValues();\n  }\n\n  private _currentFocus?: HTMLInputElement;\n\n  @state()\n  private _movement = false;\n\n  private startPoint = {\n    mouse: 0,\n    low: 0,\n    high: 0,\n  };\n\n  @state()\n  private _lowInputValue = 0;\n\n  @state()\n  private _highInputValue = 0;\n\n  @state()\n  private _trackWidth = 0;\n\n  @state()\n  _lowValuePercentStart = 0;\n  @state()\n  _highValuePercentEnd = 100;\n\n  protected setValueLow(low: number) {\n    // Clamp value to ensure it fits within its restrictions\n    const clampMin = this.maxGap\n      ? Math.max(this._highInputValue - this.maxGap, this.min)\n      : this.min;\n    const clampMax = this.minGap\n      ? this._highInputValue - this.minGap\n      : this._highInputValue - this.step;\n    low = clamp(low, clampMin, clampMax);\n    this.setValue(low, this._highInputValue);\n  }\n\n  protected setValueHigh(high: number) {\n    // Clamp value to ensure it fits within its restrictions\n    const clampMin = this.minGap\n      ? this._lowInputValue + this.minGap\n      : this._lowInputValue + this.step;\n    const clampMax = this.maxGap\n      ? Math.min(this.maxGap + this._lowInputValue, this.max)\n      : this.max;\n    high = clamp(high, clampMin, clampMax);\n    this.setValue(this._lowInputValue, high);\n  }\n\n  protected setValue(low: number, high: number, lockValueRange?: boolean) {\n    if (lockValueRange) {\n      // Get the length of the range\n      const length = this.startPoint.high - this.startPoint.low;\n\n      // Clamp values to make sure it keeps its length:\n      low = clamp(low, this.min, this.max - length);\n      high = clamp(high, this.min + length, this.max);\n    }\n\n    // Overwrite input value, to enforce the calculated value and avoid the native slider moving to a invalid position:\n    this._inputLow.value = low.toString();\n    this._inputHigh.value = high.toString();\n\n    this.value = `${low},${high}`;\n  }\n\n  #transferValueToInternalValues() {\n    const valueSplit = (this.value as string).split(',');\n    let low = Number(valueSplit[0]) || 0;\n    let high = Number(valueSplit[1]) || 0;\n\n    // First secure that the high value are within range (low does not need as its being handled below)\n    high = clamp(high, this._min, this._max);\n\n    // Make sure it matches the steps:\n    low = this._min + Math.round((low - this._min) / this._step) * this._step;\n    high = this._min + Math.round((high - this._min) / this._step) * this._step;\n\n    // Fit with gaps:\n    this._lowInputValue = clamp(\n      low,\n      this._min,\n      this._minGap ? high - this._minGap : high - this._step,\n    );\n    this._highInputValue = clamp(\n      high,\n      this._minGap\n        ? this._lowInputValue + this._minGap\n        : this._lowInputValue + this._step,\n      Math.min(this._maxGap ? low + this._maxGap : this._max, this._max),\n    );\n\n    this._updateInnerColor();\n    this.requestUpdate();\n  }\n\n  protected getFormElement(): HTMLInputElement {\n    return this._currentFocus ?? this._inputLow;\n  }\n\n  async focus() {\n    await this.updateComplete;\n    this.getFormElement().focus();\n  }\n  async blur() {\n    await this.updateComplete;\n    this.getFormElement().blur();\n  }\n\n  /** Elements */\n\n  @query('#range-slider')\n  private readonly _outerTrack!: HTMLElement;\n\n  @query('#inputLow')\n  private readonly _inputLow!: HTMLInputElement;\n\n  @query('#inputHigh')\n  private readonly _inputHigh!: HTMLInputElement;\n\n  @query('.color')\n  private readonly _innerColor!: HTMLElement;\n\n  @query('#inner-color-thumb')\n  private readonly _innerColorThumb!: HTMLElement;\n\n  /** Constructor and Validator */\n\n  constructor() {\n    super();\n    // Keyboard\n    this.addEventListener('keydown', this.#onKeyDown);\n    // Mouse\n    this.addEventListener('mousedown', this._onMouseDown);\n    // Touch\n    this.addEventListener('touchstart', this._onTouchStart);\n\n    window.addEventListener('resize', () => {\n      this._trackWidth = this._outerTrack?.offsetWidth;\n    });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.value) {\n      // Lack value. Defaulting to the min and max attributes\n      this.value = `${this._min},${this._max}`;\n    }\n  }\n\n  firstUpdated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    this._trackWidth = this._outerTrack.offsetWidth;\n    this._runPropertiesChecks();\n  }\n\n  private _runPropertiesChecks() {\n    // Note: We are checking if the attributes set makes any sense.\n\n    const regex = new RegExp(/^-?\\d+(\\.\\d+)?,-?\\d+(\\.\\d+)?$/); // regex: Number Comma Number (optional: decimals and negatives)\n    if (!regex.test(this.value as string))\n      console.error(`Range slider (Value error occurred): Bad input`);\n\n    if (this._highInputValue === this._lowInputValue) {\n      console.error(\n        `Range slider (Value error occurred): Low-end and high-end value should never be equal. Use <uui-slider></uui-slider> instead.`,\n      );\n    }\n\n    if (this._lowInputValue > this._highInputValue) {\n      console.error(\n        `Range slider (Value error occurred): Low-end value should never be higher than high-end value.`,\n      );\n    }\n\n    if (this._highInputValue > this._max || this._highInputValue < this._min) {\n      this.setValueHigh(this._max);\n      console.warn(\n        `Conflict with the high-end value and max value. High-end value has been converted to the max value (${this._max})`,\n      );\n    }\n\n    if (this._lowInputValue < this._min || this._lowInputValue > this._max) {\n      this.setValueLow(this._min);\n      console.warn(\n        `Conflict with the low-end value and min value. Low-end value has been converted to the min value (${this._min})`,\n      );\n    }\n\n    // Step vs value logic\n    if (this._step <= 0) {\n      this._step = 1;\n      console.warn(\n        `Property step needs a value higher than 0. Converted the step value to 1 (default)`,\n      );\n    }\n\n    if (((this._max - this._min) / this._step) % 1 !== 0) {\n      console.error(\n        `Conflict with step value and the min and max values. May experience bad side effects`,\n      );\n    }\n\n    this._runGapChecks();\n  }\n\n  private _runGapChecks() {\n    if (this._minGap && this._minGap < this._step) {\n      this._minGap = undefined;\n      console.warn(\n        `Conflict with min-gap and step value. The min-gap needs to be higher than the step value. Removed the min-gap property.`,\n      );\n    }\n\n    if (this._minGap && this._maxGap && this._minGap > this._maxGap) {\n      this._minGap = undefined;\n      this._maxGap = undefined;\n      console.warn(\n        `Conflict with min-gap and max-gap. Removed the min-gap and max-gap properties.`,\n      );\n    }\n\n    if (this._minGap && this._max - this._min < this._minGap) {\n      this._minGap = undefined;\n      console.warn(\n        `Conflict with the min-gap and the total range. Removed the min-gap.`,\n      );\n    }\n\n    if (\n      this._maxGap &&\n      this._highInputValue - this._lowInputValue > this._maxGap\n    ) {\n      this.setValueHigh(this._lowInputValue + this._maxGap);\n      console.warn(\n        `Conflict with value and max-gap. High-end value has been converted to the highest possible value based on the low-end value and the max gap value (${this._highInputValue})`,\n      );\n    }\n\n    if (\n      this._minGap &&\n      this._highInputValue - this._lowInputValue < this._minGap\n    ) {\n      const minGap = this._minGap;\n      if (this._highInputValue - minGap < this._min) {\n        this.setValueHigh(this._lowInputValue + minGap);\n        console.warn(\n          `Conflict with value and min gap. High-end value has been converted to the lowest possible value based on the low-end value and the min gap value (${this._highInputValue}).`,\n        );\n      } else {\n        this.setValueLow(this._highInputValue - minGap);\n        console.warn(\n          `Conflict with value and min gap. Low-end value has been converted to the highest possible value based on the high-end value and the min gap value (${this._lowInputValue}).`,\n        );\n      }\n    }\n  }\n\n  private _updateInnerColor() {\n    const scopeLength = this._max - this._min;\n    const scopedLow = this._lowInputValue - this._min;\n    const scopedHigh = this._highInputValue - this._min;\n\n    const leftPercent = (scopedLow / scopeLength) * 100;\n    const rightPercent = 100 - (scopedHigh / scopeLength) * 100;\n\n    this._lowValuePercentStart = clamp(leftPercent, 0, 100);\n    this._highValuePercentEnd = clamp(rightPercent, 0, 100);\n  }\n\n  private _getClickedValue(pageX: number) {\n    const outerTrackMargin = this._outerTrack.getBoundingClientRect().left;\n    const mouseXPosition = pageX - outerTrackMargin - TRACK_PADDING;\n    const clickPercent =\n      mouseXPosition / (this._trackWidth - TRACK_PADDING * 2);\n\n    const clickedValue = clickPercent * (this._max - this._min) + this._min;\n    return Math.round(clickedValue / this._step) * this._step;\n  }\n\n  /** Events */\n\n  readonly #onKeyDown = (e: KeyboardEvent) => {\n    if (e.key == 'Enter') {\n      this.submit();\n    }\n  };\n\n  /** Touch Event */\n  private readonly _onTouchStart = (e: TouchEvent) => {\n    if (this.disabled) return;\n\n    const target = e.composedPath()[0];\n    if (target === this._outerTrack) return;\n    //Clicked on the inner track.\n\n    if (target === this._innerColor || target === this._innerColorThumb) {\n      // If we clicked in the colored area\n\n      window.addEventListener('touchend', this._onTouchEnd);\n      window.addEventListener('touchcancel', this._onTouchEnd);\n      window.addEventListener('touchmove', this._onTouchMove);\n\n      this._movement = true;\n      this._saveStartPoints(e.touches[0].pageX);\n    } else {\n      // Else move just 1 thumb\n      const value = this._getClickedValue(e.touches[0].pageX);\n      const diffLow = Math.abs(this._lowInputValue - value);\n      const diffHigh = Math.abs(this._highInputValue - value);\n      if (diffLow < diffHigh) {\n        this.setValueLow(value);\n      } else {\n        this.setValueHigh(value);\n      }\n    }\n  };\n\n  private readonly _onTouchMove = (e: TouchEvent) => {\n    this._dragBothValuesByMousePos(e.touches[0].pageX);\n  };\n\n  private readonly _onTouchEnd = () => {\n    this._movement = false;\n    this.onChanged();\n    window.removeEventListener('touchend', this._onTouchEnd);\n    window.removeEventListener('touchcancel', this._onTouchEnd);\n    window.removeEventListener('touchmove', this._onTouchMove);\n  };\n\n  /** Mouse Event */\n  private readonly _onMouseDown = (e: MouseEvent) => {\n    if (this.disabled) return;\n    if (this.readonly) return;\n\n    const target = e.composedPath()[0];\n    if (target === this._outerTrack) return;\n    //Clicked on the inner track.\n\n    if (target === this._innerColor || target === this._innerColorThumb) {\n      // If we clicked in the colored area\n      window.addEventListener('mouseup', this._onMouseUp);\n      window.addEventListener('mousemove', this._onMouseMove);\n\n      this._movement = true;\n      this._saveStartPoints(e.pageX);\n    } else {\n      // Else move just 1 thumb\n      const value = this._getClickedValue(e.pageX);\n      const diffLow = Math.abs(this._lowInputValue - value);\n      const diffHigh = Math.abs(this._highInputValue - value);\n      if (diffLow < diffHigh) {\n        this.setValueLow(value);\n      } else {\n        this.setValueHigh(value);\n      }\n    }\n  };\n\n  private readonly _onMouseMove = (e: MouseEvent) => {\n    e.preventDefault();\n    this._dragBothValuesByMousePos(e.pageX);\n  };\n\n  private readonly _onMouseUp = () => {\n    this._movement = false;\n    this.onChanged();\n    window.removeEventListener('mouseup', this._onMouseUp);\n    window.removeEventListener('mousemove', this._onMouseMove);\n  };\n\n  /** Drag both thumbs logics */\n  private _saveStartPoints(pageX: number) {\n    this.startPoint = {\n      mouse: pageX,\n      low: this._lowInputValue,\n      high: this._highInputValue,\n    };\n  }\n\n  private _dragBothValuesByMousePos(pageX: number) {\n    const trackWidth = this._outerTrack.offsetWidth;\n\n    const drag = pageX - this.startPoint.mouse;\n    const trackDiff = this._max - this._min;\n\n    const dragPercent = drag / (trackWidth + TRACK_PADDING * 2);\n    const dragValue =\n      Math.round((dragPercent * trackDiff) / this._step) * this._step;\n\n    const newValueLow = this.startPoint.low + dragValue;\n    const newValueHigh = this.startPoint.high + dragValue;\n\n    this.setValue(newValueLow, newValueHigh, true);\n    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));\n  }\n\n  /** Input Events */\n  private _onLowInput(e: Event) {\n    if (this.disabled) e.preventDefault();\n    if (this.readonly) e.preventDefault();\n\n    this._currentFocus = this._inputLow;\n    const newValue = Number((e.target as HTMLInputElement).value);\n\n    this.setValueLow(newValue);\n    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));\n  }\n\n  private _onHighInput(e: Event) {\n    if (this.disabled) e.preventDefault();\n    if (this.readonly) e.preventDefault();\n\n    this._currentFocus = this._inputHigh;\n    const newValue = Number((e.target as HTMLInputElement).value);\n\n    this.setValueHigh(newValue);\n    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.INPUT));\n  }\n\n  /** Change Events */\n  private _onLowChange() {\n    this.setValueLow(Number(this._inputLow.value));\n    this.onChanged();\n  }\n\n  private _onHighChange() {\n    this.setValueHigh(Number(this._inputHigh.value));\n    this.onChanged();\n  }\n\n  protected onChanged() {\n    this.pristine = false;\n    this.dispatchEvent(new UUIRangeSliderEvent(UUIRangeSliderEvent.CHANGE));\n  }\n\n  /** Render */\n\n  render() {\n    return html`\n      <div id=\"range-slider\">\n        ${this._renderNativeInputs()}\n        <div id=\"inner-track\">\n          <div\n            id=\"inner-color-thumb\"\n            class=\"${this._movement ? 'active' : ''}\"\n            style=\"left: ${this._lowValuePercentStart}%; right: ${this\n              ._highValuePercentEnd}%\">\n            ${this._renderThumbValues()}\n            <div class=\"${this._movement ? 'color active' : 'color'}\"></div>\n          </div>\n          ${this._renderSteps()}\n        </div>\n      </div>\n    `;\n  }\n\n  private _renderThumbValues() {\n    return html`<div class=\"thumb-values\">\n      <span\n        ><span\n          >${this._lowInputValue.toFixed(CountDecimalPlaces(this._step))}</span\n        ></span\n      >\n      <span\n        ><span\n          >${this._highInputValue.toFixed(CountDecimalPlaces(this._step))}</span\n        ></span\n      >\n    </div>`;\n  }\n\n  private _renderSteps() {\n    const stepAmount = (this._max - this._min) / this._step;\n    const stepWidth = (this._trackWidth - TRACK_PADDING * 2) / stepAmount;\n\n    if (stepWidth < STEP_MIN_WIDTH) return;\n    if (stepAmount % 1 !== 0) return;\n\n    let index = 0;\n    const stepPositions = new Array(stepAmount + 1)\n      .fill(stepWidth)\n      .map(stepWidth => stepWidth * index++);\n\n    return html`<div class=\"step-wrapper\">\n      <svg height=\"100%\" width=\"100%\">\n        <rect x=\"9\" y=\"9\" height=\"${TRACK_HEIGHT}\" rx=\"2\" />\n        ${this._renderStepCircles(stepPositions)}\n      </svg>\n      ${this._renderStepValues(stepAmount)}\n    </div>`;\n  }\n\n  private _renderStepValues(stepAmount: number) {\n    if (this.hideStepValues || stepAmount > 20) return;\n\n    let index = 0;\n    const stepValues = new Array(stepAmount + 1)\n      .fill(this._step)\n      .map(step =>\n        (this._min + step * index++).toFixed(CountDecimalPlaces(this._step)),\n      );\n\n    return html`<div class=\"step-values\">\n      ${stepValues.map(value => html`<span><span>${value}</span></span>`)}\n    </div>`;\n  }\n\n  private _renderStepCircles(stepPositionArray: Array<number>) {\n    const trackValue = this._trackWidth / (this._max - this._min);\n\n    return svg`${stepPositionArray.map(position => {\n      const cx = position + TRACK_PADDING;\n      const colorStart = this._lowInputValue - this._min;\n      const colorEnd = this._highInputValue - this._min;\n\n      if (cx / trackValue >= colorStart && cx / trackValue <= colorEnd) {\n        return svg`<circle class=\"track-step filled\" cx=\"${cx}\" cy=\"${TRACK_HEIGHT * 2}\" r=\"4.5\" />`;\n      } else {\n        return svg`<circle class=\"track-step regular\" cx=\"${cx}\" cy=\"${TRACK_HEIGHT * 2}\" r=\"4.5\" />`;\n      }\n    })}`;\n  }\n\n  private _renderNativeInputs() {\n    return html` <div class=\"native-wrapper\">\n      <input\n        id=\"inputLow\"\n        class=\"${this._movement ? 'focus' : ''}\"\n        type=\"range\"\n        min=${this._min}\n        max=${this._max}\n        step=${this._step}\n        .value=${this._lowInputValue.toString()}\n        aria-label=\"${this.label} low-end value\"\n        ?disabled=\"${this.disabled || this.readonly}\"\n        @input=${this._onLowInput}\n        @change=${this._onLowChange} />\n      <input\n        id=\"inputHigh\"\n        class=\"${this._movement ? 'focus' : ''}\"\n        type=\"range\"\n        min=\"${this._min}\"\n        max=\"${this._max}\"\n        step=\"${this._step}\"\n        .value=${this._highInputValue.toString()}\n        aria-label=\"${this.label} high-end value\"\n        ?disabled=\"${this.disabled || this.readonly}\"\n        @input=${this._onHighInput}\n        @change=${this._onHighChange} />\n    </div>`;\n  }\n\n  /** Style */\n  static override readonly styles = [\n    css`\n      :host {\n        --color-interactive: var(--uui-color-selected);\n        --color-hover: var(--uui-color-selected-emphasis);\n        --color-focus: var(--uui-color-focus);\n        min-height: 30px;\n      }\n\n      :host([error]) {\n        --color-interactive: var(--uui-color-invalid-standalone);\n        --color-hover: var(--uui-color-invalid);\n      }\n\n      #range-slider {\n        min-height: 30px;\n        box-sizing: border-box;\n        position: relative;\n        display: flex;\n        align-items: center;\n      }\n\n      /** Track */\n\n      #inner-track {\n        user-select: none;\n        background-color: var(--uui-color-border-standalone);\n        position: absolute;\n        height: ${TRACK_HEIGHT}px;\n        left: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n        right: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n      }\n\n      :host(:not([disabled]):not([readonly]):hover) #inner-track,\n      :host(:not([disabled]):not([readonly]):active) #inner-track {\n        background-color: var(--uui-color-border-emphasis);\n      }\n\n      #inner-color-thumb {\n        margin: -9px 0 0;\n        position: absolute;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        height: ${THUMB_SIZE}px;\n        cursor: grab;\n        user-select: none;\n        z-index: ${Z_INDEX.CENTER};\n      }\n\n      :host([disabled]) #inner-color-thumb,\n      :host([readonly]) #inner-color-thumb {\n        cursor: default;\n      }\n\n      /** Colored part of track */\n\n      :host([disabled]) #range-slider #inner-color-thumb .color {\n        background-color: var(--uui-palette-mine-grey) !important;\n      }\n\n      #inner-color-thumb:focus .color {\n        background-color: var(--color-focus);\n      }\n\n      #inner-color-thumb:hover .color,\n      #inner-color-thumb .color.active {\n        background-color: var(--color-hover);\n      }\n\n      :host(:not([readonly])) #inner-color-thumb:hover .color {\n        height: ${TRACK_HEIGHT + 2}px;\n        background-color: var(--color-hover);\n        transform: translateY(-1px);\n      }\n\n      .color {\n        user-select: none;\n        position: absolute;\n        inset-inline: 0;\n        height: ${TRACK_HEIGHT}px;\n        top: 50%;\n        transform: translateY(0);\n        background-color: var(--color-interactive);\n        transition:\n          height 60ms,\n          transform 60ms,\n          background-color 120ms;\n      }\n\n      :host([error]) .color {\n        background-color: var(--uui-color-invalid-standalone);\n      }\n      :host([error]:not([disabled]):not([readonly]))\n        #inner-color-thumb:hover\n        ~ .color,\n      :host([error]:not([disabled]):not([readonly]))\n        #inner-color-thumb:focus\n        ~ .color {\n        background-color: var(--uui-color-invalid-emphasis);\n      }\n\n      /** Steps */\n      .step-wrapper {\n        margin: 0 ${-1 * TRACK_PADDING}px;\n        height: 10.5px;\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: -9px;\n      }\n\n      /** Step circles */\n      .track-step {\n        fill: var(--uui-color-border);\n      }\n\n      :host(:not([disabled]):not([readonly]):hover)\n        #inner-track\n        .track-step.regular,\n      :host(:not([disabled]):not([readonly]):active)\n        #inner-track\n        .track-step.regular {\n        fill: var(--uui-color-border-emphasis);\n      }\n\n      :host .track-step.filled {\n        fill: var(--color-interactive);\n      }\n\n      :host([error]) .track-step.filled {\n        fill: var(--uui-color-invalid-emphasis);\n      }\n\n      :host #inner-color-thumb.active ~ .step-wrapper .track-step.filled,\n      :host(:not([disabled]):not([readonly]))\n        #inner-color-thumb:hover\n        ~ .step-wrapper\n        .track-step.filled {\n        fill: var(--color-hover);\n      }\n\n      :host(:not([disabled]):not([readonly])):has(#inner-color-thumb:hover)\n        input::-moz-range-thumb {\n        border-color: var(--color-hover);\n        border-width: 4px;\n      }\n      :host(:not([disabled]):not([readonly])):has(#inner-color-thumb:hover)\n        input::-webkit-slider-thumb {\n        border-color: var(--color-hover);\n        border-width: 4px;\n      }\n\n      :host([disabled]) #range-slider .track-step.filled {\n        fill: var(--uui-palette-mine-grey) !important;\n      }\n\n      /** Step values */\n\n      .step-values {\n        box-sizing: border-box;\n        margin: 0 ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n        display: flex;\n        justify-content: space-between;\n        font-size: var(--uui-type-small-size);\n      }\n\n      .step-values > span {\n        position: relative;\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      :host(:not([disabled]):not([readonly]):hover) .step-values > span,\n      :host(:not([disabled]):not([readonly]):active) .step-values > span {\n        color: var(--uui-color-border-emphasis);\n      }\n\n      .step-values > span > span {\n        position: absolute;\n        transform: translateX(-50%);\n      }\n\n      /** Input */\n\n      .native-wrapper {\n        position: relative;\n        width: 100%;\n        inset-inline: 0px;\n        margin: -22px 5px 0 1px;\n      }\n\n      input {\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n        pointer-events: none;\n        position: absolute;\n        cursor: pointer;\n        background-color: transparent;\n        inset-inline: 0;\n        width: 100%;\n        border-radius: 20px;\n      }\n\n      input:focus-within {\n        outline: none;\n      }\n\n      /** Thumb values */\n      .thumb-values {\n        box-sizing: border-box;\n        display: flex;\n        justify-content: space-between;\n        color: var(--color-interactive);\n        font-weight: bold;\n        transition: 120ms opacity;\n        opacity: 0;\n      }\n\n      .thumb-values > span {\n        width: 0;\n      }\n\n      .thumb-values > span > span {\n        bottom: 15px;\n        position: absolute;\n        transform: translateX(-50%);\n      }\n\n      :host([disabled]) .thumb-values {\n        color: var(--uui-palette-mine-grey);\n      }\n\n      :host([readonly]) .thumb-values {\n        opacity: 1;\n      }\n\n      :host(:not([disabled]):not([readonly]))\n        #range-slider:hover\n        .thumb-values {\n        opacity: 1;\n      }\n\n      /** Native thumbs */\n      /** Chrome */\n      input::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        pointer-events: all;\n        cursor: grab;\n        position: relative;\n        z-index: ${Z_INDEX.TOP};\n        width: ${THUMB_SIZE}px;\n        height: ${THUMB_SIZE}px;\n        border-radius: 24px;\n        overflow: visible;\n        border: 3px solid var(--color-interactive);\n        background-color: var(--uui-color-surface);\n        transition:\n          border-color 120ms,\n          border-width 120ms;\n      }\n\n      :host([disabled]) input::-webkit-slider-thumb,\n      :host([readonly]) input::-webkit-slider-thumb {\n        cursor: default;\n      }\n\n      input:focus-within::-webkit-slider-thumb,\n      input.focus::-webkit-slider-thumb {\n        border-color: var(--color-focus);\n        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid\n          var(--uui-color-focus);\n        outline-offset: 1px;\n      }\n      :host(:not([disabled]):not([readonly]))\n        input::-webkit-slider-thumb:hover {\n        border-color: var(--color-hover);\n        border-width: 4px;\n      }\n\n      :host([disabled]) #range-slider input::-webkit-slider-thumb {\n        border-color: var(--uui-palette-mine-grey);\n      }\n\n      /** Mozilla */\n\n      input::-moz-range-thumb {\n        -moz-appearance: none;\n        pointer-events: all;\n        cursor: grab;\n        position: relative;\n        z-index: ${Z_INDEX.TOP};\n        width: ${THUMB_SIZE}px;\n        height: ${THUMB_SIZE}px;\n        border-radius: 24px;\n        overflow: visible;\n        border: 3px solid var(--color-interactive);\n        background-color: var(--uui-color-surface);\n        transition:\n          border-color 120ms,\n          border-width 120ms;\n      }\n      :host([disabled]) input::-moz-range-thumb,\n      :host([readonly]) input::-moz-range-thumb {\n        cursor: default;\n      }\n\n      input:focus-within::-moz-range-thumb,\n      input.focus::-moz-range-thumb {\n        border-color: var(--color-focus);\n        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid\n          var(--uui-color-focus);\n        outline-offset: 1px;\n      }\n      :host(:not([disabled]):not([readonly])) input::-moz-range-thumb:hover {\n        border-color: var(--color-hover);\n        border-width: 4px;\n      }\n\n      :host([disabled]) #range-slider input::-moz-range-thumb {\n        border-color: var(--uui-palette-mine-grey);\n      }\n    `,\n  ];\n}\n"],"mappings":"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"}

package/dist/components/range-slider/range-slider.js

@@ -1,10 +1,9 @@
 import { defineElement } from "../../internal/registration/index.js";
-import { UUIRangeSliderElement } from "./range-slider.element.js";
 import { UUIRangeSliderEvent } from "./UUIRangeSliderEvent.js";
+import { UUIRangeSliderElement } from "./range-slider.element.js";
+//#region src/components/range-slider/range-slider.ts
 defineElement("uui-range-slider", UUIRangeSliderElement);
-export {
-  UUIRangeSliderElement,
-  UUIRangeSliderEvent,
-  UUIRangeSliderElement as default
-};
-//# sourceMappingURL=range-slider.js.map
+//#endregion
+export { UUIRangeSliderElement, UUIRangeSliderEvent };
+
+//# sourceMappingURL=range-slider.js.map

package/dist/components/range-slider/range-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-slider.js","sources":["../../../src/components/range-slider/range-slider.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIRangeSliderElement } from './range-slider.element.js';\n\ndefineElement('uui-range-slider', UUIRangeSliderElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-range-slider': UUIRangeSliderElement;\n  }\n}\n\nexport * from './range-slider.element.js';\nexport * from './UUIRangeSliderEvent.js';\nexport { UUIRangeSliderElement as default } from './range-slider.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,oBAAoB,qBAAqB;"}
+{"version":3,"file":"range-slider.js","names":[],"sources":["../../../src/components/range-slider/range-slider.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIRangeSliderElement } from './range-slider.element.js';\n\ndefineElement('uui-range-slider', UUIRangeSliderElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-range-slider': UUIRangeSliderElement;\n  }\n}\n\nexport * from './range-slider.element.js';\nexport * from './UUIRangeSliderEvent.js';\n"],"mappings":";;;;AAGA,cAAc,oBAAoB,qBAAqB"}

package/dist/components/ref/UUIRefEvent.js

@@ -1,9 +1,11 @@
 import { UUIEvent } from "../../internal/events/UUIEvent.js";
-const _UUIRefEvent = class _UUIRefEvent extends UUIEvent {
+//#region src/components/ref/UUIRefEvent.ts
+var UUIRefEvent = class extends UUIEvent {
+	static {
+		this.OPEN = "open";
+	}
 };
-_UUIRefEvent.OPEN = "open";
-let UUIRefEvent = _UUIRefEvent;
-export {
-  UUIRefEvent
-};
-//# sourceMappingURL=UUIRefEvent.js.map
+//#endregion
+export { UUIRefEvent };
+
+//# sourceMappingURL=UUIRefEvent.js.map

package/dist/components/ref/UUIRefEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UUIRefEvent.js","sources":["../../../src/components/ref/UUIRefEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIRefElement } from './ref.element.js';\n\nexport class UUIRefEvent extends UUIEvent<{}, UUIRefElement> {\n  public static readonly OPEN = 'open';\n}\n"],"names":[],"mappings":";AAGO,MAAM,eAAN,MAAM,qBAAoB,SAA4B;AAE7D;AADE,aAAuB,OAAO;AADzB,IAAM,cAAN;"}
+{"version":3,"file":"UUIRefEvent.js","names":[],"sources":["../../../src/components/ref/UUIRefEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIRefElement } from './ref.element.js';\n\nexport class UUIRefEvent extends UUIEvent<{}, UUIRefElement> {\n  public static readonly OPEN = 'open';\n}\n"],"mappings":";;AAGA,IAAa,cAAb,cAAiC,SAA4B;;cAC7B;;AAChC"}

package/dist/components/ref/ref.d.ts

@@ -6,4 +6,3 @@ declare global {
 }
 export * from './ref.element.js';
 export * from './UUIRefEvent.js';
-export { UUIRefElement as default } from './ref.element.js';

package/dist/components/ref/ref.element.js

@@ -1,39 +1,39 @@
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { SelectableMixin } from "../../internal/mixins/SelectableMixin.js";
+import { SelectOnlyMixin } from "../../internal/mixins/SelectOnlyMixin.js";
+import { UUIRefEvent } from "./UUIRefEvent.js";
 import { LitElement, css } from "lit";
 import { property } from "lit/decorators.js";
-import { UUIRefEvent } from "./UUIRefEvent.js";
-import { SelectOnlyMixin } from "../../internal/mixins/SelectOnlyMixin.js";
-import { SelectableMixin } from "../../internal/mixins/SelectableMixin.js";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const _UUIRefElement = class _UUIRefElement extends SelectOnlyMixin(
-  SelectableMixin(LitElement)
-) {
-  constructor() {
-    super(...arguments);
-    this.disabled = false;
-    this.readonly = false;
-    this.error = false;
-  }
-  handleOpenClick(e) {
-    e.stopPropagation();
-    this.dispatchEvent(new UUIRefEvent(UUIRefEvent.OPEN));
-  }
-  handleOpenKeydown(e) {
-    if (e.key !== " " && e.key !== "Enter") return;
-    e.preventDefault();
-    e.stopPropagation();
-    this.dispatchEvent(new UUIRefEvent(UUIRefEvent.OPEN));
-  }
-};
-_UUIRefElement.styles = [
-  css`
+//#region src/components/ref/ref.element.ts
+/**
+*  @element uui-ref
+*  @fires {UUIRefEvent} open - fires when the ref is opened
+*  @fires {UUISelectableEvent} selected - fires when the ref is selected
+*  @fires {UUISelectableEvent} deselected - fires when the ref is deselected
+*  @description - Base ref component to be extended by specific ref elements. Does not have a tag.
+*  @attr {boolean} [disabled=false] - Set to true to disable
+*  @attr {boolean} [error=false] - Set to true to display error state
+*  @attr {boolean} [standalone=false] - Set to true to make element stand out
+*/
+var UUIRefElement = class extends SelectOnlyMixin(SelectableMixin(LitElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.readonly = false;
+		this.error = false;
+	}
+	handleOpenClick(e) {
+		e.stopPropagation();
+		this.dispatchEvent(new UUIRefEvent(UUIRefEvent.OPEN));
+	}
+	handleOpenKeydown(e) {
+		if (e.key !== " " && e.key !== "Enter") return;
+		e.preventDefault();
+		e.stopPropagation();
+		this.dispatchEvent(new UUIRefEvent(UUIRefEvent.OPEN));
+	}
+	static {
+		this.styles = [css`
       :host {
         position: relative;
         display: flex;
@@ -159,7 +159,8 @@ _UUIRefElement.styles = [
       a:focus {
         outline-offset: var(--uui-card-border-width);
         border-radius: var(--uui-border-radius);
-        outline: 2px solid var(--uui-color-focus);
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
       }
 
       slot[name='actions']::slotted(*) {
@@ -205,20 +206,24 @@ _UUIRefElement.styles = [
         display: flex;
         justify-content: flex-end;
         align-items: center;
+        flex-shrink: 0;
       }
-    `
-];
-let UUIRefElement = _UUIRefElement;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIRefElement.prototype, "disabled");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIRefElement.prototype, "readonly");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIRefElement.prototype, "error");
-export {
-  UUIRefElement
+    `];
+	}
 };
-//# sourceMappingURL=ref.element.js.map
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIRefElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIRefElement.prototype, "readonly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIRefElement.prototype, "error", void 0);
+//#endregion
+export { UUIRefElement };
+
+//# sourceMappingURL=ref.element.js.map

package/dist/components/ref/ref.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"ref.element.js","sources":["../../../src/components/ref/ref.element.ts"],"sourcesContent":["import { LitElement, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n  SelectableMixin,\n  SelectOnlyMixin,\n} from '../../internal/mixins/index.js';\nimport { UUIRefEvent } from './UUIRefEvent.js';\n\n/**\n *  @element uui-ref\n *  @fires {UUIRefEvent} open - fires when the ref is opened\n *  @fires {UUISelectableEvent} selected - fires when the ref is selected\n *  @fires {UUISelectableEvent} deselected - fires when the ref is deselected\n *  @description - Base ref component to be extended by specific ref elements. Does not have a tag.\n *  @attr {boolean} [disabled=false] - Set to true to disable\n *  @attr {boolean} [error=false] - Set to true to display error state\n *  @attr {boolean} [standalone=false] - Set to true to make element stand out\n */\n\nexport class UUIRefElement extends SelectOnlyMixin(\n  SelectableMixin(LitElement),\n) {\n  /**\n   * Set tot true to disable\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Set to true to display error state\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  protected handleOpenClick(e: Event) {\n    e.stopPropagation();\n    this.dispatchEvent(new UUIRefEvent(UUIRefEvent.OPEN));\n  }\n  protected handleOpenKeydown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n    e.preventDefault();\n    e.stopPropagation();\n    this.dispatchEvent(new UUIRefEvent(UUIRefEvent.OPEN));\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        width: 100%;\n        font-size: var(--uui-font-size);\n\n        box-sizing: border-box;\n        border-radius: var(--uui-border-radius);\n        background-color: var(--uui-color-surface);\n        --uui-card-before-opacity: 0;\n        transition: --uui-card-before-opacity 120ms;\n      }\n\n      :host([selectable]:focus-visible) {\n        outline-color: var(--uui-color-focus);\n        outline-width: var(--uui-card-border-width);\n        outline-style: solid;\n        outline-offset: var(--uui-card-border-width);\n      }\n\n      :host([error]) {\n        border: 1px solid var(--uui-color-invalid);\n      }\n\n      :host([standalone]) {\n        border: 1px solid var(--uui-color-border);\n      }\n\n      :host([selectable]) {\n        cursor: pointer;\n      }\n      :host([selectable]) #select-border {\n        position: absolute;\n        z-index: 2;\n        top: -2px;\n        left: -2px;\n        right: -2px;\n        bottom: -2px;\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity 120ms;\n      }\n      :host([selectable]) #select-border::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        border: 2px solid var(--uui-color-selected);\n        border-radius: calc(var(--uui-border-radius) + 2px);\n        box-shadow:\n          0 0 4px 0 var(--uui-color-selected),\n          inset 0 0 2px 0 var(--uui-color-selected);\n      }\n      :host([selected]) #select-border {\n        opacity: 1;\n      }\n      :host([selectable]:not([selected]):hover) #select-border {\n        opacity: 0.33;\n      }\n      :host([selectable][selected]:hover) #select-border {\n        opacity: 0.8;\n      }\n\n      :host([selectable]:not([selected])) #open-part:hover + #select-border {\n        opacity: 0;\n      }\n      :host([selectable][selected]) #open-part:hover + #select-border {\n        opacity: 1;\n      }\n\n      :host([selectable]:not([selected]):hover) #select-border::after {\n        animation: not-selected--hover 1.2s infinite;\n      }\n      @keyframes not-selected--hover {\n        0%,\n        100% {\n          opacity: 0.66;\n        }\n        50% {\n          opacity: 1;\n        }\n      }\n\n      :host([selectable][selected]:hover) #select-border::after {\n        animation: selected--hover 1.4s infinite;\n      }\n      @keyframes selected--hover {\n        0%,\n        100% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.66;\n        }\n      }\n      :host([selectable]) #open-part:hover + #select-border::after {\n        animation: none;\n      }\n\n      :host([select-only]) *,\n      :host([select-only]) ::slotted(*) {\n        pointer-events: none;\n      }\n\n      button {\n        font-size: inherit;\n        font-family: inherit;\n        border: 0;\n        padding: 0;\n        background-color: transparent;\n        text-align: left;\n        color: var(--uui-color-text);\n      }\n      a {\n        text-decoration: none;\n        color: inherit;\n      }\n\n      button:focus,\n      a:focus {\n        outline-offset: var(--uui-card-border-width);\n        border-radius: var(--uui-border-radius);\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      slot[name='actions']::slotted(*) {\n        --uui-button-height: calc(var(--uui-size-2) * 4);\n      }\n\n      slot[name='actions']::slotted(*:first-child) {\n        margin-right: var(--uui-size-2);\n      }\n      slot[name='actions'] {\n        display: flex;\n        align-items: center;\n      }\n      #tag-container::slotted(*:first-child) {\n        margin: calc(var(--uui-size-2));\n      }\n      #actions-container::slotted(*:first-child) {\n        margin: calc(var(--uui-size-2));\n      }\n      #actions-container {\n        opacity: 0;\n        transition: opacity 120ms;\n      }\n      :host(:hover) #actions-container,\n      :host(:focus) #actions-container,\n      :host(:focus-within) #actions-container {\n        opacity: 1;\n      }\n\n      :host([standalone]:not([disabled]):hover) {\n        border-color: var(--uui-color-border-emphasis);\n      }\n\n      :host([disabled]) #open-part {\n        cursor: default;\n      }\n\n      :host([standalone][disabled]) {\n        border-color: var(--uui-color-disabled-standalone);\n      }\n\n      slot[name='tag'] {\n        display: flex;\n        justify-content: flex-end;\n        align-items: center;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAmBO,MAAM,iBAAN,MAAM,uBAAsB;AAAA,EACjC,gBAAgB,UAAU;AAC5B,EAAE;AAAA,EAFK,cAAA;AAAA,UAAA,GAAA,SAAA;AAUL,SAAA,WAAW;AASX,SAAA,WAAW;AASX,SAAA,QAAQ;AAAA,EAAA;AAAA,EAEE,gBAAgB,GAAU;AAClC,MAAE,gBAAA;AACF,SAAK,cAAc,IAAI,YAAY,YAAY,IAAI,CAAC;AAAA,EACtD;AAAA,EACU,kBAAkB,GAAkB;AAC5C,QAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,QAAS;AACxC,MAAE,eAAA;AACF,MAAE,gBAAA;AACF,SAAK,cAAc,IAAI,YAAY,YAAY,IAAI,CAAC;AAAA,EACtD;AAkLF;AAhLE,eAAyB,SAAS;AAAA,EAChC;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;AA1CG,IAAM,gBAAN;AAUL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAT/B,cAUX,WAAA,UAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAlB/B,cAmBX,WAAA,UAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA3B/B,cA4BX,WAAA,OAAA;"}
+{"version":3,"file":"ref.element.js","names":[],"sources":["../../../src/components/ref/ref.element.ts"],"sourcesContent":["import { LitElement, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n  SelectableMixin,\n  SelectOnlyMixin,\n} from '../../internal/mixins/index.js';\nimport { UUIRefEvent } from './UUIRefEvent.js';\n\n/**\n *  @element uui-ref\n *  @fires {UUIRefEvent} open - fires when the ref is opened\n *  @fires {UUISelectableEvent} selected - fires when the ref is selected\n *  @fires {UUISelectableEvent} deselected - fires when the ref is deselected\n *  @description - Base ref component to be extended by specific ref elements. Does not have a tag.\n *  @attr {boolean} [disabled=false] - Set to true to disable\n *  @attr {boolean} [error=false] - Set to true to display error state\n *  @attr {boolean} [standalone=false] - Set to true to make element stand out\n */\n\nexport class UUIRefElement extends SelectOnlyMixin(\n  SelectableMixin(LitElement),\n) {\n  /**\n   * Set tot true to disable\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Set to true to display error state\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  protected handleOpenClick(e: Event) {\n    e.stopPropagation();\n    this.dispatchEvent(new UUIRefEvent(UUIRefEvent.OPEN));\n  }\n  protected handleOpenKeydown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n    e.preventDefault();\n    e.stopPropagation();\n    this.dispatchEvent(new UUIRefEvent(UUIRefEvent.OPEN));\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        width: 100%;\n        font-size: var(--uui-font-size);\n\n        box-sizing: border-box;\n        border-radius: var(--uui-border-radius);\n        background-color: var(--uui-color-surface);\n        --uui-card-before-opacity: 0;\n        transition: --uui-card-before-opacity 120ms;\n      }\n\n      :host([selectable]:focus-visible) {\n        outline-color: var(--uui-color-focus);\n        outline-width: var(--uui-card-border-width);\n        outline-style: solid;\n        outline-offset: var(--uui-card-border-width);\n      }\n\n      :host([error]) {\n        border: 1px solid var(--uui-color-invalid);\n      }\n\n      :host([standalone]) {\n        border: 1px solid var(--uui-color-border);\n      }\n\n      :host([selectable]) {\n        cursor: pointer;\n      }\n      :host([selectable]) #select-border {\n        position: absolute;\n        z-index: 2;\n        top: -2px;\n        left: -2px;\n        right: -2px;\n        bottom: -2px;\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity 120ms;\n      }\n      :host([selectable]) #select-border::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        border: 2px solid var(--uui-color-selected);\n        border-radius: calc(var(--uui-border-radius) + 2px);\n        box-shadow:\n          0 0 4px 0 var(--uui-color-selected),\n          inset 0 0 2px 0 var(--uui-color-selected);\n      }\n      :host([selected]) #select-border {\n        opacity: 1;\n      }\n      :host([selectable]:not([selected]):hover) #select-border {\n        opacity: 0.33;\n      }\n      :host([selectable][selected]:hover) #select-border {\n        opacity: 0.8;\n      }\n\n      :host([selectable]:not([selected])) #open-part:hover + #select-border {\n        opacity: 0;\n      }\n      :host([selectable][selected]) #open-part:hover + #select-border {\n        opacity: 1;\n      }\n\n      :host([selectable]:not([selected]):hover) #select-border::after {\n        animation: not-selected--hover 1.2s infinite;\n      }\n      @keyframes not-selected--hover {\n        0%,\n        100% {\n          opacity: 0.66;\n        }\n        50% {\n          opacity: 1;\n        }\n      }\n\n      :host([selectable][selected]:hover) #select-border::after {\n        animation: selected--hover 1.4s infinite;\n      }\n      @keyframes selected--hover {\n        0%,\n        100% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.66;\n        }\n      }\n      :host([selectable]) #open-part:hover + #select-border::after {\n        animation: none;\n      }\n\n      :host([select-only]) *,\n      :host([select-only]) ::slotted(*) {\n        pointer-events: none;\n      }\n\n      button {\n        font-size: inherit;\n        font-family: inherit;\n        border: 0;\n        padding: 0;\n        background-color: transparent;\n        text-align: left;\n        color: var(--uui-color-text);\n      }\n      a {\n        text-decoration: none;\n        color: inherit;\n      }\n\n      button:focus,\n      a:focus {\n        outline-offset: var(--uui-card-border-width);\n        border-radius: var(--uui-border-radius);\n        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid\n          var(--uui-color-focus);\n      }\n\n      slot[name='actions']::slotted(*) {\n        --uui-button-height: calc(var(--uui-size-2) * 4);\n      }\n\n      slot[name='actions']::slotted(*:first-child) {\n        margin-right: var(--uui-size-2);\n      }\n      slot[name='actions'] {\n        display: flex;\n        align-items: center;\n      }\n      #tag-container::slotted(*:first-child) {\n        margin: calc(var(--uui-size-2));\n      }\n      #actions-container::slotted(*:first-child) {\n        margin: calc(var(--uui-size-2));\n      }\n      #actions-container {\n        opacity: 0;\n        transition: opacity 120ms;\n      }\n      :host(:hover) #actions-container,\n      :host(:focus) #actions-container,\n      :host(:focus-within) #actions-container {\n        opacity: 1;\n      }\n\n      :host([standalone]:not([disabled]):hover) {\n        border-color: var(--uui-color-border-emphasis);\n      }\n\n      :host([disabled]) #open-part {\n        cursor: default;\n      }\n\n      :host([standalone][disabled]) {\n        border-color: var(--uui-color-disabled-standalone);\n      }\n\n      slot[name='tag'] {\n        display: flex;\n        justify-content: flex-end;\n        align-items: center;\n        flex-shrink: 0;\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,IAAa,gBAAb,cAAmC,gBACjC,gBAAgB,UAAU,CAC5B,CAAC,CAAC;;;kBAQW;kBASA;eASH;;CAER,gBAA0B,GAAU;EAClC,EAAE,gBAAgB;EAClB,KAAK,cAAc,IAAI,YAAY,YAAY,IAAI,CAAC;CACtD;CACA,kBAA4B,GAAkB;EAC5C,IAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;EACxC,EAAE,eAAe;EACjB,EAAE,gBAAgB;EAClB,KAAK,cAAc,IAAI,YAAY,YAAY,IAAI,CAAC;CACtD;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgLL;;AACF;YAlNG,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;YASzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;YASzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,SAAA,KAAA,CAAA"}

package/dist/components/ref/ref.js

@@ -1,10 +1,9 @@
 import { defineElement } from "../../internal/registration/index.js";
-import { UUIRefElement } from "./ref.element.js";
 import { UUIRefEvent } from "./UUIRefEvent.js";
+import { UUIRefElement } from "./ref.element.js";
+//#region src/components/ref/ref.ts
 defineElement("uui-ref", UUIRefElement);
-export {
-  UUIRefElement,
-  UUIRefEvent,
-  UUIRefElement as default
-};
-//# sourceMappingURL=ref.js.map
+//#endregion
+export { UUIRefElement, UUIRefEvent };
+
+//# sourceMappingURL=ref.js.map

package/dist/components/ref/ref.js.map

@@ -1 +1 @@
-{"version":3,"file":"ref.js","sources":["../../../src/components/ref/ref.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIRefElement } from './ref.element.js';\n\ndefineElement('uui-ref', UUIRefElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-ref': UUIRefElement;\n  }\n}\n\nexport * from './ref.element.js';\nexport * from './UUIRefEvent.js';\nexport { UUIRefElement as default } from './ref.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,WAAW,aAAa;"}
+{"version":3,"file":"ref.js","names":[],"sources":["../../../src/components/ref/ref.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIRefElement } from './ref.element.js';\n\ndefineElement('uui-ref', UUIRefElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-ref': UUIRefElement;\n  }\n}\n\nexport * from './ref.element.js';\nexport * from './UUIRefEvent.js';\n"],"mappings":";;;;AAGA,cAAc,WAAW,aAAa"}

package/dist/components/ref-list/ref-list.d.ts

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './ref-list.element.js';
-export { UUIRefListElement as default } from './ref-list.element.js';

package/dist/components/ref-list/ref-list.element.js

@@ -1,11 +1,14 @@
-import { LitElement, html, css } from "lit";
-const _UUIRefListElement = class _UUIRefListElement extends LitElement {
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-_UUIRefListElement.styles = [
-  css`
+import { LitElement, css, html } from "lit";
+//#region src/components/ref-list/ref-list.element.ts
+/**
+* @element uui-ref-list
+*/
+var UUIRefListElement = class extends LitElement {
+	render() {
+		return html`<slot></slot>`;
+	}
+	static {
+		this.styles = [css`
       :host {
         display: block;
       }
@@ -21,10 +24,10 @@ _UUIRefListElement.styles = [
         right: 0;
         border-top: 1px solid var(--uui-color-border);
       }
-    `
-];
-let UUIRefListElement = _UUIRefListElement;
-export {
-  UUIRefListElement
+    `];
+	}
 };
-//# sourceMappingURL=ref-list.element.js.map
+//#endregion
+export { UUIRefListElement };
+
+//# sourceMappingURL=ref-list.element.js.map

package/dist/components/ref-list/ref-list.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"ref-list.element.js","sources":["../../../src/components/ref-list/ref-list.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n/**\n * @element uui-ref-list\n */\nexport class UUIRefListElement extends LitElement {\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      ::slotted(*:not(:first-child)) {\n        margin-top: 1px;\n      }\n      ::slotted(*:not(:first-child))::before {\n        content: '';\n        position: absolute;\n        top: -1px;\n        left: 0;\n        right: 0;\n        border-top: 1px solid var(--uui-color-border);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAIO,MAAM,qBAAN,MAAM,2BAA0B,WAAW;AAAA,EAChD,SAAS;AACP,WAAO;AAAA,EACT;AAqBF;AAnBE,mBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AANG,IAAM,oBAAN;"}
+{"version":3,"file":"ref-list.element.js","names":[],"sources":["../../../src/components/ref-list/ref-list.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n/**\n * @element uui-ref-list\n */\nexport class UUIRefListElement extends LitElement {\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      ::slotted(*:not(:first-child)) {\n        margin-top: 1px;\n      }\n      ::slotted(*:not(:first-child))::before {\n        content: '';\n        position: absolute;\n        top: -1px;\n        left: 0;\n        right: 0;\n        border-top: 1px solid var(--uui-color-border);\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;AAIA,IAAa,oBAAb,cAAuC,WAAW;CAChD,SAAS;EACP,OAAO,IAAI;CACb;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;KAiBL;;AACF"}

package/dist/components/ref-list/ref-list.js

@@ -1,8 +1,8 @@
 import { defineElement } from "../../internal/registration/index.js";
 import { UUIRefListElement } from "./ref-list.element.js";
+//#region src/components/ref-list/ref-list.ts
 defineElement("uui-ref-list", UUIRefListElement);
-export {
-  UUIRefListElement,
-  UUIRefListElement as default
-};
-//# sourceMappingURL=ref-list.js.map
+//#endregion
+export { UUIRefListElement };
+
+//# sourceMappingURL=ref-list.js.map

package/dist/components/ref-list/ref-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"ref-list.js","sources":["../../../src/components/ref-list/ref-list.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIRefListElement } from './ref-list.element.js';\n\ndefineElement('uui-ref-list', UUIRefListElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-ref-list': UUIRefListElement;\n  }\n}\n\nexport * from './ref-list.element.js';\nexport { UUIRefListElement as default } from './ref-list.element.js';\n"],"names":[],"mappings":";;AAGA,cAAc,gBAAgB,iBAAiB;"}
+{"version":3,"file":"ref-list.js","names":[],"sources":["../../../src/components/ref-list/ref-list.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIRefListElement } from './ref-list.element.js';\n\ndefineElement('uui-ref-list', UUIRefListElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-ref-list': UUIRefListElement;\n  }\n}\n\nexport * from './ref-list.element.js';\n"],"mappings":";;;AAGA,cAAc,gBAAgB,iBAAiB"}

package/dist/components/ref-node/ref-node.d.ts

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './ref-node.element.js';
-export { UUIRefNodeElement as default } from './ref-node.element.js';