@umbraco-ui/uui 2.0.0 → 2.0.1

package/dist/components/radio/radio.element.js

@@ -1,75 +1,76 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _UUIRadioElement_instances, onKeyDown_fn, onChange_fn;
-import { LitElement, html, css } from "lit";
-import { query, property } from "lit/decorators.js";
+import { UUIHorizontalShakeAnimationValue, UUIHorizontalShakeKeyframes } from "../../internal/animations/uui-shake.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { UUIRadioEvent } from "./UUIRadioEvent.js";
-import { UUIHorizontalShakeKeyframes, UUIHorizontalShakeAnimationValue } from "../../internal/animations/uui-shake.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 _UUIRadioElement = class _UUIRadioElement extends LitElement {
-  constructor() {
-    super();
-    __privateAdd(this, _UUIRadioElement_instances);
-    this.name = "";
-    this.value = "";
-    this.label = "";
-    this.checked = false;
-    this.disabled = false;
-    this.readonly = false;
-    this.addEventListener("keydown", __privateMethod(this, _UUIRadioElement_instances, onKeyDown_fn));
-  }
-  focus() {
-    this._inputElement.focus();
-  }
-  click() {
-    this._inputElement.click();
-  }
-  /**
-   * Call to uncheck the element
-   * @method uncheck
-   */
-  uncheck() {
-    this.checked = false;
-  }
-  /**
-   * Call to check the element.
-   * @method uncheck
-   */
-  check() {
-    this.checked = true;
-  }
-  /**
-   * Call to make the element focusable, this sets tabindex to 0.
-   * @method makeFocusable
-   */
-  makeFocusable() {
-    if (!this.disabled) {
-      this.removeAttribute("tabindex");
-    }
-  }
-  /**
-   * Call to make the element focusable, this sets tabindex to -1.
-   * @method makeUnfocusable
-   */
-  makeUnfocusable() {
-    if (!this.disabled) {
-      this.setAttribute("tabindex", "-1");
-    }
-  }
-  render() {
-    return html` <label>
+import { LitElement, css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+//#region src/components/radio/radio.element.ts
+/**
+*  @element uui-radio
+*  @description - a single radio, should never be use as a stand-alone. Must be wrapped in `<uui-radio-group></uui-radio-group>` element.
+*  @slot - slot to set the label if no `label` attribute is set.
+*  @cssprop --uui-radio-button-size - Sets the size of the radio button.
+*  @fires change - on input change
+*/
+var UUIRadioElement = class extends LitElement {
+	constructor() {
+		super();
+		this.name = "";
+		this.value = "";
+		this.label = "";
+		this.checked = false;
+		this.disabled = false;
+		this.readonly = false;
+		this.addEventListener("keydown", this.#onKeyDown);
+	}
+	#onKeyDown(e) {
+		if (e.key === " ") {
+			e.preventDefault();
+			if (!this.disabled && !this.readonly) this._inputElement?.click();
+		}
+	}
+	focus() {
+		this._inputElement.focus();
+	}
+	click() {
+		this._inputElement.click();
+	}
+	/**
+	* Call to uncheck the element
+	* @method uncheck
+	*/
+	uncheck() {
+		this.checked = false;
+	}
+	/**
+	* Call to check the element.
+	* @method uncheck
+	*/
+	check() {
+		this.checked = true;
+	}
+	/**
+	* Call to make the element focusable, this sets tabindex to 0.
+	* @method makeFocusable
+	*/
+	makeFocusable() {
+		if (!this.disabled) this.removeAttribute("tabindex");
+	}
+	/**
+	* Call to make the element focusable, this sets tabindex to -1.
+	* @method makeUnfocusable
+	*/
+	makeUnfocusable() {
+		if (!this.disabled) this.setAttribute("tabindex", "-1");
+	}
+	#onChange(e) {
+		e.stopPropagation();
+		const checked = this._inputElement.checked;
+		this.checked = checked;
+		if (checked) this.focus();
+		this.dispatchEvent(new UUIRadioEvent(UUIRadioEvent.CHANGE));
+	}
+	render() {
+		return html` <label>
       <input
         id="input"
         type="radio"
@@ -77,35 +78,15 @@ const _UUIRadioElement = class _UUIRadioElement extends LitElement {
         value=${this.value}
         .checked=${this.checked}
         .disabled=${this.disabled || this.readonly}
-        @change=${__privateMethod(this, _UUIRadioElement_instances, onChange_fn)} />
+        @change=${this.#onChange} />
       <div id="button"></div>
       <div id="label">
         ${this.label ? html`<span>${this.label}</span>` : html`<slot></slot>`}
       </div>
     </label>`;
-  }
-};
-_UUIRadioElement_instances = new WeakSet();
-onKeyDown_fn = function(e) {
-  if (e.key === " ") {
-    e.preventDefault();
-    if (!this.disabled && !this.readonly) {
-      this._inputElement?.click();
-    }
-  }
-};
-onChange_fn = function(e) {
-  e.stopPropagation();
-  const checked = this._inputElement.checked;
-  this.checked = checked;
-  if (checked) {
-    this.focus();
-  }
-  this.dispatchEvent(new UUIRadioEvent(UUIRadioEvent.CHANGE));
-};
-_UUIRadioElement.styles = [
-  UUIHorizontalShakeKeyframes,
-  css`
+	}
+	static {
+		this.styles = [UUIHorizontalShakeKeyframes, css`
       :host {
         display: block;
         box-sizing: border-box;
@@ -179,7 +160,8 @@ _UUIRadioElement.styles = [
         outline: none;
       }
       :host(:focus-within) input:focus-visible + #button {
-        outline: 2px solid var(--uui-color-focus);
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
       }
 
       :host(:not([disabled]):not([readonly]):hover) input ~ #button::after {
@@ -241,31 +223,26 @@ _UUIRadioElement.styles = [
           transition: none;
         }
       }
-    `
-];
-let UUIRadioElement = _UUIRadioElement;
-__decorateClass([
-  query("#input")
-], UUIRadioElement.prototype, "_inputElement");
-__decorateClass([
-  property({ type: String })
-], UUIRadioElement.prototype, "name");
-__decorateClass([
-  property({ type: String })
-], UUIRadioElement.prototype, "value");
-__decorateClass([
-  property({ type: String })
-], UUIRadioElement.prototype, "label");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIRadioElement.prototype, "checked");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIRadioElement.prototype, "disabled");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIRadioElement.prototype, "readonly");
-export {
-  UUIRadioElement
+    `];
+	}
 };
-//# sourceMappingURL=radio.element.js.map
+__decorate([query("#input")], UUIRadioElement.prototype, "_inputElement", void 0);
+__decorate([property({ type: String })], UUIRadioElement.prototype, "name", void 0);
+__decorate([property({ type: String })], UUIRadioElement.prototype, "value", void 0);
+__decorate([property({ type: String })], UUIRadioElement.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIRadioElement.prototype, "checked", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIRadioElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIRadioElement.prototype, "readonly", void 0);
+//#endregion
+export { UUIRadioElement };
+
+//# sourceMappingURL=radio.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.element.js","sources":["../../../src/components/radio/radio.element.ts"],"sourcesContent":["import {\n  UUIHorizontalShakeAnimationValue,\n  UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport { UUIRadioEvent } from './UUIRadioEvent.js';\n\n/**\n *  @element uui-radio\n *  @description - a single radio, should never be use as a stand-alone. Must be wrapped in `<uui-radio-group></uui-radio-group>` element.\n *  @slot - slot to set the label if no `label` attribute is set.\n *  @cssprop --uui-radio-button-size - Sets the size of the radio button.\n *  @fires change - on input change\n */\nexport class UUIRadioElement extends LitElement {\n  @query('#input')\n  private readonly _inputElement!: HTMLInputElement;\n\n  /**\n   * This is a name property of the `<uui-radio>` component. It reflects the behaviour of the native `<input />` element and its name attribute.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  public name = '';\n\n  /**\n   * This is a value property of the `<uui-radio>`.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  public value = '';\n\n  @property({ type: String })\n  public label = '';\n\n  @property({ type: Boolean, reflect: true })\n  public checked = false;\n\n  /**\n   * Disables the input.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public 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  constructor() {\n    super();\n    this.addEventListener('keydown', this.#onKeyDown);\n  }\n\n  #onKeyDown(e: KeyboardEvent): void {\n    if (e.key === ' ') {\n      e.preventDefault();\n      if (!this.disabled && !this.readonly) {\n        this._inputElement?.click();\n      }\n    }\n  }\n\n  public focus() {\n    this._inputElement.focus();\n  }\n  public click() {\n    this._inputElement.click();\n  }\n\n  /**\n   * Call to uncheck the element\n   * @method uncheck\n   */\n  public uncheck() {\n    this.checked = false;\n  }\n\n  /**\n   * Call to check the element.\n   * @method uncheck\n   */\n  public check() {\n    this.checked = true;\n  }\n  /**\n   * Call to make the element focusable, this sets tabindex to 0.\n   * @method makeFocusable\n   */\n  public makeFocusable() {\n    if (!this.disabled) {\n      this.removeAttribute('tabindex');\n    }\n  }\n  /**\n   * Call to make the element focusable, this sets tabindex to -1.\n   * @method makeUnfocusable\n   */\n  public makeUnfocusable() {\n    if (!this.disabled) {\n      this.setAttribute('tabindex', '-1');\n    }\n  }\n\n  #onChange(e: Event) {\n    e.stopPropagation();\n    const checked = this._inputElement.checked;\n    this.checked = checked;\n    if (checked) {\n      this.focus();\n    }\n    this.dispatchEvent(new UUIRadioEvent(UUIRadioEvent.CHANGE));\n  }\n\n  render() {\n    return html` <label>\n      <input\n        id=\"input\"\n        type=\"radio\"\n        name=${this.name}\n        value=${this.value}\n        .checked=${this.checked}\n        .disabled=${this.disabled || this.readonly}\n        @change=${this.#onChange} />\n      <div id=\"button\"></div>\n      <div id=\"label\">\n        ${this.label ? html`<span>${this.label}</span>` : html`<slot></slot>`}\n      </div>\n    </label>`;\n  }\n\n  static override readonly styles = [\n    UUIHorizontalShakeKeyframes,\n    css`\n      :host {\n        display: block;\n        box-sizing: border-box;\n        font-family: inherit;\n        color: currentColor;\n        --uui-radio-button-size: var(--uui-size-6);\n        margin: var(--uui-size-2) 0;\n      }\n\n      label {\n        position: relative;\n        box-sizing: border-box;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        cursor: pointer;\n        line-height: 18px;\n      }\n\n      :host([readonly]) label {\n        cursor: default;\n      }\n\n      #input {\n        width: 0;\n        height: 0;\n        opacity: 0;\n        margin: 0;\n      }\n\n      .label {\n        margin-top: 2px;\n      }\n\n      #button {\n        box-sizing: border-box;\n        display: inline-block;\n        width: var(--uui-radio-button-size, 18px);\n        height: var(--uui-radio-button-size, 18px);\n        background-color: var(--uui-color-surface);\n        border: 1px solid var(--uui-color-border-standalone);\n        border-radius: 100%;\n        margin-right: calc(var(--uui-size-2) * 2);\n        position: relative;\n        flex: 0 0 var(--uui-radio-button-size);\n        transition: border-color 120ms;\n      }\n\n      #button::after {\n        content: '';\n        width: calc(var(--uui-radio-button-size) / 2);\n        height: calc(var(--uui-radio-button-size) / 2);\n        background-color: var(--uui-color-selected);\n        opacity: 0.5;\n        border-radius: 100%;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%) scale(0);\n        transition:\n          transform 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275),\n          opacity 120ms,\n          background-color 120ms;\n      }\n\n      :host(:not([disabled]):not([readonly]):hover) #button {\n        border-color: var(--uui-color-border-emphasis);\n      }\n\n      :host(:focus) {\n        outline: none;\n      }\n      :host(:focus-within) input:focus-visible + #button {\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      :host(:not([disabled]):not([readonly]):hover) input ~ #button::after {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 0.2;\n      }\n      :host(:not([disabled]):not([readonly]):active) input ~ #button::after {\n        transform: translate(-50%, -50%) scale(1.2);\n        opacity: 1;\n      }\n      input:checked ~ #button::after,\n      :host(:not([disabled]):not([readonly]):hover)\n        input:checked\n        ~ #button::after {\n        transform: translate(-50%, -50%) scale(1);\n      }\n\n      input:checked ~ #button {\n        border-color: var(--uui-color-selected);\n      }\n      input:checked ~ #button::after {\n        opacity: 1 !important;\n      }\n\n      :host(:not([disabled]):not([readonly]):hover) input:checked ~ #button {\n        border-color: var(--uui-color-selected-emphasis);\n      }\n\n      :host([disabled]) label {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n      :host([disabled]) .label {\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      :host([disabled]) input ~ #button {\n        border-color: var(--uui-color-disabled-contrast);\n      }\n\n      :host([disabled]) input:checked ~ #button {\n        border-color: var(--uui-color-disabled-contrast);\n      }\n\n      :host([disabled]) input:checked ~ #button::after {\n        background-color: var(--uui-color-disabled-contrast);\n      }\n\n      :host([disabled]:active) #button {\n        animation: ${UUIHorizontalShakeAnimationValue};\n      }\n\n      @media (prefers-reduced-motion) {\n        :host([disabled]:active) #button {\n          animation: none;\n        }\n\n        #button::after {\n          transition: none;\n        }\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"radio.element.js","names":["#onKeyDown","#onChange"],"sources":["../../../src/components/radio/radio.element.ts"],"sourcesContent":["import {\n  UUIHorizontalShakeAnimationValue,\n  UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport { UUIRadioEvent } from './UUIRadioEvent.js';\n\n/**\n *  @element uui-radio\n *  @description - a single radio, should never be use as a stand-alone. Must be wrapped in `<uui-radio-group></uui-radio-group>` element.\n *  @slot - slot to set the label if no `label` attribute is set.\n *  @cssprop --uui-radio-button-size - Sets the size of the radio button.\n *  @fires change - on input change\n */\nexport class UUIRadioElement extends LitElement {\n  @query('#input')\n  private readonly _inputElement!: HTMLInputElement;\n\n  /**\n   * This is a name property of the `<uui-radio>` component. It reflects the behaviour of the native `<input />` element and its name attribute.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  public name = '';\n\n  /**\n   * This is a value property of the `<uui-radio>`.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  public value = '';\n\n  @property({ type: String })\n  public label = '';\n\n  @property({ type: Boolean, reflect: true })\n  public checked = false;\n\n  /**\n   * Disables the input.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public 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  constructor() {\n    super();\n    this.addEventListener('keydown', this.#onKeyDown);\n  }\n\n  #onKeyDown(e: KeyboardEvent): void {\n    if (e.key === ' ') {\n      e.preventDefault();\n      if (!this.disabled && !this.readonly) {\n        this._inputElement?.click();\n      }\n    }\n  }\n\n  public focus() {\n    this._inputElement.focus();\n  }\n  public click() {\n    this._inputElement.click();\n  }\n\n  /**\n   * Call to uncheck the element\n   * @method uncheck\n   */\n  public uncheck() {\n    this.checked = false;\n  }\n\n  /**\n   * Call to check the element.\n   * @method uncheck\n   */\n  public check() {\n    this.checked = true;\n  }\n  /**\n   * Call to make the element focusable, this sets tabindex to 0.\n   * @method makeFocusable\n   */\n  public makeFocusable() {\n    if (!this.disabled) {\n      this.removeAttribute('tabindex');\n    }\n  }\n  /**\n   * Call to make the element focusable, this sets tabindex to -1.\n   * @method makeUnfocusable\n   */\n  public makeUnfocusable() {\n    if (!this.disabled) {\n      this.setAttribute('tabindex', '-1');\n    }\n  }\n\n  #onChange(e: Event) {\n    e.stopPropagation();\n    const checked = this._inputElement.checked;\n    this.checked = checked;\n    if (checked) {\n      this.focus();\n    }\n    this.dispatchEvent(new UUIRadioEvent(UUIRadioEvent.CHANGE));\n  }\n\n  render() {\n    return html` <label>\n      <input\n        id=\"input\"\n        type=\"radio\"\n        name=${this.name}\n        value=${this.value}\n        .checked=${this.checked}\n        .disabled=${this.disabled || this.readonly}\n        @change=${this.#onChange} />\n      <div id=\"button\"></div>\n      <div id=\"label\">\n        ${this.label ? html`<span>${this.label}</span>` : html`<slot></slot>`}\n      </div>\n    </label>`;\n  }\n\n  static override readonly styles = [\n    UUIHorizontalShakeKeyframes,\n    css`\n      :host {\n        display: block;\n        box-sizing: border-box;\n        font-family: inherit;\n        color: currentColor;\n        --uui-radio-button-size: var(--uui-size-6);\n        margin: var(--uui-size-2) 0;\n      }\n\n      label {\n        position: relative;\n        box-sizing: border-box;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        cursor: pointer;\n        line-height: 18px;\n      }\n\n      :host([readonly]) label {\n        cursor: default;\n      }\n\n      #input {\n        width: 0;\n        height: 0;\n        opacity: 0;\n        margin: 0;\n      }\n\n      .label {\n        margin-top: 2px;\n      }\n\n      #button {\n        box-sizing: border-box;\n        display: inline-block;\n        width: var(--uui-radio-button-size, 18px);\n        height: var(--uui-radio-button-size, 18px);\n        background-color: var(--uui-color-surface);\n        border: 1px solid var(--uui-color-border-standalone);\n        border-radius: 100%;\n        margin-right: calc(var(--uui-size-2) * 2);\n        position: relative;\n        flex: 0 0 var(--uui-radio-button-size);\n        transition: border-color 120ms;\n      }\n\n      #button::after {\n        content: '';\n        width: calc(var(--uui-radio-button-size) / 2);\n        height: calc(var(--uui-radio-button-size) / 2);\n        background-color: var(--uui-color-selected);\n        opacity: 0.5;\n        border-radius: 100%;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%) scale(0);\n        transition:\n          transform 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275),\n          opacity 120ms,\n          background-color 120ms;\n      }\n\n      :host(:not([disabled]):not([readonly]):hover) #button {\n        border-color: var(--uui-color-border-emphasis);\n      }\n\n      :host(:focus) {\n        outline: none;\n      }\n      :host(:focus-within) input:focus-visible + #button {\n        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid\n          var(--uui-color-focus);\n      }\n\n      :host(:not([disabled]):not([readonly]):hover) input ~ #button::after {\n        transform: translate(-50%, -50%) scale(1);\n        opacity: 0.2;\n      }\n      :host(:not([disabled]):not([readonly]):active) input ~ #button::after {\n        transform: translate(-50%, -50%) scale(1.2);\n        opacity: 1;\n      }\n      input:checked ~ #button::after,\n      :host(:not([disabled]):not([readonly]):hover)\n        input:checked\n        ~ #button::after {\n        transform: translate(-50%, -50%) scale(1);\n      }\n\n      input:checked ~ #button {\n        border-color: var(--uui-color-selected);\n      }\n      input:checked ~ #button::after {\n        opacity: 1 !important;\n      }\n\n      :host(:not([disabled]):not([readonly]):hover) input:checked ~ #button {\n        border-color: var(--uui-color-selected-emphasis);\n      }\n\n      :host([disabled]) label {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n      :host([disabled]) .label {\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      :host([disabled]) input ~ #button {\n        border-color: var(--uui-color-disabled-contrast);\n      }\n\n      :host([disabled]) input:checked ~ #button {\n        border-color: var(--uui-color-disabled-contrast);\n      }\n\n      :host([disabled]) input:checked ~ #button::after {\n        background-color: var(--uui-color-disabled-contrast);\n      }\n\n      :host([disabled]:active) #button {\n        animation: ${UUIHorizontalShakeAnimationValue};\n      }\n\n      @media (prefers-reduced-motion) {\n        :host([disabled]:active) #button {\n          animation: none;\n        }\n\n        #button::after {\n          transition: none;\n        }\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,kBAAb,cAAqC,WAAW;CA8C9C,cAAc;EACZ,MAAM;cApCM;eASC;eAGA;iBAGE;kBASC;kBASP;EAIT,KAAK,iBAAiB,WAAW,KAAKA,UAAU;CAClD;CAEA,WAAW,GAAwB;EACjC,IAAI,EAAE,QAAQ,KAAK;GACjB,EAAE,eAAe;GACjB,IAAI,CAAC,KAAK,YAAY,CAAC,KAAK,UAC1B,KAAK,eAAe,MAAM;EAE9B;CACF;CAEA,QAAe;EACb,KAAK,cAAc,MAAM;CAC3B;CACA,QAAe;EACb,KAAK,cAAc,MAAM;CAC3B;;;;;CAMA,UAAiB;EACf,KAAK,UAAU;CACjB;;;;;CAMA,QAAe;EACb,KAAK,UAAU;CACjB;;;;;CAKA,gBAAuB;EACrB,IAAI,CAAC,KAAK,UACR,KAAK,gBAAgB,UAAU;CAEnC;;;;;CAKA,kBAAyB;EACvB,IAAI,CAAC,KAAK,UACR,KAAK,aAAa,YAAY,IAAI;CAEtC;CAEA,UAAU,GAAU;EAClB,EAAE,gBAAgB;EAClB,MAAM,UAAU,KAAK,cAAc;EACnC,KAAK,UAAU;EACf,IAAI,SACF,KAAK,MAAM;EAEb,KAAK,cAAc,IAAI,cAAc,cAAc,MAAM,CAAC;CAC5D;CAEA,SAAS;EACP,OAAO,IAAI;;;;eAIA,KAAK,KAAK;gBACT,KAAK,MAAM;mBACR,KAAK,QAAQ;oBACZ,KAAK,YAAY,KAAK,SAAS;kBACjC,KAAKC,UAAU;;;UAGvB,KAAK,QAAQ,IAAI,SAAS,KAAK,MAAM,WAAW,IAAI,gBAAgB;;;CAG5E;;gBAEkC,CAChC,6BACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA6Hc,iCAAiC;;;;;;;;;;;;KAapD;;AACF;YA5QG,MAAM,QAAQ,CAAA,GAAA,gBAAA,WAAA,iBAAA,KAAA,CAAA;YASd,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,gBAAA,WAAA,QAAA,KAAA,CAAA;YASzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,gBAAA,WAAA,SAAA,KAAA,CAAA;YAGzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,gBAAA,WAAA,SAAA,KAAA,CAAA;YAGzB,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,WAAA,KAAA,CAAA;YASzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;YASzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA"}

package/dist/components/radio/radio.js

@@ -1,15 +1,12 @@
 import { defineElement } from "../../internal/registration/index.js";
-import { UUIRadioGroupElement } from "./radio-group.element.js";
-import { UUIRadioElement } from "./radio.element.js";
 import { UUIRadioEvent } from "./UUIRadioEvent.js";
+import { UUIRadioElement } from "./radio.element.js";
 import { UUIRadioGroupEvent } from "./UUIRadioGroupEvent.js";
+import { UUIRadioGroupElement } from "./radio-group.element.js";
+//#region src/components/radio/radio.ts
 defineElement("uui-radio-group", UUIRadioGroupElement);
 defineElement("uui-radio", UUIRadioElement);
-export {
-  UUIRadioElement,
-  UUIRadioEvent,
-  UUIRadioGroupElement,
-  UUIRadioGroupEvent,
-  UUIRadioElement as default
-};
-//# sourceMappingURL=radio.js.map
+//#endregion
+export { UUIRadioElement, UUIRadioEvent, UUIRadioGroupElement, UUIRadioGroupEvent };
+
+//# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIRadioGroupElement } from './radio-group.element.js';\nimport { UUIRadioElement } from './radio.element.js';\n\ndefineElement('uui-radio-group', UUIRadioGroupElement);\ndefineElement('uui-radio', UUIRadioElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-radio-group': UUIRadioGroupElement;\n    'uui-radio': UUIRadioElement;\n  }\n}\n\nexport * from './radio-group.element.js';\nexport * from './radio.element.js';\nexport * from './UUIRadioEvent.js';\nexport * from './UUIRadioGroupEvent.js';\nexport { UUIRadioElement as default } from './radio.element.js';\n"],"names":[],"mappings":";;;;;AAIA,cAAc,mBAAmB,oBAAoB;AACrD,cAAc,aAAa,eAAe;"}
+{"version":3,"file":"radio.js","names":[],"sources":["../../../src/components/radio/radio.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIRadioGroupElement } from './radio-group.element.js';\nimport { UUIRadioElement } from './radio.element.js';\n\ndefineElement('uui-radio-group', UUIRadioGroupElement);\ndefineElement('uui-radio', UUIRadioElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-radio-group': UUIRadioGroupElement;\n    'uui-radio': UUIRadioElement;\n  }\n}\n\nexport * from './radio-group.element.js';\nexport * from './radio.element.js';\nexport * from './UUIRadioEvent.js';\nexport * from './UUIRadioGroupEvent.js';\n"],"mappings":";;;;;;AAIA,cAAc,mBAAmB,oBAAoB;AACrD,cAAc,aAAa,eAAe"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"UUIRangeSliderEvent.js","sources":["../../../src/components/range-slider/UUIRangeSliderEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIRangeSliderElement } from './range-slider.element.js';\n\nexport class UUIRangeSliderEvent extends UUIEvent<{}, UUIRangeSliderElement> {\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,uBAAN,MAAM,6BAA4B,SAAoC;AAAA,EAI3E,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AATE,qBAAuB,QAAQ;AAC/B,qBAAuB,SAAS;AAF3B,IAAM,sBAAN;"}
+{"version":3,"file":"UUIRangeSliderEvent.js","names":[],"sources":["../../../src/components/range-slider/UUIRangeSliderEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIRangeSliderElement } from './range-slider.element.js';\n\nexport class UUIRangeSliderEvent extends UUIEvent<{}, UUIRangeSliderElement> {\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,sBAAb,cAAyC,SAAoC;;eAC5C;;;gBACC;;CAEhC,YAAY,QAAgB,YAAiB,CAAC,GAAG;EAC/C,MAAM,QAAQ;GACZ,SAAS;GACT,GAAG;EACL,CAAC;CACH;AACF"}

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

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