@esri/calcite-components 1.0.0-beta.65 → 1.0.0-beta.69

package/dist/components/calcite-progress.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalciteProgress extends Components.CalciteProgress, HTMLElement {}
+export const CalciteProgress: {
+  prototype: CalciteProgress;
+  new (): CalciteProgress;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/calcite-progress.js

@@ -0,0 +1,10 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { C as CalciteProgress$1, d as defineCustomElement$1 } from './calcite-progress2.js';
+
+const CalciteProgress = CalciteProgress$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteProgress, defineCustomElement };

package/dist/components/calcite-progress2.js

@@ -0,0 +1,52 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { h, proxyCustomElement } from '@stencil/core/internal/client';
+
+const calciteProgressCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{position:relative;display:block;width:100%}.track,.bar{position:absolute;top:0;height:2px}.track{z-index:0;width:100%;overflow:hidden;background:var(--calcite-ui-border-3)}.bar{background-color:var(--calcite-ui-brand);z-index:0}.indeterminate{width:20%;-webkit-animation:looping-progress-bar-ani 2200ms linear infinite;animation:looping-progress-bar-ani 2200ms linear infinite}.reversed{animation-direction:reverse}.text{padding-top:1rem;padding-bottom:0;padding-left:0;padding-right:0;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium)}@-webkit-keyframes looping-progress-bar-ani{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{width:40%}100%{-webkit-transform:translate3d(600%, 0, 0);transform:translate3d(600%, 0, 0)}}@keyframes looping-progress-bar-ani{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{width:40%}100%{-webkit-transform:translate3d(600%, 0, 0);transform:translate3d(600%, 0, 0)}}";
+
+let CalciteProgress = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /** Use indeterminate if finding actual progress value is impossible */
+    this.type = "determinate";
+    /** Fraction completed, in the range of 0 - 1.0 */
+    this.value = 0;
+    /** For indeterminate progress bars, reverse the animation direction */
+    this.reversed = false;
+  }
+  render() {
+    const isDeterminate = this.type === "determinate";
+    const barStyles = isDeterminate ? { width: `${this.value * 100}%` } : {};
+    return (h("div", { "aria-label": this.label || this.text, "aria-valuemax": 1, "aria-valuemin": 0, "aria-valuenow": this.value, role: "progressbar" }, h("div", { class: "track" }, h("div", { class: {
+        bar: true,
+        indeterminate: this.type === "indeterminate",
+        reversed: this.reversed
+      }, style: barStyles })), this.text ? h("div", { class: "text" }, this.text) : null));
+  }
+  get el() { return this; }
+  static get style() { return calciteProgressCss; }
+};
+CalciteProgress = /*@__PURE__*/ proxyCustomElement(CalciteProgress, [1, "calcite-progress", {
+    "type": [1],
+    "value": [2],
+    "label": [1],
+    "text": [1],
+    "reversed": [4]
+  }]);
+function defineCustomElement() {
+  const components = ["calcite-progress"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-progress":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteProgress);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { CalciteProgress as C, defineCustomElement as d };

package/dist/components/calcite-radio-button-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalciteRadioButtonGroup extends Components.CalciteRadioButtonGroup, HTMLElement {}
+export const CalciteRadioButtonGroup: {
+  prototype: CalciteRadioButtonGroup;
+  new (): CalciteRadioButtonGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/calcite-radio-button-group.js

@@ -0,0 +1,116 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const calciteRadioButtonGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;max-width:100vw}:host([layout=horizontal]){-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}:host([layout=horizontal][scale=s]){grid-gap:1rem;gap:1rem}:host([layout=horizontal][scale=m]){grid-gap:1.25rem;gap:1.25rem}:host([layout=horizontal][scale=l]){grid-gap:1.5rem;gap:1.5rem}:host([layout=vertical]){-ms-flex-direction:column;flex-direction:column}";
+
+let CalciteRadioButtonGroup$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteRadioButtonGroupChange = createEvent(this, "calciteRadioButtonGroupChange", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** The disabled state of the radio button group. */
+    this.disabled = false;
+    /** The radio button group's hidden status.  When a radio button group is hidden none of its options are focusable or checkable. */
+    this.hidden = false;
+    /** The layout direction of the radio buttons in a group. */
+    this.layout = "horizontal";
+    /** Requires that a value is selected for the radio button group before the parent form will submit. */
+    this.required = false;
+    /** The scale (size) of the radio button group. */
+    this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.passPropsToRadioButtons = () => {
+      const radioButtons = this.el.querySelectorAll("calcite-radio-button");
+      if (radioButtons.length > 0) {
+        radioButtons.forEach((radioButton) => {
+          radioButton.disabled = this.disabled || radioButton.disabled;
+          radioButton.hidden = this.hidden;
+          radioButton.name = this.name;
+          radioButton.required = this.required;
+          radioButton.scale = this.scale;
+        });
+      }
+    };
+  }
+  onDisabledChange() {
+    this.passPropsToRadioButtons();
+  }
+  onHiddenChange() {
+    this.passPropsToRadioButtons();
+  }
+  onLayoutChange() {
+    this.passPropsToRadioButtons();
+  }
+  onScaleChange() {
+    this.passPropsToRadioButtons();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.passPropsToRadioButtons();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  radioButtonChangeHandler(event) {
+    this.calciteRadioButtonGroupChange.emit(event.target.value);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (h(Host, { role: "radiogroup" }, h("slot", null)));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "disabled": ["onDisabledChange"],
+    "hidden": ["onHiddenChange"],
+    "layout": ["onLayoutChange"],
+    "scale": ["onScaleChange"]
+  }; }
+  static get style() { return calciteRadioButtonGroupCss; }
+};
+CalciteRadioButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(CalciteRadioButtonGroup$1, [1, "calcite-radio-button-group", {
+    "disabled": [516],
+    "hidden": [516],
+    "layout": [513],
+    "name": [513],
+    "required": [516],
+    "scale": [513]
+  }, [[0, "calciteRadioButtonChange", "radioButtonChangeHandler"]]]);
+function defineCustomElement$1() {
+  const components = ["calcite-radio-button-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-radio-button-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteRadioButtonGroup$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteRadioButtonGroup = CalciteRadioButtonGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteRadioButtonGroup, defineCustomElement };

package/dist/components/calcite-radio-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalciteRadioButton extends Components.CalciteRadioButton, HTMLElement {}
+export const CalciteRadioButton: {
+  prototype: CalciteRadioButton;
+  new (): CalciteRadioButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/calcite-radio-button.js

@@ -0,0 +1,291 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { g as guid } from './guid.js';
+import { f as focusElement, d as closestElementCrossShadowBoundary } from './dom.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
+import { h as hiddenInputStyle } from './form.js';
+import { d as defineCustomElement$2 } from './calcite-radio2.js';
+
+const CSS = {
+  container: "calcite-radio-button__container"
+};
+
+const calciteRadioButtonCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}.sc-calcite-radio-button:root{--calcite-animation-timing:300ms}.calcite-animate.sc-calcite-radio-button{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in.sc-calcite-radio-button{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down.sc-calcite-radio-button{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up.sc-calcite-radio-button{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale.sc-calcite-radio-button{-webkit-animation-name:in-scale;animation-name:in-scale}.sc-calcite-radio-button:root{--calcite-popper-transition:150ms ease-in-out}[hidden].sc-calcite-radio-button-h{display:none}.sc-calcite-radio-button-h{cursor:pointer;display:block}.sc-calcite-radio-button-h .calcite-radio-button__container.sc-calcite-radio-button{position:relative}[disabled].sc-calcite-radio-button-h{cursor:pointer}";
+
+let CalciteRadioButton$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.calciteInternalRadioButtonBlur = createEvent(this, "calciteInternalRadioButtonBlur", 7);
+    this.calciteRadioButtonChange = createEvent(this, "calciteRadioButtonChange", 7);
+    this.calciteInternalRadioButtonCheckedChange = createEvent(this, "calciteInternalRadioButtonCheckedChange", 7);
+    this.calciteInternalRadioButtonFocus = createEvent(this, "calciteInternalRadioButtonFocus", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** The checked state of the radio button. */
+    this.checked = false;
+    /** The disabled state of the radio button. */
+    this.disabled = false;
+    /**
+     * The focused state of the radio button.
+     * @internal
+     */
+    this.focused = false;
+    /** The radio button's hidden status.  When a radio button is hidden it is not focusable or checkable. */
+    this.hidden = false;
+    /**
+     * The hovered state of the radio button.
+     * @internal
+     */
+    this.hovered = false;
+    /** Requires that a value is selected for the radio button group before the parent form will submit. */
+    this.required = false;
+    /** The scale (size) of the radio button. `scale` is passed as a property automatically from `calcite-radio-button-group`. */
+    this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.selectItem = (items, selectedIndex) => {
+      items.forEach((item, index) => {
+        const selected = index === selectedIndex;
+        item.checked = selected;
+        item.focused = selected;
+      });
+    };
+    this.toggle = () => {
+      this.uncheckAllRadioButtonsInGroup();
+      this.checked = true;
+      this.focused = true;
+      this.calciteRadioButtonChange.emit();
+    };
+    this.clickHandler = () => {
+      this.toggle();
+    };
+    this.setInputEl = (el) => {
+      this.inputEl = el;
+    };
+    this.formResetHandler = () => {
+      var _a;
+      this.checked = this.initialChecked;
+      this.initialChecked && ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute("checked", ""));
+    };
+    this.hideInputEl = () => {
+      this.inputEl.style.cssText = hiddenInputStyle;
+    };
+    this.onInputBlur = () => {
+      this.focused = false;
+      this.calciteInternalRadioButtonBlur.emit();
+    };
+    this.onInputFocus = () => {
+      this.focused = true;
+      this.calciteInternalRadioButtonFocus.emit();
+    };
+  }
+  checkedChanged(newChecked) {
+    if (newChecked) {
+      this.uncheckOtherRadioButtonsInGroup();
+    }
+    if (this.inputEl) {
+      this.inputEl.checked = newChecked;
+    }
+    this.calciteInternalRadioButtonCheckedChange.emit(newChecked);
+  }
+  disabledChanged(disabled) {
+    this.inputEl.disabled = disabled;
+  }
+  focusedChanged(focused) {
+    if (!this.inputEl) {
+      return;
+    }
+    if (focused && !this.el.hasAttribute("hidden")) {
+      this.inputEl.focus();
+    }
+    else {
+      this.inputEl.blur();
+    }
+  }
+  hiddenChanged(newHidden) {
+    this.inputEl.hidden = newHidden;
+  }
+  nameChanged(newName) {
+    if (this.name === newName) {
+      return;
+    }
+    if (this.inputEl) {
+      this.inputEl.name = newName;
+    }
+    this.checkLastRadioButton();
+    const currentValue = this.rootNode.querySelector(`input[name="${this.name}"]:checked`);
+    if (!(currentValue === null || currentValue === void 0 ? void 0 : currentValue.value)) {
+      this.uncheckAllRadioButtonsInGroup();
+    }
+  }
+  requiredChanged(required) {
+    this.inputEl.required = required;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    focusElement(this.inputEl);
+  }
+  onLabelClick(event) {
+    if (!this.disabled && !this.hidden) {
+      this.uncheckOtherRadioButtonsInGroup();
+      const label = event.currentTarget;
+      const radioButton = label.for
+        ? this.rootNode.querySelector(`calcite-radio-button[id="${label.for}"]`)
+        : label.querySelector(`calcite-radio-button[name="${this.name}"]`);
+      if (radioButton) {
+        radioButton.checked = true;
+        radioButton.focused = true;
+      }
+      this.calciteRadioButtonChange.emit();
+      this.setFocus();
+    }
+  }
+  checkLastRadioButton() {
+    const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
+    const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);
+    if ((checkedRadioButtons === null || checkedRadioButtons === void 0 ? void 0 : checkedRadioButtons.length) > 1) {
+      const lastCheckedRadioButton = checkedRadioButtons[checkedRadioButtons.length - 1];
+      checkedRadioButtons
+        .filter((checkedRadioButton) => checkedRadioButton !== lastCheckedRadioButton)
+        .forEach((checkedRadioButton) => {
+        checkedRadioButton.checked = false;
+        checkedRadioButton.emitCheckedChange();
+      });
+    }
+  }
+  /** @internal */
+  async emitCheckedChange() {
+    this.calciteInternalRadioButtonCheckedChange.emit();
+  }
+  uncheckAllRadioButtonsInGroup() {
+    const otherRadioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
+    otherRadioButtons.forEach((otherRadioButton) => {
+      if (otherRadioButton.checked) {
+        otherRadioButton.checked = false;
+        otherRadioButton.focused = false;
+      }
+    });
+  }
+  uncheckOtherRadioButtonsInGroup() {
+    const otherRadioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name && radioButton.guid !== this.guid);
+    otherRadioButtons.forEach((otherRadioButton) => {
+      if (otherRadioButton.checked) {
+        otherRadioButton.checked = false;
+        otherRadioButton.focused = false;
+      }
+    });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  mouseenter() {
+    this.hovered = true;
+  }
+  mouseleave() {
+    this.hovered = false;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.rootNode = this.el.getRootNode();
+    this.guid = this.el.id || `calcite-radio-button-${guid()}`;
+    this.initialChecked = this.checked;
+    if (this.name) {
+      this.checkLastRadioButton();
+    }
+    const form = closestElementCrossShadowBoundary(this.el, "form");
+    if (form) {
+      form.addEventListener("reset", this.formResetHandler);
+    }
+    connectLabel(this);
+  }
+  componentDidLoad() {
+    this.hideInputEl();
+    if (this.focused) {
+      this.inputEl.focus();
+    }
+  }
+  disconnectedCallback() {
+    const form = closestElementCrossShadowBoundary(this.el, "form");
+    if (form) {
+      form.removeEventListener("reset", this.formResetHandler);
+    }
+    disconnectLabel(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    var _a;
+    const value = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString();
+    return (h(Host, { onClick: this.clickHandler }, h("div", { class: CSS.container }, h("input", { "aria-label": getLabelText(this), checked: this.checked, disabled: this.disabled, hidden: this.hidden, id: `${this.guid}-input`, name: this.name, onBlur: this.onInputBlur, onFocus: this.onInputFocus, ref: this.setInputEl, required: this.required, type: "radio", value: value }), h("calcite-radio", { checked: this.checked, disabled: this.disabled, focused: this.focused, hidden: this.hidden, hovered: this.hovered, scale: this.scale }))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "checked": ["checkedChanged"],
+    "disabled": ["disabledChanged"],
+    "focused": ["focusedChanged"],
+    "hidden": ["hiddenChanged"],
+    "name": ["nameChanged"],
+    "required": ["requiredChanged"]
+  }; }
+  static get style() { return calciteRadioButtonCss; }
+};
+CalciteRadioButton$1 = /*@__PURE__*/ proxyCustomElement(CalciteRadioButton$1, [2, "calcite-radio-button", {
+    "checked": [1540],
+    "disabled": [516],
+    "focused": [1540],
+    "guid": [1537],
+    "hidden": [516],
+    "hovered": [1540],
+    "label": [1],
+    "name": [513],
+    "required": [516],
+    "scale": [513],
+    "value": [8],
+    "setFocus": [64],
+    "emitCheckedChange": [64]
+  }, [[1, "mouseenter", "mouseenter"], [1, "mouseleave", "mouseleave"]]]);
+function defineCustomElement$1() {
+  const components = ["calcite-radio-button", "calcite-radio"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-radio-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteRadioButton$1);
+      }
+      break;
+    case "calcite-radio":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteRadioButton = CalciteRadioButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteRadioButton, defineCustomElement };

package/dist/components/calcite-radio-group-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalciteRadioGroupItem extends Components.CalciteRadioGroupItem, HTMLElement {}
+export const CalciteRadioGroupItem: {
+  prototype: CalciteRadioGroupItem;
+  new (): CalciteRadioGroupItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;