@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

package/dist/components/slider/slider.element.js

@@ -1,176 +1,167 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _stepDecimalPlaces, _step, _UUISliderElement_instances, onKeyDown_fn;
-import { LitElement, svg, nothing, html, css } from "lit";
-import { property, query, state } from "lit/decorators.js";
-import { styleMap } from "lit/directives/style-map.js";
+import { UUIHorizontalPulseKeyframes } from "../../internal/animations/uui-pulse.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { UUIFormControlMixin as UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
 import { nativeInputStyles } from "./native-input.styles.js";
 import { UUISliderEvent } from "./UUISliderEvent.js";
-import { UUIHorizontalPulseKeyframes } from "../../internal/animations/uui-pulse.js";
-import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const TRACK_PADDING = 12;
-const STEP_MIN_WIDTH = 24;
-const GenerateStepArray = (start, stop, step) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
-const CountDecimalPlaces = (num) => {
-  const decimalIndex = num.toString().indexOf(".");
-  return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;
+import { LitElement, css, html, nothing, svg } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+//#region src/components/slider/slider.element.ts
+var TRACK_PADDING = 12;
+var STEP_MIN_WIDTH = 24;
+var GenerateStepArray = (start, stop, step) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
+var CountDecimalPlaces = (num) => {
+	const decimalIndex = num.toString().indexOf(".");
+	return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;
 };
-const _UUISliderElement = class _UUISliderElement extends UUIFormControlWithBasicsMixin(
-  LitElement,
-  ""
-) {
-  constructor() {
-    super();
-    __privateAdd(this, _UUISliderElement_instances);
-    __privateAdd(this, _stepDecimalPlaces);
-    __privateAdd(this, _step);
-    __privateSet(this, _stepDecimalPlaces, 0);
-    this.hideStepValues = false;
-    this.hideValueLabel = false;
-    this.min = 0;
-    this.max = 100;
-    __privateSet(this, _step, 1);
-    this.disabled = false;
-    this.readonly = false;
-    this._stepWidth = 0;
-    this.onWindowResize = () => {
-      this._stepWidth = this._calculateStepWidth();
-    };
-    this._steps = [];
-    this._sliderPosition = "0%";
-    this.addEventListener("keydown", __privateMethod(this, _UUISliderElement_instances, onKeyDown_fn));
-  }
-  get step() {
-    return __privateGet(this, _step);
-  }
-  set step(value) {
-    __privateSet(this, _step, value);
-    __privateSet(this, _stepDecimalPlaces, (value.toString().split(".")[1] || []).length);
-  }
-  get value() {
-    return super.value;
-  }
-  set value(newVal) {
-    if (newVal instanceof File) {
-      return;
-    }
-    const oldVal = super.value;
-    let correctedValue = newVal ? Number.parseFloat(newVal) : 0;
-    correctedValue = Math.min(Math.max(correctedValue, this.min), this.max);
-    if (this.step > 0) {
-      correctedValue = Math.round(correctedValue / this.step) * this.step;
-    }
-    super.value = correctedValue.toFixed(__privateGet(this, _stepDecimalPlaces)).toString();
-    this._calculateSliderPosition();
-    this.requestUpdate("value", oldVal);
-  }
-  /**
-   * This method enables <label for="..."> to focus the select
-   */
-  async focus() {
-    await this.updateComplete;
-    this._input.focus();
-  }
-  async blur() {
-    await this.updateComplete;
-    this._input.blur();
-  }
-  /**
-   * This method enables <label for="..."> to open the select
-   */
-  async click() {
-    await this.updateComplete;
-    this._input.click();
-  }
-  getFormElement() {
-    return this._input;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("resize", this.onWindowResize);
-    if (!this.label) {
-      console.warn(this.tagName + " needs a `label`", this);
-    }
-  }
-  disconnectedCallback() {
-    window.removeEventListener("resize", this.onWindowResize);
-    super.disconnectedCallback();
-  }
-  firstUpdated() {
-    this._calculateSliderPosition();
-    this._updateSteps();
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.get("max") || changedProperties.get("min") || changedProperties.get("step")) {
-      this.value = this.value;
-      this._updateSteps();
-    }
-  }
-  _updateSteps() {
-    this._steps = GenerateStepArray(this.min, this.max, this.step);
-    this._stepWidth = this._calculateStepWidth();
-  }
-  _calculateStepWidth() {
-    return (this._track.getBoundingClientRect().width - TRACK_PADDING * 2) / (this._steps.length - 1);
-  }
-  _calculateSliderPosition() {
-    const ratio = (Number.parseFloat(super.value || "0") - this.min) / (this.max - this.min);
-    this._sliderPosition = `${Math.floor(ratio * 1e5) / 1e3}%`;
-  }
-  _onInput(e) {
-    e.stopPropagation();
-    this.value = this._input.value;
-    this.dispatchEvent(new UUISliderEvent(UUISliderEvent.INPUT));
-  }
-  _onChange(e) {
-    e.stopPropagation();
-    this.pristine = false;
-    this.dispatchEvent(new UUISliderEvent(UUISliderEvent.CHANGE));
-  }
-  renderTrackSteps() {
-    return svg`
+/**
+* @element uui-slider
+* @description - Native `<input type="range">` wrapper.
+* @fires UUISliderEvent#input on input
+* @extends UUIFormControlMixin
+*/
+var UUISliderElement = class extends UUIFormControlWithBasicsMixin(LitElement, "") {
+	static {
+		this.formAssociated = true;
+	}
+	#stepDecimalPlaces;
+	/**
+	* This reflects the behavior of a native input step attribute.
+	* @type {number}
+	* @attr
+	* @default 1
+	*/
+	get step() {
+		return this.#step;
+	}
+	set step(value) {
+		this.#step = value;
+		this.#stepDecimalPlaces = (value.toString().split(".")[1] || []).length;
+	}
+	#step;
+	/**
+	* This is a value property of the uui-slider.
+	* @type {string}
+	* @attr
+	* @default ''
+	*/
+	get value() {
+		return super.value;
+	}
+	set value(newVal) {
+		if (newVal instanceof File) return;
+		const oldVal = super.value;
+		let correctedValue = newVal ? Number.parseFloat(newVal) : 0;
+		correctedValue = Math.min(Math.max(correctedValue, this.min), this.max);
+		if (this.step > 0) correctedValue = Math.round(correctedValue / this.step) * this.step;
+		super.value = correctedValue.toFixed(this.#stepDecimalPlaces).toString();
+		this._calculateSliderPosition();
+		this.requestUpdate("value", oldVal);
+	}
+	constructor() {
+		super();
+		this.#stepDecimalPlaces = 0;
+		this.hideStepValues = false;
+		this.hideValueLabel = false;
+		this.min = 0;
+		this.max = 100;
+		this.#step = 1;
+		this.disabled = false;
+		this.readonly = false;
+		this._stepWidth = 0;
+		this.onWindowResize = () => {
+			this._stepWidth = this._calculateStepWidth();
+		};
+		this._steps = [];
+		this._sliderPosition = "0%";
+		this.addEventListener("keydown", this.#onKeyDown);
+	}
+	/**
+	* This method enables <label for="..."> to focus the select
+	*/
+	async focus() {
+		await this.updateComplete;
+		this._input.focus();
+	}
+	async blur() {
+		await this.updateComplete;
+		this._input.blur();
+	}
+	/**
+	* This method enables <label for="..."> to open the select
+	*/
+	async click() {
+		await this.updateComplete;
+		this._input.click();
+	}
+	getFormElement() {
+		return this._input;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		window.addEventListener("resize", this.onWindowResize);
+		if (!this.label) console.warn(this.tagName + " needs a `label`", this);
+	}
+	disconnectedCallback() {
+		window.removeEventListener("resize", this.onWindowResize);
+		super.disconnectedCallback();
+	}
+	firstUpdated() {
+		this._calculateSliderPosition();
+		this._updateSteps();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.get("max") || changedProperties.get("min") || changedProperties.get("step")) {
+			this.value = this.value;
+			this._updateSteps();
+		}
+	}
+	_updateSteps() {
+		this._steps = GenerateStepArray(this.min, this.max, this.step);
+		this._stepWidth = this._calculateStepWidth();
+	}
+	_calculateStepWidth() {
+		return (this._track.getBoundingClientRect().width - TRACK_PADDING * 2) / (this._steps.length - 1);
+	}
+	#onKeyDown(e) {
+		if (e.key == "Enter") this.submit();
+	}
+	_calculateSliderPosition() {
+		const ratio = (Number.parseFloat(super.value || "0") - this.min) / (this.max - this.min);
+		this._sliderPosition = `${Math.floor(ratio * 1e5) / 1e3}%`;
+	}
+	_onInput(e) {
+		e.stopPropagation();
+		this.value = this._input.value;
+		this.dispatchEvent(new UUISliderEvent(UUISliderEvent.INPUT));
+	}
+	_onChange(e) {
+		e.stopPropagation();
+		this.pristine = false;
+		this.dispatchEvent(new UUISliderEvent(UUISliderEvent.CHANGE));
+	}
+	renderTrackSteps() {
+		return svg`
   ${this._steps.map((el) => {
-      if (this._stepWidth >= STEP_MIN_WIDTH) {
-        const x = Math.round(
-          TRACK_PADDING + this._stepWidth * this._steps.indexOf(el)
-        );
-        return svg`<circle class="track-step" cx="${x}" cy="50%" r="4.5" />`;
-      }
-      return svg``;
-    })}
+			if (this._stepWidth >= STEP_MIN_WIDTH) return svg`<circle class="track-step" cx="${Math.round(TRACK_PADDING + this._stepWidth * this._steps.indexOf(el))}" cy="50%" r="4.5" />`;
+			return svg``;
+		})}
 `;
-  }
-  renderStepValues() {
-    if (this.hideStepValues) return nothing;
-    return html`<div id="step-values">
-      ${this._steps.map(
-      (el) => html` <span
+	}
+	renderStepValues() {
+		if (this.hideStepValues) return nothing;
+		return html`<div id="step-values">
+      ${this._steps.map((el) => html` <span
             ><span>
               ${this._steps.length <= 20 && this._stepWidth >= STEP_MIN_WIDTH ? el.toFixed(CountDecimalPlaces(this.step)) : nothing}
             </span></span
-          >`
-    )}
+          >`)}
     </div>`;
-  }
-  render() {
-    return html`
+	}
+	render() {
+		return html`
       <input
         id="input"
         type="range"
@@ -178,6 +169,7 @@ const _UUISliderElement = class _UUISliderElement extends UUIFormControlWithBasi
         max="${this.max}"
         .value="${this.value}"
         aria-label="${this.label}"
+        autocomplete=${ifDefined(this.autocomplete)}
         step="${+this.step}"
         ?disabled=${this.disabled || this.readonly}
         ?readonly=${this.readonly}
@@ -197,21 +189,12 @@ const _UUISliderElement = class _UUISliderElement extends UUIFormControlWithBasi
       </div>
       ${this.renderStepValues()}
     `;
-  }
-};
-_stepDecimalPlaces = new WeakMap();
-_step = new WeakMap();
-_UUISliderElement_instances = new WeakSet();
-onKeyDown_fn = function(e) {
-  if (e.key == "Enter") {
-    this.submit();
-  }
-};
-_UUISliderElement.formAssociated = true;
-_UUISliderElement.styles = [
-  UUIHorizontalPulseKeyframes,
-  nativeInputStyles,
-  css`
+	}
+	static {
+		this.styles = [
+			UUIHorizontalPulseKeyframes,
+			nativeInputStyles,
+			css`
       :host {
         display: inline-block;
         width: 100%;
@@ -247,7 +230,8 @@ _UUISliderElement.styles = [
       }
 
       input:focus-visible ~ #track #thumb {
-        outline: 2px solid var(--uui-color-focus);
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
       }
 
       .track-step {
@@ -358,51 +342,37 @@ _UUISliderElement.styles = [
         opacity: 1;
       }
     `
-];
-let UUISliderElement = _UUISliderElement;
-__decorateClass([
-  property({ type: Boolean, attribute: "hide-step-values" })
-], UUISliderElement.prototype, "hideStepValues", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "hide-value-label" })
-], UUISliderElement.prototype, "hideValueLabel", 2);
-__decorateClass([
-  property({ type: Number })
-], UUISliderElement.prototype, "min", 2);
-__decorateClass([
-  property({ type: Number })
-], UUISliderElement.prototype, "max", 2);
-__decorateClass([
-  property({ type: Number })
-], UUISliderElement.prototype, "step", 1);
-__decorateClass([
-  property({ type: String })
-], UUISliderElement.prototype, "value", 1);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUISliderElement.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUISliderElement.prototype, "readonly", 2);
-__decorateClass([
-  property({ type: String })
-], UUISliderElement.prototype, "label", 2);
-__decorateClass([
-  query("#input")
-], UUISliderElement.prototype, "_input", 2);
-__decorateClass([
-  query("#track")
-], UUISliderElement.prototype, "_track", 2);
-__decorateClass([
-  state()
-], UUISliderElement.prototype, "_stepWidth", 2);
-__decorateClass([
-  state()
-], UUISliderElement.prototype, "_steps", 2);
-__decorateClass([
-  state()
-], UUISliderElement.prototype, "_sliderPosition", 2);
-export {
-  UUISliderElement
+		];
+	}
 };
-//# sourceMappingURL=slider.element.js.map
+__decorate([property({
+	type: Boolean,
+	attribute: "hide-step-values"
+})], UUISliderElement.prototype, "hideStepValues", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "hide-value-label"
+})], UUISliderElement.prototype, "hideValueLabel", void 0);
+__decorate([property({ type: Number })], UUISliderElement.prototype, "min", void 0);
+__decorate([property({ type: Number })], UUISliderElement.prototype, "max", void 0);
+__decorate([property({ type: Number })], UUISliderElement.prototype, "step", null);
+__decorate([property({ type: String })], UUISliderElement.prototype, "value", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUISliderElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUISliderElement.prototype, "readonly", void 0);
+__decorate([property({ type: String })], UUISliderElement.prototype, "label", void 0);
+__decorate([property()], UUISliderElement.prototype, "autocomplete", void 0);
+__decorate([query("#input")], UUISliderElement.prototype, "_input", void 0);
+__decorate([query("#track")], UUISliderElement.prototype, "_track", void 0);
+__decorate([state()], UUISliderElement.prototype, "_stepWidth", void 0);
+__decorate([state()], UUISliderElement.prototype, "_steps", void 0);
+__decorate([state()], UUISliderElement.prototype, "_sliderPosition", void 0);
+//#endregion
+export { UUISliderElement };
+
+//# sourceMappingURL=slider.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.element.js","sources":["../../../src/components/slider/slider.element.ts"],"sourcesContent":["import { UUIHorizontalPulseKeyframes } from '../../internal/animations/index.js';\nimport { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport { css, html, LitElement, nothing, svg } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { nativeInputStyles } from './native-input.styles.js';\nimport { UUISliderEvent } from './UUISliderEvent.js';\n\nconst TRACK_PADDING = 12;\nconst STEP_MIN_WIDTH = 24;\n\nconst GenerateStepArray = (start: number, stop: number, step: number) =>\n  Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);\n\nconst CountDecimalPlaces = (num: number) => {\n  const decimalIndex = num.toString().indexOf('.');\n  return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;\n};\n\n/**\n * @element uui-slider\n * @description - Native `<input type=\"range\">` wrapper.\n * @fires UUISliderEvent#input on input\n * @extends UUIFormControlMixin\n */\nexport class UUISliderElement extends UUIFormControlWithBasicsMixin(\n  LitElement,\n  '',\n) {\n  /**\n   * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/\n   * @type {boolean}\n   */\n  static readonly formAssociated = true;\n\n  #stepDecimalPlaces = 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   * Hides the value label on the thumb.\n   * @type {boolean}\n   * @attr 'hide-value-label'\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-value-label' })\n  hideValueLabel = false;\n\n  /**\n   * This is a minimum value of the input.\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number })\n  min = 0;\n\n  /**\n   * This is a maximum value of the input.\n   * @type {number}\n   * @attr\n   * @default 100\n   */\n  @property({ type: Number })\n  max = 100;\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  public get step() {\n    return this.#step;\n  }\n\n  public set step(value) {\n    this.#step = value;\n    this.#stepDecimalPlaces = (value.toString().split('.')[1] || []).length;\n  }\n\n  #step = 1;\n\n  /**\n   * This is a value property of the uui-slider.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  get value() {\n    return super.value;\n  }\n\n  set value(newVal) {\n    if (newVal instanceof File) {\n      return;\n    }\n\n    const oldVal = super.value;\n\n    let correctedValue = newVal ? Number.parseFloat(newVal as string) : 0;\n    correctedValue = Math.min(Math.max(correctedValue, this.min), this.max);\n\n    if (this.step > 0) {\n      correctedValue = Math.round(correctedValue / this.step) * this.step;\n    }\n\n    super.value = correctedValue.toFixed(this.#stepDecimalPlaces).toString();\n\n    this._calculateSliderPosition();\n    this.requestUpdate('value', oldVal);\n  }\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   * Label to be used for aria-label and eventually as visual label\n   * @type {string}\n   * @attr\n   */\n  @property({ type: String })\n  public label!: string;\n\n  @query('#input')\n  private readonly _input!: HTMLInputElement;\n\n  @query('#track')\n  private readonly _track!: HTMLElement;\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.#onKeyDown);\n  }\n\n  /**\n   * This method enables <label for=\"...\"> to focus the select\n   */\n  async focus() {\n    await this.updateComplete;\n    this._input.focus();\n  }\n  async blur() {\n    await this.updateComplete;\n    this._input.blur();\n  }\n  /**\n   * This method enables <label for=\"...\"> to open the select\n   */\n  async click() {\n    await this.updateComplete;\n    this._input.click();\n  }\n\n  protected getFormElement(): HTMLElement {\n    return this._input;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    //TODO: change to observer.\n    window.addEventListener('resize', this.onWindowResize);\n    if (!this.label) {\n      console.warn(this.tagName + ' needs a `label`', this);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.onWindowResize);\n    super.disconnectedCallback();\n  }\n\n  firstUpdated() {\n    this._calculateSliderPosition();\n    this._updateSteps();\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (\n      changedProperties.get('max') ||\n      changedProperties.get('min') ||\n      changedProperties.get('step')\n    ) {\n      this.value = this.value as string;\n      this._updateSteps();\n    }\n  }\n\n  private _updateSteps() {\n    this._steps = GenerateStepArray(this.min, this.max, this.step);\n    this._stepWidth = this._calculateStepWidth();\n  }\n\n  @state()\n  private _stepWidth = 0;\n\n  private _calculateStepWidth() {\n    return (\n      (this._track.getBoundingClientRect().width - TRACK_PADDING * 2) /\n      (this._steps.length - 1)\n    );\n  }\n\n  private readonly onWindowResize = () => {\n    this._stepWidth = this._calculateStepWidth();\n  };\n\n  #onKeyDown(e: KeyboardEvent): void {\n    if (e.key == 'Enter') {\n      this.submit();\n    }\n  }\n\n  @state()\n  protected _steps: number[] = [];\n\n  @state()\n  protected _sliderPosition = '0%';\n\n  private _calculateSliderPosition() {\n    const ratio =\n      (Number.parseFloat((super.value || '0') as string) - this.min) /\n      (this.max - this.min);\n    this._sliderPosition = `${Math.floor(ratio * 100000) / 1000}%`;\n  }\n\n  private _onInput(e: Event) {\n    e.stopPropagation();\n    this.value = this._input.value;\n    this.dispatchEvent(new UUISliderEvent(UUISliderEvent.INPUT));\n  }\n\n  private _onChange(e: Event) {\n    e.stopPropagation();\n    this.pristine = false;\n    this.dispatchEvent(new UUISliderEvent(UUISliderEvent.CHANGE));\n  }\n\n  renderTrackSteps() {\n    return svg`\n  ${this._steps.map(el => {\n    if (this._stepWidth >= STEP_MIN_WIDTH) {\n      const x = Math.round(\n        TRACK_PADDING + this._stepWidth * this._steps.indexOf(el),\n      );\n      return svg`<circle class=\"track-step\" cx=\"${x}\" cy=\"50%\" r=\"4.5\" />`;\n    }\n    return svg``;\n  })}\n`;\n  }\n\n  renderStepValues() {\n    if (this.hideStepValues) return nothing;\n\n    return html`<div id=\"step-values\">\n      ${this._steps.map(\n        el =>\n          html` <span\n            ><span>\n              ${this._steps.length <= 20 && this._stepWidth >= STEP_MIN_WIDTH\n                ? el.toFixed(CountDecimalPlaces(this.step))\n                : nothing}\n            </span></span\n          >`,\n      )}\n    </div>`;\n  }\n\n  render() {\n    return html`\n      <input\n        id=\"input\"\n        type=\"range\"\n        min=\"${this.min}\"\n        max=\"${this.max}\"\n        .value=\"${this.value}\"\n        aria-label=\"${this.label}\"\n        step=\"${+this.step}\"\n        ?disabled=${this.disabled || this.readonly}\n        ?readonly=${this.readonly}\n        @input=${this._onInput}\n        @change=${this._onChange} />\n      <div id=\"track\" aria-hidden=\"true\">\n        <svg height=\"100%\" width=\"100%\">\n          <rect x=\"9\" y=\"9\" height=\"3\" rx=\"2\" />\n          ${this.renderTrackSteps()}\n        </svg>\n\n        <div id=\"track-inner\" aria-hidden=\"true\">\n          <div id=\"thumb\" style=${styleMap({ left: this._sliderPosition })}>\n            ${this.hideValueLabel\n              ? null\n              : html`<div id=\"thumb-label\">${this.value}</div>`}\n          </div>\n        </div>\n      </div>\n      ${this.renderStepValues()}\n    `;\n  }\n\n  static override readonly styles = [\n    UUIHorizontalPulseKeyframes,\n    nativeInputStyles,\n    css`\n      :host {\n        display: inline-block;\n        width: 100%;\n        position: relative;\n        min-height: 30px;\n        user-select: none;\n      }\n\n      input {\n        box-sizing: border-box;\n        height: 18px;\n      }\n\n      #track {\n        position: relative;\n        height: 18px;\n        width: 100%;\n        display: flex;\n      }\n\n      #track svg {\n        height: 21px;\n        border-radius: 10px;\n        background-color: var(--uui-color-surface);\n      }\n      #track svg rect {\n        width: calc(100% - 18px);\n        fill: var(--uui-color-border-standalone);\n        transition: fill 120ms;\n      }\n      :host(:not([disabled]):not([readonly])) input:hover ~ #track svg rect {\n        fill: var(--uui-color-border-emphasis);\n      }\n\n      input:focus-visible ~ #track #thumb {\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      .track-step {\n        fill: var(--uui-color-border);\n      }\n\n      :host(:not([disabled]):not([readonly]))\n        input:hover\n        ~ #track\n        svg\n        .track-step {\n        fill: var(--uui-color-border-emphasis);\n      }\n\n      #track-inner {\n        position: absolute;\n        left: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n        right: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n      }\n\n      #thumb {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        top: 2px;\n        bottom: 0;\n        left: 0;\n        height: 17px;\n        width: 17px;\n        margin-left: -8px;\n        margin-right: -8px;\n        border-radius: 50%;\n        box-sizing: border-box;\n\n        background-color: var(--uui-color-surface);\n        border: 3px solid var(--uui-color-selected);\n      }\n      :host([disabled]) #thumb {\n        background-color: var(--uui-color-disabled);\n        border-color: var(--uui-color-disabled-standalone);\n      }\n\n      #thumb-label {\n        position: absolute;\n        box-sizing: border-box;\n        font-weight: 700;\n        bottom: 15px;\n        left: 50%;\n        width: 40px;\n        margin-left: -20px;\n        text-align: center;\n        opacity: 0;\n        transition: 120ms opacity;\n        color: var(--uui-color-selected);\n      }\n\n      input:focus ~ #track #thumb-label,\n      :host(:not([disabled]):not([readonly]))\n        input:hover\n        ~ #track\n        #thumb-label {\n        opacity: 1;\n      }\n\n      #step-values {\n        margin: 0 ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n        margin-top: 3px;\n        display: flex;\n        align-items: flex-end;\n        box-sizing: border-box;\n      }\n\n      #step-values > span {\n        flex-basis: 0;\n        flex-grow: 1;\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        transform: translateX(-50%);\n        display: inline-block;\n        text-align: center;\n        font-size: var(--uui-type-small-size);\n      }\n\n      #step-values > span:last-child {\n        width: 0;\n        flex-grow: 0;\n      }\n\n      :host(:not([pristine]):invalid) #thumb {\n        border-color: var(--uui-color-invalid-standalone);\n      }\n\n      // readonly\n      :host([readonly]) #thumb {\n        background-color: var(--uui-color-disabled);\n        border-color: var(--uui-color-disabled-standalone);\n      }\n\n      :host([readonly]) #thumb-label {\n        opacity: 1;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"slider.element.js","names":["#step","#stepDecimalPlaces","#onKeyDown"],"sources":["../../../src/components/slider/slider.element.ts"],"sourcesContent":["import { UUIHorizontalPulseKeyframes } from '../../internal/animations/index.js';\nimport { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport { css, html, LitElement, nothing, svg } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { nativeInputStyles } from './native-input.styles.js';\nimport { UUISliderEvent } from './UUISliderEvent.js';\n\nconst TRACK_PADDING = 12;\nconst STEP_MIN_WIDTH = 24;\n\nconst GenerateStepArray = (start: number, stop: number, step: number) =>\n  Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);\n\nconst CountDecimalPlaces = (num: number) => {\n  const decimalIndex = num.toString().indexOf('.');\n  return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;\n};\n\n/**\n * @element uui-slider\n * @description - Native `<input type=\"range\">` wrapper.\n * @fires UUISliderEvent#input on input\n * @extends UUIFormControlMixin\n */\nexport class UUISliderElement extends UUIFormControlWithBasicsMixin(\n  LitElement,\n  '',\n) {\n  /**\n   * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/\n   * @type {boolean}\n   */\n  static readonly formAssociated = true;\n\n  #stepDecimalPlaces = 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   * Hides the value label on the thumb.\n   * @type {boolean}\n   * @attr 'hide-value-label'\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-value-label' })\n  hideValueLabel = false;\n\n  /**\n   * This is a minimum value of the input.\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number })\n  min = 0;\n\n  /**\n   * This is a maximum value of the input.\n   * @type {number}\n   * @attr\n   * @default 100\n   */\n  @property({ type: Number })\n  max = 100;\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  public get step() {\n    return this.#step;\n  }\n\n  public set step(value) {\n    this.#step = value;\n    this.#stepDecimalPlaces = (value.toString().split('.')[1] || []).length;\n  }\n\n  #step = 1;\n\n  /**\n   * This is a value property of the uui-slider.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  get value() {\n    return super.value;\n  }\n\n  set value(newVal) {\n    if (newVal instanceof File) {\n      return;\n    }\n\n    const oldVal = super.value;\n\n    let correctedValue = newVal ? Number.parseFloat(newVal as string) : 0;\n    correctedValue = Math.min(Math.max(correctedValue, this.min), this.max);\n\n    if (this.step > 0) {\n      correctedValue = Math.round(correctedValue / this.step) * this.step;\n    }\n\n    super.value = correctedValue.toFixed(this.#stepDecimalPlaces).toString();\n\n    this._calculateSliderPosition();\n    this.requestUpdate('value', oldVal);\n  }\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   * Label to be used for aria-label and eventually as visual label\n   * @type {string}\n   * @attr\n   */\n  @property({ type: String })\n  public label!: string;\n\n  /**\n   * Defines the autocomplete attribute, forwarded to the native input. A slider rarely wants autofill; set to \"off\" to discourage password managers from attaching to it.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property()\n  autocomplete?: string;\n\n  @query('#input')\n  private readonly _input!: HTMLInputElement;\n\n  @query('#track')\n  private readonly _track!: HTMLElement;\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.#onKeyDown);\n  }\n\n  /**\n   * This method enables <label for=\"...\"> to focus the select\n   */\n  async focus() {\n    await this.updateComplete;\n    this._input.focus();\n  }\n  async blur() {\n    await this.updateComplete;\n    this._input.blur();\n  }\n  /**\n   * This method enables <label for=\"...\"> to open the select\n   */\n  async click() {\n    await this.updateComplete;\n    this._input.click();\n  }\n\n  protected getFormElement(): HTMLElement {\n    return this._input;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    //TODO: change to observer.\n    window.addEventListener('resize', this.onWindowResize);\n    if (!this.label) {\n      console.warn(this.tagName + ' needs a `label`', this);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.onWindowResize);\n    super.disconnectedCallback();\n  }\n\n  firstUpdated() {\n    this._calculateSliderPosition();\n    this._updateSteps();\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (\n      changedProperties.get('max') ||\n      changedProperties.get('min') ||\n      changedProperties.get('step')\n    ) {\n      this.value = this.value as string;\n      this._updateSteps();\n    }\n  }\n\n  private _updateSteps() {\n    this._steps = GenerateStepArray(this.min, this.max, this.step);\n    this._stepWidth = this._calculateStepWidth();\n  }\n\n  @state()\n  private _stepWidth = 0;\n\n  private _calculateStepWidth() {\n    return (\n      (this._track.getBoundingClientRect().width - TRACK_PADDING * 2) /\n      (this._steps.length - 1)\n    );\n  }\n\n  private readonly onWindowResize = () => {\n    this._stepWidth = this._calculateStepWidth();\n  };\n\n  #onKeyDown(e: KeyboardEvent): void {\n    if (e.key == 'Enter') {\n      this.submit();\n    }\n  }\n\n  @state()\n  protected _steps: number[] = [];\n\n  @state()\n  protected _sliderPosition = '0%';\n\n  private _calculateSliderPosition() {\n    const ratio =\n      (Number.parseFloat((super.value || '0') as string) - this.min) /\n      (this.max - this.min);\n    this._sliderPosition = `${Math.floor(ratio * 100000) / 1000}%`;\n  }\n\n  private _onInput(e: Event) {\n    e.stopPropagation();\n    this.value = this._input.value;\n    this.dispatchEvent(new UUISliderEvent(UUISliderEvent.INPUT));\n  }\n\n  private _onChange(e: Event) {\n    e.stopPropagation();\n    this.pristine = false;\n    this.dispatchEvent(new UUISliderEvent(UUISliderEvent.CHANGE));\n  }\n\n  renderTrackSteps() {\n    return svg`\n  ${this._steps.map(el => {\n    if (this._stepWidth >= STEP_MIN_WIDTH) {\n      const x = Math.round(\n        TRACK_PADDING + this._stepWidth * this._steps.indexOf(el),\n      );\n      return svg`<circle class=\"track-step\" cx=\"${x}\" cy=\"50%\" r=\"4.5\" />`;\n    }\n    return svg``;\n  })}\n`;\n  }\n\n  renderStepValues() {\n    if (this.hideStepValues) return nothing;\n\n    return html`<div id=\"step-values\">\n      ${this._steps.map(\n        el =>\n          html` <span\n            ><span>\n              ${this._steps.length <= 20 && this._stepWidth >= STEP_MIN_WIDTH\n                ? el.toFixed(CountDecimalPlaces(this.step))\n                : nothing}\n            </span></span\n          >`,\n      )}\n    </div>`;\n  }\n\n  render() {\n    return html`\n      <input\n        id=\"input\"\n        type=\"range\"\n        min=\"${this.min}\"\n        max=\"${this.max}\"\n        .value=\"${this.value}\"\n        aria-label=\"${this.label}\"\n        autocomplete=${ifDefined(this.autocomplete as any)}\n        step=\"${+this.step}\"\n        ?disabled=${this.disabled || this.readonly}\n        ?readonly=${this.readonly}\n        @input=${this._onInput}\n        @change=${this._onChange} />\n      <div id=\"track\" aria-hidden=\"true\">\n        <svg height=\"100%\" width=\"100%\">\n          <rect x=\"9\" y=\"9\" height=\"3\" rx=\"2\" />\n          ${this.renderTrackSteps()}\n        </svg>\n\n        <div id=\"track-inner\" aria-hidden=\"true\">\n          <div id=\"thumb\" style=${styleMap({ left: this._sliderPosition })}>\n            ${this.hideValueLabel\n              ? null\n              : html`<div id=\"thumb-label\">${this.value}</div>`}\n          </div>\n        </div>\n      </div>\n      ${this.renderStepValues()}\n    `;\n  }\n\n  static override readonly styles = [\n    UUIHorizontalPulseKeyframes,\n    nativeInputStyles,\n    css`\n      :host {\n        display: inline-block;\n        width: 100%;\n        position: relative;\n        min-height: 30px;\n        user-select: none;\n      }\n\n      input {\n        box-sizing: border-box;\n        height: 18px;\n      }\n\n      #track {\n        position: relative;\n        height: 18px;\n        width: 100%;\n        display: flex;\n      }\n\n      #track svg {\n        height: 21px;\n        border-radius: 10px;\n        background-color: var(--uui-color-surface);\n      }\n      #track svg rect {\n        width: calc(100% - 18px);\n        fill: var(--uui-color-border-standalone);\n        transition: fill 120ms;\n      }\n      :host(:not([disabled]):not([readonly])) input:hover ~ #track svg rect {\n        fill: var(--uui-color-border-emphasis);\n      }\n\n      input:focus-visible ~ #track #thumb {\n        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid\n          var(--uui-color-focus);\n      }\n\n      .track-step {\n        fill: var(--uui-color-border);\n      }\n\n      :host(:not([disabled]):not([readonly]))\n        input:hover\n        ~ #track\n        svg\n        .track-step {\n        fill: var(--uui-color-border-emphasis);\n      }\n\n      #track-inner {\n        position: absolute;\n        left: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n        right: ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n      }\n\n      #thumb {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        top: 2px;\n        bottom: 0;\n        left: 0;\n        height: 17px;\n        width: 17px;\n        margin-left: -8px;\n        margin-right: -8px;\n        border-radius: 50%;\n        box-sizing: border-box;\n\n        background-color: var(--uui-color-surface);\n        border: 3px solid var(--uui-color-selected);\n      }\n      :host([disabled]) #thumb {\n        background-color: var(--uui-color-disabled);\n        border-color: var(--uui-color-disabled-standalone);\n      }\n\n      #thumb-label {\n        position: absolute;\n        box-sizing: border-box;\n        font-weight: 700;\n        bottom: 15px;\n        left: 50%;\n        width: 40px;\n        margin-left: -20px;\n        text-align: center;\n        opacity: 0;\n        transition: 120ms opacity;\n        color: var(--uui-color-selected);\n      }\n\n      input:focus ~ #track #thumb-label,\n      :host(:not([disabled]):not([readonly]))\n        input:hover\n        ~ #track\n        #thumb-label {\n        opacity: 1;\n      }\n\n      #step-values {\n        margin: 0 ${TRACK_PADDING}px; /* Match TRACK_MARGIN */\n        margin-top: 3px;\n        display: flex;\n        align-items: flex-end;\n        box-sizing: border-box;\n      }\n\n      #step-values > span {\n        flex-basis: 0;\n        flex-grow: 1;\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        transform: translateX(-50%);\n        display: inline-block;\n        text-align: center;\n        font-size: var(--uui-type-small-size);\n      }\n\n      #step-values > span:last-child {\n        width: 0;\n        flex-grow: 0;\n      }\n\n      :host(:not([pristine]):invalid) #thumb {\n        border-color: var(--uui-color-invalid-standalone);\n      }\n\n      // readonly\n      :host([readonly]) #thumb {\n        background-color: var(--uui-color-disabled);\n        border-color: var(--uui-color-disabled-standalone);\n      }\n\n      :host([readonly]) #thumb-label {\n        opacity: 1;\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;AAUA,IAAM,gBAAgB;AACtB,IAAM,iBAAiB;AAEvB,IAAM,qBAAqB,OAAe,MAAc,SACtD,MAAM,KAAK,EAAE,SAAS,OAAO,SAAS,OAAO,EAAE,IAAI,GAAG,MAAM,QAAQ,IAAI,IAAI;AAE9E,IAAM,sBAAsB,QAAgB;CAC1C,MAAM,eAAe,IAAI,SAAS,CAAC,CAAC,QAAQ,GAAG;CAC/C,OAAO,gBAAgB,IAAI,IAAI,SAAS,CAAC,CAAC,SAAS,eAAe,IAAI;AACxE;;;;;;;AAQA,IAAa,mBAAb,cAAsC,8BACpC,YACA,EACF,CAAC,CAAC;;wBAKiC;;CAEjC;;;;;;;CA4CA,IACW,OAAO;EAChB,OAAO,KAAKA;CACd;CAEA,IAAW,KAAK,OAAO;EACrB,KAAKA,QAAQ;EACb,KAAKC,sBAAsB,MAAM,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,EAAA,CAAG;CACnE;CAEA;;;;;;;CAQA,IACI,QAAQ;EACV,OAAO,MAAM;CACf;CAEA,IAAI,MAAM,QAAQ;EAChB,IAAI,kBAAkB,MACpB;EAGF,MAAM,SAAS,MAAM;EAErB,IAAI,iBAAiB,SAAS,OAAO,WAAW,MAAgB,IAAI;EACpE,iBAAiB,KAAK,IAAI,KAAK,IAAI,gBAAgB,KAAK,GAAG,GAAG,KAAK,GAAG;EAEtE,IAAI,KAAK,OAAO,GACd,iBAAiB,KAAK,MAAM,iBAAiB,KAAK,IAAI,IAAI,KAAK;EAGjE,MAAM,QAAQ,eAAe,QAAQ,KAAKA,kBAAkB,CAAC,CAAC,SAAS;EAEvE,KAAK,yBAAyB;EAC9B,KAAK,cAAc,SAAS,MAAM;CACpC;CA2CA,cAAc;EACZ,MAAM;4BAjIa;wBASJ;wBASA;aASX;aASA;eAkBE;kBAwCG;kBASA;oBA0FU;8BASmB;GACtC,KAAK,aAAa,KAAK,oBAAoB;EAC7C;gBAS6B,CAAC;yBAGF;EAtF1B,KAAK,iBAAiB,WAAW,KAAKC,UAAU;CAClD;;;;CAKA,MAAM,QAAQ;EACZ,MAAM,KAAK;EACX,KAAK,OAAO,MAAM;CACpB;CACA,MAAM,OAAO;EACX,MAAM,KAAK;EACX,KAAK,OAAO,KAAK;CACnB;;;;CAIA,MAAM,QAAQ;EACZ,MAAM,KAAK;EACX,KAAK,OAAO,MAAM;CACpB;CAEA,iBAAwC;EACtC,OAAO,KAAK;CACd;CAEA,oBAAoB;EAClB,MAAM,kBAAkB;EAExB,OAAO,iBAAiB,UAAU,KAAK,cAAc;EACrD,IAAI,CAAC,KAAK,OACR,QAAQ,KAAK,KAAK,UAAU,oBAAoB,IAAI;CAExD;CAEA,uBAAuB;EACrB,OAAO,oBAAoB,UAAU,KAAK,cAAc;EACxD,MAAM,qBAAqB;CAC7B;CAEA,eAAe;EACb,KAAK,yBAAyB;EAC9B,KAAK,aAAa;CACpB;CAEA,QAAQ,mBAA2D;EACjE,MAAM,QAAQ,iBAAiB;EAC/B,IACE,kBAAkB,IAAI,KAAK,KAC3B,kBAAkB,IAAI,KAAK,KAC3B,kBAAkB,IAAI,MAAM,GAC5B;GACA,KAAK,QAAQ,KAAK;GAClB,KAAK,aAAa;EACpB;CACF;CAEA,eAAuB;EACrB,KAAK,SAAS,kBAAkB,KAAK,KAAK,KAAK,KAAK,KAAK,IAAI;EAC7D,KAAK,aAAa,KAAK,oBAAoB;CAC7C;CAKA,sBAA8B;EAC5B,QACG,KAAK,OAAO,sBAAsB,CAAC,CAAC,QAAQ,gBAAgB,MAC5D,KAAK,OAAO,SAAS;CAE1B;CAMA,WAAW,GAAwB;EACjC,IAAI,EAAE,OAAO,SACX,KAAK,OAAO;CAEhB;CAQA,2BAAmC;EACjC,MAAM,SACH,OAAO,WAAY,MAAM,SAAS,GAAc,IAAI,KAAK,QACzD,KAAK,MAAM,KAAK;EACnB,KAAK,kBAAkB,GAAG,KAAK,MAAM,QAAQ,GAAM,IAAI,IAAK;CAC9D;CAEA,SAAiB,GAAU;EACzB,EAAE,gBAAgB;EAClB,KAAK,QAAQ,KAAK,OAAO;EACzB,KAAK,cAAc,IAAI,eAAe,eAAe,KAAK,CAAC;CAC7D;CAEA,UAAkB,GAAU;EAC1B,EAAE,gBAAgB;EAClB,KAAK,WAAW;EAChB,KAAK,cAAc,IAAI,eAAe,eAAe,MAAM,CAAC;CAC9D;CAEA,mBAAmB;EACjB,OAAO,GAAG;IACV,KAAK,OAAO,KAAI,OAAM;GACtB,IAAI,KAAK,cAAc,gBAIrB,OAAO,GAAG,kCAHA,KAAK,MACb,gBAAgB,KAAK,aAAa,KAAK,OAAO,QAAQ,EAAE,CAEd,EAAE;GAEhD,OAAO,GAAG;EACZ,CAAC,EAAE;;CAEH;CAEA,mBAAmB;EACjB,IAAI,KAAK,gBAAgB,OAAO;EAEhC,OAAO,IAAI;QACP,KAAK,OAAO,KACZ,OACE,IAAI;;gBAEE,KAAK,OAAO,UAAU,MAAM,KAAK,cAAc,iBAC7C,GAAG,QAAQ,mBAAmB,KAAK,IAAI,CAAC,IACxC,QAAQ;;YAGpB,EAAE;;CAEN;CAEA,SAAS;EACP,OAAO,IAAI;;;;eAIA,KAAK,IAAI;eACT,KAAK,IAAI;kBACN,KAAK,MAAM;sBACP,KAAK,MAAM;uBACV,UAAU,KAAK,YAAmB,EAAE;gBAC3C,CAAC,KAAK,KAAK;oBACP,KAAK,YAAY,KAAK,SAAS;oBAC/B,KAAK,SAAS;iBACjB,KAAK,SAAS;kBACb,KAAK,UAAU;;;;YAIrB,KAAK,iBAAiB,EAAE;;;;kCAIF,SAAS,EAAE,MAAM,KAAK,gBAAgB,CAAC,EAAE;cAC7D,KAAK,iBACH,OACA,IAAI,yBAAyB,KAAK,MAAM,QAAQ;;;;QAIxD,KAAK,iBAAiB,EAAE;;CAE9B;;gBAEkC;GAChC;GACA;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAsDS,cAAc;iBACb,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAiDX,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4ChC;;AACF;YA7bG,SAAS;CAAE,MAAM;CAAS,WAAW;AAAmB,CAAC,CAAA,GAAA,iBAAA,WAAA,kBAAA,KAAA,CAAA;YASzD,SAAS;CAAE,MAAM;CAAS,WAAW;AAAmB,CAAC,CAAA,GAAA,iBAAA,WAAA,kBAAA,KAAA,CAAA;YASzD,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,iBAAA,WAAA,OAAA,KAAA,CAAA;YASzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,iBAAA,WAAA,OAAA,KAAA,CAAA;YASzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,iBAAA,WAAA,QAAA,IAAA;YAkBzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,iBAAA,WAAA,SAAA,IAAA;YA+BzB,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,YAAA,KAAA,CAAA;YASzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,YAAA,KAAA,CAAA;YAQzC,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,iBAAA,WAAA,SAAA,KAAA,CAAA;YASzB,SAAS,CAAA,GAAA,iBAAA,WAAA,gBAAA,KAAA,CAAA;YAGT,MAAM,QAAQ,CAAA,GAAA,iBAAA,WAAA,UAAA,KAAA,CAAA;YAGd,MAAM,QAAQ,CAAA,GAAA,iBAAA,WAAA,UAAA,KAAA,CAAA;YAmEd,MAAM,CAAA,GAAA,iBAAA,WAAA,cAAA,KAAA,CAAA;YAoBN,MAAM,CAAA,GAAA,iBAAA,WAAA,UAAA,KAAA,CAAA;YAGN,MAAM,CAAA,GAAA,iBAAA,WAAA,mBAAA,KAAA,CAAA"}

package/dist/components/slider/slider.js

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

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

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

package/dist/components/symbol-drag-handle/symbol-drag-handle.d.ts

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './symbol-drag-handle.element.js';
-export { UUISymbolDragHandleElement as default } from './symbol-drag-handle.element.js';

package/dist/components/symbol-drag-handle/symbol-drag-handle.element.js

@@ -1,26 +1,29 @@
-import { LitElement, html, css } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
-import "../icon/icon.js";
 import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
-const _UUISymbolDragHandleElement = class _UUISymbolDragHandleElement extends LabelMixin("", LitElement) {
-  render() {
-    return html`<uui-icon
+import "../icon/icon.js";
+import { LitElement, css, html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/symbol-drag-handle/symbol-drag-handle.element.ts
+/**
+* @element uui-symbol-drag-handle
+*/
+var UUISymbolDragHandleElement = class extends LabelMixin("", LitElement) {
+	render() {
+		return html`<uui-icon
       name="drag"
       aria-label=${ifDefined(this.label)}></uui-icon>`;
-  }
-};
-_UUISymbolDragHandleElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         cursor: grab;
       }
       :host:active {
         cursor: grabbing;
       }
-    `
-];
-let UUISymbolDragHandleElement = _UUISymbolDragHandleElement;
-export {
-  UUISymbolDragHandleElement
+    `];
+	}
 };
-//# sourceMappingURL=symbol-drag-handle.element.js.map
+//#endregion
+export { UUISymbolDragHandleElement };
+
+//# sourceMappingURL=symbol-drag-handle.element.js.map

package/dist/components/symbol-drag-handle/symbol-drag-handle.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"symbol-drag-handle.element.js","sources":["../../../src/components/symbol-drag-handle/symbol-drag-handle.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LabelMixin } from '../../internal/index.js';\nimport '../icon/icon.js';\n\n/**\n * @element uui-symbol-drag-handle\n */\nexport class UUISymbolDragHandleElement extends LabelMixin('', LitElement) {\n  render() {\n    return html`<uui-icon\n      name=\"drag\"\n      aria-label=${ifDefined(this.label)}></uui-icon>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        cursor: grab;\n      }\n      :host:active {\n        cursor: grabbing;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;AAQO,MAAM,8BAAN,MAAM,oCAAmC,WAAW,IAAI,UAAU,EAAE;AAAA,EACzE,SAAS;AACP,WAAO;AAAA;AAAA,mBAEQ,UAAU,KAAK,KAAK,CAAC;AAAA,EACtC;AAYF;AAVE,4BAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AARG,IAAM,6BAAN;"}
+{"version":3,"file":"symbol-drag-handle.element.js","names":[],"sources":["../../../src/components/symbol-drag-handle/symbol-drag-handle.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LabelMixin } from '../../internal/index.js';\nimport '../icon/icon.js';\n\n/**\n * @element uui-symbol-drag-handle\n */\nexport class UUISymbolDragHandleElement extends LabelMixin('', LitElement) {\n  render() {\n    return html`<uui-icon\n      name=\"drag\"\n      aria-label=${ifDefined(this.label)}></uui-icon>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        cursor: grab;\n      }\n      :host:active {\n        cursor: grabbing;\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;AAQA,IAAa,6BAAb,cAAgD,WAAW,IAAI,UAAU,CAAC,CAAC;CACzE,SAAS;EACP,OAAO,IAAI;;mBAEI,UAAU,KAAK,KAAK,EAAE;CACvC;;gBAEkC,CAChC,GAAG;;;;;;;KAQL;;AACF"}