@esri/calcite-components 2.3.0 → 2.4.0-next.0

package/dist/components/radio-button.js

@@ -0,0 +1,347 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0-next.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client/index.js';
+import { g as getRoundRobinIndex } from './array.js';
+import { a as getElementDir, e as focusElement, t as toAriaBoolean } from './dom.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
+import { g as guid } from './guid.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label2.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
+
+const CSS = {
+    container: "container",
+};
+
+const radioButtonCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;cursor:pointer}:host .container{position:relative;outline:2px solid transparent;outline-offset:2px}:host .radio{cursor:pointer;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-color-border-input)}:host([hovered]) .radio,:host(:not([checked])[focused]:not([disabled])) .radio{box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}:host([focused]) .radio{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([disabled]) .radio{cursor:default;opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hovered][disabled]) .radio{box-shadow:inset 0 0 0 1px var(--calcite-color-border-input)}:host([scale=s]){--calcite-radio-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-radio-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-radio-size:var(--calcite-font-size-0)}.radio{block-size:var(--calcite-radio-size);max-inline-size:var(--calcite-radio-size);min-inline-size:var(--calcite-radio-size)}:host([scale=s][checked]) .radio,:host([hovered][scale=s][checked][disabled]) .radio{box-shadow:inset 0 0 0 4px var(--calcite-color-brand)}:host([scale=s][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 4px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1)}:host([scale=m][checked]) .radio,:host([hovered][scale=m][checked][disabled]) .radio{box-shadow:inset 0 0 0 5px var(--calcite-color-brand)}:host([scale=m][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 5px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1)}:host([scale=l][checked]) .radio,:host([hovered][scale=l][checked][disabled]) .radio{box-shadow:inset 0 0 0 6px var(--calcite-color-brand)}:host([scale=l][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 6px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1)}@media (forced-colors: active){:host([checked]) .radio::after,:host([checked][disabled]) .radio::after{content:\"\";inline-size:var(--calcite-radio-size);block-size:var(--calcite-radio-size);background-color:windowText;display:block}}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+
+const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.calciteInternalRadioButtonBlur = createEvent(this, "calciteInternalRadioButtonBlur", 6);
+        this.calciteRadioButtonChange = createEvent(this, "calciteRadioButtonChange", 6);
+        this.calciteInternalRadioButtonCheckedChange = createEvent(this, "calciteInternalRadioButtonCheckedChange", 6);
+        this.calciteInternalRadioButtonFocus = createEvent(this, "calciteInternalRadioButtonFocus", 6);
+        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.isFocusable = () => {
+            const radioButtons = this.queryButtons();
+            const firstFocusable = radioButtons.find((radioButton) => !radioButton.disabled);
+            const checked = radioButtons.find((radioButton) => radioButton.checked);
+            return firstFocusable === this.el && !checked;
+        };
+        this.check = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.focused = true;
+            this.setFocus();
+            if (this.checked) {
+                return;
+            }
+            this.uncheckAllRadioButtonsInGroup();
+            this.checked = true;
+            this.calciteRadioButtonChange.emit();
+        };
+        this.clickHandler = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.check();
+        };
+        this.setContainerEl = (el) => {
+            this.containerEl = el;
+        };
+        this.handleKeyDown = (event) => {
+            const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
+            const { key } = event;
+            const { el } = this;
+            if (keys.indexOf(key) === -1) {
+                return;
+            }
+            if (key === " ") {
+                this.check();
+                event.preventDefault();
+                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 = () => {
+            if (!this.disabled) {
+                this.focused = true;
+                this.calciteInternalRadioButtonFocus.emit();
+            }
+        };
+        this.checked = false;
+        this.disabled = false;
+        this.focused = false;
+        this.form = undefined;
+        this.guid = undefined;
+        this.hovered = false;
+        this.label = undefined;
+        this.name = undefined;
+        this.required = false;
+        this.scale = "m";
+        this.value = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Global attributes
+    //
+    //--------------------------------------------------------------------------
+    handleHiddenChange() {
+        this.updateTabIndexOfOtherRadioButtonsInGroup();
+    }
+    checkedChanged(newChecked) {
+        if (newChecked) {
+            this.uncheckOtherRadioButtonsInGroup();
+        }
+        this.calciteInternalRadioButtonCheckedChange.emit();
+    }
+    disabledChanged() {
+        this.updateTabIndexOfOtherRadioButtonsInGroup();
+    }
+    nameChanged() {
+        this.checkLastRadioButton();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        await componentFocusable(this);
+        if (!this.disabled) {
+            focusElement(this.containerEl);
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    syncHiddenFormInput(input) {
+        input.type = "radio";
+    }
+    onLabelClick(event) {
+        if (this.disabled || this.el.hidden) {
+            return;
+        }
+        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) {
+            return;
+        }
+        radioButton.focused = true;
+        this.setFocus();
+        if (radioButton.checked) {
+            return;
+        }
+        this.uncheckOtherRadioButtonsInGroup();
+        radioButton.checked = true;
+        this.calciteRadioButtonChange.emit();
+    }
+    checkLastRadioButton() {
+        const radioButtons = this.queryButtons();
+        const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);
+        if (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;
+            }
+        });
+    }
+    updateTabIndexOfOtherRadioButtonsInGroup() {
+        const radioButtons = this.queryButtons();
+        const otherFocusableRadioButtons = radioButtons.filter((radioButton) => radioButton.guid !== this.guid && !radioButton.disabled);
+        otherFocusableRadioButtons.forEach((radioButton) => {
+            forceUpdate(radioButton);
+        });
+    }
+    getTabIndex() {
+        if (this.disabled) {
+            return undefined;
+        }
+        return this.checked || this.isFocusable() ? 0 : -1;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    pointerEnterHandler() {
+        if (this.disabled) {
+            return;
+        }
+        this.hovered = true;
+    }
+    pointerLeaveHandler() {
+        if (this.disabled) {
+            return;
+        }
+        this.hovered = false;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        this.rootNode = this.el.getRootNode();
+        this.guid = this.el.id || `calcite-radio-button-${guid()}`;
+        if (this.name) {
+            this.checkLastRadioButton();
+        }
+        connectInteractive(this);
+        connectLabel(this);
+        connectForm(this);
+        this.updateTabIndexOfOtherRadioButtonsInGroup();
+    }
+    componentWillLoad() {
+        setUpLoadableComponent(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+        if (this.focused && !this.disabled) {
+            this.setFocus();
+        }
+    }
+    disconnectedCallback() {
+        disconnectInteractive(this);
+        disconnectLabel(this);
+        disconnectForm(this);
+        this.updateTabIndexOfOtherRadioButtonsInGroup();
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    render() {
+        const tabIndex = this.getTabIndex();
+        return (h(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, role: "radio", tabIndex: tabIndex,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setContainerEl }, h("div", { class: "radio" })), h(HiddenFormInputSlot, { component: this }))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "hidden": ["handleHiddenChange"],
+        "checked": ["checkedChanged"],
+        "disabled": ["disabledChanged"],
+        "name": ["nameChanged"]
+    }; }
+    static get style() { return radioButtonCss; }
+}, [1, "calcite-radio-button", {
+        "checked": [1540],
+        "disabled": [516],
+        "focused": [1540],
+        "form": [513],
+        "guid": [1537],
+        "hovered": [1540],
+        "label": [1],
+        "name": [513],
+        "required": [516],
+        "scale": [513],
+        "value": [1032],
+        "setFocus": [64],
+        "emitCheckedChange": [64]
+    }, [[1, "pointerenter", "pointerEnterHandler"], [1, "pointerleave", "pointerLeaveHandler"]], {
+        "hidden": ["handleHiddenChange"],
+        "checked": ["checkedChanged"],
+        "disabled": ["disabledChanged"],
+        "name": ["nameChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["calcite-radio-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "calcite-radio-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RadioButton);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RadioButton as R, defineCustomElement as d };
+
+//# sourceMappingURL=radio-button.js.map

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

@@ -0,0 +1 @@
+{"file":"radio-button.js","mappings":"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","names":[],"sources":["src/components/radio-button/resources.ts","src/components/radio-button/radio-button.scss?tag=calcite-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n};\n",":host {\n  @apply block cursor-pointer;\n  .container {\n    @apply relative outline-none;\n  }\n  .radio {\n    @apply bg-foreground-1 cursor-pointer focus-base rounded-full transition-default;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);\n  }\n}\n\n:host([hovered]),\n:host(:not([checked])[focused]:not([disabled])) {\n  .radio {\n    box-shadow: inset 0 0 0 2px var(--calcite-color-brand);\n  }\n}\n\n:host([focused]) {\n  .radio {\n    @apply focus-outset;\n  }\n}\n\n@include disabled() {\n  .radio {\n    @apply opacity-disabled cursor-default;\n  }\n}\n\n:host([hovered][disabled]) {\n  .radio {\n    box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);\n  }\n}\n\n:host([scale=\"s\"]) {\n  --calcite-radio-size: theme(\"fontSize.n2\");\n}\n:host([scale=\"m\"]) {\n  --calcite-radio-size: theme(\"fontSize.n1\");\n}\n:host([scale=\"l\"]) {\n  --calcite-radio-size: theme(\"fontSize.0\");\n}\n\n.radio {\n  block-size: var(--calcite-radio-size);\n  max-inline-size: var(--calcite-radio-size);\n  min-inline-size: var(--calcite-radio-size);\n}\n\n:host([scale=\"s\"][checked]),\n:host([hovered][scale=\"s\"][checked][disabled]) {\n  .radio {\n    box-shadow: inset 0 0 0 4px var(--calcite-color-brand);\n  }\n}\n:host([scale=\"s\"][focused][checked]:not([disabled])) {\n  .radio {\n    box-shadow:\n      inset 0 0 0 4px var(--calcite-color-brand),\n      0 0 0 2px var(--calcite-color-foreground-1);\n  }\n}\n:host([scale=\"m\"][checked]),\n:host([hovered][scale=\"m\"][checked][disabled]) {\n  .radio {\n    box-shadow: inset 0 0 0 5px var(--calcite-color-brand);\n  }\n}\n:host([scale=\"m\"][focused][checked]:not([disabled])) {\n  .radio {\n    box-shadow:\n      inset 0 0 0 5px var(--calcite-color-brand),\n      0 0 0 2px var(--calcite-color-foreground-1);\n  }\n}\n:host([scale=\"l\"][checked]),\n:host([hovered][scale=\"l\"][checked][disabled]) {\n  .radio {\n    box-shadow: inset 0 0 0 6px var(--calcite-color-brand);\n  }\n}\n:host([scale=\"l\"][focused][checked]:not([disabled])) {\n  .radio {\n    box-shadow:\n      inset 0 0 0 6px var(--calcite-color-brand),\n      0 0 0 2px var(--calcite-color-foreground-1);\n  }\n}\n\n@media (forced-colors: active) {\n  :host([checked]),\n  :host([checked][disabled]) {\n    .radio::after {\n      content: \"\";\n      inline-size: var(--calcite-radio-size);\n      block-size: var(--calcite-radio-size);\n      background-color: windowText;\n      display: block;\n    }\n  }\n}\n\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getRoundRobinIndex } from \"../../utils/array\";\nimport { focusElement, getElementDir, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n} from \"../../utils/form\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Scale } from \"../interfaces\";\nimport { CSS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-radio-button\",\n  styleUrl: \"radio-button.scss\",\n  shadow: true,\n})\nexport class RadioButton\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Global attributes\n  //\n  //--------------------------------------------------------------------------\n\n  @Watch(\"hidden\")\n  handleHiddenChange(): void {\n    this.updateTabIndexOfOtherRadioButtonsInGroup();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  @Watch(\"checked\")\n  checkedChanged(newChecked: boolean): void {\n    if (newChecked) {\n      this.uncheckOtherRadioButtonsInGroup();\n    }\n\n    this.calciteInternalRadioButtonCheckedChange.emit();\n  }\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  @Watch(\"disabled\")\n  disabledChanged(): void {\n    this.updateTabIndexOfOtherRadioButtonsInGroup();\n  }\n\n  /**\n   * The focused state of the component.\n   *\n   * @internal\n   */\n  @Prop({ mutable: true, reflect: true }) focused = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /** The `id` of the component. When omitted, a globally unique identifier is used. */\n  @Prop({ reflect: true, mutable: true }) guid: string;\n\n  /**\n   * The hovered state of the component.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) hovered = false;\n\n  /**\n   * Accessible name for the component.\n   *\n   * @internal\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name of the component. Can be inherited from `calcite-radio-button-group`.\n   *\n   * Required to pass the component's `value` on form submission.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  @Watch(\"name\")\n  nameChanged(): void {\n    this.checkLastRadioButton();\n  }\n\n  /** When `true`, the component must have a value selected from the `calcite-radio-button-group` in order for the form to submit. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies the size of the component inherited from the `calcite-radio-button-group`. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** The component's value. */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by form module\n  @Prop({ mutable: true }) value!: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteRadioButtonElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultChecked: boolean;\n\n  defaultValue: RadioButton[\"value\"];\n\n  rootNode: HTMLElement;\n\n  containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    if (!this.disabled) {\n      focusElement(this.containerEl);\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"radio\";\n  }\n\n  selectItem = (items: HTMLCalciteRadioButtonElement[], selectedIndex: number): void => {\n    items[selectedIndex].click();\n  };\n\n  queryButtons = (): HTMLCalciteRadioButtonElement[] => {\n    return Array.from(this.rootNode.querySelectorAll(\"calcite-radio-button:not([hidden])\")).filter(\n      (radioButton: HTMLCalciteRadioButtonElement) => radioButton.name === this.name,\n    ) as HTMLCalciteRadioButtonElement[];\n  };\n\n  isFocusable = (): boolean => {\n    const radioButtons = this.queryButtons();\n    const firstFocusable = radioButtons.find((radioButton) => !radioButton.disabled);\n    const checked = radioButtons.find((radioButton) => radioButton.checked);\n    return firstFocusable === this.el && !checked;\n  };\n\n  check = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.focused = true;\n    this.setFocus();\n\n    if (this.checked) {\n      return;\n    }\n\n    this.uncheckAllRadioButtonsInGroup();\n    this.checked = true;\n    this.calciteRadioButtonChange.emit();\n  };\n\n  private clickHandler = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.check();\n  };\n\n  onLabelClick(event: CustomEvent): void {\n    if (this.disabled || this.el.hidden) {\n      return;\n    }\n\n    const label = event.currentTarget as HTMLCalciteLabelElement;\n\n    const radioButton = label.for\n      ? this.rootNode.querySelector<HTMLCalciteRadioButtonElement>(\n          `calcite-radio-button[id=\"${label.for}\"]`,\n        )\n      : label.querySelector<HTMLCalciteRadioButtonElement>(\n          `calcite-radio-button[name=\"${this.name}\"]`,\n        );\n\n    if (!radioButton) {\n      return;\n    }\n\n    radioButton.focused = true;\n    this.setFocus();\n\n    if (radioButton.checked) {\n      return;\n    }\n\n    this.uncheckOtherRadioButtonsInGroup();\n    radioButton.checked = true;\n    this.calciteRadioButtonChange.emit();\n  }\n\n  private checkLastRadioButton(): void {\n    const radioButtons = this.queryButtons();\n    const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);\n\n    if (checkedRadioButtons?.length > 1) {\n      const lastCheckedRadioButton = checkedRadioButtons[checkedRadioButtons.length - 1];\n      checkedRadioButtons\n        .filter((checkedRadioButton) => checkedRadioButton !== lastCheckedRadioButton)\n        .forEach((checkedRadioButton: HTMLCalciteRadioButtonElement) => {\n          checkedRadioButton.checked = false;\n          checkedRadioButton.emitCheckedChange();\n        });\n    }\n  }\n\n  /** @internal */\n  @Method()\n  async emitCheckedChange(): Promise<void> {\n    this.calciteInternalRadioButtonCheckedChange.emit();\n  }\n\n  private setContainerEl = (el: HTMLDivElement): void => {\n    this.containerEl = el;\n  };\n\n  private uncheckAllRadioButtonsInGroup(): void {\n    const radioButtons = this.queryButtons();\n    radioButtons.forEach((radioButton) => {\n      if (radioButton.checked) {\n        radioButton.checked = false;\n        radioButton.focused = false;\n      }\n    });\n  }\n\n  private uncheckOtherRadioButtonsInGroup(): void {\n    const radioButtons = this.queryButtons();\n    const otherRadioButtons = radioButtons.filter((radioButton) => radioButton.guid !== this.guid);\n    otherRadioButtons.forEach((otherRadioButton) => {\n      if (otherRadioButton.checked) {\n        otherRadioButton.checked = false;\n        otherRadioButton.focused = false;\n      }\n    });\n  }\n\n  private updateTabIndexOfOtherRadioButtonsInGroup(): void {\n    const radioButtons = this.queryButtons();\n    const otherFocusableRadioButtons = radioButtons.filter(\n      (radioButton) => radioButton.guid !== this.guid && !radioButton.disabled,\n    );\n    otherFocusableRadioButtons.forEach((radioButton) => {\n      forceUpdate(radioButton);\n    });\n  }\n\n  private getTabIndex(): number | undefined {\n    if (this.disabled) {\n      return undefined;\n    }\n    return this.checked || this.isFocusable() ? 0 : -1;\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the radio button is blurred.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalRadioButtonBlur: EventEmitter<void>;\n\n  /**\n   * Fires only when the radio button is checked.  This behavior is identical to the native HTML input element.\n   * Since this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event\n   * directly on the element, but instead either attach it to a node that contains all of the radio buttons in the group\n   * or use the `calciteRadioButtonGroupChange` event if using this with `calcite-radio-button-group`.\n   */\n  @Event({ cancelable: false }) calciteRadioButtonChange: EventEmitter<void>;\n\n  /**\n   * Fires when the checked property changes.  This is an internal event used for styling purposes only.\n   * Use calciteRadioButtonChange or calciteRadioButtonGroupChange for responding to changes in the checked value for forms.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalRadioButtonCheckedChange: EventEmitter<void>;\n\n  /**\n   * Fires when the radio button is focused.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalRadioButtonFocus: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"pointerenter\")\n  pointerEnterHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.hovered = true;\n  }\n\n  @Listen(\"pointerleave\")\n  pointerLeaveHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.hovered = false;\n  }\n\n  handleKeyDown = (event: KeyboardEvent): void => {\n    const keys = [\"ArrowLeft\", \"ArrowUp\", \"ArrowRight\", \"ArrowDown\", \" \"];\n    const { key } = event;\n    const { el } = this;\n\n    if (keys.indexOf(key) === -1) {\n      return;\n    }\n\n    if (key === \" \") {\n      this.check();\n      event.preventDefault();\n      return;\n    }\n\n    let adjustedKey = key;\n\n    if (getElementDir(el) === \"rtl\") {\n      if (key === \"ArrowRight\") {\n        adjustedKey = \"ArrowLeft\";\n      }\n      if (key === \"ArrowLeft\") {\n        adjustedKey = \"ArrowRight\";\n      }\n    }\n\n    const radioButtons = Array.from(\n      this.rootNode.querySelectorAll(\"calcite-radio-button:not([hidden])\"),\n    ).filter(\n      (radioButton: HTMLCalciteRadioButtonElement) => radioButton.name === this.name,\n    ) as HTMLCalciteRadioButtonElement[];\n    let currentIndex = 0;\n\n    const radioButtonsLength = radioButtons.length;\n\n    radioButtons.some((item, index) => {\n      if (item.checked) {\n        currentIndex = index;\n        return true;\n      }\n    });\n\n    switch (adjustedKey) {\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        event.preventDefault();\n        this.selectItem(\n          radioButtons,\n          getRoundRobinIndex(Math.max(currentIndex - 1, -1), radioButtonsLength),\n        );\n        return;\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        event.preventDefault();\n        this.selectItem(radioButtons, getRoundRobinIndex(currentIndex + 1, radioButtonsLength));\n        return;\n      default:\n        return;\n    }\n  };\n\n  private onContainerBlur = (): void => {\n    this.focused = false;\n    this.calciteInternalRadioButtonBlur.emit();\n  };\n\n  private onContainerFocus = (): void => {\n    if (!this.disabled) {\n      this.focused = true;\n      this.calciteInternalRadioButtonFocus.emit();\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.rootNode = this.el.getRootNode() as HTMLElement;\n    this.guid = this.el.id || `calcite-radio-button-${guid()}`;\n    if (this.name) {\n      this.checkLastRadioButton();\n    }\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n    this.updateTabIndexOfOtherRadioButtonsInGroup();\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n\n    if (this.focused && !this.disabled) {\n      this.setFocus();\n    }\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n    this.updateTabIndexOfOtherRadioButtonsInGroup();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const tabIndex = this.getTabIndex();\n    return (\n      <Host onClick={this.clickHandler} onKeyDown={this.handleKeyDown}>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={toAriaBoolean(this.checked)}\n            aria-label={getLabelText(this)}\n            class={CSS.container}\n            onBlur={this.onContainerBlur}\n            onFocus={this.onContainerFocus}\n            role=\"radio\"\n            tabIndex={tabIndex}\n            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n            ref={this.setContainerEl}\n          >\n            <div class=\"radio\" />\n          </div>\n          <HiddenFormInputSlot component={this} />\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 const autoMode = "calcite-mode-auto";
 const darkMode = "calcite-mode-dark";

package/dist/components/resources2.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 var KindIcons;
 (function (KindIcons) {

package/dist/components/resources3.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 const CSS = {
     container: "container",

package/dist/components/resources4.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 const CSS = {
     sticky: "sticky-pos",

package/dist/components/resources5.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 const CSS = {
     heading: "heading",

package/dist/components/ro.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/ru.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/scrim.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale.js';

package/dist/components/shared-list-render.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { g as getRoundRobinIndex } from './array.js';
 import { e as focusElement, g as getSlotted, t as toAriaBoolean } from './dom.js';

package/dist/components/sk.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/sl.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/sortableComponent.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 /**!
  * Sortable 1.15.1

package/dist/components/sr.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/stack.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { d as slotChangeHasAssignedElement } from './dom.js';

package/dist/components/sv.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/switch.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { e as focusElement, t as toAriaBoolean } from './dom.js';

package/dist/components/t9n.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { Build, getAssetPath } from '@stencil/core/internal/client/index.js';
 import { g as getSupportedLocale } from './locale.js';

package/dist/components/tab-nav.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { v as focusElementInGroup, a as getElementDir, x as filterDirectChildren } from './dom.js';

package/dist/components/tab-title.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean, a as getElementDir, w as nodeListToArray } from './dom.js';

package/dist/components/tab.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { w as nodeListToArray } from './dom.js';

package/dist/components/table-cell.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';

package/dist/components/table-header.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';

package/dist/components/tabs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.3.0
+ * v2.4.0-next.0
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as createObserver } from './observers.js';