fix(segmented-control): Make check state update correctly (#9733)

**Related Issue:** #6860 

## Summary
Made the checked state of segmented control update when the clearing value is undefined.

packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts

@@ -157,14 +157,14 @@ describe("calcite-segmented-control", () => {
     expect(selectedValue).toBe("3");
   });
 
-  it("allows items to be selected", async () => {
-    async function getSelectedItemValue(page: E2EPage): Promise<string> {
-      return page.$eval(
-        "calcite-segmented-control",
-        (segmentedControl: HTMLCalciteSegmentedControlElement) => segmentedControl.selectedItem.value,
-      );
-    }
+  async function getSelectedItemValue(page: E2EPage): Promise<string> {
+    return page.$eval(
+      "calcite-segmented-control",
+      (segmentedControl: HTMLCalciteSegmentedControlElement) => segmentedControl.selectedItem.value,
+    );
+  }
 
+  it("allows items to be selected", async () => {
     const page = await newE2EPage();
     await page.setContent(
       `<calcite-segmented-control>
@@ -193,6 +193,29 @@ describe("calcite-segmented-control", () => {
     expect(await getSelectedItemValue(page)).toBe("2");
   });
 
+  it("updates selection when cleared with undefined", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<calcite-segmented-control>
+            <calcite-segmented-control-item value="1" checked>one</calcite-segmented-control-item>
+            <calcite-segmented-control-item value="2">two</calcite-segmented-control-item>
+          </calcite-segmented-control>`,
+    );
+    await page.waitForChanges();
+    expect(await getSelectedItemValue(page)).toBe("1");
+
+    const [first, second] = await page.findAll("calcite-segmented-control-item");
+    first.setProperty("checked", undefined);
+    second.setProperty("checked", true);
+    await page.waitForChanges();
+    expect(await getSelectedItemValue(page)).toBe("2");
+
+    first.setProperty("checked", true);
+    second.setProperty("checked", undefined);
+    await page.waitForChanges();
+    expect(await getSelectedItemValue(page)).toBe("1");
+  });
+
   it("does not emit extraneous events (edge case from #3210)", async () => {
     const page = await newE2EPage();
     await page.setContent(

packages/calcite-components/src/components/segmented-control/segmented-control.tsx

@@ -239,7 +239,10 @@ export class SegmentedControl
   @Listen("calciteInternalSegmentedControlItemChange")
   protected handleSelected(event: Event): void {
     event.preventDefault();
-    this.selectItem(event.target as HTMLCalciteSegmentedControlItemElement);
+    const el = event.target as HTMLCalciteSegmentedControlItemElement;
+    if (el.checked) {
+      this.selectItem(el);
+    }
     event.stopPropagation();
   }