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

package/dist/components/scroll-container/scroll-container.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-container.element.js","sources":["../../../src/components/scroll-container/scroll-container.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n *  @element uui-scroll-container\n *  @slot - for content\n *  @attribute enforce-scroll - forces the scrollbar to appear\n *  @description - Component for displaying a larger amount of .\n *\n */\nexport class UUIScrollContainerElement extends LitElement {\n  /**\n   * @type {boolean}\n   * @attr forces the scrollbar to appear\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'enforce-scroll' })\n  enforceScroll = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('tabindex')) {\n      this.setAttribute('tabindex', '0');\n    }\n  }\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: block;\n        overflow-y: auto;\n        overflow-y: overlay;\n        scrollbar-width: thin;\n        scrollbar-color: transparent transparent;\n        transition: scrollbar-color 480ms 480ms ease-in;\n      }\n\n      :host([enforce-scroll]) {\n        overflow-y: scroll;\n      }\n      :host([enforce-scroll]),\n      :host(:hover),\n      :host(:focus),\n      :host(:focus-within) {\n        scrollbar-color: var(--uui-color-disabled-standalone) transparent;\n        transition: scrollbar-color 120ms ease-out;\n      }\n\n      :host::-webkit-scrollbar {\n        width: 6px;\n        height: 6px;\n      }\n\n      :host::-webkit-scrollbar-track {\n        background: transparent;\n        border-radius: 3px;\n      }\n\n      :host::-webkit-scrollbar-thumb {\n        background-color: transparent;\n        border-radius: 3px;\n      }\n\n      :host([enforce-scroll])::-webkit-scrollbar-thumb,\n      :host(:hover)::-webkit-scrollbar-thumb,\n      :host(:focus)::-webkit-scrollbar-thumb,\n      :host(:focus-within)::-webkit-scrollbar-thumb {\n        background-color: var(--uui-color-disabled-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAUO,MAAM,6BAAN,MAAM,mCAAkC,WAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA;AAML,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAEhB,oBAAoB;AAClB,UAAM,kBAAA;AACN,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAClC,WAAK,aAAa,YAAY,GAAG;AAAA,IACnC;AAAA,EACF;AAAA,EACA,SAAS;AACP,WAAO;AAAA,EACT;AA+CF;AA7CE,2BAAyB,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;AAnBG,IAAM,4BAAN;AAML,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,kBAAkB;AAAA,GAL5D,0BAMX,WAAA,eAAA;"}
+{"version":3,"file":"scroll-container.element.js","names":[],"sources":["../../../src/components/scroll-container/scroll-container.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n *  @element uui-scroll-container\n *  @slot - for content\n *  @attribute enforce-scroll - forces the scrollbar to appear\n *  @description - Component for displaying a larger amount of .\n *\n */\nexport class UUIScrollContainerElement extends LitElement {\n  /**\n   * @type {boolean}\n   * @attr forces the scrollbar to appear\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'enforce-scroll' })\n  enforceScroll = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('tabindex')) {\n      this.setAttribute('tabindex', '0');\n    }\n  }\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: block;\n        overflow-y: auto;\n        overflow-y: overlay;\n        scrollbar-width: thin;\n        scrollbar-color: transparent transparent;\n        transition: scrollbar-color 480ms 480ms ease-in;\n      }\n\n      :host([enforce-scroll]) {\n        overflow-y: scroll;\n      }\n      :host([enforce-scroll]),\n      :host(:hover),\n      :host(:focus),\n      :host(:focus-within) {\n        scrollbar-color: var(--uui-color-disabled-standalone) transparent;\n        transition: scrollbar-color 120ms ease-out;\n      }\n\n      :host::-webkit-scrollbar {\n        width: 6px;\n        height: 6px;\n      }\n\n      :host::-webkit-scrollbar-track {\n        background: transparent;\n        border-radius: 3px;\n      }\n\n      :host::-webkit-scrollbar-thumb {\n        background-color: transparent;\n        border-radius: 3px;\n      }\n\n      :host([enforce-scroll])::-webkit-scrollbar-thumb,\n      :host(:hover)::-webkit-scrollbar-thumb,\n      :host(:focus)::-webkit-scrollbar-thumb,\n      :host(:focus-within)::-webkit-scrollbar-thumb {\n        background-color: var(--uui-color-disabled-standalone);\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;;AAUA,IAAa,4BAAb,cAA+C,WAAW;;;uBAMxC;;CAEhB,oBAAoB;EAClB,MAAM,kBAAkB;EACxB,IAAI,CAAC,KAAK,aAAa,UAAU,GAC/B,KAAK,aAAa,YAAY,GAAG;CAErC;CACA,SAAS;EACP,OAAO,IAAI;CACb;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CL;;AACF;YA1DG,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAiB,CAAC,CAAA,GAAA,0BAAA,WAAA,iBAAA,KAAA,CAAA"}

package/dist/components/scroll-container/scroll-container.js

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

package/dist/components/scroll-container/scroll-container.js.map

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

package/dist/components/select/UUISelectEvent.js

@@ -1,15 +1,17 @@
 import { UUIEvent } from "../../internal/events/UUIEvent.js";
-const _UUISelectEvent = class _UUISelectEvent extends UUIEvent {
-  constructor(evName, eventInit = {}) {
-    super(evName, {
-      bubbles: true,
-      ...eventInit
-    });
-  }
+//#region src/components/select/UUISelectEvent.ts
+var UUISelectEvent = class extends UUIEvent {
+	static {
+		this.CHANGE = "change";
+	}
+	constructor(evName, eventInit = {}) {
+		super(evName, {
+			bubbles: true,
+			...eventInit
+		});
+	}
 };
-_UUISelectEvent.CHANGE = "change";
-let UUISelectEvent = _UUISelectEvent;
-export {
-  UUISelectEvent
-};
-//# sourceMappingURL=UUISelectEvent.js.map
+//#endregion
+export { UUISelectEvent };
+
+//# sourceMappingURL=UUISelectEvent.js.map

package/dist/components/select/UUISelectEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UUISelectEvent.js","sources":["../../../src/components/select/UUISelectEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUISelectElement } from './select.element.js';\n\nexport class UUISelectEvent extends UUIEvent<{}, UUISelectElement> {\n  public static readonly CHANGE = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAGO,MAAM,kBAAN,MAAM,wBAAuB,SAA+B;AAAA,EAGjE,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AARE,gBAAuB,SAAS;AAD3B,IAAM,iBAAN;"}
+{"version":3,"file":"UUISelectEvent.js","names":[],"sources":["../../../src/components/select/UUISelectEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUISelectElement } from './select.element.js';\n\nexport class UUISelectEvent extends UUIEvent<{}, UUISelectElement> {\n  public static readonly CHANGE = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"mappings":";;AAGA,IAAa,iBAAb,cAAoC,SAA+B;;gBACjC;;CAEhC,YAAY,QAAgB,YAAiB,CAAC,GAAG;EAC/C,MAAM,QAAQ;GACZ,SAAS;GACT,GAAG;EACL,CAAC;CACH;AACF"}

package/dist/components/select/select.d.ts

@@ -6,4 +6,3 @@ declare global {
 }
 export * from './select.element.js';
 export * from './UUISelectEvent.js';
-export { UUISelectElement as default } from './select.element.js';

package/dist/components/select/select.element.js

@@ -1,128 +1,116 @@
-import { LitElement, html, nothing, css } from "lit";
-import { property, state, query } from "lit/decorators.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 { UUISelectEvent } from "./UUISelectEvent.js";
-import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.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 _UUISelectElement = class _UUISelectElement extends UUIFormControlWithBasicsMixin(
-  LitElement,
-  ""
-) {
-  constructor() {
-    super(...arguments);
-    this.placeholder = "";
-    this.disabled = false;
-    this.readonly = false;
-    this.options = [];
-    this._groups = [];
-    this.disabledGroups = "";
-    this._disabledGroups = [];
-    this._values = [];
-  }
-  /**
-   * 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();
-    if (!this.label) {
-      console.warn(this.tagName + " needs a `label`", this);
-    }
-  }
-  _createDisabledGroups() {
-    if (this.disabledGroups.length === 0) return;
-    this._disabledGroups = this.disabledGroups.split(",");
-  }
-  _extractGroups() {
-    if (this.options.length === 0) return;
-    this._groups = Array.from(
-      new Set(
-        this.options.filter((option) => option.group).map((option) => option.group)
-      )
-    );
-  }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("options")) {
-      this._extractGroups();
-      this._values = this.options.map((option) => option.value);
-      const selected = this.options.find((option) => option.selected);
-      this.value = selected ? selected.value : "";
-    }
-    if (changedProperties.has("value")) {
-      this.value = this._values.includes(this.value) ? this.value : "";
-    }
-    if (changedProperties.has("disabledGroups")) this._createDisabledGroups();
-  }
-  setValue(e) {
-    e.stopPropagation();
-    const target = e.target;
-    if (e.target) this.value = target.value;
-    this.dispatchEvent(
-      new UUISelectEvent(UUISelectEvent.CHANGE, {
-        bubbles: true,
-        composed: false
-      })
-    );
-  }
-  _renderOption(name, value, selected, disabled) {
-    return html`<option
+import { LitElement, css, html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+//#region src/components/select/select.element.ts
+/**
+* Custom element wrapping the native select element. Pass an array of options to it.
+* This is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.
+* @element uui-select
+* @fires change - when the user changes value
+* @cssprop --uui-select-height - Height of the element
+* @cssprop --uui-select-font-size - Font size of the element
+* @cssprop --uui-select-text-color - Color of the text
+* @cssprop --uui-select-padding-y - Padding on the y axis
+* @cssprop --uui-select-padding-x - Padding on the x axis
+* @cssprop --uui-select-border-color - Border color
+* @cssprop --uui-select-border-color-hover - Border color on hover
+* @cssprop --uui-select-selected-option-background-color - Background color of the selected option
+* @cssprop --uui-select-selected-option-color - Color of the selected option
+* @cssprop --uui-select-outline-color - Outline color
+* @cssprop --uui-select-background-color - Background color
+* @cssprop --uui-select-disabled-background-color - Background color when disabled
+* @extends UUIFormControlMixin
+*/
+var UUISelectElement = class extends UUIFormControlWithBasicsMixin(LitElement, "") {
+	constructor(..._args) {
+		super(..._args);
+		this.placeholder = "";
+		this.disabled = false;
+		this.readonly = false;
+		this.options = [];
+		this._groups = [];
+		this.disabledGroups = "";
+		this._disabledGroups = [];
+		this._values = [];
+	}
+	/**
+	* 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();
+		if (!this.label) console.warn(this.tagName + " needs a `label`", this);
+	}
+	_createDisabledGroups() {
+		if (this.disabledGroups.length === 0) return;
+		this._disabledGroups = this.disabledGroups.split(",");
+	}
+	_extractGroups() {
+		if (this.options.length === 0) return;
+		this._groups = Array.from(new Set(this.options.filter((option) => option.group).map((option) => option.group)));
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("options")) {
+			this._extractGroups();
+			this._values = this.options.map((option) => option.value);
+			const selected = this.options.find((option) => option.selected);
+			this.value = selected ? selected.value : "";
+		}
+		if (changedProperties.has("value")) this.value = this._values.includes(this.value) ? this.value : "";
+		if (changedProperties.has("disabledGroups")) this._createDisabledGroups();
+	}
+	setValue(e) {
+		e.stopPropagation();
+		const target = e.target;
+		if (e.target) this.value = target.value;
+		this.dispatchEvent(new UUISelectEvent(UUISelectEvent.CHANGE, {
+			bubbles: true,
+			composed: false
+		}));
+	}
+	_renderOption(name, value, selected, disabled) {
+		return html`<option
       value="${value}"
       ?selected=${selected}
       ?disabled=${disabled}>
       ${name}
     </option>`;
-  }
-  _renderGrouped() {
-    if (this._groups.length === 0) return nothing;
-    return html`
-      ${this._groups.map(
-      (group) => html`<optgroup
+	}
+	_renderGrouped() {
+		if (this._groups.length === 0) return nothing;
+		return html`
+      ${this._groups.map((group) => html`<optgroup
             label=${group}
-            ?disabled=${this._disabledGroups.some(
-        (disabled) => disabled.toLowerCase() === group.toLowerCase()
-      )}>
-            ${this.options.map(
-        (option) => option.group === group ? this._renderOption(
-          option.name,
-          option.value,
-          option.selected,
-          option.disabled
-        ) : ""
-      )}
-          </optgroup>`
-    )}
+            ?disabled=${this._disabledGroups.some((disabled) => disabled.toLowerCase() === group.toLowerCase())}>
+            ${this.options.map((option) => option.group === group ? this._renderOption(option.name, option.value, option.selected, option.disabled) : "")}
+          </optgroup>`)}
     `;
-  }
-  _getDisplayValue() {
-    return this.options.find((option) => option.value === this.value)?.name || this.value;
-  }
-  render() {
-    if (this.readonly) return html`<span>${this._getDisplayValue()}</span>`;
-    return html` <select
+	}
+	_getDisplayValue() {
+		return this.options.find((option) => option.value === this.value)?.name || this.value;
+	}
+	render() {
+		if (this.readonly) return html`<span>${this._getDisplayValue()}</span>`;
+		return html` <select
       id="native"
       aria-label=${this.label}
       @change=${this.setValue}
@@ -131,19 +119,11 @@ const _UUISelectElement = class _UUISelectElement extends UUIFormControlWithBasi
       .value=${this.value}>
       <option disabled selected value="" hidden>${this.placeholder}</option>
       ${this._renderGrouped()}
-      ${this.options.filter((option) => !option.group).map(
-      (option) => this._renderOption(
-        option.name,
-        option.value,
-        option.selected,
-        option.disabled
-      )
-    )}
+      ${this.options.filter((option) => !option.group).map((option) => this._renderOption(option.name, option.value, option.selected, option.disabled))}
     </select>`;
-  }
-};
-_UUISelectElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         display: inline-block;
         position: relative;
@@ -171,7 +151,7 @@ _UUISelectElement.styles = [
       }
 
       #native:focus-visible {
-        outline: 2px solid
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
           var(--uui-select-outline-color, var(--uui-color-focus));
       }
 
@@ -213,37 +193,28 @@ _UUISelectElement.styles = [
       :host([error]) #native[disabled] {
         border: 1px solid var(--uui-color-invalid-standalone);
       }
-    `
-];
-let UUISelectElement = _UUISelectElement;
-__decorateClass([
-  property({ type: String })
-], UUISelectElement.prototype, "label");
-__decorateClass([
-  property()
-], UUISelectElement.prototype, "placeholder");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUISelectElement.prototype, "disabled");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUISelectElement.prototype, "readonly");
-__decorateClass([
-  property({ type: Array, attribute: false })
-], UUISelectElement.prototype, "options");
-__decorateClass([
-  state()
-], UUISelectElement.prototype, "_groups");
-__decorateClass([
-  property()
-], UUISelectElement.prototype, "disabledGroups");
-__decorateClass([
-  state()
-], UUISelectElement.prototype, "_disabledGroups");
-__decorateClass([
-  query("#native")
-], UUISelectElement.prototype, "_input");
-export {
-  UUISelectElement
+    `];
+	}
 };
-//# sourceMappingURL=select.element.js.map
+__decorate([property({ type: String })], UUISelectElement.prototype, "label", void 0);
+__decorate([property()], UUISelectElement.prototype, "placeholder", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUISelectElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUISelectElement.prototype, "readonly", void 0);
+__decorate([property({
+	type: Array,
+	attribute: false
+})], UUISelectElement.prototype, "options", void 0);
+__decorate([state()], UUISelectElement.prototype, "_groups", void 0);
+__decorate([property()], UUISelectElement.prototype, "disabledGroups", void 0);
+__decorate([state()], UUISelectElement.prototype, "_disabledGroups", void 0);
+__decorate([query("#native")], UUISelectElement.prototype, "_input", void 0);
+//#endregion
+export { UUISelectElement };
+
+//# sourceMappingURL=select.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select.element.js","sources":["../../../src/components/select/select.element.ts"],"sourcesContent":["import { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport { UUISelectEvent } from './UUISelectEvent.js';\n\nexport interface UUISelectOption {\n  name: string;\n  value: string;\n  group?: string;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * Custom element wrapping the native select element. Pass an array of options to it.\n * This is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.\n * @element uui-select\n * @fires change - when the user changes value\n * @cssprop --uui-select-height - Height of the element\n * @cssprop --uui-select-font-size - Font size of the element\n * @cssprop --uui-select-text-color - Color of the text\n * @cssprop --uui-select-padding-y - Padding on the y axis\n * @cssprop --uui-select-padding-x - Padding on the x axis\n * @cssprop --uui-select-border-color - Border color\n * @cssprop --uui-select-border-color-hover - Border color on hover\n * @cssprop --uui-select-selected-option-background-color - Background color of the selected option\n * @cssprop --uui-select-selected-option-color - Color of the selected option\n * @cssprop --uui-select-outline-color - Outline color\n * @cssprop --uui-select-background-color - Background color\n * @cssprop --uui-select-disabled-background-color - Background color when disabled\n * @extends UUIFormControlMixin\n */\nexport class UUISelectElement extends UUIFormControlWithBasicsMixin(\n  LitElement,\n  '',\n) {\n  /**\n   * Text with which component should be labeled\n   * @type {string}\n   * @attr\n   */\n  @property({ type: String })\n  public label!: string;\n\n  /**\n   * Defines the select's placeholder.\n   * @type {string}\n   * @attr\n   */\n  @property()\n  placeholder = '';\n\n  /**\n   * Disables the select.\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   * An array of options to be rendered by the element. The option interface has up to 5 properties:\n   * `interface UUISelectOption {\n    name: string;\n    value: string;\n    group?: string;\n    selected?: boolean;\n    disabled?: boolean;\n  }`\n   */\n  @property({ type: Array, attribute: false })\n  options: UUISelectOption[] = [];\n\n  @state()\n  private _groups: string[] = [];\n\n  /**\n   * An array of options to be rendered by the element. Put the names of the groups you wanna disable, separated by a coma: `disabledGroups='fruits, vegetables'`. It's not case sensitive\n   */\n  @property()\n  disabledGroups = '';\n\n  @state()\n  private _disabledGroups: string[] = [];\n\n  private _values: string[] = [];\n\n  @query('#native')\n  protected readonly _input!: HTMLSelectElement;\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    if (!this.label) {\n      console.warn(this.tagName + ' needs a `label`', this);\n    }\n  }\n\n  private _createDisabledGroups() {\n    if (this.disabledGroups.length === 0) return;\n    this._disabledGroups = this.disabledGroups.split(',');\n  }\n\n  private _extractGroups() {\n    if (this.options.length === 0) return;\n\n    this._groups = Array.from(\n      new Set(\n        this.options\n          .filter(option => option.group)\n          .map(option => option.group as string),\n      ),\n    );\n  }\n\n  willUpdate(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('options')) {\n      this._extractGroups();\n      this._values = this.options.map(option => option.value);\n      const selected = this.options.find(option => option.selected);\n      this.value = selected ? selected.value : '';\n    }\n\n    if (changedProperties.has('value')) {\n      this.value = this._values.includes(this.value as string)\n        ? this.value\n        : '';\n    }\n    if (changedProperties.has('disabledGroups')) this._createDisabledGroups();\n  }\n\n  protected setValue(e: Event) {\n    e.stopPropagation();\n    const target = e.target as HTMLSelectElement;\n    if (e.target) this.value = target.value;\n    this.dispatchEvent(\n      new UUISelectEvent(UUISelectEvent.CHANGE, {\n        bubbles: true,\n        composed: false,\n      }),\n    );\n  }\n\n  private _renderOption(\n    name: string,\n    value: string,\n    selected: boolean | undefined,\n    disabled: boolean | undefined,\n  ) {\n    return html`<option\n      value=\"${value}\"\n      ?selected=${selected}\n      ?disabled=${disabled}>\n      ${name}\n    </option>`;\n  }\n\n  private _renderGrouped() {\n    if (this._groups.length === 0) return nothing;\n\n    return html`\n      ${this._groups.map(\n        group =>\n          html`<optgroup\n            label=${group}\n            ?disabled=${this._disabledGroups.some(\n              disabled => disabled.toLowerCase() === group.toLowerCase(),\n            )}>\n            ${this.options.map(option =>\n              option.group === group\n                ? this._renderOption(\n                    option.name,\n                    option.value,\n                    option.selected,\n                    option.disabled,\n                  )\n                : '',\n            )}\n          </optgroup>`,\n      )}\n    `;\n  }\n\n  private _getDisplayValue() {\n    return (\n      this.options.find(option => option.value === this.value)?.name ||\n      this.value\n    );\n  }\n\n  render() {\n    if (this.readonly) return html`<span>${this._getDisplayValue()}</span>`;\n\n    return html` <select\n      id=\"native\"\n      aria-label=${this.label}\n      @change=${this.setValue}\n      ?disabled=${this.disabled}\n      .name=${this.name}\n      .value=${this.value as string}>\n      <option disabled selected value=\"\" hidden>${this.placeholder}</option>\n      ${this._renderGrouped()}\n      ${this.options\n        .filter(option => !option.group)\n        .map(option =>\n          this._renderOption(\n            option.name,\n            option.value,\n            option.selected,\n            option.disabled,\n          ),\n        )}\n    </select>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\n        font-family: inherit;\n      }\n\n      #native {\n        display: inline-block;\n        font-family: inherit;\n        font-size: var(--uui-select-font-size, inherit);\n        height: var(--uui-select-height, var(--uui-size-11));\n        padding: var(--uui-select-padding-y, var(--uui-size-1))\n          var(--uui-select-padding-x, var(--uui-size-2));\n        color: var(--uui-select-text-color, var(--uui-color-text));\n        box-sizing: border-box;\n        border-radius: var(--uui-border-radius);\n        border: 1px solid\n          var(--uui-select-border-color, var(--uui-color-border));\n        transition: all 150ms ease;\n        width: 100%;\n        background-color: var(\n          --uui-select-background-color,\n          var(--uui-color-surface)\n        );\n      }\n\n      #native:focus-visible {\n        outline: 2px solid\n          var(--uui-select-outline-color, var(--uui-color-focus));\n      }\n\n      #native[disabled] {\n        cursor: not-allowed;\n        background-color: var(\n          --uui-select-disabled-background-color,\n          var(--uui-color-disabled)\n        );\n      }\n\n      #native:hover {\n        border: 1px solid\n          var(--uui-select-border-color-hover, var(--uui-color-border-emphasis));\n      }\n\n      option:checked {\n        background: var(\n          --uui-select-selected-option-background-color,\n          var(--uui-color-selected)\n        );\n        color: var(\n          --uui-select-selected-option-color,\n          var(--uui-color-selected-contrast)\n        );\n      }\n\n      #caret {\n        position: absolute;\n        right: 12px;\n        top: 50%;\n        transform: translateY(-50%);\n      }\n\n      :host([error]) #native {\n        border: 1px solid var(--uui-color-invalid-standalone);\n      }\n\n      :host([error]) #native[disabled] {\n        border: 1px solid var(--uui-color-invalid-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"select.element.js","names":[],"sources":["../../../src/components/select/select.element.ts"],"sourcesContent":["import { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport { UUISelectEvent } from './UUISelectEvent.js';\n\nexport interface UUISelectOption {\n  name: string;\n  value: string;\n  group?: string;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * Custom element wrapping the native select element. Pass an array of options to it.\n * This is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.\n * @element uui-select\n * @fires change - when the user changes value\n * @cssprop --uui-select-height - Height of the element\n * @cssprop --uui-select-font-size - Font size of the element\n * @cssprop --uui-select-text-color - Color of the text\n * @cssprop --uui-select-padding-y - Padding on the y axis\n * @cssprop --uui-select-padding-x - Padding on the x axis\n * @cssprop --uui-select-border-color - Border color\n * @cssprop --uui-select-border-color-hover - Border color on hover\n * @cssprop --uui-select-selected-option-background-color - Background color of the selected option\n * @cssprop --uui-select-selected-option-color - Color of the selected option\n * @cssprop --uui-select-outline-color - Outline color\n * @cssprop --uui-select-background-color - Background color\n * @cssprop --uui-select-disabled-background-color - Background color when disabled\n * @extends UUIFormControlMixin\n */\nexport class UUISelectElement extends UUIFormControlWithBasicsMixin(\n  LitElement,\n  '',\n) {\n  /**\n   * Text with which component should be labeled\n   * @type {string}\n   * @attr\n   */\n  @property({ type: String })\n  public label!: string;\n\n  /**\n   * Defines the select's placeholder.\n   * @type {string}\n   * @attr\n   */\n  @property()\n  placeholder = '';\n\n  /**\n   * Disables the select.\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   * An array of options to be rendered by the element. The option interface has up to 5 properties:\n   * `interface UUISelectOption {\n    name: string;\n    value: string;\n    group?: string;\n    selected?: boolean;\n    disabled?: boolean;\n  }`\n   */\n  @property({ type: Array, attribute: false })\n  options: UUISelectOption[] = [];\n\n  @state()\n  private _groups: string[] = [];\n\n  /**\n   * An array of options to be rendered by the element. Put the names of the groups you wanna disable, separated by a coma: `disabledGroups='fruits, vegetables'`. It's not case sensitive\n   */\n  @property()\n  disabledGroups = '';\n\n  @state()\n  private _disabledGroups: string[] = [];\n\n  private _values: string[] = [];\n\n  @query('#native')\n  protected readonly _input!: HTMLSelectElement;\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    if (!this.label) {\n      console.warn(this.tagName + ' needs a `label`', this);\n    }\n  }\n\n  private _createDisabledGroups() {\n    if (this.disabledGroups.length === 0) return;\n    this._disabledGroups = this.disabledGroups.split(',');\n  }\n\n  private _extractGroups() {\n    if (this.options.length === 0) return;\n\n    this._groups = Array.from(\n      new Set(\n        this.options\n          .filter(option => option.group)\n          .map(option => option.group as string),\n      ),\n    );\n  }\n\n  willUpdate(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('options')) {\n      this._extractGroups();\n      this._values = this.options.map(option => option.value);\n      const selected = this.options.find(option => option.selected);\n      this.value = selected ? selected.value : '';\n    }\n\n    if (changedProperties.has('value')) {\n      this.value = this._values.includes(this.value as string)\n        ? this.value\n        : '';\n    }\n    if (changedProperties.has('disabledGroups')) this._createDisabledGroups();\n  }\n\n  protected setValue(e: Event) {\n    e.stopPropagation();\n    const target = e.target as HTMLSelectElement;\n    if (e.target) this.value = target.value;\n    this.dispatchEvent(\n      new UUISelectEvent(UUISelectEvent.CHANGE, {\n        bubbles: true,\n        composed: false,\n      }),\n    );\n  }\n\n  private _renderOption(\n    name: string,\n    value: string,\n    selected: boolean | undefined,\n    disabled: boolean | undefined,\n  ) {\n    return html`<option\n      value=\"${value}\"\n      ?selected=${selected}\n      ?disabled=${disabled}>\n      ${name}\n    </option>`;\n  }\n\n  private _renderGrouped() {\n    if (this._groups.length === 0) return nothing;\n\n    return html`\n      ${this._groups.map(\n        group =>\n          html`<optgroup\n            label=${group}\n            ?disabled=${this._disabledGroups.some(\n              disabled => disabled.toLowerCase() === group.toLowerCase(),\n            )}>\n            ${this.options.map(option =>\n              option.group === group\n                ? this._renderOption(\n                    option.name,\n                    option.value,\n                    option.selected,\n                    option.disabled,\n                  )\n                : '',\n            )}\n          </optgroup>`,\n      )}\n    `;\n  }\n\n  private _getDisplayValue() {\n    return (\n      this.options.find(option => option.value === this.value)?.name ||\n      this.value\n    );\n  }\n\n  render() {\n    if (this.readonly) return html`<span>${this._getDisplayValue()}</span>`;\n\n    return html` <select\n      id=\"native\"\n      aria-label=${this.label}\n      @change=${this.setValue}\n      ?disabled=${this.disabled}\n      .name=${this.name}\n      .value=${this.value as string}>\n      <option disabled selected value=\"\" hidden>${this.placeholder}</option>\n      ${this._renderGrouped()}\n      ${this.options\n        .filter(option => !option.group)\n        .map(option =>\n          this._renderOption(\n            option.name,\n            option.value,\n            option.selected,\n            option.disabled,\n          ),\n        )}\n    </select>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\n        font-family: inherit;\n      }\n\n      #native {\n        display: inline-block;\n        font-family: inherit;\n        font-size: var(--uui-select-font-size, inherit);\n        height: var(--uui-select-height, var(--uui-size-11));\n        padding: var(--uui-select-padding-y, var(--uui-size-1))\n          var(--uui-select-padding-x, var(--uui-size-2));\n        color: var(--uui-select-text-color, var(--uui-color-text));\n        box-sizing: border-box;\n        border-radius: var(--uui-border-radius);\n        border: 1px solid\n          var(--uui-select-border-color, var(--uui-color-border));\n        transition: all 150ms ease;\n        width: 100%;\n        background-color: var(\n          --uui-select-background-color,\n          var(--uui-color-surface)\n        );\n      }\n\n      #native:focus-visible {\n        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid\n          var(--uui-select-outline-color, var(--uui-color-focus));\n      }\n\n      #native[disabled] {\n        cursor: not-allowed;\n        background-color: var(\n          --uui-select-disabled-background-color,\n          var(--uui-color-disabled)\n        );\n      }\n\n      #native:hover {\n        border: 1px solid\n          var(--uui-select-border-color-hover, var(--uui-color-border-emphasis));\n      }\n\n      option:checked {\n        background: var(\n          --uui-select-selected-option-background-color,\n          var(--uui-color-selected)\n        );\n        color: var(\n          --uui-select-selected-option-color,\n          var(--uui-color-selected-contrast)\n        );\n      }\n\n      #caret {\n        position: absolute;\n        right: 12px;\n        top: 50%;\n        transform: translateY(-50%);\n      }\n\n      :host([error]) #native {\n        border: 1px solid var(--uui-color-invalid-standalone);\n      }\n\n      :host([error]) #native[disabled] {\n        border: 1px solid var(--uui-color-invalid-standalone);\n      }\n    `,\n  ];\n}\n"],"mappings":"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"}

package/dist/components/select/select.js

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

package/dist/components/select/select.js.map

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

package/dist/components/slider/UUISliderEvent.js

@@ -1,16 +1,20 @@
 import { UUIEvent } from "../../internal/events/UUIEvent.js";
-const _UUISliderEvent = class _UUISliderEvent extends UUIEvent {
-  constructor(evName, eventInit = {}) {
-    super(evName, {
-      bubbles: true,
-      ...eventInit
-    });
-  }
+//#region src/components/slider/UUISliderEvent.ts
+var UUISliderEvent = class extends UUIEvent {
+	static {
+		this.INPUT = "input";
+	}
+	static {
+		this.CHANGE = "change";
+	}
+	constructor(evName, eventInit = {}) {
+		super(evName, {
+			bubbles: true,
+			...eventInit
+		});
+	}
 };
-_UUISliderEvent.INPUT = "input";
-_UUISliderEvent.CHANGE = "change";
-let UUISliderEvent = _UUISliderEvent;
-export {
-  UUISliderEvent
-};
-//# sourceMappingURL=UUISliderEvent.js.map
+//#endregion
+export { UUISliderEvent };
+
+//# sourceMappingURL=UUISliderEvent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"UUISliderEvent.js","sources":["../../../src/components/slider/UUISliderEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUISliderElement } from './slider.element.js';\n\nexport class UUISliderEvent extends UUIEvent<{}, UUISliderElement> {\n  public static readonly INPUT = 'input';\n  public static readonly CHANGE = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAGO,MAAM,kBAAN,MAAM,wBAAuB,SAA+B;AAAA,EAIjE,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AATE,gBAAuB,QAAQ;AAC/B,gBAAuB,SAAS;AAF3B,IAAM,iBAAN;"}
+{"version":3,"file":"UUISliderEvent.js","names":[],"sources":["../../../src/components/slider/UUISliderEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUISliderElement } from './slider.element.js';\n\nexport class UUISliderEvent extends UUIEvent<{}, UUISliderElement> {\n  public static readonly INPUT = 'input';\n  public static readonly CHANGE = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"mappings":";;AAGA,IAAa,iBAAb,cAAoC,SAA+B;;eAClC;;;gBACC;;CAEhC,YAAY,QAAgB,YAAiB,CAAC,GAAG;EAC/C,MAAM,QAAQ;GACZ,SAAS;GACT,GAAG;EACL,CAAC;CACH;AACF"}

package/dist/components/slider/native-input.styles.js

@@ -1,5 +1,6 @@
 import { css } from "lit";
-const nativeInputStyles = css`
+//#region src/components/slider/native-input.styles.ts
+var nativeInputStyles = css`
   input[type='range'] {
     left: 0;
     position: absolute;
@@ -107,7 +108,7 @@ const nativeInputStyles = css`
     background: transparent;
   }
 `;
-export {
-  nativeInputStyles
-};
-//# sourceMappingURL=native-input.styles.js.map
+//#endregion
+export { nativeInputStyles };
+
+//# sourceMappingURL=native-input.styles.js.map

package/dist/components/slider/native-input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-input.styles.js","sources":["../../../src/components/slider/native-input.styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const nativeInputStyles = css`\n  input[type='range'] {\n    left: 0;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 100%;\n    z-index: 2;\n\n    height: 100%;\n    -webkit-appearance: none;\n    margin: 0px;\n    padding: 0px;\n    border: 0 none;\n    background: transparent;\n    color: transparent;\n    overflow: visible;\n    border: none;\n  }\n  input[type='range']:focus {\n    outline: none;\n  }\n  input[type='range']::-webkit-slider-runnable-track {\n    width: 100%;\n    height: 100%;\n    -webkit-appearance: none;\n    margin: 0px;\n    padding: 0px;\n    border: none;\n    background: transparent;\n    color: transparent;\n    overflow: visible;\n    order: none;\n  }\n\n  input[type='range']:focus::-webkit-slider-runnable-track {\n    background: transparent;\n    border: none;\n  }\n\n  input[type='range']::-moz-range-track {\n    width: 100%;\n    height: 100%;\n    -moz-appearance: none;\n    margin: 0px;\n    padding: 0px;\n    border: 0 none;\n    background: transparent;\n    color: transparent;\n    overflow: visible;\n  }\n\n  input[type='range']::-ms-track {\n    width: 100%;\n    height: 100%;\n    -webkit-appearance: none;\n    margin: 0px;\n    padding: 0px;\n    border: 0 none;\n    background: transparent;\n    color: transparent;\n    overflow: visible;\n  }\n  input[type='range']::-ms-fill-lower,\n  input[type='range']::-ms-fill-upper {\n    background: transparent;\n    border: 0 none;\n  }\n\n  input[type='range']::-ms-tooltip {\n    display: none;\n  }\n\n  input[type='range']::-moz-range-thumb {\n    width: 18px;\n    height: 18px;\n    border-radius: 12px;\n    border: 0 none;\n    background: transparent;\n    cursor: pointer;\n  }\n\n  input[type='range']::-webkit-slider-thumb {\n    width: 18px;\n    height: 18px;\n    border-radius: 12px;\n    border: 0 none;\n    background: transparent;\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n\n  input[type='range']::-ms-thumb {\n    width: 18px;\n    height: 18px;\n    border-radius: 12px;\n    border: 0 none;\n    background: transparent;\n    cursor: pointer;\n  }\n\n  input[type='range']:focus::-ms-fill-lower {\n    background: transparent;\n  }\n  input[type='range']:focus::-ms-fill-upper {\n    background: transparent;\n  }\n`;\n"],"names":[],"mappings":";AAEO,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"native-input.styles.js","names":[],"sources":["../../../src/components/slider/native-input.styles.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const nativeInputStyles = css`\n  input[type='range'] {\n    left: 0;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 100%;\n    z-index: 2;\n\n    height: 100%;\n    -webkit-appearance: none;\n    margin: 0px;\n    padding: 0px;\n    border: 0 none;\n    background: transparent;\n    color: transparent;\n    overflow: visible;\n    border: none;\n  }\n  input[type='range']:focus {\n    outline: none;\n  }\n  input[type='range']::-webkit-slider-runnable-track {\n    width: 100%;\n    height: 100%;\n    -webkit-appearance: none;\n    margin: 0px;\n    padding: 0px;\n    border: none;\n    background: transparent;\n    color: transparent;\n    overflow: visible;\n    order: none;\n  }\n\n  input[type='range']:focus::-webkit-slider-runnable-track {\n    background: transparent;\n    border: none;\n  }\n\n  input[type='range']::-moz-range-track {\n    width: 100%;\n    height: 100%;\n    -moz-appearance: none;\n    margin: 0px;\n    padding: 0px;\n    border: 0 none;\n    background: transparent;\n    color: transparent;\n    overflow: visible;\n  }\n\n  input[type='range']::-ms-track {\n    width: 100%;\n    height: 100%;\n    -webkit-appearance: none;\n    margin: 0px;\n    padding: 0px;\n    border: 0 none;\n    background: transparent;\n    color: transparent;\n    overflow: visible;\n  }\n  input[type='range']::-ms-fill-lower,\n  input[type='range']::-ms-fill-upper {\n    background: transparent;\n    border: 0 none;\n  }\n\n  input[type='range']::-ms-tooltip {\n    display: none;\n  }\n\n  input[type='range']::-moz-range-thumb {\n    width: 18px;\n    height: 18px;\n    border-radius: 12px;\n    border: 0 none;\n    background: transparent;\n    cursor: pointer;\n  }\n\n  input[type='range']::-webkit-slider-thumb {\n    width: 18px;\n    height: 18px;\n    border-radius: 12px;\n    border: 0 none;\n    background: transparent;\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n\n  input[type='range']::-ms-thumb {\n    width: 18px;\n    height: 18px;\n    border-radius: 12px;\n    border: 0 none;\n    background: transparent;\n    cursor: pointer;\n  }\n\n  input[type='range']:focus::-ms-fill-lower {\n    background: transparent;\n  }\n  input[type='range']:focus::-ms-fill-upper {\n    background: transparent;\n  }\n`;\n"],"mappings":";;AAEA,IAAa,oBAAoB,GAAG"}

package/dist/components/slider/slider.d.ts

@@ -6,4 +6,3 @@ declare global {
 }
 export * from './slider.element.js';
 export * from './UUISliderEvent.js';
-export { UUISliderElement as default } from './slider.element.js';

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

@@ -77,6 +77,13 @@ export declare class UUISliderElement extends UUISliderElement_base {
      * @attr
      */
     label: string;
+    /**
+     * 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.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    autocomplete?: string;
     private readonly _input;
     private readonly _track;
     constructor();