@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.0

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUIRefElement } from './ref.element.js';
+export declare class UUIRefEvent extends UUIEvent<{}, UUIRefElement> {
+    static readonly OPEN = "open";
+}

package/dist/components/ref/UUIRefEvent.js

@@ -0,0 +1,9 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+const _UUIRefEvent = class _UUIRefEvent extends UUIEvent {
+};
+_UUIRefEvent.OPEN = "open";
+let UUIRefEvent = _UUIRefEvent;
+export {
+  UUIRefEvent
+};
+//# sourceMappingURL=UUIRefEvent.js.map

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

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

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

@@ -0,0 +1,9 @@
+import { UUIRefElement } from './ref.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-ref': UUIRefElement;
+    }
+}
+export * from './ref.element.js';
+export * from './UUIRefEvent.js';
+export { UUIRefElement as default } from './ref.element.js';

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

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+declare const UUIRefElement_base: (new (...args: any[]) => import("../../index.js").UUISelectOnlyMixinInterface) & (new (...args: any[]) => import("../../index.js").UUISelectableMixinInterface) & typeof LitElement;
+/**
+ *  @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
+ */
+export declare class UUIRefElement extends UUIRefElement_base {
+    /**
+     * Set tot true to disable
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * Set to true to display error state
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    error: boolean;
+    protected handleOpenClick(e: Event): void;
+    protected handleOpenKeydown(e: KeyboardEvent): void;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};

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

@@ -0,0 +1,224 @@
+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`
+      :host {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        font-size: var(--uui-font-size);
+
+        box-sizing: border-box;
+        border-radius: var(--uui-border-radius);
+        background-color: var(--uui-color-surface);
+        --uui-card-before-opacity: 0;
+        transition: --uui-card-before-opacity 120ms;
+      }
+
+      :host([selectable]:focus-visible) {
+        outline-color: var(--uui-color-focus);
+        outline-width: var(--uui-card-border-width);
+        outline-style: solid;
+        outline-offset: var(--uui-card-border-width);
+      }
+
+      :host([error]) {
+        border: 1px solid var(--uui-color-invalid);
+      }
+
+      :host([standalone]) {
+        border: 1px solid var(--uui-color-border);
+      }
+
+      :host([selectable]) {
+        cursor: pointer;
+      }
+      :host([selectable]) #select-border {
+        position: absolute;
+        z-index: 2;
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 120ms;
+      }
+      :host([selectable]) #select-border::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        border: 2px solid var(--uui-color-selected);
+        border-radius: calc(var(--uui-border-radius) + 2px);
+        box-shadow:
+          0 0 4px 0 var(--uui-color-selected),
+          inset 0 0 2px 0 var(--uui-color-selected);
+      }
+      :host([selected]) #select-border {
+        opacity: 1;
+      }
+      :host([selectable]:not([selected]):hover) #select-border {
+        opacity: 0.33;
+      }
+      :host([selectable][selected]:hover) #select-border {
+        opacity: 0.8;
+      }
+
+      :host([selectable]:not([selected])) #open-part:hover + #select-border {
+        opacity: 0;
+      }
+      :host([selectable][selected]) #open-part:hover + #select-border {
+        opacity: 1;
+      }
+
+      :host([selectable]:not([selected]):hover) #select-border::after {
+        animation: not-selected--hover 1.2s infinite;
+      }
+      @keyframes not-selected--hover {
+        0%,
+        100% {
+          opacity: 0.66;
+        }
+        50% {
+          opacity: 1;
+        }
+      }
+
+      :host([selectable][selected]:hover) #select-border::after {
+        animation: selected--hover 1.4s infinite;
+      }
+      @keyframes selected--hover {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.66;
+        }
+      }
+      :host([selectable]) #open-part:hover + #select-border::after {
+        animation: none;
+      }
+
+      :host([select-only]) *,
+      :host([select-only]) ::slotted(*) {
+        pointer-events: none;
+      }
+
+      button {
+        font-size: inherit;
+        font-family: inherit;
+        border: 0;
+        padding: 0;
+        background-color: transparent;
+        text-align: left;
+        color: var(--uui-color-text);
+      }
+      a {
+        text-decoration: none;
+        color: inherit;
+      }
+
+      button:focus,
+      a:focus {
+        outline-offset: var(--uui-card-border-width);
+        border-radius: var(--uui-border-radius);
+        outline: 2px solid var(--uui-color-focus);
+      }
+
+      slot[name='actions']::slotted(*) {
+        --uui-button-height: calc(var(--uui-size-2) * 4);
+      }
+
+      slot[name='actions']::slotted(*:first-child) {
+        margin-right: var(--uui-size-2);
+      }
+      slot[name='actions'] {
+        display: flex;
+        align-items: center;
+      }
+      #tag-container::slotted(*:first-child) {
+        margin: calc(var(--uui-size-2));
+      }
+      #actions-container::slotted(*:first-child) {
+        margin: calc(var(--uui-size-2));
+      }
+      #actions-container {
+        opacity: 0;
+        transition: opacity 120ms;
+      }
+      :host(:hover) #actions-container,
+      :host(:focus) #actions-container,
+      :host(:focus-within) #actions-container {
+        opacity: 1;
+      }
+
+      :host([standalone]:not([disabled]):hover) {
+        border-color: var(--uui-color-border-emphasis);
+      }
+
+      :host([disabled]) #open-part {
+        cursor: default;
+      }
+
+      :host([standalone][disabled]) {
+        border-color: var(--uui-color-disabled-standalone);
+      }
+
+      slot[name='tag'] {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+      }
+    `
+];
+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

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

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

package/dist/components/ref/ref.js

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

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

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

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

@@ -0,0 +1,8 @@
+import { UUIRefListElement } from './ref-list.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-ref-list': UUIRefListElement;
+    }
+}
+export * from './ref-list.element.js';
+export { UUIRefListElement as default } from './ref-list.element.js';

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

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+/**
+ * @element uui-ref-list
+ */
+export declare class UUIRefListElement extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,30 @@
+import { LitElement, html, css } from "lit";
+const _UUIRefListElement = class _UUIRefListElement extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+_UUIRefListElement.styles = [
+  css`
+      :host {
+        display: block;
+      }
+
+      ::slotted(*:not(:first-child)) {
+        margin-top: 1px;
+      }
+      ::slotted(*:not(:first-child))::before {
+        content: '';
+        position: absolute;
+        top: -1px;
+        left: 0;
+        right: 0;
+        border-top: 1px solid var(--uui-color-border);
+      }
+    `
+];
+let UUIRefListElement = _UUIRefListElement;
+export {
+  UUIRefListElement
+};
+//# sourceMappingURL=ref-list.element.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { UUIRefNodeElement } from './ref-node.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-ref-node': UUIRefNodeElement;
+    }
+}
+export * from './ref-node.element.js';
+export { UUIRefNodeElement as default } from './ref-node.element.js';

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

@@ -0,0 +1,58 @@
+import { UUIRefElement } from '../ref/ref.js';
+import '../icon/icon.js';
+/**
+ *  @element uui-ref-node
+ *  @fires {UUIRefEvent} open - fires when the ref title is clicked
+ *  @fires {UUIRefEvent} selected - fires when the ref is selected
+ *  @fires {UUIRefEvent} deselected - fires when the ref is deselected
+ *  @description - Component for displaying a reference to a generic node.
+ *  @slot - for content
+ *  @slot icon - for an icon
+ *  @slot tag - for a tag
+ *  @slot actions - for actions
+ */
+export declare class UUIRefNodeElement extends UUIRefElement {
+    #private;
+    /**
+     * Node name
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    name: string;
+    /**
+     * Node details
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    detail: string;
+    /**
+     * Set an href, this will turns the name of the card into an anchor tag.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    href?: string;
+    /**
+     * Set an anchor tag target, only used when using href.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    /**
+     * Set the rel attribute for an anchor tag, only used when using href.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    rel?: string;
+    protected readonly _openPart?: HTMLInputElement;
+    private _iconSlotHasContent;
+    protected fallbackIcon: string;
+    focus(): Promise<void>;
+    protected renderDetail(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}