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

package/dist/components/color-swatches/UUIColorSwatchesEvent.js

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

package/dist/components/color-swatches/UUIColorSwatchesEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UUIColorSwatchesEvent.js","sources":["../../../src/components/color-swatches/UUIColorSwatchesEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\n\nimport type { UUIColorSwatchElement } from '../color-swatch/color-swatch.element.js';\n\nexport class UUIColorSwatchesEvent extends UUIEvent<{}, UUIColorSwatchElement> {\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":";AAIO,MAAM,yBAAN,MAAM,+BAA8B,SAAoC;AAAA,EAG7E,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AARE,uBAAuB,SAAS;AAD3B,IAAM,wBAAN;"}
+{"version":3,"file":"UUIColorSwatchesEvent.js","names":[],"sources":["../../../src/components/color-swatches/UUIColorSwatchesEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\n\nimport type { UUIColorSwatchElement } from '../color-swatch/color-swatch.element.js';\n\nexport class UUIColorSwatchesEvent extends UUIEvent<{}, UUIColorSwatchElement> {\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":";;AAIA,IAAa,wBAAb,cAA2C,SAAoC;;gBAC7C;;CAEhC,YAAY,QAAgB,YAAiB,CAAC,GAAG;EAC/C,MAAM,QAAQ;GACZ,SAAS;GACT,GAAG;EACL,CAAC;CACH;AACF"}

package/dist/components/color-swatches/color-swatches.d.ts

@@ -6,4 +6,3 @@ declare global {
 }
 export * from './color-swatches.element.js';
 export * from './UUIColorSwatchesEvent.js';
-export { UUIColorSwatchesElement as default } from './color-swatches.element.js';

package/dist/components/color-swatches/color-swatches.element.js

@@ -1,140 +1,123 @@
-import { LitElement, html, css } from "lit";
-import { property, queryAssignedElements } from "lit/decorators.js";
-import { UUIColorSwatchesEvent } from "./UUIColorSwatchesEvent.js";
 import { UUISelectableEvent } from "../../internal/events/UUISelectableEvent.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { LabelMixin } from "../../internal/mixins/LabelMixin.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 _UUIColorSwatchesElement = class _UUIColorSwatchesElement extends LabelMixin("label", LitElement) {
-  constructor() {
-    super();
-    this.value = "";
-    this.disabled = false;
-    this.readonly = false;
-    this._onSelected = (event) => {
-      const target = event.target;
-      if (!this._swatches.includes(target)) return;
-      if (this._selectedElement) {
-        this._selectedElement.selected = false;
-        this._selectedElement.active = false;
-        this._selectedElement = void 0;
-      }
-      this._selectedElement = target;
-      this._activeElement = this._selectedElement;
-      this.value = this._selectedElement.value || "";
-      this.dispatchEvent(new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE));
-    };
-    this._onDeselected = (event) => {
-      const target = event.target;
-      if (!this._swatches.includes(target)) return;
-      if (this._activeElement === target) {
-        this._activeElement = void 0;
-      }
-      if (this._selectedElement === target) {
-        this._selectedElement.selected = false;
-        this._selectedElement.active = false;
-        this._selectedElement = void 0;
-        this.value = "";
-        this.dispatchEvent(
-          new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE)
-        );
-      }
-    };
-    this.addEventListener(UUISelectableEvent.SELECTED, this._onSelected);
-    this.addEventListener(UUISelectableEvent.DESELECTED, this._onDeselected);
-  }
-  get _activeElement() {
-    return this.__activeElement;
-  }
-  set _activeElement(el) {
-    if (this.__activeElement) {
-      this.__activeElement.active = false;
-    }
-    if (el) {
-      el.active = true;
-      this.__activeElement = el;
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "radiogroup");
-    this.setAttribute("aria-label", this.label);
-  }
-  willUpdate(_changedProperties) {
-    if (_changedProperties.has("label")) {
-      this.setAttribute("aria-label", this.label);
-    }
-  }
-  _handleSlotChange() {
-    if (!this._swatches || this._swatches.length === 0) return;
-    this._swatches.forEach((swatch) => {
-      swatch.setAttribute("aria-checked", "false");
-      swatch.setAttribute("role", "radio");
-      if (this.disabled) {
-        swatch.setAttribute("disabled", "");
-      } else {
-        swatch.setAttribute("selectable", "selectable");
-      }
-      if (this.readonly) {
-        swatch.setAttribute("readonly", "");
-      }
-      if (this.value !== "" && swatch.value === this.value) {
-        swatch.selected = true;
-        swatch.setAttribute("aria-checked", "true");
-        this._selectedElement = swatch;
-        this._activeElement = this._selectedElement;
-      }
-    });
-  }
-  /**
-   * Deselects all swatches.
-   *
-   * @memberof UUIColorSwatchesElement
-   */
-  resetSelection() {
-    this._swatches.forEach((swatch) => {
-      swatch.selected = false;
-      swatch.active = false;
-      swatch.selectable = !swatch.disabled;
-    });
-    this._activeElement = void 0;
-    this._selectedElement = void 0;
-    this.value = "";
-  }
-  render() {
-    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;
-  }
-};
-_UUIColorSwatchesElement.styles = [
-  css`
+import { UUIColorSwatchesEvent } from "./UUIColorSwatchesEvent.js";
+import { LitElement, css, html } from "lit";
+import { property, queryAssignedElements } from "lit/decorators.js";
+//#region src/components/color-swatches/color-swatches.element.ts
+/**
+*  Put uui-color-swatch elements inside this element to create a color swatch selector.
+*  @element uui-color-swatches
+*  @slot - Default slot for content.
+*  @fires {UUIColorSwatchesEvent} change - Fires when a color swatch is selected.
+*/
+var UUIColorSwatchesElement = class extends LabelMixin("label", LitElement) {
+	get _activeElement() {
+		return this.__activeElement;
+	}
+	set _activeElement(el) {
+		if (this.__activeElement) this.__activeElement.active = false;
+		if (el) {
+			el.active = true;
+			this.__activeElement = el;
+		}
+	}
+	constructor() {
+		super();
+		this.value = "";
+		this.disabled = false;
+		this.readonly = false;
+		this._onSelected = (event) => {
+			const target = event.target;
+			if (!this._swatches.includes(target)) return;
+			if (this._selectedElement) {
+				this._selectedElement.selected = false;
+				this._selectedElement.active = false;
+				this._selectedElement = void 0;
+			}
+			this._selectedElement = target;
+			this._activeElement = this._selectedElement;
+			this.value = this._selectedElement.value || "";
+			this.dispatchEvent(new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE));
+		};
+		this._onDeselected = (event) => {
+			const target = event.target;
+			if (!this._swatches.includes(target)) return;
+			if (this._activeElement === target) this._activeElement = void 0;
+			if (this._selectedElement === target) {
+				this._selectedElement.selected = false;
+				this._selectedElement.active = false;
+				this._selectedElement = void 0;
+				this.value = "";
+				this.dispatchEvent(new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE));
+			}
+		};
+		this.addEventListener(UUISelectableEvent.SELECTED, this._onSelected);
+		this.addEventListener(UUISelectableEvent.DESELECTED, this._onDeselected);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "radiogroup");
+		this.setAttribute("aria-label", this.label);
+	}
+	willUpdate(_changedProperties) {
+		if (_changedProperties.has("label")) this.setAttribute("aria-label", this.label);
+	}
+	_handleSlotChange() {
+		if (!this._swatches || this._swatches.length === 0) return;
+		this._swatches.forEach((swatch) => {
+			swatch.setAttribute("aria-checked", "false");
+			swatch.setAttribute("role", "radio");
+			if (this.disabled) swatch.setAttribute("disabled", "");
+			else swatch.setAttribute("selectable", "selectable");
+			if (this.readonly) swatch.setAttribute("readonly", "");
+			if (this.value !== "" && swatch.value === this.value) {
+				swatch.selected = true;
+				swatch.setAttribute("aria-checked", "true");
+				this._selectedElement = swatch;
+				this._activeElement = this._selectedElement;
+			}
+		});
+	}
+	/**
+	* Deselects all swatches.
+	*
+	* @memberof UUIColorSwatchesElement
+	*/
+	resetSelection() {
+		this._swatches.forEach((swatch) => {
+			swatch.selected = false;
+			swatch.active = false;
+			swatch.selectable = !swatch.disabled;
+		});
+		this._activeElement = void 0;
+		this._selectedElement = void 0;
+		this.value = "";
+	}
+	render() {
+		return html`<slot @slotchange=${this._handleSlotChange}></slot>`;
+	}
+	static {
+		this.styles = [css`
       :host {
         display: flex;
         flex-wrap: wrap;
         gap: 0.4rem;
       }
-    `
-];
-let UUIColorSwatchesElement = _UUIColorSwatchesElement;
-__decorateClass([
-  property()
-], UUIColorSwatchesElement.prototype, "value");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIColorSwatchesElement.prototype, "disabled");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIColorSwatchesElement.prototype, "readonly");
-__decorateClass([
-  queryAssignedElements({ selector: "uui-color-swatch" })
-], UUIColorSwatchesElement.prototype, "_swatches");
-export {
-  UUIColorSwatchesElement
+    `];
+	}
 };
-//# sourceMappingURL=color-swatches.element.js.map
+__decorate([property()], UUIColorSwatchesElement.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIColorSwatchesElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIColorSwatchesElement.prototype, "readonly", void 0);
+__decorate([queryAssignedElements({ selector: "uui-color-swatch" })], UUIColorSwatchesElement.prototype, "_swatches", void 0);
+//#endregion
+export { UUIColorSwatchesElement };
+
+//# sourceMappingURL=color-swatches.element.js.map

package/dist/components/color-swatches/color-swatches.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-swatches.element.js","sources":["../../../src/components/color-swatches/color-swatches.element.ts"],"sourcesContent":["import { UUISelectableEvent } from '../../internal/events/index.js';\nimport type { UUIColorSwatchElement } from '../color-swatch/color-swatch.js';\nimport type { PropertyValueMap } from 'lit';\nimport { css, html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { LabelMixin } from '../../internal/mixins/index.js';\nimport { UUIColorSwatchesEvent } from './UUIColorSwatchesEvent.js';\n\n/**\n *  Put uui-color-swatch elements inside this element to create a color swatch selector.\n *  @element uui-color-swatches\n *  @slot - Default slot for content.\n *  @fires {UUIColorSwatchesEvent} change - Fires when a color swatch is selected.\n */\nexport class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {\n  /**\n   * Value of selected option.\n   *\n   * @attr\n   */\n  @property()\n  value = '';\n\n  /**\n   * Sets the swatches to disabled.\n   * @type {boolean}\n   * @attr\n   * @default false\n   **/\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Sets the swatches to readonly mode.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  @queryAssignedElements({ selector: 'uui-color-swatch' })\n  private readonly _swatches!: Array<UUIColorSwatchElement>;\n\n  private __activeElement: UUIColorSwatchElement | undefined;\n  private get _activeElement(): UUIColorSwatchElement | undefined {\n    return this.__activeElement;\n  }\n\n  private set _activeElement(el: UUIColorSwatchElement | undefined) {\n    if (this.__activeElement) {\n      this.__activeElement.active = false;\n    }\n    if (el) {\n      el.active = true;\n      this.__activeElement = el;\n    }\n  }\n\n  private _selectedElement: UUIColorSwatchElement | undefined;\n\n  constructor() {\n    super();\n    this.addEventListener(UUISelectableEvent.SELECTED, this._onSelected);\n    this.addEventListener(UUISelectableEvent.DESELECTED, this._onDeselected);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'radiogroup');\n    this.setAttribute('aria-label', this.label);\n  }\n\n  protected willUpdate(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    if (_changedProperties.has('label')) {\n      this.setAttribute('aria-label', this.label);\n    }\n  }\n\n  private _handleSlotChange() {\n    if (!this._swatches || this._swatches.length === 0) return;\n    this._swatches.forEach(swatch => {\n      swatch.setAttribute('aria-checked', 'false');\n      swatch.setAttribute('role', 'radio');\n\n      if (this.disabled) {\n        swatch.setAttribute('disabled', '');\n      } else {\n        // For some reason the value it really wants the attribute to be set not the value. If value is set then it is not reflected properly. :cry:\n        swatch.setAttribute('selectable', 'selectable');\n      }\n\n      if (this.readonly) {\n        swatch.setAttribute('readonly', '');\n      }\n\n      if (this.value !== '' && swatch.value === this.value) {\n        swatch.selected = true;\n        swatch.setAttribute('aria-checked', 'true');\n        this._selectedElement = swatch;\n        this._activeElement = this._selectedElement;\n      }\n    });\n  }\n\n  private readonly _onSelected = (event: Event) => {\n    const target = event.target as UUIColorSwatchElement;\n    //react only to selectable events from UUI-Color-Swatch elements\n    //? can I use instanceof here instead? that creates a dependency on the uui-color-swatch element\n    if (!this._swatches.includes(target)) return;\n    if (this._selectedElement) {\n      this._selectedElement.selected = false;\n      this._selectedElement.active = false;\n      this._selectedElement = undefined;\n    }\n    this._selectedElement = target;\n    this._activeElement = this._selectedElement;\n\n    this.value = this._selectedElement.value || '';\n\n    this.dispatchEvent(new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE));\n  };\n\n  private readonly _onDeselected = (event: Event) => {\n    const target = event.target as UUIColorSwatchElement;\n    if (!this._swatches.includes(target)) return;\n\n    if (this._activeElement === target) {\n      this._activeElement = undefined;\n    }\n    if (this._selectedElement === target) {\n      this._selectedElement.selected = false;\n      this._selectedElement.active = false;\n      this._selectedElement = undefined;\n      this.value = '';\n      this.dispatchEvent(\n        new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE),\n      );\n    }\n  };\n\n  /**\n   * Deselects all swatches.\n   *\n   * @memberof UUIColorSwatchesElement\n   */\n  resetSelection() {\n    this._swatches.forEach(swatch => {\n      swatch.selected = false;\n      swatch.active = false;\n      swatch.selectable = !swatch.disabled;\n    });\n    this._activeElement = undefined;\n    this._selectedElement = undefined;\n    this.value = '';\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.4rem;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"color-swatches.element.js","names":[],"sources":["../../../src/components/color-swatches/color-swatches.element.ts"],"sourcesContent":["import { UUISelectableEvent } from '../../internal/events/index.js';\nimport type { UUIColorSwatchElement } from '../color-swatch/color-swatch.js';\nimport type { PropertyValueMap } from 'lit';\nimport { css, html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { LabelMixin } from '../../internal/mixins/index.js';\nimport { UUIColorSwatchesEvent } from './UUIColorSwatchesEvent.js';\n\n/**\n *  Put uui-color-swatch elements inside this element to create a color swatch selector.\n *  @element uui-color-swatches\n *  @slot - Default slot for content.\n *  @fires {UUIColorSwatchesEvent} change - Fires when a color swatch is selected.\n */\nexport class UUIColorSwatchesElement extends LabelMixin('label', LitElement) {\n  /**\n   * Value of selected option.\n   *\n   * @attr\n   */\n  @property()\n  value = '';\n\n  /**\n   * Sets the swatches to disabled.\n   * @type {boolean}\n   * @attr\n   * @default false\n   **/\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Sets the swatches to readonly mode.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  @queryAssignedElements({ selector: 'uui-color-swatch' })\n  private readonly _swatches!: Array<UUIColorSwatchElement>;\n\n  private __activeElement: UUIColorSwatchElement | undefined;\n  private get _activeElement(): UUIColorSwatchElement | undefined {\n    return this.__activeElement;\n  }\n\n  private set _activeElement(el: UUIColorSwatchElement | undefined) {\n    if (this.__activeElement) {\n      this.__activeElement.active = false;\n    }\n    if (el) {\n      el.active = true;\n      this.__activeElement = el;\n    }\n  }\n\n  private _selectedElement: UUIColorSwatchElement | undefined;\n\n  constructor() {\n    super();\n    this.addEventListener(UUISelectableEvent.SELECTED, this._onSelected);\n    this.addEventListener(UUISelectableEvent.DESELECTED, this._onDeselected);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'radiogroup');\n    this.setAttribute('aria-label', this.label);\n  }\n\n  protected willUpdate(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    if (_changedProperties.has('label')) {\n      this.setAttribute('aria-label', this.label);\n    }\n  }\n\n  private _handleSlotChange() {\n    if (!this._swatches || this._swatches.length === 0) return;\n    this._swatches.forEach(swatch => {\n      swatch.setAttribute('aria-checked', 'false');\n      swatch.setAttribute('role', 'radio');\n\n      if (this.disabled) {\n        swatch.setAttribute('disabled', '');\n      } else {\n        // For some reason the value it really wants the attribute to be set not the value. If value is set then it is not reflected properly. :cry:\n        swatch.setAttribute('selectable', 'selectable');\n      }\n\n      if (this.readonly) {\n        swatch.setAttribute('readonly', '');\n      }\n\n      if (this.value !== '' && swatch.value === this.value) {\n        swatch.selected = true;\n        swatch.setAttribute('aria-checked', 'true');\n        this._selectedElement = swatch;\n        this._activeElement = this._selectedElement;\n      }\n    });\n  }\n\n  private readonly _onSelected = (event: Event) => {\n    const target = event.target as UUIColorSwatchElement;\n    //react only to selectable events from UUI-Color-Swatch elements\n    //? can I use instanceof here instead? that creates a dependency on the uui-color-swatch element\n    if (!this._swatches.includes(target)) return;\n    if (this._selectedElement) {\n      this._selectedElement.selected = false;\n      this._selectedElement.active = false;\n      this._selectedElement = undefined;\n    }\n    this._selectedElement = target;\n    this._activeElement = this._selectedElement;\n\n    this.value = this._selectedElement.value || '';\n\n    this.dispatchEvent(new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE));\n  };\n\n  private readonly _onDeselected = (event: Event) => {\n    const target = event.target as UUIColorSwatchElement;\n    if (!this._swatches.includes(target)) return;\n\n    if (this._activeElement === target) {\n      this._activeElement = undefined;\n    }\n    if (this._selectedElement === target) {\n      this._selectedElement.selected = false;\n      this._selectedElement.active = false;\n      this._selectedElement = undefined;\n      this.value = '';\n      this.dispatchEvent(\n        new UUIColorSwatchesEvent(UUIColorSwatchesEvent.CHANGE),\n      );\n    }\n  };\n\n  /**\n   * Deselects all swatches.\n   *\n   * @memberof UUIColorSwatchesElement\n   */\n  resetSelection() {\n    this._swatches.forEach(swatch => {\n      swatch.selected = false;\n      swatch.active = false;\n      swatch.selectable = !swatch.disabled;\n    });\n    this._activeElement = undefined;\n    this._selectedElement = undefined;\n    this.value = '';\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.4rem;\n      }\n    `,\n  ];\n}\n"],"mappings":"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"}

package/dist/components/color-swatches/color-swatches.js

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

package/dist/components/color-swatches/color-swatches.js.map

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

package/dist/components/combobox/UUIComboboxEvent.js

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

package/dist/components/combobox/UUIComboboxEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UUIComboboxEvent.js","sources":["../../../src/components/combobox/UUIComboboxEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIComboboxElement } from './combobox.element.js';\n\nexport class UUIComboboxEvent extends UUIEvent<UUIComboboxElement> {\n  public static readonly SEARCH: string = 'search';\n  public static readonly CHANGE: string = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAGO,MAAM,oBAAN,MAAM,0BAAyB,SAA6B;AAAA,EAIjE,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AATE,kBAAuB,SAAiB;AACxC,kBAAuB,SAAiB;AAFnC,IAAM,mBAAN;"}
+{"version":3,"file":"UUIComboboxEvent.js","names":[],"sources":["../../../src/components/combobox/UUIComboboxEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIComboboxElement } from './combobox.element.js';\n\nexport class UUIComboboxEvent extends UUIEvent<UUIComboboxElement> {\n  public static readonly SEARCH: string = 'search';\n  public static readonly CHANGE: string = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"mappings":";;AAGA,IAAa,mBAAb,cAAsC,SAA6B;;gBACzB;;;gBACA;;CAExC,YAAY,QAAgB,YAAiB,CAAC,GAAG;EAC/C,MAAM,QAAQ;GACZ,SAAS;GACT,GAAG;EACL,CAAC;CACH;AACF"}

package/dist/components/combobox/combobox.d.ts

@@ -6,4 +6,3 @@ declare global {
 }
 export * from './combobox.element.js';
 export * from './UUIComboboxEvent.js';
-export { UUIComboboxElement as default } from './combobox.element.js';