@esri/calcite-components 1.0.0-beta.67 → 1.0.0-beta.70

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

@@ -0,0 +1,297 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { g as guid } from './guid.js';
+import { a as getElementDir, f as focusElement } from './dom.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
+import { g as getKey } from './key.js';
+import { g as getRoundRobinIndex } from './array.js';
+import { d as defineCustomElement$2 } from './calcite-radio2.js';
+
+const CSS = {
+  container: "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)}}: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{cursor:pointer;display:block}:host .container{position:relative;outline:2px solid transparent;outline-offset:2px}:host([disabled]){cursor:pointer}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
+
+let CalciteRadioButton$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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[selectedIndex].click();
+    };
+    this.queryButtons = () => {
+      return Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")).filter((radioButton) => radioButton.name === this.name);
+    };
+    this.isDefaultSelectable = () => {
+      const radioButtons = this.queryButtons();
+      return !radioButtons.some((radioButton) => radioButton.checked) && radioButtons[0] === this.el;
+    };
+    this.check = () => {
+      if (this.disabled) {
+        return;
+      }
+      this.uncheckAllRadioButtonsInGroup();
+      this.checked = true;
+      this.calciteRadioButtonChange.emit();
+      this.setFocus();
+    };
+    this.clickHandler = () => {
+      this.check();
+    };
+    this.setContainerEl = (el) => {
+      this.containerEl = el;
+    };
+    this.handleKeyDown = (event) => {
+      const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
+      const key = getKey(event.key);
+      const { el } = this;
+      if (keys.indexOf(key) === -1) {
+        return;
+      }
+      if (key === " ") {
+        this.check();
+        return;
+      }
+      let adjustedKey = key;
+      if (getElementDir(el) === "rtl") {
+        if (key === "ArrowRight") {
+          adjustedKey = "ArrowLeft";
+        }
+        if (key === "ArrowLeft") {
+          adjustedKey = "ArrowRight";
+        }
+      }
+      const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")).filter((radioButton) => radioButton.name === this.name);
+      let currentIndex = 0;
+      const radioButtonsLength = radioButtons.length;
+      radioButtons.some((item, index) => {
+        if (item.checked) {
+          currentIndex = index;
+          return true;
+        }
+      });
+      switch (adjustedKey) {
+        case "ArrowLeft":
+        case "ArrowUp":
+          event.preventDefault();
+          this.selectItem(radioButtons, getRoundRobinIndex(Math.max(currentIndex - 1, -1), radioButtonsLength));
+          return;
+        case "ArrowRight":
+        case "ArrowDown":
+          event.preventDefault();
+          this.selectItem(radioButtons, getRoundRobinIndex(currentIndex + 1, radioButtonsLength));
+          return;
+        default:
+          return;
+      }
+    };
+    this.onContainerBlur = () => {
+      this.focused = false;
+      this.calciteInternalRadioButtonBlur.emit();
+    };
+    this.onContainerFocus = () => {
+      this.focused = true;
+      this.calciteInternalRadioButtonFocus.emit();
+    };
+  }
+  checkedChanged(newChecked) {
+    if (newChecked) {
+      this.uncheckOtherRadioButtonsInGroup();
+    }
+    this.calciteInternalRadioButtonCheckedChange.emit(newChecked);
+  }
+  nameChanged() {
+    this.checkLastRadioButton();
+    const currentValue = this.rootNode.querySelector(`input[name="${this.name}"]:checked`);
+    if (!(currentValue === null || currentValue === void 0 ? void 0 : currentValue.value)) {
+      this.uncheckAllRadioButtonsInGroup();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    focusElement(this.containerEl);
+  }
+  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 = this.queryButtons();
+    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 radioButtons = this.queryButtons();
+    radioButtons.forEach((radioButton) => {
+      if (radioButton.checked) {
+        radioButton.checked = false;
+        radioButton.focused = false;
+      }
+    });
+  }
+  uncheckOtherRadioButtonsInGroup() {
+    const radioButtons = this.queryButtons();
+    const otherRadioButtons = radioButtons.filter((radioButton) => 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()}`;
+    if (this.name) {
+      this.checkLastRadioButton();
+    }
+    connectLabel(this);
+    connectForm(this);
+  }
+  componentDidLoad() {
+    if (this.focused) {
+      this.setFocus();
+    }
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
+    disconnectForm(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown }, h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: this.checked || this.isDefaultSelectable() ? 0 : -1 }, h("calcite-radio", { checked: this.checked, disabled: this.disabled, focused: this.focused, hidden: this.hidden, hovered: this.hovered, scale: this.scale })), h(HiddenFormInputSlot, { component: this })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "checked": ["checkedChanged"],
+    "name": ["nameChanged"]
+  }; }
+  static get style() { return calciteRadioButtonCss; }
+};
+CalciteRadioButton$1 = /*@__PURE__*/ proxyCustomElement(CalciteRadioButton$1, [1, "calcite-radio-button", {
+    "checked": [1540],
+    "disabled": [516],
+    "focused": [1540],
+    "guid": [1537],
+    "hidden": [516],
+    "hovered": [1540],
+    "label": [1],
+    "name": [513],
+    "required": [516],
+    "scale": [513],
+    "value": [1032],
+    "setFocus": [64],
+    "emitCheckedChange": [64]
+  }, [[1, "mouseenter", "mouseenter"], [1, "mouseleave", "mouseleave"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  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;

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

@@ -0,0 +1,142 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { a as getElementDir, g as getElementProp } from './dom.js';
+import { c as createObserver } from './observers.js';
+import { d as defineCustomElement$2 } from './calcite-icon2.js';
+
+const SLOTS = {
+  input: "input"
+};
+const CSS = {
+  radioGroupItemIcon: "radio-group-item-icon"
+};
+
+const calciteRadioGroupItemCss = "@-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;-ms-flex-item-align:stretch;align-self:stretch;cursor:pointer;font-weight:var(--calcite-font-weight-normal);-webkit-transition:background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;transition:background-color 0.1s ease-in-out, border-color 0.1s ease-in-out}:host label{display:-ms-flexbox;display:flex;-ms-flex:1 1 0%;flex:1 1 0%;color:var(--calcite-ui-text-3);-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;-ms-flex-align:center;align-items:center;margin:0.125rem;-webkit-transition:background-color 0.1s ease-in-out, border-color 0.1s ease-in-out, color 0.1s ease-in-out;transition:background-color 0.1s ease-in-out, border-color 0.1s ease-in-out, color 0.1s ease-in-out}.label--horizontal{-ms-flex-pack:center;justify-content:center}:host{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:-2px;outline-offset:-1px}.label--scale-s{font-size:var(--calcite-font-size--2);line-height:1rem;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.125rem;padding-bottom:0.125rem}.label--scale-m{font-size:var(--calcite-font-size--1);line-height:1rem;padding-left:0.75rem;padding-right:0.75rem;padding-top:0.375rem;padding-bottom:0.375rem}.label--scale-l{font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-left:1rem;padding-right:1rem;padding-top:0.625rem;padding-bottom:0.625rem}:host(:hover) label{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}:host(:active) label{background-color:var(--calcite-ui-foreground-3)}:host([checked]) label{background-color:var(--calcite-ui-brand);border-color:var(--calcite-ui-brand);cursor:default;color:var(--calcite-ui-background)}:host([checked]) .label--outline{background-color:var(--calcite-ui-foreground-1);border-color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);color:var(--calcite-ui-brand)}::slotted(input){display:none}.radio-group-item-icon{display:-ms-inline-flexbox;display:inline-flex;position:relative;margin:0;line-height:inherit}:host([icon-position=start]) .label--scale-s .radio-group-item-icon{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([icon-position=end]) .label--scale-s .radio-group-item-icon{-webkit-margin-end:unset;margin-inline-end:unset;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}:host([icon-position=start]) .label--scale-m .radio-group-item-icon{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem}:host([icon-position=end]) .label--scale-m .radio-group-item-icon{-webkit-margin-end:unset;margin-inline-end:unset;-webkit-margin-start:0.75rem;margin-inline-start:0.75rem}:host([icon-position=start]) .label--scale-l .radio-group-item-icon{-webkit-margin-end:1rem;margin-inline-end:1rem}:host([icon-position=end]) .label--scale-l .radio-group-item-icon{-webkit-margin-end:unset;margin-inline-end:unset;-webkit-margin-start:1rem;margin-inline-start:1rem}";
+
+let CalciteRadioGroupItem$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteRadioGroupItemChange = createEvent(this, "calciteRadioGroupItemChange", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** Indicates whether the control is checked. */
+    this.checked = false;
+    /** flip the icon in rtl */
+    this.iconFlipRtl = false;
+    /** optionally used with icon, select where to position the icon */
+    this.iconPosition = "start";
+    this.mutationObserver = createObserver("mutation", () => this.syncFromExternalInput());
+  }
+  handleCheckedChange() {
+    this.calciteRadioGroupItemChange.emit();
+    this.syncToExternalInput();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    const inputProxy = this.el.querySelector(`input[slot=${SLOTS.input}]`);
+    if (inputProxy) {
+      this.value = inputProxy.value;
+      this.checked = inputProxy.checked;
+      (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(inputProxy, { attributes: true });
+    }
+    this.inputProxy = inputProxy;
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  componentWillLoad() {
+    // only use default slot content in browsers that support shadow dom
+    // or if ie11 has no label provided (#374)
+    const label = this.el.querySelector("label");
+    this.useFallback = !label || label.textContent === "";
+  }
+  render() {
+    const { checked, useFallback, value } = this;
+    const dir = getElementDir(this.el);
+    const scale = getElementProp(this.el, "scale", "m");
+    const appearance = getElementProp(this.el, "appearance", "solid");
+    const layout = getElementProp(this.el, "layout", "horizontal");
+    const iconEl = (h("calcite-icon", { class: CSS.radioGroupItemIcon, dir: dir, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
+    return (h(Host, { "aria-checked": checked.toString(), role: "radio" }, h("label", { class: {
+        "label--scale-s": scale === "s",
+        "label--scale-m": scale === "m",
+        "label--scale-l": scale === "l",
+        "label--horizontal": layout === "horizontal",
+        "label--outline": appearance === "outline"
+      } }, this.icon && this.iconPosition === "start" ? iconEl : null, h("slot", null, useFallback ? value : ""), h("slot", { name: SLOTS.input }), this.icon && this.iconPosition === "end" ? iconEl : null)));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  syncFromExternalInput() {
+    if (this.inputProxy) {
+      this.value = this.inputProxy.value;
+      this.checked = this.inputProxy.checked;
+    }
+  }
+  syncToExternalInput() {
+    if (!this.inputProxy) {
+      return;
+    }
+    this.inputProxy.value = this.value;
+    if (this.checked) {
+      this.inputProxy.setAttribute("checked", "");
+    }
+    else {
+      this.inputProxy.removeAttribute("checked");
+    }
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "checked": ["handleCheckedChange"]
+  }; }
+  static get style() { return calciteRadioGroupItemCss; }
+};
+CalciteRadioGroupItem$1 = /*@__PURE__*/ proxyCustomElement(CalciteRadioGroupItem$1, [1, "calcite-radio-group-item", {
+    "checked": [1540],
+    "icon": [513],
+    "iconFlipRtl": [516, "icon-flip-rtl"],
+    "iconPosition": [513, "icon-position"],
+    "value": [1032],
+    "useFallback": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-radio-group-item", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-radio-group-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteRadioGroupItem$1);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteRadioGroupItem = CalciteRadioGroupItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteRadioGroupItem, defineCustomElement };

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

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