@esri/calcite-components 2.2.0-next.19 → 2.2.0-next.20

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

@@ -1,11 +1,13 @@
 /*!
  * 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.2.0-next.19
+ * v2.2.0-next.20
  */
 import { h, Host, } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
 import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
+import { Validation } from "../functional/Validation";
+import { CSS } from "./resources";
 /**
  * @slot - A slot for adding `calcite-radio-button`s.
  */
@@ -38,6 +40,9 @@ export class RadioButtonGroup {
         this.required = false;
         this.selectedItem = null;
         this.scale = "m";
+        this.status = "idle";
+        this.validationMessage = undefined;
+        this.validationIcon = undefined;
         this.radioButtons = [];
     }
     onDisabledChange() {
@@ -103,7 +108,7 @@ export class RadioButtonGroup {
     //
     // --------------------------------------------------------------------------
     render() {
-        return (h(Host, { role: "radiogroup" }, h("slot", null)));
+        return (h(Host, { role: "radiogroup" }, h("div", { class: CSS.itemWrapper }, h("slot", null)), this.validationMessage ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
     }
     static get is() { return "calcite-radio-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -261,6 +266,64 @@ export class RadioButtonGroup {
                 "attribute": "scale",
                 "reflect": true,
                 "defaultValue": "\"m\""
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Status",
+                    "resolved": "\"idle\" | \"invalid\" | \"valid\"",
+                    "references": {
+                        "Status": {
+                            "location": "import",
+                            "path": "../interfaces",
+                            "id": "src/components/interfaces.ts::Status"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the status of the validation message."
+                },
+                "attribute": "status",
+                "reflect": true,
+                "defaultValue": "\"idle\""
+            },
+            "validationMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the validation message to display under the component."
+                },
+                "attribute": "validation-message",
+                "reflect": false
+            },
+            "validationIcon": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the validation icon to display under the component."
+                },
+                "attribute": "validation-icon",
+                "reflect": true
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button-group.js","sourceRoot":"","sources":["../../../../src/components/radio-button-group/radio-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { createObserver } from \"../../utils/observers\";\nimport { Layout, Scale } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n/**\n * @slot - A slot for adding `calcite-radio-button`s.\n */\n@Component({\n  tag: \"calcite-radio-button-group\",\n  styleUrl: \"radio-button-group.scss\",\n  shadow: true,\n})\nexport class RadioButtonGroup implements LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\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  onDisabledChange(): void {\n    this.passPropsToRadioButtons();\n  }\n\n  /** When `true`, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable. */\n  @Prop({ reflect: true }) hidden = false;\n\n  @Watch(\"hidden\")\n  onHiddenChange(): void {\n    this.passPropsToRadioButtons();\n  }\n\n  /** Defines the layout of the component. */\n  @Prop({ reflect: true }) layout: Layout = \"horizontal\";\n\n  @Watch(\"layout\")\n  onLayoutChange(): void {\n    this.passPropsToRadioButtons();\n  }\n\n  /** Specifies the name of the component on form submission. Must be unique to other component instances. */\n  @Prop({ reflect: true }) name!: string;\n\n  /** When `true`, the component must have a value in order for the form to submit. */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * Specifies the component's selected item.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItem: HTMLCalciteRadioButtonElement = null;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"scale\")\n  onScaleChange(): void {\n    this.passPropsToRadioButtons();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el!: HTMLCalciteRadioButtonGroupElement;\n\n  mutationObserver = createObserver(\"mutation\", () => this.passPropsToRadioButtons());\n\n  @State() radioButtons: HTMLCalciteRadioButtonElement[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.passPropsToRadioButtons();\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private passPropsToRadioButtons = (): void => {\n    this.radioButtons = Array.from(this.el.querySelectorAll(\"calcite-radio-button\"));\n    this.selectedItem =\n      Array.from(this.radioButtons).find((radioButton) => radioButton.checked) || null;\n    if (this.radioButtons.length > 0) {\n      this.radioButtons.forEach((radioButton) => {\n        radioButton.disabled = this.disabled || radioButton.disabled;\n        radioButton.hidden = this.hidden;\n        radioButton.name = this.name;\n        radioButton.required = this.required;\n        radioButton.scale = this.scale;\n      });\n    }\n  };\n\n  private getFocusableRadioButton(): HTMLCalciteRadioButtonElement | null {\n    return this.radioButtons.find((radiobutton) => !radiobutton.disabled) ?? null;\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the component has changed.\n   */\n  @Event({ cancelable: false }) calciteRadioButtonGroupChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Method\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the fist focusable `calcite-radio-button` element in the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    if (this.selectedItem && !this.selectedItem.disabled) {\n      return this.selectedItem.setFocus();\n    }\n    if (this.radioButtons.length > 0) {\n      return this.getFocusableRadioButton()?.setFocus();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteRadioButtonChange\")\n  radioButtonChangeHandler(event: CustomEvent): void {\n    this.selectedItem = event.target as HTMLCalciteRadioButtonElement;\n    this.calciteRadioButtonGroupChange.emit();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host role=\"radiogroup\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"radio-button-group.js","sourceRoot":"","sources":["../../../../src/components/radio-button-group/radio-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { createObserver } from \"../../utils/observers\";\nimport { Layout, Scale, Status } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Validation } from \"../functional/Validation\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding `calcite-radio-button`s.\n */\n@Component({\n  tag: \"calcite-radio-button-group\",\n  styleUrl: \"radio-button-group.scss\",\n  shadow: true,\n})\nexport class RadioButtonGroup implements LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\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  onDisabledChange(): void {\n    this.passPropsToRadioButtons();\n  }\n\n  /** When `true`, the component is not displayed and its `calcite-radio-button`s are not focusable or checkable. */\n  @Prop({ reflect: true }) hidden = false;\n\n  @Watch(\"hidden\")\n  onHiddenChange(): void {\n    this.passPropsToRadioButtons();\n  }\n\n  /** Defines the layout of the component. */\n  @Prop({ reflect: true }) layout: Layout = \"horizontal\";\n\n  @Watch(\"layout\")\n  onLayoutChange(): void {\n    this.passPropsToRadioButtons();\n  }\n\n  /** Specifies the name of the component on form submission. Must be unique to other component instances. */\n  @Prop({ reflect: true }) name!: string;\n\n  /** When `true`, the component must have a value in order for the form to submit. */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * Specifies the component's selected item.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItem: HTMLCalciteRadioButtonElement = null;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the status of the validation message. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /** Specifies the validation message to display under the component. */\n  @Prop() validationMessage: string;\n\n  /** Specifies the validation icon to display under the component. */\n  @Prop({ reflect: true }) validationIcon: string | boolean;\n\n  @Watch(\"scale\")\n  onScaleChange(): void {\n    this.passPropsToRadioButtons();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el!: HTMLCalciteRadioButtonGroupElement;\n\n  mutationObserver = createObserver(\"mutation\", () => this.passPropsToRadioButtons());\n\n  @State() radioButtons: HTMLCalciteRadioButtonElement[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.passPropsToRadioButtons();\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private passPropsToRadioButtons = (): void => {\n    this.radioButtons = Array.from(this.el.querySelectorAll(\"calcite-radio-button\"));\n    this.selectedItem =\n      Array.from(this.radioButtons).find((radioButton) => radioButton.checked) || null;\n    if (this.radioButtons.length > 0) {\n      this.radioButtons.forEach((radioButton) => {\n        radioButton.disabled = this.disabled || radioButton.disabled;\n        radioButton.hidden = this.hidden;\n        radioButton.name = this.name;\n        radioButton.required = this.required;\n        radioButton.scale = this.scale;\n      });\n    }\n  };\n\n  private getFocusableRadioButton(): HTMLCalciteRadioButtonElement | null {\n    return this.radioButtons.find((radiobutton) => !radiobutton.disabled) ?? null;\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the component has changed.\n   */\n  @Event({ cancelable: false }) calciteRadioButtonGroupChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Method\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the fist focusable `calcite-radio-button` element in the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    if (this.selectedItem && !this.selectedItem.disabled) {\n      return this.selectedItem.setFocus();\n    }\n    if (this.radioButtons.length > 0) {\n      return this.getFocusableRadioButton()?.setFocus();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteRadioButtonChange\")\n  radioButtonChangeHandler(event: CustomEvent): void {\n    this.selectedItem = event.target as HTMLCalciteRadioButtonElement;\n    this.calciteRadioButtonGroupChange.emit();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host role=\"radiogroup\">\n        <div class={CSS.itemWrapper}>\n          <slot />\n        </div>\n        {this.validationMessage ? (\n          <Validation\n            icon={this.validationIcon}\n            message={this.validationMessage}\n            scale={this.scale}\n            status={this.status}\n          />\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/radio-button-group/resources.js

@@ -0,0 +1,9 @@
+/*!
+ * 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.2.0-next.20
+ */
+export const CSS = {
+    itemWrapper: "item-wrapper",
+};
+//# sourceMappingURL=resources.js.map

package/dist/collection/components/radio-button-group/resources.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resources.js","sourceRoot":"","sources":["../../../../src/components/radio-button-group/resources.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,GAAG,GAAG;IACjB,WAAW,EAAE,cAAc;CAC5B,CAAC","sourcesContent":["export const CSS = {\n  itemWrapper: \"item-wrapper\",\n};\n"]}

package/dist/collection/components/rating/functional/star.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.2.0-next.19
+ * v2.2.0-next.20
  */
 import { h } from "@stencil/core";
 export const StarIcon = ({ full, scale, partial }) => (h("calcite-icon", { class: partial ? undefined : "icon",

package/dist/collection/components/rating/rating.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:26 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:47 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:26 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:47 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:26 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:47 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:26 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:47 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:24 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:45 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/rating/rating.e2e.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.2.0-next.19
+ * v2.2.0-next.20
  */
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, disabled, focusable, formAssociated, hidden, labelable, renders, t9n, } from "../../tests/commonTests";

package/dist/collection/components/rating/rating.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.2.0-next.19
+ * v2.2.0-next.20
  */
 import { h, Host, } from "@stencil/core";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";

package/dist/collection/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.2.0-next.19
+ * v2.2.0-next.20
  */
 export var KindIcons;
 (function (KindIcons) {

package/dist/collection/components/scrim/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.2.0-next.19
+ * v2.2.0-next.20
  */
 export const CSS = {
     scrim: "scrim",

package/dist/collection/components/scrim/scrim.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:26 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:47 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:26 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:47 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:26 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:47 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:26 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:47 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:24 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:45 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */

package/dist/collection/components/scrim/scrim.e2e.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.2.0-next.19
+ * v2.2.0-next.20
  */
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, hidden, renders, t9n } from "../../tests/commonTests";

package/dist/collection/components/scrim/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.2.0-next.19
+ * v2.2.0-next.20
  */
 import { h } from "@stencil/core";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";

package/dist/collection/components/segmented-control/resources.js

@@ -0,0 +1,9 @@
+/*!
+ * 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.2.0-next.20
+ */
+export const CSS = {
+    itemWrapper: "item-wrapper",
+};
+//# sourceMappingURL=resources.js.map

package/dist/collection/components/segmented-control/resources.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resources.js","sourceRoot":"","sources":["../../../../src/components/segmented-control/resources.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,GAAG,GAAG;IACjB,WAAW,EAAE,cAAc;CAC5B,CAAC","sourcesContent":["export const CSS = {\n  itemWrapper: \"item-wrapper\",\n};\n"]}

package/dist/collection/components/segmented-control/segmented-control.css

@@ -1,22 +1,22 @@
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:26 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:47 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:26 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:47 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:26 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:47 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:26 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:47 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jan 2024 17:22:24 GMT
+ * Generated on Tue, 16 Jan 2024 20:50:45 GMT
  */
 /* mixins & extensions */
 /* helper to properly scale internal durations */
@@ -36,6 +36,11 @@
 }
 
 :host {
+  display: flex;
+  flex-direction: column;
+}
+
+.item-wrapper {
   display: flex;
   background-color: var(--calcite-color-foreground-1);
   inline-size: -moz-fit-content;
@@ -44,7 +49,7 @@
   outline-offset: -1px;
 }
 
-:host([appearance=outline]) {
+:host([appearance=outline]) > .item-wrapper {
   background-color: transparent;
 }
 
@@ -58,25 +63,41 @@
   display: contents;
 }
 
-:host([layout=vertical]) {
+:host([layout=vertical]) > .item-wrapper {
   flex-direction: column;
   align-items: flex-start;
   align-self: flex-start;
 }
 
-:host([width=full]) {
+:host([width=full]) > .item-wrapper {
   inline-size: 100%;
   min-inline-size: -moz-fit-content;
   min-inline-size: fit-content;
 }
-:host([width=full]) ::slotted(calcite-segmented-control-item) {
+:host([width=full]) > .item-wrapper ::slotted(calcite-segmented-control-item) {
   flex: 1 1 auto;
 }
 
-:host([width=full][layout=vertical]) ::slotted(calcite-segmented-control-item) {
+:host([width=full][layout=vertical]) > .item-wrapper ::slotted(calcite-segmented-control-item) {
   justify-content: flex-start;
 }
 
+.validation-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+
+:host([scale=m]) .validation-container,
+:host([scale=l]) .validation-container {
+  padding-block-start: 0.5rem;
+}
+
+:host([scale=s]) .validation-container {
+  padding-block-start: 0.25rem;
+}
+
 ::slotted(input[slot=hidden-form-input]) {
   margin: 0 !important;
   opacity: 0 !important;

package/dist/collection/components/segmented-control/segmented-control.e2e.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.2.0-next.19
+ * v2.2.0-next.20
  */
 import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
@@ -25,6 +25,18 @@ describe("calcite-segmented-control", () => {
                 propertyName: "width",
                 defaultValue: "auto",
             },
+            {
+                propertyName: "status",
+                defaultValue: "idle",
+            },
+            {
+                propertyName: "validationIcon",
+                defaultValue: undefined,
+            },
+            {
+                propertyName: "validationMessage",
+                defaultValue: undefined,
+            },
         ]);
     });
     describe("reflects", () => {
@@ -45,6 +57,14 @@ describe("calcite-segmented-control", () => {
                 propertyName: "width",
                 value: "auto",
             },
+            {
+                propertyName: "status",
+                value: "invalid",
+            },
+            {
+                propertyName: "validationIcon",
+                value: true,
+            },
         ]);
     });
     describe("renders", () => {

package/dist/collection/components/segmented-control/segmented-control.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.e2e.js","sourceRoot":"","sources":["../../../../src/components/segmented-control/segmented-control.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EPage, newE2EPage } from \"@stencil/core/testing\";\nimport { html } from \"../../../support/formatting\";\nimport {\n  defaults,\n  disabled,\n  focusable,\n  formAssociated,\n  hidden,\n  labelable,\n  reflects,\n  renders,\n} from \"../../tests/commonTests\";\n\ndescribe(\"calcite-segmented-control\", () => {\n  describe(\"defaults\", () => {\n    defaults(\"calcite-segmented-control\", [\n      {\n        propertyName: \"appearance\",\n        defaultValue: \"solid\",\n      },\n      {\n        propertyName: \"layout\",\n        defaultValue: \"horizontal\",\n      },\n      {\n        propertyName: \"scale\",\n        defaultValue: \"m\",\n      },\n\n      {\n        propertyName: \"width\",\n        defaultValue: \"auto\",\n      },\n    ]);\n  });\n\n  describe(\"reflects\", () => {\n    reflects(\"calcite-segmented-control\", [\n      {\n        propertyName: \"scale\",\n        value: \"m\",\n      },\n      {\n        propertyName: \"layout\",\n        value: \"horizontal\",\n      },\n      {\n        propertyName: \"appearance\",\n        value: \"solid\",\n      },\n      {\n        propertyName: \"width\",\n        value: \"auto\",\n      },\n    ]);\n  });\n\n  describe(\"renders\", () => {\n    renders(\"calcite-segmented-control\", { display: \"flex\" });\n  });\n\n  describe(\"honors hidden attribute\", () => {\n    hidden(\"calcite-segmented-control\");\n  });\n\n  describe(\"labelable\", () => {\n    labelable(\n      html`<calcite-segmented-control>\n        <calcite-segmented-control-item value=\"1\"></calcite-segmented-control-item>\n        <calcite-segmented-control-item value=\"2\"></calcite-segmented-control-item>\n        <calcite-segmented-control-item value=\"3\"></calcite-segmented-control-item>\n      </calcite-segmented-control>`,\n      { focusTargetSelector: \"calcite-segmented-control-item\" },\n    );\n  });\n\n  describe(\"disabled\", () => {\n    disabled(\n      html`<calcite-segmented-control>\n        <calcite-segmented-control-item value=\"1\"></calcite-segmented-control-item>\n        <calcite-segmented-control-item value=\"2\"></calcite-segmented-control-item>\n        <calcite-segmented-control-item value=\"3\"></calcite-segmented-control-item>\n      </calcite-segmented-control>`,\n      { focusTarget: \"child\" },\n    );\n  });\n\n  it(\"sets value from selected item\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(html`\n      <calcite-segmented-control>\n        <calcite-segmented-control-item id=\"child-1\" value=\"1\" checked>one</calcite-segmented-control-item>\n        <calcite-segmented-control-item id=\"child-2\" value=\"2\">two</calcite-segmented-control-item>\n        <calcite-segmented-control-item id=\"child-3\" value=\"3\">three</calcite-segmented-control-item>\n      </calcite-segmented-control>\n    `);\n\n    const element = await page.find(\"calcite-segmented-control\");\n    const value = await element.getProperty(\"value\");\n\n    expect(value).toBe(\"1\");\n  });\n\n  it(\"does not require an item to be checked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<calcite-segmented-control>\n          <calcite-segmented-control-item value=\"1\"></calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"2\"></calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"3\"></calcite-segmented-control-item>\n        </calcite-segmented-control>`,\n    );\n    const element = await page.find(\"calcite-segmented-control\");\n\n    const selected = await element.getProperty(\"selectedItem\");\n    expect(selected).not.toBeDefined();\n  });\n\n  it(\"when multiple items are checked, last one wins\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<calcite-segmented-control>\n          <calcite-segmented-control-item value=\"1\" checked>one</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"2\" checked>two</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"3\" checked>three</calcite-segmented-control-item>\n        </calcite-segmented-control>`,\n    );\n    const element = await page.find(\"calcite-segmented-control\");\n\n    const selected = await element.getProperty(\"selectedItem\");\n    expect(selected).toBeDefined();\n\n    const selectedItems = await element.findAll(\"calcite-segmented-control-item[checked]\");\n    expect(selectedItems).toHaveLength(1);\n\n    const selectedValue = await selectedItems[0].getProperty(\"value\");\n    expect(selectedValue).toBe(\"3\");\n  });\n\n  it(\"allows items to be selected\", async () => {\n    async function getSelectedItemValue(page: E2EPage): Promise<string> {\n      return page.$eval(\n        \"calcite-segmented-control\",\n        (segmentedControl: HTMLCalciteSegmentedControlElement) => segmentedControl.selectedItem.value,\n      );\n    }\n\n    const page = await newE2EPage();\n    await page.setContent(\n      `<calcite-segmented-control>\n          <calcite-segmented-control-item value=\"1\">one</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"2\">two</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"3\">three</calcite-segmented-control-item>\n        </calcite-segmented-control>`,\n    );\n    const element = await page.find(\"calcite-segmented-control\");\n    const eventSpy = await element.spyOnEvent(\"calciteSegmentedControlChange\");\n    expect(eventSpy).not.toHaveReceivedEvent();\n    const [first, second, third] = await page.findAll(\"calcite-segmented-control-item\");\n\n    await first.click();\n    expect(eventSpy).toHaveReceivedEventTimes(1);\n    expect(await getSelectedItemValue(page)).toBe(\"1\");\n\n    // does not emit from programmatic changes\n    third.setProperty(\"checked\", true);\n    await page.waitForChanges();\n    expect(eventSpy).toHaveReceivedEventTimes(1);\n    expect(await getSelectedItemValue(page)).toBe(\"3\");\n\n    await second.click();\n    expect(eventSpy).toHaveReceivedEventTimes(2);\n    expect(await getSelectedItemValue(page)).toBe(\"2\");\n  });\n\n  it(\"does not emit extraneous events (edge case from #3210)\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<calcite-segmented-control>\n          <calcite-segmented-control-item value=\"1\">one</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"2\">two</calcite-segmented-control-item>\n        </calcite-segmented-control>`,\n    );\n\n    const timesCalled = await page.evaluate(async () => {\n      let calls = 0;\n\n      const segmentedControl = document.querySelector(\"calcite-segmented-control\");\n\n      const waitForFrame = async () => await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));\n\n      document.addEventListener(\"calciteSegmentedControlChange\", () => calls++);\n\n      let [first, second] = Array.from(document.querySelectorAll(\"calcite-segmented-control-item\"));\n\n      first.checked = true;\n      await waitForFrame();\n\n      second.click();\n      await waitForFrame();\n\n      segmentedControl.remove();\n      await waitForFrame();\n\n      document.body.innerHTML = `\n      <calcite-segmented-control>\n          <calcite-segmented-control-item value=\"1\">one</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"2\">two</calcite-segmented-control-item>\n        </calcite-segmented-control>\n      `;\n\n      [first, second] = Array.from(document.querySelectorAll(\"calcite-segmented-control-item\"));\n\n      second.checked = true;\n      await waitForFrame();\n\n      first.click();\n      await waitForFrame();\n\n      return calls;\n    });\n\n    expect(timesCalled).toBe(2);\n  });\n\n  describe(\"keyboard navigation\", () => {\n    async function assertArrowSelection(page: E2EPage): Promise<void> {\n      const element = await page.find(\"calcite-segmented-control\");\n      const spy = await element.spyOnEvent(\"calciteSegmentedControlChange\");\n\n      await tabIntoFirstElement();\n      await cycleThroughItemsAndAssertValue(\"left-right\");\n      expect(spy).toHaveReceivedEventTimes(6);\n\n      await tabIntoFirstElement();\n      await cycleThroughItemsAndAssertValue(\"up-down\");\n      expect(spy).toHaveReceivedEventTimes(12);\n\n      async function tabIntoFirstElement(): Promise<void> {\n        const firstElement = await element.find(\"calcite-segmented-control-item[checked]\");\n        await firstElement.click();\n\n        await page.keyboard.down(\"Shift\");\n        await page.keyboard.press(\"Tab\");\n        await page.keyboard.up(\"Shift\");\n\n        await page.keyboard.press(\"Tab\");\n      }\n\n      async function cycleThroughItemsAndAssertValue(keys: \"left-right\" | \"up-down\"): Promise<void> {\n        const [moveBeforeArrowKey, moveAfterArrowKey] =\n          keys === \"left-right\" ? [\"ArrowLeft\", \"ArrowRight\"] : [\"ArrowUp\", \"ArrowDown\"];\n\n        await element.press(moveAfterArrowKey);\n        await page.waitForChanges();\n\n        let selected = await element.find(\"calcite-segmented-control-item[checked]\");\n        let value = await selected.getProperty(\"value\");\n        expect(value).toBe(\"2\");\n\n        await element.press(moveAfterArrowKey);\n        selected = await element.find(\"calcite-segmented-control-item[checked]\");\n        value = await selected.getProperty(\"value\");\n        expect(value).toBe(\"3\");\n\n        await element.press(moveAfterArrowKey);\n        selected = await element.find(\"calcite-segmented-control-item[checked]\");\n        value = await selected.getProperty(\"value\");\n        expect(value).toBe(\"1\");\n\n        await element.press(moveBeforeArrowKey);\n        selected = await element.find(\"calcite-segmented-control-item[checked]\");\n        value = await selected.getProperty(\"value\");\n        expect(value).toBe(\"3\");\n\n        await element.press(moveBeforeArrowKey);\n        selected = await element.find(\"calcite-segmented-control-item[checked]\");\n        value = await selected.getProperty(\"value\");\n        expect(value).toBe(\"2\");\n\n        await element.press(moveBeforeArrowKey);\n        selected = await element.find(\"calcite-segmented-control-item[checked]\");\n        value = await selected.getProperty(\"value\");\n        expect(value).toBe(\"1\");\n      }\n    }\n\n    it(\"selects item with left-right/up-down arrow keys\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(\n        html`<calcite-segmented-control>\n          <calcite-segmented-control-item value=\"1\" checked>one</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"2\">two</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"3\">three</calcite-segmented-control-item>\n        </calcite-segmented-control>`,\n      );\n\n      await assertArrowSelection(page);\n    });\n\n    it(\"selects item with left-right/up-down arrow keys after adding items programmatically\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(html`<calcite-segmented-control></calcite-segmented-control>`);\n\n      await page.$eval(\"calcite-segmented-control\", (segmentedControl: HTMLCalciteSegmentedControlElement) => {\n        segmentedControl.innerHTML = `\n        <calcite-segmented-control-item value=\"1\" checked>one</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"2\">two</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"3\">three</calcite-segmented-control-item>`;\n      });\n\n      await assertArrowSelection(page);\n    });\n  });\n\n  describe(\"WAI-ARIA Roles, States, and Properties\", () => {\n    it(`has a role of 'radiogroup'`, async () => {\n      const page = await newE2EPage();\n      await page.setContent(\"<calcite-segmented-control></calcite-segmented-control>\");\n      const element = await page.find(\"calcite-segmented-control\");\n\n      const role = element.getAttribute(\"role\");\n      expect(role).toEqualText(\"radiogroup\");\n    });\n  });\n\n  it(\"renders requested props\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      \"<calcite-segmented-control scale='l' layout='vertical' appearance='outline' width='full'></calcite-segmented-control>\",\n    );\n    const element = await page.find(\"calcite-segmented-control\");\n    expect(element).toEqualAttribute(\"scale\", \"l\");\n    expect(element).toEqualAttribute(\"layout\", \"vertical\");\n    expect(element).toEqualAttribute(\"appearance\", \"outline\");\n    expect(element).toEqualAttribute(\"width\", \"full\");\n  });\n\n  it(\"inheritable props: `appearance`, `layout`, and `scale` modified on the parent get passed to items\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(html`\n      <calcite-segmented-control appearance=\"outline\" layout=\"vertical\" scale=\"l\"></calcite-segmented-control>\n    `);\n    const segmentedControlItems = await page.findAll(\"calcite-segmented-control-item\");\n\n    for (const item of segmentedControlItems) {\n      expect(await item.getProperty(\"appearance\")).toBe(\"outline\");\n      expect(await item.getProperty(\"layout\")).toBe(\"vertical\");\n      expect(await item.getProperty(\"scale\")).toBe(\"l\");\n    }\n  });\n\n  describe(\"setFocus()\", () => {\n    describe(\"focuses the first item if there is no selection\", () => {\n      focusable(\n        html`\n          <calcite-segmented-control>\n            <calcite-segmented-control-item id=\"child-1\" value=\"1\">one</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-2\" value=\"2\">two</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-3\" value=\"3\">three</calcite-segmented-control-item>\n          </calcite-segmented-control>\n        `,\n        {\n          focusTargetSelector: \"#child-1\",\n        },\n      );\n    });\n\n    describe(\"focuses the selected item\", () => {\n      focusable(\n        html`\n          <calcite-segmented-control>\n            <calcite-segmented-control-item id=\"child-1\" value=\"1\">one</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-2\" value=\"2\">two</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-3\" value=\"3\" checked>three</calcite-segmented-control-item>\n          </calcite-segmented-control>\n        `,\n        {\n          focusTargetSelector: \"#child-3\",\n        },\n      );\n    });\n  });\n\n  describe(\"is form-associated\", () => {\n    const formAssociatedOptions = { testValue: \"2\" };\n\n    describe(\"unselected value\", () => {\n      formAssociated(\n        html`\n          <calcite-segmented-control>\n            <calcite-segmented-control-item id=\"child-1\" value=\"1\">one</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-2\" value=\"2\">two</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-3\" value=\"3\">three</calcite-segmented-control-item>\n          </calcite-segmented-control>\n        `,\n        formAssociatedOptions,\n      );\n    });\n\n    describe(\"selected-value\", () => {\n      formAssociated(\n        html`\n          <calcite-segmented-control>\n            <calcite-segmented-control-item id=\"child-1\" value=\"1\">one</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-2\" value=\"2\" checked>two</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-3\" value=\"3\">three</calcite-segmented-control-item>\n          </calcite-segmented-control>\n        `,\n        formAssociatedOptions,\n      );\n    });\n  });\n\n  describe(\"updates items when children are modified after initialization\", () => {\n    // TODO:\n  });\n});\n"]}
+{"version":3,"file":"segmented-control.e2e.js","sourceRoot":"","sources":["../../../../src/components/segmented-control/segmented-control.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EPage, newE2EPage } from \"@stencil/core/testing\";\nimport { html } from \"../../../support/formatting\";\nimport {\n  defaults,\n  disabled,\n  focusable,\n  formAssociated,\n  hidden,\n  labelable,\n  reflects,\n  renders,\n} from \"../../tests/commonTests\";\n\ndescribe(\"calcite-segmented-control\", () => {\n  describe(\"defaults\", () => {\n    defaults(\"calcite-segmented-control\", [\n      {\n        propertyName: \"appearance\",\n        defaultValue: \"solid\",\n      },\n      {\n        propertyName: \"layout\",\n        defaultValue: \"horizontal\",\n      },\n      {\n        propertyName: \"scale\",\n        defaultValue: \"m\",\n      },\n\n      {\n        propertyName: \"width\",\n        defaultValue: \"auto\",\n      },\n      {\n        propertyName: \"status\",\n        defaultValue: \"idle\",\n      },\n      {\n        propertyName: \"validationIcon\",\n        defaultValue: undefined,\n      },\n      {\n        propertyName: \"validationMessage\",\n        defaultValue: undefined,\n      },\n    ]);\n  });\n\n  describe(\"reflects\", () => {\n    reflects(\"calcite-segmented-control\", [\n      {\n        propertyName: \"scale\",\n        value: \"m\",\n      },\n      {\n        propertyName: \"layout\",\n        value: \"horizontal\",\n      },\n      {\n        propertyName: \"appearance\",\n        value: \"solid\",\n      },\n      {\n        propertyName: \"width\",\n        value: \"auto\",\n      },\n      {\n        propertyName: \"status\",\n        value: \"invalid\",\n      },\n      {\n        propertyName: \"validationIcon\",\n        value: true,\n      },\n    ]);\n  });\n\n  describe(\"renders\", () => {\n    renders(\"calcite-segmented-control\", { display: \"flex\" });\n  });\n\n  describe(\"honors hidden attribute\", () => {\n    hidden(\"calcite-segmented-control\");\n  });\n\n  describe(\"labelable\", () => {\n    labelable(\n      html`<calcite-segmented-control>\n        <calcite-segmented-control-item value=\"1\"></calcite-segmented-control-item>\n        <calcite-segmented-control-item value=\"2\"></calcite-segmented-control-item>\n        <calcite-segmented-control-item value=\"3\"></calcite-segmented-control-item>\n      </calcite-segmented-control>`,\n      { focusTargetSelector: \"calcite-segmented-control-item\" },\n    );\n  });\n\n  describe(\"disabled\", () => {\n    disabled(\n      html`<calcite-segmented-control>\n        <calcite-segmented-control-item value=\"1\"></calcite-segmented-control-item>\n        <calcite-segmented-control-item value=\"2\"></calcite-segmented-control-item>\n        <calcite-segmented-control-item value=\"3\"></calcite-segmented-control-item>\n      </calcite-segmented-control>`,\n      { focusTarget: \"child\" },\n    );\n  });\n\n  it(\"sets value from selected item\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(html`\n      <calcite-segmented-control>\n        <calcite-segmented-control-item id=\"child-1\" value=\"1\" checked>one</calcite-segmented-control-item>\n        <calcite-segmented-control-item id=\"child-2\" value=\"2\">two</calcite-segmented-control-item>\n        <calcite-segmented-control-item id=\"child-3\" value=\"3\">three</calcite-segmented-control-item>\n      </calcite-segmented-control>\n    `);\n\n    const element = await page.find(\"calcite-segmented-control\");\n    const value = await element.getProperty(\"value\");\n\n    expect(value).toBe(\"1\");\n  });\n\n  it(\"does not require an item to be checked\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<calcite-segmented-control>\n          <calcite-segmented-control-item value=\"1\"></calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"2\"></calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"3\"></calcite-segmented-control-item>\n        </calcite-segmented-control>`,\n    );\n    const element = await page.find(\"calcite-segmented-control\");\n\n    const selected = await element.getProperty(\"selectedItem\");\n    expect(selected).not.toBeDefined();\n  });\n\n  it(\"when multiple items are checked, last one wins\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<calcite-segmented-control>\n          <calcite-segmented-control-item value=\"1\" checked>one</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"2\" checked>two</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"3\" checked>three</calcite-segmented-control-item>\n        </calcite-segmented-control>`,\n    );\n    const element = await page.find(\"calcite-segmented-control\");\n\n    const selected = await element.getProperty(\"selectedItem\");\n    expect(selected).toBeDefined();\n\n    const selectedItems = await element.findAll(\"calcite-segmented-control-item[checked]\");\n    expect(selectedItems).toHaveLength(1);\n\n    const selectedValue = await selectedItems[0].getProperty(\"value\");\n    expect(selectedValue).toBe(\"3\");\n  });\n\n  it(\"allows items to be selected\", async () => {\n    async function getSelectedItemValue(page: E2EPage): Promise<string> {\n      return page.$eval(\n        \"calcite-segmented-control\",\n        (segmentedControl: HTMLCalciteSegmentedControlElement) => segmentedControl.selectedItem.value,\n      );\n    }\n\n    const page = await newE2EPage();\n    await page.setContent(\n      `<calcite-segmented-control>\n          <calcite-segmented-control-item value=\"1\">one</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"2\">two</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"3\">three</calcite-segmented-control-item>\n        </calcite-segmented-control>`,\n    );\n    const element = await page.find(\"calcite-segmented-control\");\n    const eventSpy = await element.spyOnEvent(\"calciteSegmentedControlChange\");\n    expect(eventSpy).not.toHaveReceivedEvent();\n    const [first, second, third] = await page.findAll(\"calcite-segmented-control-item\");\n\n    await first.click();\n    expect(eventSpy).toHaveReceivedEventTimes(1);\n    expect(await getSelectedItemValue(page)).toBe(\"1\");\n\n    // does not emit from programmatic changes\n    third.setProperty(\"checked\", true);\n    await page.waitForChanges();\n    expect(eventSpy).toHaveReceivedEventTimes(1);\n    expect(await getSelectedItemValue(page)).toBe(\"3\");\n\n    await second.click();\n    expect(eventSpy).toHaveReceivedEventTimes(2);\n    expect(await getSelectedItemValue(page)).toBe(\"2\");\n  });\n\n  it(\"does not emit extraneous events (edge case from #3210)\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      `<calcite-segmented-control>\n          <calcite-segmented-control-item value=\"1\">one</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"2\">two</calcite-segmented-control-item>\n        </calcite-segmented-control>`,\n    );\n\n    const timesCalled = await page.evaluate(async () => {\n      let calls = 0;\n\n      const segmentedControl = document.querySelector(\"calcite-segmented-control\");\n\n      const waitForFrame = async () => await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));\n\n      document.addEventListener(\"calciteSegmentedControlChange\", () => calls++);\n\n      let [first, second] = Array.from(document.querySelectorAll(\"calcite-segmented-control-item\"));\n\n      first.checked = true;\n      await waitForFrame();\n\n      second.click();\n      await waitForFrame();\n\n      segmentedControl.remove();\n      await waitForFrame();\n\n      document.body.innerHTML = `\n      <calcite-segmented-control>\n          <calcite-segmented-control-item value=\"1\">one</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"2\">two</calcite-segmented-control-item>\n        </calcite-segmented-control>\n      `;\n\n      [first, second] = Array.from(document.querySelectorAll(\"calcite-segmented-control-item\"));\n\n      second.checked = true;\n      await waitForFrame();\n\n      first.click();\n      await waitForFrame();\n\n      return calls;\n    });\n\n    expect(timesCalled).toBe(2);\n  });\n\n  describe(\"keyboard navigation\", () => {\n    async function assertArrowSelection(page: E2EPage): Promise<void> {\n      const element = await page.find(\"calcite-segmented-control\");\n      const spy = await element.spyOnEvent(\"calciteSegmentedControlChange\");\n\n      await tabIntoFirstElement();\n      await cycleThroughItemsAndAssertValue(\"left-right\");\n      expect(spy).toHaveReceivedEventTimes(6);\n\n      await tabIntoFirstElement();\n      await cycleThroughItemsAndAssertValue(\"up-down\");\n      expect(spy).toHaveReceivedEventTimes(12);\n\n      async function tabIntoFirstElement(): Promise<void> {\n        const firstElement = await element.find(\"calcite-segmented-control-item[checked]\");\n        await firstElement.click();\n\n        await page.keyboard.down(\"Shift\");\n        await page.keyboard.press(\"Tab\");\n        await page.keyboard.up(\"Shift\");\n\n        await page.keyboard.press(\"Tab\");\n      }\n\n      async function cycleThroughItemsAndAssertValue(keys: \"left-right\" | \"up-down\"): Promise<void> {\n        const [moveBeforeArrowKey, moveAfterArrowKey] =\n          keys === \"left-right\" ? [\"ArrowLeft\", \"ArrowRight\"] : [\"ArrowUp\", \"ArrowDown\"];\n\n        await element.press(moveAfterArrowKey);\n        await page.waitForChanges();\n\n        let selected = await element.find(\"calcite-segmented-control-item[checked]\");\n        let value = await selected.getProperty(\"value\");\n        expect(value).toBe(\"2\");\n\n        await element.press(moveAfterArrowKey);\n        selected = await element.find(\"calcite-segmented-control-item[checked]\");\n        value = await selected.getProperty(\"value\");\n        expect(value).toBe(\"3\");\n\n        await element.press(moveAfterArrowKey);\n        selected = await element.find(\"calcite-segmented-control-item[checked]\");\n        value = await selected.getProperty(\"value\");\n        expect(value).toBe(\"1\");\n\n        await element.press(moveBeforeArrowKey);\n        selected = await element.find(\"calcite-segmented-control-item[checked]\");\n        value = await selected.getProperty(\"value\");\n        expect(value).toBe(\"3\");\n\n        await element.press(moveBeforeArrowKey);\n        selected = await element.find(\"calcite-segmented-control-item[checked]\");\n        value = await selected.getProperty(\"value\");\n        expect(value).toBe(\"2\");\n\n        await element.press(moveBeforeArrowKey);\n        selected = await element.find(\"calcite-segmented-control-item[checked]\");\n        value = await selected.getProperty(\"value\");\n        expect(value).toBe(\"1\");\n      }\n    }\n\n    it(\"selects item with left-right/up-down arrow keys\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(\n        html`<calcite-segmented-control>\n          <calcite-segmented-control-item value=\"1\" checked>one</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"2\">two</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"3\">three</calcite-segmented-control-item>\n        </calcite-segmented-control>`,\n      );\n\n      await assertArrowSelection(page);\n    });\n\n    it(\"selects item with left-right/up-down arrow keys after adding items programmatically\", async () => {\n      const page = await newE2EPage();\n      await page.setContent(html`<calcite-segmented-control></calcite-segmented-control>`);\n\n      await page.$eval(\"calcite-segmented-control\", (segmentedControl: HTMLCalciteSegmentedControlElement) => {\n        segmentedControl.innerHTML = `\n        <calcite-segmented-control-item value=\"1\" checked>one</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"2\">two</calcite-segmented-control-item>\n          <calcite-segmented-control-item value=\"3\">three</calcite-segmented-control-item>`;\n      });\n\n      await assertArrowSelection(page);\n    });\n  });\n\n  describe(\"WAI-ARIA Roles, States, and Properties\", () => {\n    it(`has a role of 'radiogroup'`, async () => {\n      const page = await newE2EPage();\n      await page.setContent(\"<calcite-segmented-control></calcite-segmented-control>\");\n      const element = await page.find(\"calcite-segmented-control\");\n\n      const role = element.getAttribute(\"role\");\n      expect(role).toEqualText(\"radiogroup\");\n    });\n  });\n\n  it(\"renders requested props\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\n      \"<calcite-segmented-control scale='l' layout='vertical' appearance='outline' width='full'></calcite-segmented-control>\",\n    );\n    const element = await page.find(\"calcite-segmented-control\");\n    expect(element).toEqualAttribute(\"scale\", \"l\");\n    expect(element).toEqualAttribute(\"layout\", \"vertical\");\n    expect(element).toEqualAttribute(\"appearance\", \"outline\");\n    expect(element).toEqualAttribute(\"width\", \"full\");\n  });\n\n  it(\"inheritable props: `appearance`, `layout`, and `scale` modified on the parent get passed to items\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(html`\n      <calcite-segmented-control appearance=\"outline\" layout=\"vertical\" scale=\"l\"></calcite-segmented-control>\n    `);\n    const segmentedControlItems = await page.findAll(\"calcite-segmented-control-item\");\n\n    for (const item of segmentedControlItems) {\n      expect(await item.getProperty(\"appearance\")).toBe(\"outline\");\n      expect(await item.getProperty(\"layout\")).toBe(\"vertical\");\n      expect(await item.getProperty(\"scale\")).toBe(\"l\");\n    }\n  });\n\n  describe(\"setFocus()\", () => {\n    describe(\"focuses the first item if there is no selection\", () => {\n      focusable(\n        html`\n          <calcite-segmented-control>\n            <calcite-segmented-control-item id=\"child-1\" value=\"1\">one</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-2\" value=\"2\">two</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-3\" value=\"3\">three</calcite-segmented-control-item>\n          </calcite-segmented-control>\n        `,\n        {\n          focusTargetSelector: \"#child-1\",\n        },\n      );\n    });\n\n    describe(\"focuses the selected item\", () => {\n      focusable(\n        html`\n          <calcite-segmented-control>\n            <calcite-segmented-control-item id=\"child-1\" value=\"1\">one</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-2\" value=\"2\">two</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-3\" value=\"3\" checked>three</calcite-segmented-control-item>\n          </calcite-segmented-control>\n        `,\n        {\n          focusTargetSelector: \"#child-3\",\n        },\n      );\n    });\n  });\n\n  describe(\"is form-associated\", () => {\n    const formAssociatedOptions = { testValue: \"2\" };\n\n    describe(\"unselected value\", () => {\n      formAssociated(\n        html`\n          <calcite-segmented-control>\n            <calcite-segmented-control-item id=\"child-1\" value=\"1\">one</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-2\" value=\"2\">two</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-3\" value=\"3\">three</calcite-segmented-control-item>\n          </calcite-segmented-control>\n        `,\n        formAssociatedOptions,\n      );\n    });\n\n    describe(\"selected-value\", () => {\n      formAssociated(\n        html`\n          <calcite-segmented-control>\n            <calcite-segmented-control-item id=\"child-1\" value=\"1\">one</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-2\" value=\"2\" checked>two</calcite-segmented-control-item>\n            <calcite-segmented-control-item id=\"child-3\" value=\"3\">three</calcite-segmented-control-item>\n          </calcite-segmented-control>\n        `,\n        formAssociatedOptions,\n      );\n    });\n  });\n\n  describe(\"updates items when children are modified after initialization\", () => {\n    // TODO:\n  });\n});\n"]}