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

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

@@ -0,0 +1,294 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _selected, _radioElements, _onFocusIn, _onFocusOut, _onChildBlur, _onSelectClick, _onKeydown, _UUIRadioGroupElement_instances, onSlotChange_fn, setNameOnRadios_fn, updateRadioElementsCheckedState_fn, setDisableOnRadios_fn, setReadonlyOnRadios_fn, findAdjacentRadioElement_fn, selectPreviousRadio_fn, selectNextRadio_fn, fireChangeEvent_fn;
+import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators.js";
+import { UUIRadioElement } from "./radio.element.js";
+import { UUIRadioEvent } from "./UUIRadioEvent.js";
+import { UUIRadioGroupEvent } from "./UUIRadioGroupEvent.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 ARROW_LEFT = "ArrowLeft";
+const ARROW_UP = "ArrowUp";
+const ARROW_RIGHT = "ArrowRight";
+const ARROW_DOWN = "ArrowDown";
+const SPACE = " ";
+const ENTER = "Enter";
+const _UUIRadioGroupElement = class _UUIRadioGroupElement extends UUIFormControlWithBasicsMixin(
+  LitElement,
+  ""
+) {
+  constructor() {
+    super();
+    __privateAdd(this, _UUIRadioGroupElement_instances);
+    __privateAdd(this, _selected);
+    __privateAdd(this, _radioElements);
+    __privateAdd(this, _onFocusIn);
+    __privateAdd(this, _onFocusOut);
+    __privateAdd(this, _onChildBlur);
+    __privateAdd(this, _onSelectClick);
+    __privateAdd(this, _onKeydown);
+    this.disabled = false;
+    this.readonly = false;
+    __privateSet(this, _selected, null);
+    __privateSet(this, _radioElements, []);
+    __privateSet(this, _onFocusIn, (event) => {
+      __privateGet(this, _radioElements)?.forEach((el) => {
+        if (el === event.target) {
+          el.makeFocusable();
+        } else {
+          el.makeUnfocusable();
+        }
+      });
+    });
+    __privateSet(this, _onFocusOut, (event) => {
+      if (this.contains(event.relatedTarget)) return;
+      if (__privateGet(this, _selected) !== null) return;
+      __privateGet(this, _radioElements)?.forEach((el) => {
+        el.makeFocusable();
+      });
+    });
+    __privateSet(this, _onChildBlur, () => {
+      this.pristine = false;
+    });
+    __privateSet(this, _onSelectClick, (e) => {
+      const target = e.target;
+      if (target.checked === true) {
+        this.value = target.value;
+        __privateMethod(this, _UUIRadioGroupElement_instances, fireChangeEvent_fn).call(this);
+      }
+    });
+    __privateSet(this, _onKeydown, (e) => {
+      switch (e.key) {
+        case ARROW_LEFT:
+        case ARROW_UP: {
+          e.preventDefault();
+          __privateMethod(this, _UUIRadioGroupElement_instances, selectPreviousRadio_fn).call(this);
+          break;
+        }
+        case ARROW_RIGHT:
+        case ARROW_DOWN: {
+          e.preventDefault();
+          __privateMethod(this, _UUIRadioGroupElement_instances, selectNextRadio_fn).call(this);
+          break;
+        }
+        case SPACE: {
+          if (__privateGet(this, _selected) === null) {
+            this.value = __privateMethod(this, _UUIRadioGroupElement_instances, findAdjacentRadioElement_fn).call(this, 1, false)?.value;
+            __privateMethod(this, _UUIRadioGroupElement_instances, fireChangeEvent_fn).call(this);
+          }
+          break;
+        }
+        case ENTER:
+          this.submit();
+          break;
+      }
+    });
+    this.addEventListener("keydown", __privateGet(this, _onKeydown));
+    this.addEventListener("focusin", __privateGet(this, _onFocusIn));
+    this.addEventListener("focusout", __privateGet(this, _onFocusOut));
+    this.updateComplete.then(() => {
+      __privateMethod(this, _UUIRadioGroupElement_instances, updateRadioElementsCheckedState_fn).call(this, this.value);
+    });
+  }
+  get value() {
+    return super.value;
+  }
+  set value(newValue) {
+    super.value = newValue;
+    __privateMethod(this, _UUIRadioGroupElement_instances, updateRadioElementsCheckedState_fn).call(this, newValue);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) this.setAttribute("role", "radiogroup");
+  }
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
+    if (_changedProperties.has("disabled")) {
+      __privateMethod(this, _UUIRadioGroupElement_instances, setDisableOnRadios_fn).call(this, this.disabled);
+    }
+    if (_changedProperties.has("readonly")) {
+      __privateMethod(this, _UUIRadioGroupElement_instances, setReadonlyOnRadios_fn).call(this, this.readonly);
+    }
+    if (_changedProperties.has("name")) {
+      __privateMethod(this, _UUIRadioGroupElement_instances, setNameOnRadios_fn).call(this, _changedProperties.get("name"));
+    }
+  }
+  /**
+   * This method enables <label for="..."> to focus the select
+   */
+  async focus() {
+    await this.updateComplete;
+    if (__privateGet(this, _selected) === null) {
+      __privateMethod(this, _UUIRadioGroupElement_instances, findAdjacentRadioElement_fn).call(this, 1, false)?.focus();
+    } else {
+      __privateGet(this, _radioElements)[__privateGet(this, _selected)]?.focus();
+    }
+  }
+  async blur() {
+    await this.updateComplete;
+    if (__privateGet(this, _selected) === null) {
+      __privateMethod(this, _UUIRadioGroupElement_instances, findAdjacentRadioElement_fn).call(this, 1, false)?.blur();
+    } else {
+      __privateGet(this, _radioElements)[__privateGet(this, _selected)]?.blur();
+    }
+  }
+  async click() {
+    await this.updateComplete;
+    if (__privateGet(this, _selected) === null) {
+      __privateMethod(this, _UUIRadioGroupElement_instances, findAdjacentRadioElement_fn).call(this, 1, false)?.click();
+    } else {
+      __privateGet(this, _radioElements)[__privateGet(this, _selected)]?.click();
+    }
+  }
+  getFormElement() {
+    if (__privateGet(this, _radioElements) && __privateGet(this, _selected)) {
+      return __privateGet(this, _radioElements)[__privateGet(this, _selected)];
+    }
+    return void 0;
+  }
+  render() {
+    return html` <slot @slotchange=${__privateMethod(this, _UUIRadioGroupElement_instances, onSlotChange_fn)}></slot> `;
+  }
+};
+_selected = new WeakMap();
+_radioElements = new WeakMap();
+_onFocusIn = new WeakMap();
+_onFocusOut = new WeakMap();
+_onChildBlur = new WeakMap();
+_onSelectClick = new WeakMap();
+_onKeydown = new WeakMap();
+_UUIRadioGroupElement_instances = new WeakSet();
+onSlotChange_fn = function(e) {
+  e.stopPropagation();
+  __privateGet(this, _radioElements)?.forEach((el) => {
+    el.removeEventListener(UUIRadioEvent.CHANGE, __privateGet(this, _onSelectClick));
+    el.removeEventListener("blur", __privateGet(this, _onChildBlur));
+  });
+  __privateSet(this, _selected, null);
+  __privateSet(this, _radioElements, e.target.assignedElements({ flatten: true }).filter((el) => el instanceof UUIRadioElement));
+  if (__privateGet(this, _radioElements).length === 0) return;
+  __privateGet(this, _radioElements).forEach((el) => {
+    el.addEventListener(UUIRadioEvent.CHANGE, __privateGet(this, _onSelectClick));
+    el.addEventListener("blur", __privateGet(this, _onChildBlur));
+  });
+  __privateMethod(this, _UUIRadioGroupElement_instances, setNameOnRadios_fn).call(this, this.name);
+  if (this.disabled) {
+    __privateMethod(this, _UUIRadioGroupElement_instances, setDisableOnRadios_fn).call(this, true);
+  }
+  if (this.readonly) {
+    __privateMethod(this, _UUIRadioGroupElement_instances, setReadonlyOnRadios_fn).call(this, true);
+  }
+  const checkedRadios = __privateGet(this, _radioElements).filter((el) => el.checked === true);
+  if (checkedRadios.length > 1) {
+    __privateGet(this, _radioElements).forEach((el) => {
+      el.checked = false;
+    });
+    this.value = "";
+    console.error(
+      "There can only be one checked radio among the <" + this.nodeName + "> children",
+      this
+    );
+  }
+  if (checkedRadios.length === 1) {
+    const firstCheckedRadio = checkedRadios[0];
+    this.value = firstCheckedRadio.value;
+    __privateSet(this, _selected, __privateGet(this, _radioElements).indexOf(firstCheckedRadio));
+  }
+};
+setNameOnRadios_fn = function(name) {
+  __privateGet(this, _radioElements)?.forEach((el) => el.name = name);
+};
+updateRadioElementsCheckedState_fn = function(newValue) {
+  const notChecked = [];
+  __privateGet(this, _radioElements).forEach((el, index) => {
+    if (el.value === newValue) {
+      el.checked = true;
+      el.makeFocusable();
+      __privateSet(this, _selected, index);
+    } else {
+      el.checked = false;
+      notChecked.push(el);
+    }
+  });
+  if (__privateGet(this, _selected) !== null) {
+    notChecked.forEach((el) => el.makeUnfocusable());
+  }
+};
+setDisableOnRadios_fn = function(value) {
+  __privateGet(this, _radioElements)?.forEach((el) => el.disabled = value);
+};
+setReadonlyOnRadios_fn = function(value) {
+  __privateGet(this, _radioElements)?.forEach((el) => el.readonly = value);
+};
+findAdjacentRadioElement_fn = function(direction = 1, skipFirst = true) {
+  if (!__privateGet(this, _radioElements) || __privateGet(this, _radioElements).length === 0) return null;
+  const len = __privateGet(this, _radioElements).length;
+  let index = __privateGet(this, _selected) ?? 0;
+  for (let i = 0; i < len + 1; i++) {
+    if (!skipFirst || i > 0) {
+      const radioElement = __privateGet(this, _radioElements)[index];
+      if (!radioElement.disabled && !radioElement.readonly) {
+        return radioElement;
+      }
+    }
+    index = (index + direction + len) % len;
+  }
+  return null;
+};
+selectPreviousRadio_fn = function() {
+  this.value = __privateMethod(this, _UUIRadioGroupElement_instances, findAdjacentRadioElement_fn).call(this, -1)?.value ?? "";
+  __privateGet(this, _radioElements)[__privateGet(this, _selected) ?? 0]?.focus();
+  __privateMethod(this, _UUIRadioGroupElement_instances, fireChangeEvent_fn).call(this);
+};
+selectNextRadio_fn = function() {
+  this.value = __privateMethod(this, _UUIRadioGroupElement_instances, findAdjacentRadioElement_fn).call(this)?.value ?? "";
+  __privateGet(this, _radioElements)[__privateGet(this, _selected) ?? 0]?.focus();
+  __privateMethod(this, _UUIRadioGroupElement_instances, fireChangeEvent_fn).call(this);
+};
+fireChangeEvent_fn = function() {
+  this.pristine = false;
+  this.dispatchEvent(new UUIRadioGroupEvent(UUIRadioGroupEvent.CHANGE));
+};
+_UUIRadioGroupElement.formAssociated = true;
+_UUIRadioGroupElement.styles = [
+  css`
+      :host {
+        display: inline-block;
+        padding-right: 3px;
+        border: 1px solid transparent;
+        border-radius: var(--uui-border-radius);
+      }
+
+      :host(:not([pristine]):invalid),
+      /* polyfill support */
+      :host(:not([pristine])[internals-invalid]) {
+        border: 1px solid var(--uui-color-invalid-standalone);
+      }
+    `
+];
+let UUIRadioGroupElement = _UUIRadioGroupElement;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIRadioGroupElement.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIRadioGroupElement.prototype, "readonly");
+export {
+  UUIRadioGroupElement
+};
+//# sourceMappingURL=radio-group.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.element.js","sources":["../../../src/components/radio/radio-group.element.ts"],"sourcesContent":["import { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { UUIRadioElement } from './radio.element.js';\nimport { UUIRadioEvent } from './UUIRadioEvent.js';\nimport { UUIRadioGroupEvent } from './UUIRadioGroupEvent.js';\n\nconst ARROW_LEFT = 'ArrowLeft';\nconst ARROW_UP = 'ArrowUp';\nconst ARROW_RIGHT = 'ArrowRight';\nconst ARROW_DOWN = 'ArrowDown';\nconst SPACE = ' ';\nconst ENTER = 'Enter';\n\n/**\n * @element uui-radio-group\n * @slot - slot for `<uui-radio>` elements or custom elements that extend from `UUIRadioElement`\n * @extends UUIFormControlMixin\n */\nexport class UUIRadioGroupElement extends UUIFormControlWithBasicsMixin(\n  LitElement,\n  '',\n) {\n  /**\n   * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/\n   * @type {boolean}\n   */\n  static readonly formAssociated = true;\n\n  /**\n   * Disables the input.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  get value() {\n    return super.value;\n  }\n  set value(newValue) {\n    super.value = newValue;\n    this.#updateRadioElementsCheckedState(newValue as string);\n  }\n\n  #selected: number | null = null;\n  #radioElements: UUIRadioElement[] = [];\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.#onKeydown);\n    this.addEventListener('focusin', this.#onFocusIn);\n    this.addEventListener('focusout', this.#onFocusOut);\n\n    // Wait for the radio elements to be added to the dom before updating the checked state.\n    this.updateComplete.then(() => {\n      this.#updateRadioElementsCheckedState(this.value as string);\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) this.setAttribute('role', 'radiogroup');\n  }\n\n  updated(_changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(_changedProperties);\n    if (_changedProperties.has('disabled')) {\n      this.#setDisableOnRadios(this.disabled);\n    }\n\n    if (_changedProperties.has('readonly')) {\n      this.#setReadonlyOnRadios(this.readonly);\n    }\n\n    if (_changedProperties.has('name')) {\n      this.#setNameOnRadios(_changedProperties.get('name') as string);\n    }\n  }\n\n  /**\n   * This method enables <label for=\"...\"> to focus the select\n   */\n  public async focus() {\n    await this.updateComplete;\n    if (this.#selected === null) {\n      this.#findAdjacentRadioElement(1, false)?.focus();\n    } else {\n      this.#radioElements[this.#selected]?.focus();\n    }\n  }\n  public async blur() {\n    await this.updateComplete;\n    if (this.#selected === null) {\n      this.#findAdjacentRadioElement(1, false)?.blur();\n    } else {\n      this.#radioElements[this.#selected]?.blur();\n    }\n  }\n  public async click() {\n    await this.updateComplete;\n    if (this.#selected === null) {\n      this.#findAdjacentRadioElement(1, false)?.click();\n    } else {\n      this.#radioElements[this.#selected]?.click();\n    }\n  }\n\n  protected getFormElement(): HTMLElement | undefined {\n    if (this.#radioElements && this.#selected) {\n      return this.#radioElements[this.#selected];\n    }\n    return undefined;\n  }\n\n  readonly #onFocusIn = (event: FocusEvent) => {\n    // Ensure only the selected radio element is focusable to improve tab navigation\n    // by skipping unselected radios and moving to the next radio group or focusable element.\n    this.#radioElements?.forEach(el => {\n      if (el === event.target) {\n        el.makeFocusable();\n      } else {\n        el.makeUnfocusable();\n      }\n    });\n  };\n\n  readonly #onFocusOut = (event: FocusEvent) => {\n    // When a focus event is fired from a radio, check if the focus is still inside the radio group\n    if (this.contains(event.relatedTarget as Node)) return;\n\n    // If there is a selected radio element, no action is needed since only the selected radio should remain focusable\n    if (this.#selected !== null) return;\n\n    // If focus has moved outside the radio group and no radio is selected, make all radio elements focusable again\n    this.#radioElements?.forEach(el => {\n      el.makeFocusable();\n    });\n  };\n\n  readonly #onChildBlur = () => {\n    this.pristine = false;\n  };\n\n  readonly #onSelectClick = (e: Event) => {\n    const target = e.target as UUIRadioElement;\n    if (target.checked === true) {\n      this.value = target.value;\n      this.#fireChangeEvent();\n    }\n  };\n\n  readonly #onKeydown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case ARROW_LEFT:\n      case ARROW_UP: {\n        e.preventDefault();\n        this.#selectPreviousRadio();\n        break;\n      }\n      case ARROW_RIGHT:\n      case ARROW_DOWN: {\n        e.preventDefault();\n        this.#selectNextRadio();\n        break;\n      }\n\n      case SPACE: {\n        if (this.#selected === null) {\n          this.value = this.#findAdjacentRadioElement(1, false)\n            ?.value as string;\n          this.#fireChangeEvent();\n        }\n        break;\n      }\n\n      case ENTER:\n        this.submit();\n        break;\n    }\n  };\n\n  #onSlotChange(e: Event) {\n    e.stopPropagation();\n    this.#radioElements?.forEach(el => {\n      el.removeEventListener(UUIRadioEvent.CHANGE, this.#onSelectClick);\n      el.removeEventListener('blur', this.#onChildBlur);\n    });\n\n    this.#selected = null;\n    this.#radioElements = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(el => el instanceof UUIRadioElement) as UUIRadioElement[];\n\n    // Only continue if there are radio elements\n    if (this.#radioElements.length === 0) return;\n\n    this.#radioElements.forEach(el => {\n      el.addEventListener(UUIRadioEvent.CHANGE, this.#onSelectClick);\n      el.addEventListener('blur', this.#onChildBlur);\n    });\n\n    this.#setNameOnRadios(this.name);\n\n    if (this.disabled) {\n      this.#setDisableOnRadios(true);\n    }\n\n    if (this.readonly) {\n      this.#setReadonlyOnRadios(true);\n    }\n\n    const checkedRadios = this.#radioElements.filter(el => el.checked === true);\n\n    if (checkedRadios.length > 1) {\n      this.#radioElements.forEach(el => {\n        el.checked = false;\n      });\n      this.value = '';\n      console.error(\n        'There can only be one checked radio among the <' +\n          this.nodeName +\n          '> children',\n        this,\n      );\n    }\n\n    if (checkedRadios.length === 1) {\n      const firstCheckedRadio = checkedRadios[0];\n      this.value = firstCheckedRadio.value;\n      this.#selected = this.#radioElements.indexOf(firstCheckedRadio);\n    }\n  }\n\n  #setNameOnRadios(name: string) {\n    this.#radioElements?.forEach(el => (el.name = name));\n  }\n\n  #updateRadioElementsCheckedState(newValue: FormData | FormDataEntryValue) {\n    const notChecked: Array<UUIRadioElement> = [];\n\n    this.#radioElements.forEach((el, index) => {\n      if (el.value === newValue) {\n        el.checked = true;\n        el.makeFocusable();\n        this.#selected = index;\n      } else {\n        el.checked = false;\n        notChecked.push(el);\n      }\n    });\n\n    // If there is a selected radio, make all other radios unfocusable.\n    if (this.#selected !== null) {\n      notChecked.forEach(el => el.makeUnfocusable());\n    }\n  }\n\n  #setDisableOnRadios(value: boolean) {\n    this.#radioElements?.forEach(el => (el.disabled = value));\n  }\n\n  #setReadonlyOnRadios(value: boolean) {\n    this.#radioElements?.forEach(el => (el.readonly = value));\n  }\n\n  #findAdjacentRadioElement(\n    direction = 1,\n    skipFirst = true,\n  ): UUIRadioElement | null {\n    if (!this.#radioElements || this.#radioElements.length === 0) return null;\n\n    const len = this.#radioElements.length;\n    let index = this.#selected ?? 0;\n\n    for (let i = 0; i < len + 1; i++) {\n      if (!skipFirst || i > 0) {\n        const radioElement = this.#radioElements[index];\n        if (!radioElement.disabled && !radioElement.readonly) {\n          return radioElement;\n        }\n      }\n\n      index = (index + direction + len) % len;\n    }\n\n    return null;\n  }\n\n  #selectPreviousRadio() {\n    this.value = this.#findAdjacentRadioElement(-1)?.value ?? '';\n    this.#radioElements[this.#selected ?? 0]?.focus();\n    this.#fireChangeEvent();\n  }\n\n  #selectNextRadio() {\n    this.value = this.#findAdjacentRadioElement()?.value ?? '';\n    this.#radioElements[this.#selected ?? 0]?.focus();\n    this.#fireChangeEvent();\n  }\n\n  #fireChangeEvent() {\n    this.pristine = false;\n    this.dispatchEvent(new UUIRadioGroupEvent(UUIRadioGroupEvent.CHANGE));\n  }\n\n  render() {\n    return html` <slot @slotchange=${this.#onSlotChange}></slot> `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-block;\n        padding-right: 3px;\n        border: 1px solid transparent;\n        border-radius: var(--uui-border-radius);\n      }\n\n      :host(:not([pristine]):invalid),\n      /* polyfill support */\n      :host(:not([pristine])[internals-invalid]) {\n        border: 1px solid var(--uui-color-invalid-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,13 @@
+import { UUIRadioGroupElement } from './radio-group.element.js';
+import { UUIRadioElement } from './radio.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-radio-group': UUIRadioGroupElement;
+        'uui-radio': UUIRadioElement;
+    }
+}
+export * from './radio-group.element.js';
+export * from './radio.element.js';
+export * from './UUIRadioEvent.js';
+export * from './UUIRadioGroupEvent.js';
+export { UUIRadioElement as default } from './radio.element.js';

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

@@ -0,0 +1,67 @@
+import { LitElement } from 'lit';
+/**
+ *  @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
+ */
+export declare class UUIRadioElement extends LitElement {
+    #private;
+    private readonly _inputElement;
+    /**
+     * This is a name property of the `<uui-radio>` component. It reflects the behaviour of the native `<input />` element and its name attribute.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    name: string;
+    /**
+     * This is a value property of the `<uui-radio>`.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    value: string;
+    label: string;
+    checked: boolean;
+    /**
+     * Disables the input.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    constructor();
+    focus(): void;
+    click(): void;
+    /**
+     * Call to uncheck the element
+     * @method uncheck
+     */
+    uncheck(): void;
+    /**
+     * Call to check the element.
+     * @method uncheck
+     */
+    check(): void;
+    /**
+     * Call to make the element focusable, this sets tabindex to 0.
+     * @method makeFocusable
+     */
+    makeFocusable(): void;
+    /**
+     * Call to make the element focusable, this sets tabindex to -1.
+     * @method makeUnfocusable
+     */
+    makeUnfocusable(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,271 @@
+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 { 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>
+      <input
+        id="input"
+        type="radio"
+        name=${this.name}
+        value=${this.value}
+        .checked=${this.checked}
+        .disabled=${this.disabled || this.readonly}
+        @change=${__privateMethod(this, _UUIRadioElement_instances, onChange_fn)} />
+      <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`
+      :host {
+        display: block;
+        box-sizing: border-box;
+        font-family: inherit;
+        color: currentColor;
+        --uui-radio-button-size: var(--uui-size-6);
+        margin: var(--uui-size-2) 0;
+      }
+
+      label {
+        position: relative;
+        box-sizing: border-box;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        line-height: 18px;
+      }
+
+      :host([readonly]) label {
+        cursor: default;
+      }
+
+      #input {
+        width: 0;
+        height: 0;
+        opacity: 0;
+        margin: 0;
+      }
+
+      .label {
+        margin-top: 2px;
+      }
+
+      #button {
+        box-sizing: border-box;
+        display: inline-block;
+        width: var(--uui-radio-button-size, 18px);
+        height: var(--uui-radio-button-size, 18px);
+        background-color: var(--uui-color-surface);
+        border: 1px solid var(--uui-color-border-standalone);
+        border-radius: 100%;
+        margin-right: calc(var(--uui-size-2) * 2);
+        position: relative;
+        flex: 0 0 var(--uui-radio-button-size);
+        transition: border-color 120ms;
+      }
+
+      #button::after {
+        content: '';
+        width: calc(var(--uui-radio-button-size) / 2);
+        height: calc(var(--uui-radio-button-size) / 2);
+        background-color: var(--uui-color-selected);
+        opacity: 0.5;
+        border-radius: 100%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) scale(0);
+        transition:
+          transform 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
+          opacity 120ms,
+          background-color 120ms;
+      }
+
+      :host(:not([disabled]):not([readonly]):hover) #button {
+        border-color: var(--uui-color-border-emphasis);
+      }
+
+      :host(:focus) {
+        outline: none;
+      }
+      :host(:focus-within) input:focus-visible + #button {
+        outline: 2px solid var(--uui-color-focus);
+      }
+
+      :host(:not([disabled]):not([readonly]):hover) input ~ #button::after {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 0.2;
+      }
+      :host(:not([disabled]):not([readonly]):active) input ~ #button::after {
+        transform: translate(-50%, -50%) scale(1.2);
+        opacity: 1;
+      }
+      input:checked ~ #button::after,
+      :host(:not([disabled]):not([readonly]):hover)
+        input:checked
+        ~ #button::after {
+        transform: translate(-50%, -50%) scale(1);
+      }
+
+      input:checked ~ #button {
+        border-color: var(--uui-color-selected);
+      }
+      input:checked ~ #button::after {
+        opacity: 1 !important;
+      }
+
+      :host(:not([disabled]):not([readonly]):hover) input:checked ~ #button {
+        border-color: var(--uui-color-selected-emphasis);
+      }
+
+      :host([disabled]) label {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+      :host([disabled]) .label {
+        color: var(--uui-color-disabled-contrast);
+      }
+
+      :host([disabled]) input ~ #button {
+        border-color: var(--uui-color-disabled-contrast);
+      }
+
+      :host([disabled]) input:checked ~ #button {
+        border-color: var(--uui-color-disabled-contrast);
+      }
+
+      :host([disabled]) input:checked ~ #button::after {
+        background-color: var(--uui-color-disabled-contrast);
+      }
+
+      :host([disabled]:active) #button {
+        animation: ${UUIHorizontalShakeAnimationValue};
+      }
+
+      @media (prefers-reduced-motion) {
+        :host([disabled]:active) #button {
+          animation: none;
+        }
+
+        #button::after {
+          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