diff --git a/.github/ISSUE_TEMPLATE/accessibility.yml b/.github/ISSUE_TEMPLATE/accessibility.yml
index b61e1b801e2..df412feb731 100644
--- a/.github/ISSUE_TEMPLATE/accessibility.yml
+++ b/.github/ISSUE_TEMPLATE/accessibility.yml
@@ -124,6 +124,7 @@ body:
         - ArcGIS Business/Community Analyst
         - ArcGIS Charts
         - ArcGIS Dashboards
+        - ArcGIS Data Pipelines
         - ArcGIS Developer Experience
         - ArcGIS Enterprise
         - ArcGIS Excalibur
diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml
index 6e54505bcba..8b586de9285 100644
--- a/.github/ISSUE_TEMPLATE/bug.yml
+++ b/.github/ISSUE_TEMPLATE/bug.yml
@@ -118,6 +118,7 @@ body:
         - ArcGIS Business/Community Analyst
         - ArcGIS Charts
         - ArcGIS Dashboards
+        - ArcGIS Data Pipelines
         - ArcGIS Developer Experience
         - ArcGIS Enterprise
         - ArcGIS Excalibur
diff --git a/.github/ISSUE_TEMPLATE/enhancement.yml b/.github/ISSUE_TEMPLATE/enhancement.yml
index dadcc31880a..6c3b0d080ea 100644
--- a/.github/ISSUE_TEMPLATE/enhancement.yml
+++ b/.github/ISSUE_TEMPLATE/enhancement.yml
@@ -87,6 +87,7 @@ body:
         - ArcGIS Business/Community Analyst
         - ArcGIS Charts
         - ArcGIS Dashboards
+        - ArcGIS Data Pipelines
         - ArcGIS Developer Experience
         - ArcGIS Enterprise
         - ArcGIS Excalibur
diff --git a/.github/ISSUE_TEMPLATE/new-component.yml b/.github/ISSUE_TEMPLATE/new-component.yml
index d2b985eb1a1..87deb0299b7 100644
--- a/.github/ISSUE_TEMPLATE/new-component.yml
+++ b/.github/ISSUE_TEMPLATE/new-component.yml
@@ -71,6 +71,7 @@ body:
         - ArcGIS Business/Community Analyst
         - ArcGIS Charts
         - ArcGIS Dashboards
+        - ArcGIS Data Pipelines
         - ArcGIS Developer Experience
         - ArcGIS Enterprise
         - ArcGIS Excalibur
diff --git a/.github/workflows/pr-semantic.yml b/.github/workflows/pr-semantic.yml
index 1ce2dc0e78a..6faa2e2fe09 100644
--- a/.github/workflows/pr-semantic.yml
+++ b/.github/workflows/pr-semantic.yml
@@ -9,3 +9,20 @@ jobs:
       - uses: amannn/action-semantic-pull-request@v5.5.3
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          types: |
+            # default https://github.com/commitizen/conventional-commit-types/blob/master/index.json
+            feat
+            fix
+            docs
+            style
+            refactor
+            perf
+            test
+            build
+            ci
+            chore
+            revert
+
+            # custom
+            deprecate
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 6293266be1e..2c938123c00 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -236,6 +236,7 @@ Contributions must adhere to **one** of the following conventions:
 - **`refactor`**: A change that neither fixes a bug or adds a feature 🔁
 - **`revert`**: Reverts a previous commit ↪️
 - **`test`**: Improves test coverage in updating a test or adding a new, or missing test 🧪
+- **`deprecate`**: Documentation only changes for a deprecation 👎
 
 ### Scope of change
 
diff --git a/packages/calcite-components/src/assets/styles/_host.scss b/packages/calcite-components/src/assets/styles/_host.scss
index cde73f0c6ad..f6a231bb787 100644
--- a/packages/calcite-components/src/assets/styles/_host.scss
+++ b/packages/calcite-components/src/assets/styles/_host.scss
@@ -1,10 +1,11 @@
 %component-host {
   /* Base ":host" styles for the component */
   box-sizing: border-box;
-  * {
-    box-sizing: border-box;
-  }
   background-color: var(--calcite-color-foreground-1);
   color: var(--calcite-color-text-2);
   font-size: var(--calcite-font-size--1);
+
+  * {
+    box-sizing: border-box;
+  }
 }
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 68d4f03e98e..45c00f705de 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -402,10 +402,18 @@ export namespace Components {
           * @deprecated Use the `layout` property on the component's parent instead.
          */
         "layout": Extract<"horizontal" | "vertical" | "grid", Layout>;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "menuFlipPlacements": FlipPlacement[];
         /**
           * When `true`, the `calcite-action-menu` is open.
          */
         "menuOpen": boolean;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "menuPlacement": LogicalPlacement;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -648,6 +656,14 @@ export namespace Components {
           * When `true`, a busy indicator is displayed.
          */
         "loading": boolean;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "menuFlipPlacements": FlipPlacement[];
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "menuPlacement": LogicalPlacement;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -3312,6 +3328,10 @@ export namespace Components {
           * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility.
          */
         "setSize": number;
+        /**
+          * When `true`, the component's content appears inactive.
+         */
+        "unavailable": boolean;
         /**
           * The component's value.
          */
@@ -3872,10 +3892,18 @@ export namespace Components {
           * When `true`, a busy indicator is displayed.
          */
         "loading": boolean;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "menuFlipPlacements": FlipPlacement[];
         /**
           * When `true`, the action menu items in the `header-menu-actions` slot are open.
          */
         "menuOpen": boolean;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "menuPlacement": LogicalPlacement;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -7104,7 +7132,7 @@ declare global {
         new (): HTMLCalciteListItemElement;
     };
     interface HTMLCalciteListItemGroupElementEventMap {
-        "calciteInternalListItemGroupDefaultSlotChange": DragEvent;
+        "calciteInternalListItemGroupDefaultSlotChange": void;
     }
     interface HTMLCalciteListItemGroupElement extends Components.CalciteListItemGroup, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteListItemGroupElementEventMap>(type: K, listener: (this: HTMLCalciteListItemGroupElement, ev: CalciteListItemGroupCustomEvent<HTMLCalciteListItemGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -7850,7 +7878,7 @@ declare global {
         new (): HTMLCalciteTileSelectGroupElement;
     };
     interface HTMLCalciteTimePickerElementEventMap {
-        "calciteInternalTimePickerChange": string;
+        "calciteInternalTimePickerChange": void;
     }
     interface HTMLCalciteTimePickerElement extends Components.CalciteTimePicker, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteTimePickerElementEventMap>(type: K, listener: (this: HTMLCalciteTimePickerElement, ev: CalciteTimePickerCustomEvent<HTMLCalciteTimePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -8330,10 +8358,18 @@ declare namespace LocalJSX {
           * @deprecated Use the `layout` property on the component's parent instead.
          */
         "layout"?: Extract<"horizontal" | "vertical" | "grid", Layout>;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "menuFlipPlacements"?: FlipPlacement[];
         /**
           * When `true`, the `calcite-action-menu` is open.
          */
         "menuOpen"?: boolean;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "menuPlacement"?: LogicalPlacement;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -8583,6 +8619,14 @@ declare namespace LocalJSX {
           * When `true`, a busy indicator is displayed.
          */
         "loading"?: boolean;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "menuFlipPlacements"?: FlipPlacement[];
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "menuPlacement"?: LogicalPlacement;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -11440,6 +11484,10 @@ declare namespace LocalJSX {
           * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility.
          */
         "setSize"?: number;
+        /**
+          * When `true`, the component's content appears inactive.
+         */
+        "unavailable"?: boolean;
         /**
           * The component's value.
          */
@@ -11461,7 +11509,7 @@ declare namespace LocalJSX {
         /**
           * Fires when changes occur in the default slot, notifying parent lists of the changes.
          */
-        "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent<DragEvent>) => void;
+        "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent<void>) => void;
     }
     interface CalciteLoader {
         /**
@@ -11996,10 +12044,18 @@ declare namespace LocalJSX {
           * When `true`, a busy indicator is displayed.
          */
         "loading"?: boolean;
+        /**
+          * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+         */
+        "menuFlipPlacements"?: FlipPlacement[];
         /**
           * When `true`, the action menu items in the `header-menu-actions` slot are open.
          */
         "menuOpen"?: boolean;
+        /**
+          * Determines where the action menu will be positioned.
+         */
+        "menuPlacement"?: LogicalPlacement;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -13813,7 +13869,7 @@ declare namespace LocalJSX {
           * Specifies the Unicode numeral system used by the component for localization.
          */
         "numberingSystem"?: NumberingSystem;
-        "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent<string>) => void;
+        "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent<void>) => void;
         /**
           * Specifies the size of the component.
          */
diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.scss b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
index 69f139c4cd7..1575cd8bac9 100644
--- a/packages/calcite-components/src/components/accordion-item/accordion-item.scss
+++ b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
@@ -3,20 +3,20 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-accordion-border-color: [Deprecate] Use --calcite-accordion-item-border-color. Specifies the component's border color.
+ * @prop --calcite-accordion-border-color: [Deprecate] Use `--calcite-accordion-item-border-color`. Specifies the component's border color.
  * @prop --calcite-accordion-item-background-color: Specifies the component's background color.
  * @prop --calcite-accordion-item-border-color: Specifies the component's border color.
  * @prop --calcite-accordion-item-content-space: Specifies the component's padding.
- * @prop --calcite-accordion-item-end-icon-color: Specifies the component's end icon color. Fallback to --calcite-accordion-item-icon-color or current color.
+ * @prop --calcite-accordion-item-end-icon-color: Specifies the component's `iconEnd` color. Fallback to `--calcite-accordion-item-icon-color` or current color.
  * @prop --calcite-accordion-item-expand-icon-color: Specifies the component's expand icon color.
- * @prop --calcite-accordion-item-header-background-color: Specifies the background color of the component's header.
- * @prop --calcite-accordion-item-heading-text-color: Specifies the component's heading text color.
+ * @prop --calcite-accordion-item-header-background-color: Specifies the component's `heading` background color.
+ * @prop --calcite-accordion-item-heading-text-color: Specifies the component's `heading` text color.
  * @prop --calcite-accordion-item-icon-color: Specifies the component's default icon color.
- * @prop --calcite-accordion-item-start-icon-color: Specifies the component's start icon color. Fallback to --calcite-accordion-item-icon-color or current color.
+ * @prop --calcite-accordion-item-start-icon-color: Specifies the component's `iconStart` color. Fallback to `--calcite-accordion-item-icon-color` or current color.
  * @prop --calcite-accordion-item-text-color: Specifies the component's text color.
- * @prop --calcite-accordion-text-color-hover: [Deprecated] Use --calcite-accordion-item-text-color-hover. Specifies the component's main text color on hover.
- * @prop --calcite-accordion-text-color-pressed: [Deprecated] Use --calcite-accordion-item-text-color-press. Specifies the component's main text color when pressed.
- * @prop --calcite-accordion-text-color: [Deprecated] Use --calcite-accordion-item-text-color. Specifies the component's text color.
+ * @prop --calcite-accordion-text-color-hover: [Deprecated] Use `--calcite-accordion-item-text-color-hover`. Specifies the component's main text color on hover.
+ * @prop --calcite-accordion-text-color-pressed: [Deprecated] Use `--calcite-accordion-item-text-color-press`. Specifies the component's main text color when pressed.
+ * @prop --calcite-accordion-text-color: [Deprecated] Use `--calcite-accordion-item-text-color`. Specifies the component's text color.
  */
 
 %icon-position {
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.scss b/packages/calcite-components/src/components/action-bar/action-bar.scss
index 3ebe406552a..fcd10ee8cbd 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.scss
+++ b/packages/calcite-components/src/components/action-bar/action-bar.scss
@@ -3,7 +3,7 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-action-bar-expanded-max-width: Specifies the maximum width of the component when it's `layout` is `"vertical"`.
+ * @prop --calcite-action-bar-expanded-max-width: When `layout` is `"vertical"`, specifies the component's maximum width.
  * @prop --calcite-action-bar-items-space: Specifies the space between slotted components in the component.
  */
 
diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
index 288761da844..c2ba175fd86 100755
--- a/packages/calcite-components/src/components/action-group/action-group.e2e.ts
+++ b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
@@ -1,5 +1,16 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, hidden, renders, slots, t9n, themed } from "../../tests/commonTests";
+import {
+  accessible,
+  defaults,
+  focusable,
+  handlesActionMenuPlacements,
+  hidden,
+  reflects,
+  renders,
+  slots,
+  t9n,
+  themed,
+} from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
@@ -19,6 +30,23 @@ describe("calcite-action-group", () => {
         propertyName: "overlayPositioning",
         defaultValue: "absolute",
       },
+      {
+        propertyName: "menuPlacement",
+        defaultValue: undefined,
+      },
+      {
+        propertyName: "menuFlipPlacements",
+        defaultValue: undefined,
+      },
+    ]);
+  });
+
+  describe("reflects", () => {
+    reflects("calcite-action-group", [
+      {
+        propertyName: "menuPlacement",
+        value: "bottom",
+      },
     ]);
   });
 
@@ -42,6 +70,15 @@ describe("calcite-action-group", () => {
     slots("calcite-action-group", SLOTS);
   });
 
+  describe("handles action-menu placement and flipPlacements", () => {
+    handlesActionMenuPlacements(html`
+      <calcite-action-group scale="l" overlay-positioning="fixed">
+        <calcite-action id="plus" slot="${SLOTS.menuActions}" text="Add" icon="plus"></calcite-action>
+        <calcite-action id="banana" slot="${SLOTS.menuActions}" text="Banana" icon="banana"></calcite-action>
+      </calcite-action-group>
+    `);
+  });
+
   it("should honor scale of expand icon", async () => {
     const page = await newE2EPage({ html: actionGroupHTML });
     const menu = await page.find(`calcite-action-group >>> calcite-action-menu`);
diff --git a/packages/calcite-components/src/components/action-group/action-group.scss b/packages/calcite-components/src/components/action-group/action-group.scss
index 53e584deddf..b8fb7617d8a 100755
--- a/packages/calcite-components/src/components/action-group/action-group.scss
+++ b/packages/calcite-components/src/components/action-group/action-group.scss
@@ -4,10 +4,10 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-action-background-color: Specifies the component's background color.
- * @prop --calcite-action-group-border-color: Specifies the component's border color when used in a calcite-action-bar or calcite-action-menu.
- * @prop --calcite-action-group-columns: Specifies the component's grid-template-columns when the `layout` property is `"grid"`.
- * @prop --calcite-action-group-gap: Specifies the component's gap  when the `layout` property is `"grid" and padding`.
- * @prop --calcite-action-group-padding: [Deprecated] Use --calcite-action-group-gap. Specifies the component's padding.
+ * @prop --calcite-action-group-border-color: Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`.
+ * @prop --calcite-action-group-columns: When `layout` is `"grid"`, specifies the component's grid-template-columns.
+ * @prop --calcite-action-group-gap: When `layout` is `"grid"`, specifies the component's gap.
+ * @prop --calcite-action-group-padding: [Deprecated] Use `--calcite-action-group-gap`. Specifies the component's padding.
  *
  */
 
diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx
index d86bbc9bf19..3d99adab64e 100755
--- a/packages/calcite-components/src/components/action-group/action-group.tsx
+++ b/packages/calcite-components/src/components/action-group/action-group.tsx
@@ -21,7 +21,7 @@ import {
 } from "../../utils/t9n";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { Layout, Scale } from "../interfaces";
-import { OverlayPositioning } from "../../utils/floating-ui";
+import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { slotChangeHasAssignedElement } from "../../utils/dom";
 import { Columns } from "./interfaces";
 import { ActionGroupMessages } from "./assets/action-group/t9n";
@@ -95,6 +95,16 @@ export class ActionGroup
    */
   @Prop({ reflect: true }) scale: Scale;
 
+  /**
+   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+   */
+  @Prop() menuFlipPlacements: FlipPlacement[];
+
+  /**
+   * Determines where the action menu will be positioned.
+   */
+  @Prop({ reflect: true }) menuPlacement: LogicalPlacement;
+
   /**
    * Made into a prop for testing purposes only
    *
@@ -178,19 +188,30 @@ export class ActionGroup
   // --------------------------------------------------------------------------
 
   renderMenu(): VNode {
-    const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions } =
-      this;
+    const {
+      expanded,
+      menuOpen,
+      scale,
+      layout,
+      messages,
+      overlayPositioning,
+      hasMenuActions,
+      menuFlipPlacements,
+      menuPlacement,
+    } = this;
 
     return (
       <calcite-action-menu
         expanded={expanded}
-        flipPlacements={["left", "right"]}
+        flipPlacements={
+          menuFlipPlacements ?? (layout === "horizontal" ? ["top", "bottom"] : ["left", "right"])
+        }
         hidden={!hasMenuActions}
         label={messages.more}
         onCalciteActionMenuOpen={this.setMenuOpen}
         open={menuOpen}
         overlayPositioning={overlayPositioning}
-        placement={layout === "horizontal" ? "bottom-start" : "leading-start"}
+        placement={menuPlacement ?? (layout === "horizontal" ? "bottom-start" : "leading-start")}
         scale={scale}
       >
         <calcite-action
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.scss b/packages/calcite-components/src/components/action-pad/action-pad.scss
index 7e5a4946ea9..d5e1a1d3d28 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.scss
+++ b/packages/calcite-components/src/components/action-pad/action-pad.scss
@@ -4,8 +4,8 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-action-pad-corner-radius: Specifies the component's border radius.
- * @prop --calcite-action-pad-expanded-max-width: Specifies the component's maximum width when `expanded` and the `layout` is `"vertical"`.
- * @prop --calcite-action-pad-items-space: Specifies the space between slotted components in the component.
+ * @prop --calcite-action-pad-expanded-max-width: When `layout` is `"vertical"`, specifies the component's maximum width when `expanded`.
+ * @prop --calcite-action-pad-items-space: Specifies the component's space between slotted components.
  */
 
 :host {
@@ -20,8 +20,10 @@
   max-inline-size: var(--calcite-action-pad-expanded-max-width, auto);
 }
 
-::slotted(calcite-action-group:not(:last-of-type)) {
-  @apply border-b;
+:host([layout="vertical"]) {
+  ::slotted(calcite-action-group:not(:last-of-type)) {
+    @apply border-b;
+  }
 }
 
 .container {
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.stories.ts b/packages/calcite-components/src/components/action-pad/action-pad.stories.ts
index fb5968dace0..ad257263e07 100644
--- a/packages/calcite-components/src/components/action-pad/action-pad.stories.ts
+++ b/packages/calcite-components/src/components/action-pad/action-pad.stories.ts
@@ -42,6 +42,27 @@ export const simple = (args: ActionPadStoryArgs): string => html`
   </calcite-action-pad>
 `;
 
+export const withGroups = (): string =>
+  html`<calcite-action-pad layout="horizontal">
+    <calcite-action-group>
+      <calcite-action text="Add" icon="plus" appearance="solid" scale="m"></calcite-action>
+      <calcite-action text="Save" icon="save" appearance="solid" scale="m"></calcite-action>
+    </calcite-action-group>
+    <calcite-action-group>
+      <calcite-action text="Layers" icon="layers" appearance="solid" scale="m"></calcite-action>
+      <calcite-action text="Basemaps" icon="layer-basemap" appearance="solid" scale="m"></calcite-action>
+    </calcite-action-group>
+    <calcite-tooltip
+      slot="expand-tooltip"
+      id="calcite-tooltip-c19274e3-ff3b-6168-ef1e-8a700b056e1c"
+      role="tooltip"
+      overlay-positioning="absolute"
+      placement="auto"
+      style="visibility: hidden; pointer-events: none; position: absolute;"
+      >Toggle Action Pad</calcite-tooltip
+    >
+  </calcite-action-pad>`;
+
 export const darkModeRTL_TestOnly = (): string => html`
   <calcite-action-pad position="start" dir="rtl" class="calcite-mode-dark">
     <calcite-action-group>
diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
index c3da22ceaa8..1966054df1d 100755
--- a/packages/calcite-components/src/components/action/action.scss
+++ b/packages/calcite-components/src/components/action/action.scss
@@ -4,7 +4,7 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-action-indicator-color: Specifies the component's indicator color.
- * @prop --calcite-action-background-color: Specifies the component's  background color.
+ * @prop --calcite-action-background-color: Specifies the component's background color.
  * @prop --calcite-action-background-color-hover: Specifies the component's background color when hovered or focused.
  * @prop --calcite-action-background-color-pressed: Specifies the component's background color when active.
  * @prop --calcite-action-corner-radius: Specifies the component's corner radius.
@@ -12,7 +12,7 @@
  * @prop --calcite-action-corner-radius-end-start: Specifies the component's corner radius end start.
  * @prop --calcite-action-corner-radius-start-end: Specifies the component's corner radius start end.
  * @prop --calcite-action-corner-radius-start-start: Specifies the component's corner radius start start.
- * @prop --calcite-action-text-color: Specifies the text color of the component.
+ * @prop --calcite-action-text-color: Specifies the component's text color.
  * @prop --calcite-action-text-color-pressed: Specifies the component's text color when hovered.
  */
 
diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts
index f19ed8e424e..d9f87a28233 100644
--- a/packages/calcite-components/src/components/alert/alert.e2e.ts
+++ b/packages/calcite-components/src/components/alert/alert.e2e.ts
@@ -353,7 +353,7 @@ describe("calcite-alert", () => {
         await page.setContent(alertSnippet);
         await page.waitForTimeout(alertQueueTimeoutMs);
         alertDismissProgressBar = await page.find(`calcite-alert[open] >>> .${CSS.dismissProgress}`);
-        progressBarStyles = await alertDismissProgressBar.getComputedStyle(":after");
+        progressBarStyles = await alertDismissProgressBar.getComputedStyle("::after");
         expect(await progressBarStyles.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.8)");
       });
     });
@@ -365,7 +365,7 @@ describe("calcite-alert", () => {
         await page.setContent(html`<div class="calcite-mode-dark">${alertSnippet}</div>`);
         await page.waitForTimeout(alertQueueTimeoutMs);
         alertDismissProgressBar = await page.find(`calcite-alert[open] >>> .${CSS.dismissProgress}`);
-        progressBarStyles = await alertDismissProgressBar.getComputedStyle(":after");
+        progressBarStyles = await alertDismissProgressBar.getComputedStyle("::after");
         expect(await progressBarStyles.getPropertyValue("background-color")).toEqual("rgba(43, 43, 43, 0.8)");
       });
     });
@@ -384,7 +384,7 @@ describe("calcite-alert", () => {
       );
       await page.waitForTimeout(alertQueueTimeoutMs);
       alertDismissProgressBar = await page.find(`calcite-alert[open] >>> .${CSS.dismissProgress}`);
-      progressBarStyles = await alertDismissProgressBar.getComputedStyle(":after");
+      progressBarStyles = await alertDismissProgressBar.getComputedStyle("::after");
       expect(await progressBarStyles.getPropertyValue("background-color")).toEqual(overrideStyle);
     });
   });
@@ -594,10 +594,20 @@ describe("calcite-alert", () => {
         shadowSelector: `.${CSS.container}`,
         targetProp: "backgroundColor",
       },
-      "--calcite-alert-corner-radius": {
-        shadowSelector: `.${CSS.container}`,
-        targetProp: "borderRadius",
-      },
+      "--calcite-alert-corner-radius": [
+        {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderRadius",
+        },
+        {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "borderStartEndRadius",
+        },
+        {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "borderEndEndRadius",
+        },
+      ],
       "--calcite-alert-shadow": {
         shadowSelector: `.${CSS.container}`,
         targetProp: "boxShadow",
diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss
index f8f47baee7d..f98617e8759 100644
--- a/packages/calcite-components/src/components/alert/alert.scss
+++ b/packages/calcite-components/src/components/alert/alert.scss
@@ -5,7 +5,7 @@
  *
  * @prop --calcite-alert-width: Specifies the width of the component.
  * @prop --calcite-alert-background-color: Specifies the component's background color.
- * @prop --calcite-alert-corner-radius: Specifies the component's border radius.
+ * @prop --calcite-alert-corner-radius: Specifies the component's corner radius.
  * @prop --calcite-alert-shadow: Specifies the component's shadow.
  */
 
@@ -81,6 +81,8 @@ $border-style: 1px solid var(--calcite-color-border-3);
 .close {
   @apply bg-transparent border-none cursor-pointer flex items-center justify-end outline-none self-stretch text-color-3;
   -webkit-appearance: none;
+  border-start-end-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius));
+  border-end-end-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius));
 
   @apply focus-base;
   &:focus {
@@ -99,8 +101,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
 }
 
 .queue-count {
-  @apply bg-foreground-1
-  cursor-default
+  @apply cursor-default
   flex
   font-medium
   invisible
diff --git a/packages/calcite-components/src/components/avatar/avatar.scss b/packages/calcite-components/src/components/avatar/avatar.scss
index bbee7267811..0b8d27057ed 100644
--- a/packages/calcite-components/src/components/avatar/avatar.scss
+++ b/packages/calcite-components/src/components/avatar/avatar.scss
@@ -3,9 +3,9 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-avatar-corner-radius: defines the corner radius of the component.
- * @prop --calcite-avatar-color: defines the icon or initial color in the component.
- * @prop --calcite-avatar-background-color: defines the background color of the component.
+ * @prop --calcite-avatar-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-avatar-color: Specifies the component's icon or initial color.
+ * @prop --calcite-avatar-background-color: Specifies the component's background color.
  *
  */
 
diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts
index 984ac12335e..bac00a7f613 100644
--- a/packages/calcite-components/src/components/block/block.e2e.ts
+++ b/packages/calcite-components/src/components/block/block.e2e.ts
@@ -5,6 +5,7 @@ import {
   delegatesToFloatingUiOwningComponent,
   disabled,
   focusable,
+  handlesActionMenuPlacements,
   hidden,
   reflects,
   renders,
@@ -14,6 +15,7 @@ import {
 import { html } from "../../../support/formatting";
 import { openClose } from "../../tests/commonTests";
 import { skipAnimations } from "../../tests/utils";
+import { defaultEndMenuPlacement } from "../../utils/floating-ui";
 import { CSS, SLOTS } from "./resources";
 
 describe("calcite-block", () => {
@@ -43,6 +45,14 @@ describe("calcite-block", () => {
         propertyName: "overlayPositioning",
         defaultValue: "absolute",
       },
+      {
+        propertyName: "menuPlacement",
+        defaultValue: defaultEndMenuPlacement,
+      },
+      {
+        propertyName: "menuFlipPlacements",
+        defaultValue: undefined,
+      },
     ]);
   });
 
@@ -64,6 +74,10 @@ describe("calcite-block", () => {
         propertyName: "overlayPositioning",
         value: "fixed",
       },
+      {
+        propertyName: "menuPlacement",
+        value: "bottom",
+      },
     ]);
   });
 
@@ -133,6 +147,15 @@ describe("calcite-block", () => {
     );
   });
 
+  describe("handles action-menu placement and flipPlacements", () => {
+    handlesActionMenuPlacements(html`
+      <calcite-block heading="heading" description="description">
+        <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
+        <div class="content">content</div>
+      </calcite-block>
+    `);
+  });
+
   it("has a loading state", async () => {
     const page = await newE2EPage({
       html: `
diff --git a/packages/calcite-components/src/components/block/block.stories.ts b/packages/calcite-components/src/components/block/block.stories.ts
index 3798bcedef2..14144027057 100644
--- a/packages/calcite-components/src/components/block/block.stories.ts
+++ b/packages/calcite-components/src/components/block/block.stories.ts
@@ -3,11 +3,15 @@ import { boolean } from "../../../.storybook/utils";
 import { placeholderImage } from "../../../.storybook/placeholder-image";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { defaultEndMenuPlacement, placements } from "../../utils/floating-ui";
 import { Block } from "./block";
 const { toggleDisplay } = ATTRIBUTES;
 
 interface BlockStoryArgs
-  extends Pick<Block, "heading" | "description" | "open" | "collapsible" | "loading" | "disabled" | "headingLevel">,
+  extends Pick<
+      Block,
+      "heading" | "description" | "open" | "collapsible" | "loading" | "disabled" | "headingLevel" | "menuPlacement"
+    >,
     Pick<BlockSection, "toggleDisplay"> {
   text: string;
   sectionOpen: BlockSection["open"];
@@ -16,6 +20,7 @@ interface BlockStoryArgs
 export default {
   title: "Components/Block",
   args: {
+    menuPlacement: defaultEndMenuPlacement,
     heading: "Heading",
     description: "description",
     open: true,
@@ -28,6 +33,10 @@ export default {
     toggleDisplay: toggleDisplay.defaultValue,
   },
   argTypes: {
+    menuPlacement: {
+      options: placements,
+      control: { type: "select" },
+    },
     headingLevel: {
       control: { type: "number", min: 1, max: 6, step: 1 },
     },
@@ -42,6 +51,7 @@ export const simple = (args: BlockStoryArgs): string => html`
   <calcite-block
     heading="${args.heading}"
     description="${args.description}"
+    menu-placement="${args.menuPlacement}"
     ${boolean("open", args.open)}
     ${boolean("collapsible", args.collapsible)}
     ${boolean("loading", args.loading)}
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index c935ccf5eac..8b986c0a7cd 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -44,7 +44,12 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
-import { OverlayPositioning } from "../../utils/floating-ui";
+import {
+  defaultEndMenuPlacement,
+  FlipPlacement,
+  LogicalPlacement,
+  OverlayPositioning,
+} from "../../utils/floating-ui";
 import { FlipContext } from "../interfaces";
 import { IconNameOrString } from "../icon/interfaces";
 import { CSS, ICONS, IDS, SLOTS } from "./resources";
@@ -118,6 +123,16 @@ export class Block
    */
   @Prop({ reflect: true }) loading = false;
 
+  /**
+   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+   */
+  @Prop() menuFlipPlacements: FlipPlacement[];
+
+  /**
+   * Determines where the action menu will be positioned.
+   */
+  @Prop({ reflect: true }) menuPlacement: LogicalPlacement = defaultEndMenuPlacement;
+
   /**
    * When `true`, expands the component and its contents.
    */
@@ -405,7 +420,17 @@ export class Block
   }
 
   render(): VNode {
-    const { collapsible, el, loading, open, heading, messages, description } = this;
+    const {
+      collapsible,
+      el,
+      loading,
+      open,
+      heading,
+      messages,
+      description,
+      menuFlipPlacements,
+      menuPlacement,
+    } = this;
 
     const toggleLabel = open ? messages.collapse : messages.expand;
 
@@ -459,8 +484,10 @@ export class Block
         ) : null}
         {hasMenuActions ? (
           <calcite-action-menu
+            flipPlacements={menuFlipPlacements ?? ["top", "bottom"]}
             label={messages.options}
             overlayPositioning={this.overlayPositioning}
+            placement={menuPlacement}
           >
             <slot name={SLOTS.headerMenuActions} />
           </calcite-action-menu>
diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts
index 7ac027ca14c..f3b128559f0 100644
--- a/packages/calcite-components/src/components/button/button.e2e.ts
+++ b/packages/calcite-components/src/components/button/button.e2e.ts
@@ -94,7 +94,7 @@ describe("calcite-button", () => {
     hidden("calcite-button");
   });
 
-  it("renders child element as disabled or aria-disabled", async () => {
+  it("renders child element as disabled", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-button disabled>Continue</calcite-button>`);
 
@@ -105,7 +105,6 @@ describe("calcite-button", () => {
     expect(elementAsLink).toBeNull();
 
     expect(await elementAsButton.getProperty("disabled")).toBe(true);
-    expect(await elementAsButton.getProperty("ariaDisabled")).toBe(null);
 
     const element = await page.find("calcite-button");
     element.setProperty("href", "#anchor");
@@ -118,7 +117,6 @@ describe("calcite-button", () => {
     expect(elementAsLink).not.toBeNull();
 
     expect(await elementAsLink.getProperty("disabled")).toBe(undefined);
-    expect(await elementAsLink.getProperty("ariaDisabled")).toBe("true");
   });
 
   it("renders as a button with default props", async () => {
@@ -535,12 +533,12 @@ describe("calcite-button", () => {
         buttonEl = await page.find("calcite-button >>> button");
         await buttonEl.focus();
         await page.waitForChanges();
-        buttonFocusStyle = await buttonEl.getComputedStyle(":focus");
+        buttonFocusStyle = await buttonEl.getComputedStyle();
         expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual("rgba(0, 0, 0, 0.04)");
 
         await buttonEl.hover();
         await page.waitForChanges();
-        buttonHoverStyle = await buttonEl.getComputedStyle(":hover");
+        buttonHoverStyle = await buttonEl.getComputedStyle();
         expect(buttonHoverStyle.getPropertyValue("background-color")).toEqual("rgba(0, 0, 0, 0.04)");
       });
     });
@@ -553,12 +551,12 @@ describe("calcite-button", () => {
         buttonEl = await page.find("calcite-button >>> button");
         await buttonEl.focus();
         await page.waitForChanges();
-        buttonFocusStyle = await buttonEl.getComputedStyle(":focus");
+        buttonFocusStyle = await buttonEl.getComputedStyle();
         expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.04)");
 
         await buttonEl.hover();
         await page.waitForChanges();
-        buttonHoverStyle = await buttonEl.getComputedStyle(":hover");
+        buttonHoverStyle = await buttonEl.getComputedStyle();
         expect(buttonHoverStyle.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.04)");
       });
     });
@@ -577,12 +575,12 @@ describe("calcite-button", () => {
       buttonEl = await page.find("calcite-button >>> button");
       await buttonEl.focus();
       await page.waitForChanges();
-      buttonFocusStyle = await buttonEl.getComputedStyle(":focus");
+      buttonFocusStyle = await buttonEl.getComputedStyle();
       expect(buttonFocusStyle.getPropertyValue("background-color")).toEqual(overrideStyle);
 
       await buttonEl.hover();
       await page.waitForChanges();
-      buttonHoverStyle = await buttonEl.getComputedStyle(":hover");
+      buttonHoverStyle = await buttonEl.getComputedStyle();
       expect(buttonHoverStyle.getPropertyValue("background-color")).toEqual(overrideStyle);
     });
   });
diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
index 0055426a824..d5fa047691e 100644
--- a/packages/calcite-components/src/components/button/button.tsx
+++ b/packages/calcite-components/src/components/button/button.tsx
@@ -33,9 +33,9 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
-import { toAriaBoolean } from "../../utils/dom";
 import { IconNameOrString } from "../icon/interfaces";
 import { isBrowser } from "../../utils/browser";
+import { toAriaBoolean } from "../../utils/dom";
 import { ButtonMessages } from "./assets/button/t9n";
 import { ButtonAlignment } from "./interfaces";
 import { CSS } from "./resources";
@@ -266,8 +266,8 @@ export class Button
     return (
       <InteractiveContainer disabled={this.disabled}>
         <Tag
-          aria-disabled={childElType === "a" ? toAriaBoolean(this.disabled || this.loading) : null}
-          aria-expanded={this.el.ariaExpanded}
+          aria-busy={toAriaBoolean(this.loading)}
+          aria-expanded={this.el.ariaExpanded ? this.el.ariaExpanded : null}
           aria-label={!this.loading ? getLabelText(this) : this.messages.loading}
           aria-live="polite"
           class={{
@@ -277,7 +277,7 @@ export class Button
             [CSS.iconStartEmpty]: !this.iconStart,
             [CSS.iconEndEmpty]: !this.iconEnd,
           }}
-          disabled={childElType === "button" ? this.disabled || this.loading : null}
+          disabled={childElType === "button" ? this.disabled : null}
           download={
             childElType === "a"
               ? this.download === true || this.download === ""
diff --git a/packages/calcite-components/src/components/card-group/card-group.scss b/packages/calcite-components/src/components/card-group/card-group.scss
index 44f95abc855..86d69a3d1a6 100644
--- a/packages/calcite-components/src/components/card-group/card-group.scss
+++ b/packages/calcite-components/src/components/card-group/card-group.scss
@@ -3,8 +3,8 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-card-group-gap: [Deprecated] Use --calcite-card-group-space. Specifies the gap between slotted components.
- * @prop --calcite-card-group-space: Specifies the space between slotted components.
+ * @prop --calcite-card-group-gap: [Deprecated] Use `--calcite-card-group-space`. Specifies the gap between slotted elements.
+ * @prop --calcite-card-group-space: Specifies the space between slotted elements.
  */
 
 :host {
diff --git a/packages/calcite-components/src/components/card-group/card-group.tsx b/packages/calcite-components/src/components/card-group/card-group.tsx
index b5c6ba9e580..16e203f9872 100644
--- a/packages/calcite-components/src/components/card-group/card-group.tsx
+++ b/packages/calcite-components/src/components/card-group/card-group.tsx
@@ -11,7 +11,7 @@ import {
   Watch,
   Host,
 } from "@stencil/core";
-import { focusElement, focusElementInGroup, toAriaBoolean } from "../../utils/dom";
+import { focusElement, focusElementInGroup } from "../../utils/dom";
 import {
   InteractiveComponent,
   InteractiveContainer,
@@ -235,12 +235,7 @@ export class CardGroup implements InteractiveComponent, LoadableComponent {
     return (
       <Host>
         <InteractiveContainer disabled={this.disabled}>
-          <div
-            aria-disabled={toAriaBoolean(this.disabled)}
-            aria-label={this.label}
-            class="container"
-            role={role}
-          >
+          <div aria-label={this.label} class="container" role={role}>
             <slot
               onSlotchange={this.updateItemsOnSlotChange}
               ref={(el) => (this.slotRefEl = el as HTMLSlotElement)}
diff --git a/packages/calcite-components/src/components/card/card.e2e.ts b/packages/calcite-components/src/components/card/card.e2e.ts
index 0fd65751855..6cb6167f492 100644
--- a/packages/calcite-components/src/components/card/card.e2e.ts
+++ b/packages/calcite-components/src/components/card/card.e2e.ts
@@ -76,26 +76,22 @@ describe("calcite-card", () => {
   describe("when a card is selectable (deprecated)", () => {
     it("should update the card's selected state when its checkbox is clicked", async () => {
       const page = await newE2EPage();
-      await page.setContent(`
-      <div style="width:260px">
+      await page.setContent(html`
         <calcite-card label="example-label" selectable>
           <h3 slot="title">ArcGIS Online: Gallery and Organization pages</h3>
           <span slot="subtitle">
             A great example of a study description that might wrap to a line or two, but isn't overly verbose.
           </span>
         </calcite-card>
-      </div>
       `);
       const card = await page.find("calcite-card");
       const checkbox = await page.find(`calcite-card >>> .${CSS.checkboxWrapperDeprecated} calcite-checkbox`);
       const cardSelectSpy = await card.spyOnEvent("calciteCardSelect");
-      const clickSpy = await card.spyOnEvent("calciteCardSelect");
 
       await checkbox.click();
       await page.waitForChanges();
 
       expect(cardSelectSpy).toHaveReceivedEventTimes(1);
-      expect(clickSpy).toHaveReceivedEventTimes(1);
       expect(await checkbox.getProperty("checked")).toBe(true);
       expect(await card.getProperty("selected")).toBe(true);
     });
diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss
index ae58ceedd19..90370319493 100644
--- a/packages/calcite-components/src/components/card/card.scss
+++ b/packages/calcite-components/src/components/card/card.scss
@@ -3,21 +3,21 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`.
- * @prop --calcite-card-background-color: Specifies the background color of the component.
- * @prop --calcite-card-border-color: Specifies the border color of the component.
- * @prop --calcite-card-corner-radius: Specifies the corner radius of the component.
- * @prop --calcite-card-selection-background-color-active: [Deprecated] Use --calcite-card-selection-background-color-press. Specifies the background color of the component's selection element when active.
- * @prop --calcite-card-selection-background-color-hover: Specifies the background color of the component's selection element when hovered.
- * @prop --calcite-card-selection-background-color-press: Specifies the background color of the component's selection element when active.
- * @prop --calcite-card-selection-background-color-selected: [Deprecated] Use --calcite-card-background-color. Specifies the icon color of the component's selection element when `selected`.
- * @prop --calcite-card-selection-background-color: [Deprecated] Use --calcite-card-background-color. Specifies the background color of the component's selection element.
- * @prop --calcite-card-selection-color-hover: Specifies the color of the component's selection element when hovered or focused.
- * @prop --calcite-card-selection-color: Specifies the color of the component's selection element.
- * @prop --calcite-card-selection-icon-color-hover: [Deprecated] Use --calcite-card-selection-color-hover. Specifies the icon color of the component's selection element when hovered.
- * @prop --calcite-card-selection-icon-color-selected: [Deprecated] Use --calcite-card-accent-color-selected. Specifies the icon color of the component's selection element when `selected`.
- * @prop --calcite-card-selection-icon-color: [Deprecated] Use --calcite-card-selection-color. Specifies the icon color of the component's selection element.
- * @prop --calcite-card-shadow: Specifies the shadow of the component.
+ * @prop --calcite-card-accent-color-selected: Specifies the component's accent color when `selected`.
+ * @prop --calcite-card-background-color: Specifies the component's background color.
+ * @prop --calcite-card-border-color: Specifies the component's border color.
+ * @prop --calcite-card-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-card-selection-background-color-active: [Deprecated] Use `--calcite-card-selection-background-color-press`. Specifies the component's selection element background color when active.
+ * @prop --calcite-card-selection-background-color-hover: Specifies the component's selection element background color when hovered.
+ * @prop --calcite-card-selection-background-color-press: Specifies the component's selection element background color when active.
+ * @prop --calcite-card-selection-background-color-selected: [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element icon color when `selected`.
+ * @prop --calcite-card-selection-background-color: [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element background color.
+ * @prop --calcite-card-selection-color-hover: Specifies the component's selection element color when hovered or focused.
+ * @prop --calcite-card-selection-color: Specifies the component's selection element color.
+ * @prop --calcite-card-selection-icon-color-hover: [Deprecated] Use `--calcite-card-selection-color-hover`. Specifies the component's selection element icon color when hovered.
+ * @prop --calcite-card-selection-icon-color-selected: [Deprecated] Use `--calcite-card-accent-color-selected`. Specifies the component's selection element icon color when `selected`.
+ * @prop --calcite-card-selection-icon-color: [Deprecated] Use `--calcite-card-selection-color`. Specifies the component's selection element icon color.
+ * @prop --calcite-card-shadow: Specifies the component's shadow.
  *
  */
 
diff --git a/packages/calcite-components/src/components/card/card.tsx b/packages/calcite-components/src/components/card/card.tsx
index 61a79410a7c..7753d93f2e1 100644
--- a/packages/calcite-components/src/components/card/card.tsx
+++ b/packages/calcite-components/src/components/card/card.tsx
@@ -374,7 +374,6 @@ export class Card
         <InteractiveContainer disabled={this.disabled}>
           <div
             aria-checked={this.selectionMode !== "none" ? toAriaBoolean(this.selected) : undefined}
-            aria-disabled={this.disabled}
             aria-label={this.label}
             class={{ [CSS.contentWrapper]: true, inline: thumbnailInline }}
             onClick={this.cardBodyClickHandler}
diff --git a/packages/calcite-components/src/components/chip-group/chip-group.tsx b/packages/calcite-components/src/components/chip-group/chip-group.tsx
index 9de4267c7e9..c19e9ce7abb 100644
--- a/packages/calcite-components/src/components/chip-group/chip-group.tsx
+++ b/packages/calcite-components/src/components/chip-group/chip-group.tsx
@@ -10,7 +10,7 @@ import {
   Method,
   Watch,
 } from "@stencil/core";
-import { focusElementInGroup, slotChangeGetAssignedElements, toAriaBoolean } from "../../utils/dom";
+import { focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
 import {
   InteractiveComponent,
   InteractiveContainer,
@@ -275,12 +275,7 @@ export class ChipGroup implements InteractiveComponent {
 
     return (
       <InteractiveContainer disabled={disabled}>
-        <div
-          aria-disabled={toAriaBoolean(disabled)}
-          aria-label={this.label}
-          class="container"
-          role={role}
-        >
+        <div aria-label={this.label} class="container" role={role}>
           <slot
             onSlotchange={this.updateItems}
             ref={(el) => (this.slotRefEl = el as HTMLSlotElement)}
diff --git a/packages/calcite-components/src/components/chip/chip.e2e.ts b/packages/calcite-components/src/components/chip/chip.e2e.ts
index 4035db3dd65..2a3447c1ca6 100644
--- a/packages/calcite-components/src/components/chip/chip.e2e.ts
+++ b/packages/calcite-components/src/components/chip/chip.e2e.ts
@@ -158,12 +158,12 @@ describe("calcite-chip", () => {
         chipCloseButton = await page.find("calcite-chip >>> button");
         await chipCloseButton.focus();
         await page.waitForChanges();
-        chipCloseButtonFocusStyle = await chipCloseButton.getComputedStyle(":focus");
+        chipCloseButtonFocusStyle = await chipCloseButton.getComputedStyle();
         expect(chipCloseButtonFocusStyle.getPropertyValue("background-color")).toEqual("rgba(0, 0, 0, 0.04)");
 
         await chipCloseButton.hover();
         await page.waitForChanges();
-        chipCloseButtonHoverStyle = await chipCloseButton.getComputedStyle(":hover");
+        chipCloseButtonHoverStyle = await chipCloseButton.getComputedStyle();
         expect(chipCloseButtonHoverStyle.getPropertyValue("background-color")).toEqual("rgba(0, 0, 0, 0.04)");
       });
     });
@@ -176,12 +176,12 @@ describe("calcite-chip", () => {
         chipCloseButton = await page.find("calcite-chip >>> button");
         await chipCloseButton.focus();
         await page.waitForChanges();
-        chipCloseButtonFocusStyle = await chipCloseButton.getComputedStyle(":focus");
+        chipCloseButtonFocusStyle = await chipCloseButton.getComputedStyle();
         expect(chipCloseButtonFocusStyle.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.04)");
 
         await chipCloseButton.hover();
         await page.waitForChanges();
-        chipCloseButtonHoverStyle = await chipCloseButton.getComputedStyle(":hover");
+        chipCloseButtonHoverStyle = await chipCloseButton.getComputedStyle();
         expect(chipCloseButtonHoverStyle.getPropertyValue("background-color")).toEqual("rgba(255, 255, 255, 0.04)");
       });
     });
@@ -200,12 +200,12 @@ describe("calcite-chip", () => {
       chipCloseButton = await page.find("calcite-chip >>> button");
       await chipCloseButton.focus();
       await page.waitForChanges();
-      chipCloseButtonFocusStyle = await chipCloseButton.getComputedStyle(":focus");
+      chipCloseButtonFocusStyle = await chipCloseButton.getComputedStyle();
       expect(chipCloseButtonFocusStyle.getPropertyValue("background-color")).toEqual(overrideStyle);
 
       await chipCloseButton.hover();
       await page.waitForChanges();
-      chipCloseButtonHoverStyle = await chipCloseButton.getComputedStyle(":hover");
+      chipCloseButtonHoverStyle = await chipCloseButton.getComputedStyle();
       expect(chipCloseButtonHoverStyle.getPropertyValue("background-color")).toEqual(overrideStyle);
     });
 
diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index 1390e67fa25..e1ca4d68f02 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -3,14 +3,14 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-chip-background-color: Specifies the background color of the component.
- * @prop --calcite-chip-border-color: Specifies the border color of the component.
- * @prop --calcite-chip-corner-radius: Specifies the corner radius of the component.
- * @prop --calcite-chip-text-color: Specifies the text color of the component.
- * @prop --calcite-chip-icon-color: Specifies the icon color of the component.
- * @prop --calcite-chip-close-icon-color: Specifies the icon color of the close element of the component.
- * @prop --calcite-chip-select-icon-color: Specifies the icon color of the selection element of the component.
- * @prop --calcite-chip-select-icon-color-pressed: Specifies the icon color of the selection element of the component when active.
+ * @prop --calcite-chip-background-color: Specifies the component's background color.
+ * @prop --calcite-chip-border-color: Specifies the component's border color.
+ * @prop --calcite-chip-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-chip-text-color: Specifies the component's text color.
+ * @prop --calcite-chip-icon-color: Specifies the component's icon color.
+ * @prop --calcite-chip-close-icon-color: Specifies the component's close element icon color.
+ * @prop --calcite-chip-select-icon-color: Specifies the component's selection element icon color.
+ * @prop --calcite-chip-select-icon-color-pressed: Specifies the component's selection element icon color when active.
  *
  */
 
diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx
index 55a1b47ff47..e4c6452813f 100644
--- a/packages/calcite-components/src/components/chip/chip.tsx
+++ b/packages/calcite-components/src/components/chip/chip.tsx
@@ -413,7 +413,6 @@ export class Chip
                 ? toAriaBoolean(this.selected)
                 : undefined
             }
-            aria-disabled={disableInteraction ? toAriaBoolean(disabled) : undefined}
             aria-label={this.label}
             class={{
               [CSS.container]: true,
diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
index eec01ad1e14..df30e2bd620 100644
--- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -747,6 +747,43 @@ describe("calcite-combobox", () => {
           expect(await combobox.getProperty("open")).toBe(true);
         });
 
+        it("single-persist-selection mode correctly selects different items with the same value", async () => {
+          const page = await newE2EPage();
+          await page.setContent(html`
+            <calcite-combobox selection-mode="single-persist">
+              <calcite-combobox-item value="one" heading="one"></calcite-combobox-item>
+              <calcite-combobox-item value="one" heading="two"></calcite-combobox-item>
+            </calcite-combobox>
+          `);
+
+          const combobox = await page.find("calcite-combobox");
+
+          const firstOpenEvent = page.waitForEvent("calciteComboboxOpen");
+          await combobox.click();
+          await firstOpenEvent;
+
+          const item1 = await combobox.find("calcite-combobox-item[heading=one]");
+          const item2 = await combobox.find("calcite-combobox-item[heading=two]");
+
+          await item1.click();
+          await page.waitForChanges();
+          expect(await combobox.getProperty("value")).toBe("one");
+          expect(await item1.getProperty("selected")).toBe(true);
+          expect(await item2.getProperty("selected")).toBe(false);
+          expect(await combobox.getProperty("open")).toBe(false);
+
+          const secondOpenEvent = page.waitForEvent("calciteComboboxOpen");
+          await combobox.click();
+          await secondOpenEvent;
+
+          await item2.click();
+          await page.waitForChanges();
+          expect(await combobox.getProperty("value")).toBe("one");
+          expect(await item1.getProperty("selected")).toBe(false);
+          expect(await item2.getProperty("selected")).toBe(true);
+          expect(await combobox.getProperty("open")).toBe(false);
+        });
+
         it("multiple-selection mode allows toggling selection once the selected item is selected", async () => {
           const page = await newE2EPage();
           await page.setContent(html`
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index 0dc62ec5656..5d585c20731 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -776,7 +776,8 @@ export class Combobox
         break;
       case "Enter":
         if (this.open && this.activeItemIndex > -1) {
-          this.toggleSelection(this.filteredItems[this.activeItemIndex]);
+          const item = this.filteredItems[this.activeItemIndex];
+          this.toggleSelection(item, !item.selected);
           event.preventDefault();
         } else if (this.activeChipIndex > -1) {
           this.removeActiveChip();
@@ -1132,10 +1133,13 @@ export class Combobox
 
   private emitComboboxChange = debounce(this.internalComboboxChangeEvent, 0);
 
-  toggleSelection(item: HTMLCalciteComboboxItemElement, value = !item.selected): void {
+  toggleSelection(item: HTMLCalciteComboboxItemElement, value: boolean): void {
     if (
       !item ||
-      (this.selectionMode === "single-persist" && item.selected && item.value === this.value)
+      (this.selectionMode === "single-persist" &&
+        item.selected &&
+        item.value === this.value &&
+        !value)
     ) {
       return;
     }
diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx
index b048610ac8a..9c3e465c6d6 100644
--- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx
+++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx
@@ -181,7 +181,6 @@ export class DatePickerDay implements InteractiveComponent, LoadableComponent {
 
     return (
       <Host
-        aria-disabled={toAriaBoolean(this.disabled)}
         aria-label={dayLabel}
         aria-selected={toAriaBoolean(this.active)}
         id={dayId}
diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
index fcfaaa1145d..1dc66aeba94 100644
--- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts
+++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
@@ -1110,6 +1110,10 @@ describe("calcite-dialog", () => {
           shadowSelector: `.${CSS.dialog}`,
           targetProp: "insetBlockStart",
         },
+        "--calcite-dialog-background-color": {
+          shadowSelector: `.${CSS.panel}`,
+          targetProp: "--calcite-panel-background-color",
+        },
       },
     );
 
diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss
index 0b5de775088..0700e9981a2 100644
--- a/packages/calcite-components/src/components/dialog/dialog.scss
+++ b/packages/calcite-components/src/components/dialog/dialog.scss
@@ -15,6 +15,7 @@
  * @prop --calcite-dialog-border-color: Specifies the component's border color.
  * @prop --calcite-dialog-offset-x: Specifies the horizontal offset of the component.
  * @prop --calcite-dialog-offset-y: Specifies the vertical offset of the component.
+ * @prop --calcite-dialog-background-color: Specifies the background color of the component.
  */
 
 :host {
@@ -117,6 +118,7 @@ calcite-panel {
   --calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));
   --calcite-panel-footer-padding: var(--calcite-dialog-footer-space);
   --calcite-panel-header-border-block-end: var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color);
+  --calcite-panel-background-color: var(--calcite-dialog-background-color);
 }
 
 .dialog {
diff --git a/packages/calcite-components/src/components/filter/filter.e2e.ts b/packages/calcite-components/src/components/filter/filter.e2e.ts
index a0b9e9c5b7a..fc90fb5311c 100644
--- a/packages/calcite-components/src/components/filter/filter.e2e.ts
+++ b/packages/calcite-components/src/components/filter/filter.e2e.ts
@@ -222,6 +222,14 @@ describe("calcite-filter", () => {
 
       assertMatchingItems(await filter.getProperty("filteredItems"), ["jon"]);
       expect(filterChangeSpy).toHaveReceivedEventTimes(1);
+
+      await page.$eval("calcite-filter", (filter: HTMLCalciteFilterElement): void => {
+        filter.items = [];
+      });
+      await page.waitForTimeout(DEBOUNCE.filter);
+      await page.waitForChanges();
+      assertMatchingItems(await filter.getProperty("filteredItems"), []);
+      expect(filterChangeSpy).toHaveReceivedEventTimes(1);
     });
 
     it("searches recursively in items and works and matches on a partial string ignoring case", async () => {
diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx
index ba26a158e8f..3900e735204 100644
--- a/packages/calcite-components/src/components/filter/filter.tsx
+++ b/packages/calcite-components/src/components/filter/filter.tsx
@@ -167,9 +167,7 @@ export class Filter
 
   async componentWillLoad(): Promise<void> {
     setUpLoadableComponent(this);
-    if (this.items.length) {
-      this.updateFiltered(filter(this.items, this.value, this.filterProps));
-    }
+    this.updateFiltered(filter(this.items ?? [], this.value, this.filterProps));
     await setUpMessages(this);
   }
 
@@ -230,8 +228,7 @@ export class Filter
 
   private filterDebounced = debounce(
     (value: string, emit = false, onFilter?: () => void): void =>
-      this.items.length &&
-      this.updateFiltered(filter(this.items, value, this.filterProps), emit, onFilter),
+      this.updateFiltered(filter(this.items ?? [], value, this.filterProps), emit, onFilter),
     DEBOUNCE.filter,
   );
 
diff --git a/packages/calcite-components/src/components/functional/Heading.spec.tsx b/packages/calcite-components/src/components/functional/Heading.spec.tsx
index 888bec6d0de..4dc1befea3d 100644
--- a/packages/calcite-components/src/components/functional/Heading.spec.tsx
+++ b/packages/calcite-components/src/components/functional/Heading.spec.tsx
@@ -1,5 +1,4 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
+import { h, VNode } from "@stencil/core";
 import { constrainHeadingLevel, Heading } from "./Heading";
 
 describe("constrainHeadingLevel", () => {
@@ -13,26 +12,55 @@ describe("constrainHeadingLevel", () => {
   });
 });
 
-describe("Heading", () => {
-  it("should render", async () => {
-    const page = await newSpecPage({
-      components: [],
-      template: () => (
-        <Heading class="test" level={1}>
-          My Heading
-        </Heading>
+/**
+ * simple VNode assertion util to help get rid of newSpecPage usage
+ *
+ * @param vnode
+ * @param expected
+ * @param expected.tag
+ * @param expected.attrs
+ * @param expected.children
+ */
+function assertVNode(
+  vnode: VNode,
+  expected: {
+    tag: string;
+    attrs: Record<string, any>;
+    children: (VNode | string)[];
+  },
+) {
+  expect(vnode).toEqual(
+    expect.objectContaining({
+      $tag$: expected.tag,
+      $attrs$: expect.objectContaining(expected.attrs),
+      $children$: expected.children.map((child) =>
+        typeof child === "string"
+          ? expect.objectContaining({ $text$: child })
+          : expect.objectContaining(child),
       ),
-    });
+    }),
+  );
+}
 
-    expect(page.root).toEqualHtml(`<h1 class="test">My Heading</h1>`);
+describe("Heading", () => {
+  it("should render", async () => {
+    assertVNode(
+      <Heading class="test" level={1}>
+        My Heading
+      </Heading>,
+      {
+        tag: "h1",
+        attrs: { class: "test" },
+        children: ["My Heading"],
+      },
+    );
   });
 
   it("should render a div", async () => {
-    const page = await newSpecPage({
-      components: [],
-      template: () => <Heading class="test">My Heading</Heading>,
+    assertVNode(<Heading class="test">My Heading</Heading>, {
+      tag: "div",
+      attrs: { class: "test" },
+      children: ["My Heading"],
     });
-
-    expect(page.root).toEqualHtml(`<div class="test">My Heading</div>`);
   });
 });
diff --git a/packages/calcite-components/src/components/handle/handle.tsx b/packages/calcite-components/src/components/handle/handle.tsx
index 90e1cfeccc7..090cc48f730 100644
--- a/packages/calcite-components/src/components/handle/handle.tsx
+++ b/packages/calcite-components/src/components/handle/handle.tsx
@@ -25,7 +25,11 @@ import {
   T9nComponent,
   updateMessages,
 } from "../../utils/t9n";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  InteractiveComponent,
+  InteractiveContainer,
+  updateHostInteraction,
+} from "../../utils/interactive";
 import { HandleMessages } from "./assets/handle/t9n";
 import { HandleChange, HandleNudge } from "./interfaces";
 import { CSS, ICONS, SUBSTITUTIONS } from "./resources";
@@ -294,24 +298,26 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo
 
   render(): VNode {
     return (
-      // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-      <span
-        aria-checked={this.disabled ? null : toAriaBoolean(this.selected)}
-        aria-disabled={this.disabled ? toAriaBoolean(this.disabled) : null}
-        aria-label={this.disabled ? null : this.getAriaText("label")}
-        class={{ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }}
-        onBlur={this.handleBlur}
-        onKeyDown={this.handleKeyDown}
-        ref={(el): void => {
-          this.handleButton = el;
-        }}
-        // role of radio is being applied to allow space key to select in screen readers
-        role="radio"
-        tabIndex={this.disabled ? null : 0}
-        title={this.getTooltip()}
-      >
-        <calcite-icon icon={ICONS.drag} scale="s" />
-      </span>
+      <InteractiveContainer disabled={this.disabled}>
+        <span
+          // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
+          aria-checked={this.disabled ? null : toAriaBoolean(this.selected)}
+          aria-disabled={this.disabled ? toAriaBoolean(this.disabled) : null}
+          aria-label={this.disabled ? null : this.getAriaText("label")}
+          class={{ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }}
+          onBlur={this.handleBlur}
+          onKeyDown={this.handleKeyDown}
+          ref={(el): void => {
+            this.handleButton = el;
+          }}
+          // role of radio is being applied to allow space key to select in screen readers
+          role="radio"
+          tabIndex={this.disabled ? null : 0}
+          title={this.getTooltip()}
+        >
+          <calcite-icon icon={ICONS.drag} scale="s" />
+        </span>
+      </InteractiveContainer>
     );
   }
 }
diff --git a/packages/calcite-components/src/components/icon/icon.scss b/packages/calcite-components/src/components/icon/icon.scss
index be0af200edd..82649d010cd 100644
--- a/packages/calcite-components/src/components/icon/icon.scss
+++ b/packages/calcite-components/src/components/icon/icon.scss
@@ -3,8 +3,8 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-ui-icon-color: [Deprecated] Use --calcite-icon-color. Specifies the component's color. Defaults to `currentColor`.
- * @prop --calcite-icon-color: Specifies the component's color. Defaults to `currentColor`.
+ * @prop --calcite-ui-icon-color: [Deprecated] Use `--calcite-icon-color`. Specifies the component's color. Defaults to current color.
+ * @prop --calcite-icon-color: Specifies the component's color. Defaults to current color.
  */
 
 :host {
diff --git a/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages.json b/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages.json
index 34e09cd6deb..57d539d8575 100644
--- a/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages.json
+++ b/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages.json
@@ -255,7 +255,7 @@
   "Asia/Famagusta": "Famagusta",
   "Asia/Gaza": "Gaza",
   "Asia/Hebron": "Hebron",
-  "Asia/Ho_Chi_Minh": "Ho Chi Minh",
+  "Asia/Ho_Chi_Minh": "Ho Chi Minh City",
   "Asia/Hong_Kong": "Hong Kong",
   "Asia/Hovd": "Hovd",
   "Asia/Irkutsk": "Irkutsk",
diff --git a/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages_en.json b/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages_en.json
index 34e09cd6deb..57d539d8575 100644
--- a/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages_en.json
+++ b/packages/calcite-components/src/components/input-time-zone/assets/input-time-zone/t9n/messages_en.json
@@ -255,7 +255,7 @@
   "Asia/Famagusta": "Famagusta",
   "Asia/Gaza": "Gaza",
   "Asia/Hebron": "Hebron",
-  "Asia/Ho_Chi_Minh": "Ho Chi Minh",
+  "Asia/Ho_Chi_Minh": "Ho Chi Minh City",
   "Asia/Hong_Kong": "Hong Kong",
   "Asia/Hovd": "Hovd",
   "Asia/Irkutsk": "Irkutsk",
diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts
index 0bcfd22545e..41b46006fe6 100644
--- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts
+++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts
@@ -551,10 +551,11 @@ describe("calcite-input-time-zone", () => {
         await page.waitForTimeout(DEBOUNCE.filter);
 
         const selectedTimeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item[selected]");
+        const itemMetadata = await selectedTimeZoneItem.getProperty("metadata");
         const expectedTimeZoneItem = testTimeZoneItems[3];
 
         expect(await input.getProperty("value")).toBe(`${expectedTimeZoneItem.offset}`);
-        expect(await selectedTimeZoneItem.getProperty("value")).toMatch(expectedTimeZoneItem.name);
+        expect(itemMetadata.filterValue).toContain(expectedTimeZoneItem.name);
       });
     });
   });
diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
index f0ff733dcb6..73f8e61b552 100644
--- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
+++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
@@ -267,9 +267,6 @@ export class InputTimeZone
     }
 
     this.selectedTimeZoneItem = timeZoneItem;
-    requestAnimationFrame(() => {
-      this.overrideSelectedLabelForRegion(this.open);
-    });
   }
 
   /**
@@ -370,19 +367,16 @@ export class InputTimeZone
    * @private
    */
   private overrideSelectedLabelForRegion(open: boolean): void {
-    if (this.mode !== "region" || !this.selectedTimeZoneItem || !this.comboboxEl?.selectedItems) {
+    if (this.mode !== "region" || !this.selectedTimeZoneItem) {
       return;
     }
 
     const { label, metadata } = this.selectedTimeZoneItem;
 
-    requestAnimationFrame(() => {
-      const itemLabel =
-        !metadata.country || open
-          ? label
-          : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
-      this.comboboxEl.selectedItems[0].textLabel = itemLabel;
-    });
+    this.comboboxEl.selectedItems[0].textLabel =
+      !metadata.country || open
+        ? label
+        : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
   }
 
   private onComboboxBeforeClose = (event: CustomEvent): void => {
@@ -409,7 +403,7 @@ export class InputTimeZone
       return;
     }
 
-    const selected = this.findTimeZoneItemByLabel(selectedItem.textLabel);
+    const selected = this.findTimeZoneItemByLabel(selectedItem.getAttribute("data-label"));
     const selectedValue = `${selected.value}`;
 
     if (this.value === selectedValue && selected.label === this.selectedTimeZoneItem.label) {
@@ -519,12 +513,12 @@ export class InputTimeZone
 
   componentDidLoad(): void {
     setComponentLoaded(this);
-    this.overrideSelectedLabelForRegion(this.open);
     this.openChanged();
   }
 
   componentDidRender(): void {
     updateHostInteraction(this);
+    this.overrideSelectedLabelForRegion(this.open);
   }
 
   render(): VNode {
@@ -574,15 +568,16 @@ export class InputTimeZone
 
     return this.timeZoneItems.map((group) => {
       const selected = this.selectedTimeZoneItem === group;
-      const { label, value } = group;
+      const { label, metadata, value } = group;
 
       return (
         <calcite-combobox-item
-          data-value={value}
+          data-label={label}
           key={label}
+          metadata={metadata}
           selected={selected}
           textLabel={label}
-          value={`${group.filterValue}`}
+          value={value}
         />
       );
     });
@@ -593,20 +588,20 @@ export class InputTimeZone
       <calcite-combobox-item-group key={label} label={label}>
         {items.map((item) => {
           const selected = this.selectedTimeZoneItem === item;
-          const { label, value } = item;
+          const { label, metadata, value } = item;
 
           return (
             <calcite-combobox-item
-              data-value={value}
-              description={item.metadata.country}
+              data-label={label}
+              description={metadata.country}
               key={label}
-              metadata={item.metadata}
+              metadata={metadata}
               selected={selected}
               textLabel={label}
-              value={`${item.filterValue}`}
+              value={value}
             >
               <span class={CSS.offset} slot="content-end">
-                {item.metadata.offset}
+                {metadata.offset}
               </span>
             </calcite-combobox-item>
           );
diff --git a/packages/calcite-components/src/components/input-time-zone/interfaces.d.ts b/packages/calcite-components/src/components/input-time-zone/interfaces.d.ts
index 2b13fdc0c0a..ecdd6d18d3c 100644
--- a/packages/calcite-components/src/components/input-time-zone/interfaces.d.ts
+++ b/packages/calcite-components/src/components/input-time-zone/interfaces.d.ts
@@ -22,10 +22,10 @@ export type TimeZoneMode = "offset" | "name" | "region";
 export interface TimeZoneItem<T extends number | string = number | string> {
   label: string;
   value: T;
-  filterValue: string | string[];
-  metadata?: {
-    offset?: string;
+  metadata: {
     country?: string;
+    filterValue: string | string[];
+    offset?: string;
   };
 }
 
diff --git a/packages/calcite-components/src/components/input-time-zone/utils.ts b/packages/calcite-components/src/components/input-time-zone/utils.ts
index da92beb981d..5d3084a7427 100644
--- a/packages/calcite-components/src/components/input-time-zone/utils.ts
+++ b/packages/calcite-components/src/components/input-time-zone/utils.ts
@@ -68,7 +68,9 @@ export async function createTimeZoneItems(
         return {
           label,
           value,
-          filterValue: timeZone,
+          metadata: {
+            filterValue: timeZone,
+          },
         };
       })
       .filter((group) => !!group)
@@ -93,29 +95,49 @@ export async function createTimeZoneItems(
 
     return groups
       .map<TimeZoneItemGroup>(({ label: region, tzs }) => {
+        tzs.sort((timeZoneA, timeZoneB) => {
+          const labeledTimeZoneA = getTimeZoneLabel(timeZoneA, messages);
+          const labeledTimeZoneB = getTimeZoneLabel(timeZoneB, messages);
+          const gmtTimeZoneString = "Etc/GMT";
+
+          if (timeZoneA.startsWith(gmtTimeZoneString) && timeZoneB.startsWith(gmtTimeZoneString)) {
+            // we use the IANA timezone for simpler and consistent sorting across locales
+            const offsetStringA = timeZoneA.substring(gmtTimeZoneString.length);
+            const offsetStringB = timeZoneB.substring(gmtTimeZoneString.length);
+
+            const offsetA = offsetStringA === "" ? 0 : parseInt(offsetStringA);
+            const offsetB = offsetStringB === "" ? 0 : parseInt(offsetStringB);
+
+            return offsetB - offsetA;
+          }
+
+          return labeledTimeZoneA.localeCompare(labeledTimeZoneB);
+        });
+
         return {
           label: getMessageOrKeyFallback(messages, region),
           items: tzs.map((timeZone) => {
             const decimalOffset = timeZoneOffsetToDecimal(
               getTimeZoneShortOffset(timeZone, effectiveLocale, referenceDateInMs),
             );
-            const filterValue =
-              toUserFriendlyName(timeZone) +
-              (region === globalLabel
-                ? // we add the global label as global group items do not have a unifying region/name
-                  getTimeZoneLabel(globalLabel, messages)
-                : "");
             const label = getTimeZoneLabel(timeZone, messages);
+            const filterValue =
+              region === globalLabel
+                ? // we rely on the label for search since GMT items have their signs inverted (see https://en.wikipedia.org/wiki/Tz_database#Area)
+                  // in addition to the label we also add "Global" and "Etc" to allow searching for these items
+                  `${getTimeZoneLabel(globalLabel, messages)} Etc`
+                : toUserFriendlyName(timeZone);
+
             const countryCode = getCountry(timeZone);
             const country = getMessageOrKeyFallback(messages, countryCode);
 
             return {
               label,
               value: timeZone,
-              filterValue,
               metadata: {
-                offset: decimalOffset,
                 country: country === label ? undefined : country,
+                filterValue,
+                offset: decimalOffset,
               },
             };
           }),
@@ -172,7 +194,9 @@ export async function createTimeZoneItems(
       return {
         label,
         value,
-        filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
+        metadata: {
+          filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
+        },
       };
     })
     .filter((group) => !!group)
diff --git a/packages/calcite-components/src/components/list-item/list-item.e2e.ts b/packages/calcite-components/src/components/list-item/list-item.e2e.ts
index f053f7b303f..c99dc7039dd 100755
--- a/packages/calcite-components/src/components/list-item/list-item.e2e.ts
+++ b/packages/calcite-components/src/components/list-item/list-item.e2e.ts
@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { defaults, disabled, focusable, hidden, renders, slots } from "../../tests/commonTests";
+import { defaults, disabled, focusable, hidden, reflects, renders, slots } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
@@ -56,6 +56,19 @@ describe("calcite-list-item", () => {
         propertyName: "filterHidden",
         defaultValue: false,
       },
+      {
+        propertyName: "unavailable",
+        defaultValue: false,
+      },
+    ]);
+  });
+
+  describe("reflects", () => {
+    reflects("calcite-list-item", [
+      {
+        propertyName: "unavailable",
+        value: true,
+      },
     ]);
   });
 
@@ -75,6 +88,20 @@ describe("calcite-list-item", () => {
     expect(await page.find(`calcite-list-item >>> .${CSS.containerHover}`)).not.toBeNull();
   });
 
+  it("adds unavailable class", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-list-item></calcite-list-item>`);
+    await page.waitForChanges();
+
+    expect(await page.find(`calcite-list-item >>> .${CSS.contentContainerUnavailable}`)).toBeNull();
+
+    const item = await page.find("calcite-list-item");
+    item.setProperty("unavailable", true);
+    await page.waitForChanges();
+
+    expect(await page.find(`calcite-list-item >>> .${CSS.contentContainerUnavailable}`)).not.toBeNull();
+  });
+
   it("renders dragHandle when property is true", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-list-item></calcite-list-item>`);
diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
index 2c40a7a9b2e..b2e7935a91e 100755
--- a/packages/calcite-components/src/components/list-item/list-item.scss
+++ b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -75,6 +75,10 @@
     p-0;
 }
 
+.content-container--unavailable {
+  @apply opacity-disabled;
+}
+
 tr,
 td {
   @apply focus-base;
diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
index 6485bd03225..660b100eb8a 100644
--- a/packages/calcite-components/src/components/list-item/list-item.tsx
+++ b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -196,6 +196,11 @@ export class ListItem
     this.calciteInternalListItemSelect.emit();
   }
 
+  /**
+   * When `true`, the component's content appears inactive.
+   */
+  @Prop({ reflect: true }) unavailable = false;
+
   /**
    * The component's value.
    */
@@ -613,7 +618,7 @@ export class ListItem
   }
 
   renderContentContainer(): VNode {
-    const { description, label, selectionMode, hasCustomContent } = this;
+    const { description, label, selectionMode, hasCustomContent, unavailable } = this;
     const hasCenterContent = hasCustomContent || !!label || !!description;
     const content = [
       this.renderContentStart(),
@@ -627,6 +632,7 @@ export class ListItem
         aria-label={label}
         class={{
           [CSS.contentContainer]: true,
+          [CSS.contentContainerUnavailable]: unavailable,
           [CSS.contentContainerSelectable]: selectionMode !== "none",
           [CSS.contentContainerHasCenterContent]: hasCenterContent,
         }}
diff --git a/packages/calcite-components/src/components/list-item/resources.ts b/packages/calcite-components/src/components/list-item/resources.ts
index 64609366ca1..115ba5b315d 100644
--- a/packages/calcite-components/src/components/list-item/resources.ts
+++ b/packages/calcite-components/src/components/list-item/resources.ts
@@ -7,6 +7,7 @@ export const CSS = {
   containerBorderSelected: "container--border-selected",
   containerBorderUnselected: "container--border-unselected",
   contentContainer: "content-container",
+  contentContainerUnavailable: "content-container--unavailable",
   contentContainerSelectable: "content-container--selectable",
   contentContainerHasCenterContent: "content-container--has-center-content",
   nestedContainer: "nested-container",
diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
index 95e2df2fbd5..6ff0683defd 100755
--- a/packages/calcite-components/src/components/list/list.e2e.ts
+++ b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -441,6 +441,53 @@ describe("calcite-list", () => {
     expect(selectedItemValues[1]).toBe("three");
   });
 
+  it("updating items after filtering", async () => {
+    const matchingFont = "Courier";
+
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <calcite-list filter-enabled filter-text="">
+        <calcite-list-item value="item1" label="${matchingFont}" description="list1"></calcite-list-item>
+        <calcite-list-item value="item2" label="${matchingFont} 2" description="list1"></calcite-list-item>
+        <calcite-list-item value="item3" label="Other Font" description="list1"></calcite-list-item>
+      </calcite-list>
+    `);
+    await page.waitForChanges();
+
+    const list = await page.find("calcite-list");
+    let visibleItems = await page.findAll("calcite-list-item:not([filter-hidden])");
+
+    expect(visibleItems).toHaveLength(3);
+    visibleItems.forEach(async (item) => {
+      expect(await item.getProperty("description")).toBe("list1");
+    });
+
+    list.setProperty("filterText", matchingFont);
+    await page.waitForChanges();
+    await page.waitForTimeout(DEBOUNCE.filter);
+
+    visibleItems = await page.findAll("calcite-list-item:not([filter-hidden])");
+    expect(visibleItems).toHaveLength(2);
+    visibleItems.forEach(async (item) => {
+      expect(await item.getProperty("description")).toBe("list1");
+    });
+
+    list.innerHTML = html`
+      <calcite-list-item value="item4" label="${matchingFont}" description="list2"></calcite-list-item>
+      <calcite-list-item value="item5" label="${matchingFont} 2" description="list2"></calcite-list-item>
+      <calcite-list-item value="item6" label="Other Font" description="list2"></calcite-list-item>
+    `;
+    await page.waitForChanges();
+    await page.waitForTimeout(DEBOUNCE.filter);
+
+    expect(await list.getProperty("filterText")).toBe(matchingFont);
+    visibleItems = await page.findAll("calcite-list-item:not([filter-hidden])");
+    expect(visibleItems).toHaveLength(2);
+    visibleItems.forEach(async (item) => {
+      expect(await item.getProperty("description")).toBe("list2");
+    });
+  });
+
   it("filters initially", async () => {
     const page = await newE2EPage();
     await page.setContent(html`
diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
index 00c1c921963..138720e2c21 100644
--- a/packages/calcite-components/src/components/list/list.stories.ts
+++ b/packages/calcite-components/src/components/list/list.stories.ts
@@ -90,6 +90,11 @@ export const simple = (args: ListStoryArgs): string => html`
       description="Vestibulum auctor dapibus neque.
     "
     ></calcite-list-item>
+    <calcite-list-item
+      unavailable
+      label="Vestibulum commodo felis quis tortor."
+      description="Vestibulum auctor dapibus neque."
+    ></calcite-list-item>
   </calcite-list>
 `;
 
@@ -286,6 +291,14 @@ export const startAndEndContentSlots = (): string =>
         <calcite-chip class="list-chip" icon="bell" scale="s">Halp!</calcite-chip>
       </div>
     </calcite-list-item>
+    <calcite-list-item unavailable>
+      <calcite-action slot="actions-end" icon="ellipsis"> </calcite-action>
+      <calcite-icon icon="user" scale="m" slot="content-start"></calcite-icon>
+      <span slot="content-start">Some value or something and a <b>thing</b>.</span>
+      <div slot="content-end" style="display: flex; justify-content: flex-end">
+        <calcite-chip class="list-chip" icon="bell" scale="s">Halp!</calcite-chip>
+      </div>
+    </calcite-list-item>
   </calcite-list> `;
 
 export const contentBottomSlots = (): string =>
@@ -299,6 +312,9 @@ export const contentBottomSlots = (): string =>
     <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
       <span slot="content-bottom">Some value or something and a <b>thing</b>.</span>
     </calcite-list-item>
+    <calcite-list-item unavailable label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
+      <span slot="content-bottom">Some value or something and a <b>thing</b>.</span>
+    </calcite-list-item>
   </calcite-list> `;
 
 export const contentBottomSlotsNested = (): string =>
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index f329e36f215..52a7f43dea2 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -163,7 +163,7 @@ export class List
   @Prop() filterProps: string[];
 
   @Watch("filterProps")
-  async handlefilterPropsChange(): Promise<void> {
+  async handleFilterPropsChange(): Promise<void> {
     this.performFilter();
   }
 
@@ -232,7 +232,7 @@ export class List
   @Watch("selectionMode")
   @Watch("selectionAppearance")
   handleListItemChange(): void {
-    this.updateListItems();
+    this.updateListItems({ performFilter: true });
   }
 
   //--------------------------------------------------------------------------
@@ -409,7 +409,7 @@ export class List
     connectLocalized(this);
     connectMessages(this);
     this.connectObserver();
-    this.updateListItems();
+    this.updateListItems({ performFilter: true });
     this.setUpSorting();
     this.setParentList();
   }
@@ -471,7 +471,9 @@ export class List
 
   listItems: HTMLCalciteListItemElement[] = [];
 
-  mutationObserver = createObserver("mutation", () => this.updateListItems());
+  mutationObserver = createObserver("mutation", () =>
+    this.updateListItems({ performFilter: true }),
+  );
 
   visibleItems: HTMLCalciteListItemElement[] = [];
 
@@ -807,10 +809,15 @@ export class List
       this.filteredData = filterEl.filteredItems as ItemData;
     }
 
-    this.updateListItems(emit);
+    this.updateListItems({ emitFilterChange: emit });
+  }
+
+  private async filterAndUpdateData(): Promise<void> {
+    await this.filterEl?.filter(this.filterText);
+    this.updateFilteredData();
   }
 
-  private async performFilter(): Promise<void> {
+  private performFilter(): void {
     const { filterEl, filterText, filterProps } = this;
 
     if (!filterEl) {
@@ -819,8 +826,7 @@ export class List
 
     filterEl.value = filterText;
     filterEl.filterProps = filterProps;
-    await filterEl.filter(filterText);
-    this.updateFilteredData();
+    this.filterAndUpdateData();
   }
 
   private setFilterEl = (el: HTMLCalciteFilterElement): void => {
@@ -844,39 +850,47 @@ export class List
     }));
   };
 
-  private updateListItems = debounce((emitFilterChange = false): void => {
-    const { selectionAppearance, selectionMode, dragEnabled, el } = this;
+  private updateListItems = debounce(
+    (options?: { emitFilterChange?: boolean; performFilter?: boolean }): void => {
+      const emitFilterChange = options?.emitFilterChange ?? false;
+      const performFilter = options?.performFilter ?? false;
+
+      const { selectionAppearance, selectionMode, dragEnabled, el, filterEl, filterEnabled } = this;
+
+      const items = Array.from(this.el.querySelectorAll(listItemSelector));
 
-    const items = Array.from(this.el.querySelectorAll(listItemSelector));
+      items.forEach((item) => {
+        item.selectionAppearance = selectionAppearance;
+        item.selectionMode = selectionMode;
+        if (item.closest("calcite-list") === el) {
+          item.dragHandle = dragEnabled;
+        }
+      });
 
-    items.forEach((item) => {
-      item.selectionAppearance = selectionAppearance;
-      item.selectionMode = selectionMode;
-      if (item.closest("calcite-list") === el) {
-        item.dragHandle = dragEnabled;
+      if (this.parentListEl) {
+        this.setUpSorting();
+        return;
       }
-    });
 
-    if (this.parentListEl) {
-      this.setUpSorting();
-      return;
-    }
+      this.listItems = items;
+      if (filterEnabled && performFilter) {
+        this.dataForFilter = this.getItemData();
 
-    this.listItems = items;
-    if (this.filterEnabled) {
-      this.dataForFilter = this.getItemData();
-      if (this.filterEl) {
-        this.filterEl.items = this.dataForFilter;
+        if (filterEl) {
+          filterEl.items = this.dataForFilter;
+          this.filterAndUpdateData();
+        }
       }
-    }
-    this.visibleItems = this.listItems.filter((item) => !item.closed && !item.hidden);
-    this.updateFilteredItems(emitFilterChange);
-    this.borderItems();
-    this.focusableItems = this.filteredItems.filter((item) => !item.disabled);
-    this.setActiveListItem();
-    this.updateSelectedItems();
-    this.setUpSorting();
-  }, debounceTimeout);
+      this.visibleItems = this.listItems.filter((item) => !item.closed && !item.hidden);
+      this.updateFilteredItems(emitFilterChange);
+      this.borderItems();
+      this.focusableItems = this.filteredItems.filter((item) => !item.disabled);
+      this.setActiveListItem();
+      this.updateSelectedItems();
+      this.setUpSorting();
+    },
+    debounceTimeout,
+  );
 
   private focusRow = (focusEl: HTMLCalciteListItemElement): void => {
     const { focusableItems } = this;
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/packages/calcite-components/src/components/menu-item/menu-item.tsx
index c3ce2236414..8fc26acba11 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.tsx
+++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx
@@ -14,7 +14,12 @@ import {
   Watch,
 } from "@stencil/core";
 import { FlipContext } from "../interfaces";
-import { Direction, getElementDir, slotChangeGetAssignedElements } from "../../utils/dom";
+import {
+  Direction,
+  getElementDir,
+  slotChangeGetAssignedElements,
+  toAriaBoolean,
+} from "../../utils/dom";
 import {
   componentFocusable,
   LoadableComponent,
@@ -470,8 +475,8 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
           <div class={CSS.itemContent}>
             <a
               aria-current={this.isFocused ? "page" : false}
-              aria-expanded={this.open}
-              aria-haspopup={this.hasSubmenu}
+              aria-expanded={toAriaBoolean(this.open)}
+              aria-haspopup={toAriaBoolean(this.hasSubmenu)}
               aria-label={this.label}
               class={{ [CSS.layoutVertical]: this.layout === "vertical", [CSS.content]: true }}
               href={this.href}
diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
index f9de3642e68..6eef2844cc4 100644
--- a/packages/calcite-components/src/components/panel/panel.e2e.ts
+++ b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -12,8 +12,10 @@ import {
   slots,
   t9n,
   themed,
+  handlesActionMenuPlacements,
 } from "../../tests/commonTests";
 import { GlobalTestProps } from "../../tests/utils";
+import { defaultEndMenuPlacement } from "../../utils/floating-ui";
 import { CSS, IDS, SLOTS } from "./resources";
 
 type TestWindow = GlobalTestProps<{
@@ -88,6 +90,14 @@ describe("calcite-panel", () => {
     hidden("calcite-panel");
   });
 
+  describe("handles action-menu placement and flipPlacements", () => {
+    handlesActionMenuPlacements(html`
+      <calcite-panel>
+        <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
+      </calcite-panel>
+    `);
+  });
+
   describe("defaults", () => {
     defaults("calcite-panel", [
       {
@@ -122,6 +132,14 @@ describe("calcite-panel", () => {
         propertyName: "scale",
         defaultValue: "m",
       },
+      {
+        propertyName: "menuPlacement",
+        defaultValue: defaultEndMenuPlacement,
+      },
+      {
+        propertyName: "menuFlipPlacements",
+        defaultValue: undefined,
+      },
     ]);
   });
 
@@ -143,6 +161,10 @@ describe("calcite-panel", () => {
         propertyName: "overlayPositioning",
         value: "fixed",
       },
+      {
+        propertyName: "menuPlacement",
+        value: "bottom",
+      },
     ]);
   });
 
@@ -654,6 +676,10 @@ describe("calcite-panel", () => {
         shadowSelector: `.${CSS.contentWrapper}`,
         targetProp: "padding",
       },
+      "--calcite-panel-background-color": {
+        shadowSelector: `.${CSS.contentWrapper}`,
+        targetProp: "backgroundColor",
+      },
     });
   });
 });
diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index db7b809c01d..2838acacdf2 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -6,6 +6,7 @@
  * @prop --calcite-panel-content-space: Specifies the padding of the component's content.
  * @prop --calcite-panel-footer-padding: Specifies the padding of the component's footer.
  * @prop --calcite-panel-header-border-block-end: Specifies the component header's block end border.
+ * @prop --calcite-panel-background-color: Specifies the background color of the component.
  */
 
 :host {
@@ -161,12 +162,12 @@
   flex-col
   flex-nowrap
   items-stretch
-  bg-background
   overflow-auto
   h-full
   focus-base
   relative;
   padding: var(--calcite-panel-content-space, 0);
+  background: var(--calcite-panel-background-color, var(--calcite-color-background));
 }
 
 .content-wrapper:focus-visible {
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index d6a48a5ecc3..9f318bbcd71 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -1,6 +1,7 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { defaultEndMenuPlacement, placements } from "../../utils/floating-ui";
 import { Panel } from "./panel";
 import { SLOTS } from "./resources";
 const { collapseDirection, scale } = ATTRIBUTES;
@@ -8,7 +9,15 @@ const { collapseDirection, scale } = ATTRIBUTES;
 interface PanelStoryArgs
   extends Pick<
     Panel,
-    "closed" | "disabled" | "closable" | "collapsed" | "collapsible" | "collapseDirection" | "loading" | "scale"
+    | "closed"
+    | "disabled"
+    | "closable"
+    | "collapsed"
+    | "collapsible"
+    | "collapseDirection"
+    | "loading"
+    | "scale"
+    | "menuPlacement"
   > {
   heightScale: string;
 }
@@ -16,6 +25,7 @@ interface PanelStoryArgs
 export default {
   title: "Components/Panel",
   args: {
+    menuPlacement: defaultEndMenuPlacement,
     closed: false,
     disabled: false,
     closable: false,
@@ -27,6 +37,10 @@ export default {
     loading: false,
   },
   argTypes: {
+    menuPlacement: {
+      options: placements,
+      control: { type: "select" },
+    },
     collapseDirection: {
       options: collapseDirection.values,
       control: { type: "select" },
@@ -91,6 +105,7 @@ export const simple = (args: PanelStoryArgs): string => html`
     heightScale="${args.heightScale}"
     scale="${args.scale}"
     ${boolean("loading", args.loading)}
+    menu-placement="${args.menuPlacement}"
     heading="Heading"
     description="A great panel description"
   >
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index cea9303e368..ec8498880bf 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -39,7 +39,12 @@ import {
   T9nComponent,
   updateMessages,
 } from "../../utils/t9n";
-import { OverlayPositioning } from "../../utils/floating-ui";
+import {
+  defaultEndMenuPlacement,
+  FlipPlacement,
+  LogicalPlacement,
+  OverlayPositioning,
+} from "../../utils/floating-ui";
 import { CollapseDirection } from "../interfaces";
 import { Scale } from "../interfaces";
 import { PanelMessages } from "./assets/panel/t9n";
@@ -130,11 +135,21 @@ export class Panel
   /** A description for the component. */
   @Prop() description: string;
 
+  /**
+   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.
+   */
+  @Prop() menuFlipPlacements: FlipPlacement[];
+
   /**
    * When `true`, the action menu items in the `header-menu-actions` slot are open.
    */
   @Prop({ reflect: true }) menuOpen = false;
 
+  /**
+   * Determines where the action menu will be positioned.
+   */
+  @Prop({ reflect: true }) menuPlacement: LogicalPlacement = defaultEndMenuPlacement;
+
   /**
    * Use this property to override individual strings used by the component.
    */
@@ -549,17 +564,17 @@ export class Panel
   }
 
   renderMenu(): VNode {
-    const { hasMenuItems, messages, menuOpen } = this;
+    const { hasMenuItems, messages, menuOpen, menuFlipPlacements, menuPlacement } = this;
 
     return (
       <calcite-action-menu
-        flipPlacements={["top", "bottom"]}
+        flipPlacements={menuFlipPlacements ?? ["top", "bottom"]}
         hidden={!hasMenuItems}
         key="menu"
         label={messages.options}
         open={menuOpen}
         overlayPositioning={this.overlayPositioning}
-        placement="bottom-end"
+        placement={menuPlacement}
       >
         <calcite-action
           icon={ICONS.menu}
diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts
index 9a078854371..29e8a2b11c2 100644
--- a/packages/calcite-components/src/components/popover/popover.e2e.ts
+++ b/packages/calcite-components/src/components/popover/popover.e2e.ts
@@ -11,6 +11,7 @@ import {
   t9n,
   themed,
 } from "../../tests/commonTests";
+import { FloatingCSS } from "../../utils/floating-ui";
 import { CSS } from "./resources";
 
 describe("calcite-popover", () => {
@@ -710,10 +711,16 @@ describe("calcite-popover", () => {
           </calcite-popover>
         `,
         {
-          "--calcite-popover-background-color": {
-            shadowSelector: `.${CSS.container}`,
-            targetProp: "backgroundColor",
-          },
+          "--calcite-popover-background-color": [
+            {
+              shadowSelector: `.${CSS.container}`,
+              targetProp: "backgroundColor",
+            },
+            {
+              shadowSelector: `.${FloatingCSS.arrow}`,
+              targetProp: "fill",
+            },
+          ],
           "--calcite-popover-border-color": [
             {
               shadowSelector: `.${CSS.container}`,
@@ -723,6 +730,10 @@ describe("calcite-popover", () => {
               shadowSelector: `.${CSS.header}`,
               targetProp: "borderBlockEndColor",
             },
+            {
+              shadowSelector: `.${FloatingCSS.arrowStroke}`,
+              targetProp: "stroke",
+            },
           ],
           "--calcite-popover-corner-radius": {
             shadowSelector: `.${CSS.container}`,
diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index 1314105f7dd..518dc9aee1e 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -3,11 +3,11 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-popover-background-color: Specifies the background color of the component.
- * @prop --calcite-popover-border-color: Specifies the border color of the component.
- * @prop --calcite-popover-corner-radius: Specifies the corner radius of the component.
- * @prop --calcite-popover-text-color: Specifies the text color of the component.
- * @prop --calcite-popover-z-index: Sets the z-index value for the component.
+ * @prop --calcite-popover-background-color: Specifies the component's background color.
+ * @prop --calcite-popover-border-color: Specifies the component's border color.
+ * @prop --calcite-popover-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-popover-text-color: Specifies the component's text color.
+ * @prop --calcite-popover-z-index: Specifies the component's z-index value.
  */
 
 :host {
@@ -58,6 +58,14 @@
   border-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
 }
 
+.calcite-floating-ui-arrow {
+  fill: var(--calcite-popover-background-color, var(--calcite-color-foreground-1));
+}
+
+.calcite-floating-ui-arrow__stroke {
+  stroke: var(--calcite-popover-border-color, var(--calcite-color-border-3));
+}
+
 .header {
   @apply flex
     flex-auto
@@ -89,11 +97,11 @@
     flex-row
     flex-nowrap
     rounded;
+  color: var(--calcite-popover-text-color, var(--calcite-color-text-1));
+
   &.has-header {
     @apply flex-col;
   }
-
-  color: var(--calcite-popover-text-color, var(--calcite-color-text-1));
 }
 
 .content {
diff --git a/packages/calcite-components/src/components/progress/progress.scss b/packages/calcite-components/src/components/progress/progress.scss
index 50877482ce2..0526478d6d7 100644
--- a/packages/calcite-components/src/components/progress/progress.scss
+++ b/packages/calcite-components/src/components/progress/progress.scss
@@ -3,9 +3,9 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-progress-background-color: Defines the background color of the component.
-* @prop --calcite-progress-fill-color: Defines the fill color of the progress bar.
-* @prop --calcite-progress-text-color: Defines the text color of the component.
+* @prop --calcite-progress-background-color: Specifies the component's background color.
+* @prop --calcite-progress-fill-color: Specifies the component's fill color.
+* @prop --calcite-progress-text-color: Specifies the component's text color.
 */
 
 @import "../../assets/styles/animation";
diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts b/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts
index 6ab935ac255..8a11f1ed836 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts
@@ -1,4 +1,4 @@
-import { E2EPage, newE2EPage } from "@stencil/core/testing";
+import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
 import {
   defaults,
@@ -380,17 +380,39 @@ describe("calcite-segmented-control", () => {
   });
 
   it("inheritable props: `appearance`, `layout`, and `scale` modified on the parent get passed to items", async () => {
+    async function inheritsProps(segmentedControlItems: E2EElement[]): Promise<void> {
+      for (const item of segmentedControlItems) {
+        expect(await item.getProperty("appearance")).toBe("outline");
+        expect(await item.getProperty("layout")).toBe("vertical");
+        expect(await item.getProperty("scale")).toBe("l");
+      }
+    }
+
     const page = await newE2EPage();
     await page.setContent(html`
-      <calcite-segmented-control appearance="outline" layout="vertical" scale="l"></calcite-segmented-control>
+      <calcite-segmented-control appearance="outline" layout="vertical" scale="l">
+        <calcite-segmented-control-item id="child-1" value="1">one</calcite-segmented-control-item>
+        <calcite-segmented-control-item id="child-2" value="2">two</calcite-segmented-control-item>
+        <calcite-segmented-control-item id="child-3" value="3">three</calcite-segmented-control-item>
+      </calcite-segmented-control>
     `);
-    const segmentedControlItems = await page.findAll("calcite-segmented-control-item");
+    await page.waitForChanges();
 
-    for (const item of segmentedControlItems) {
-      expect(await item.getProperty("appearance")).toBe("outline");
-      expect(await item.getProperty("layout")).toBe("vertical");
-      expect(await item.getProperty("scale")).toBe("l");
-    }
+    const segmentedControl = await page.find("calcite-segmented-control");
+
+    let segmentedControlItems = await page.findAll("calcite-segmented-control-item");
+    expect(segmentedControlItems).toHaveLength(3);
+    await inheritsProps(segmentedControlItems);
+
+    segmentedControl.innerHTML = html`
+      <calcite-segmented-control-item id="child-4" value="4">one</calcite-segmented-control-item>
+      <calcite-segmented-control-item id="child-5" value="5">two</calcite-segmented-control-item>
+    `;
+    await page.waitForChanges();
+
+    segmentedControlItems = await page.findAll("calcite-segmented-control-item");
+    expect(segmentedControlItems).toHaveLength(2);
+    await inheritsProps(segmentedControlItems);
   });
 
   describe("setFocus()", () => {
diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
index fb52158ddac..fb96cb4a527 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
@@ -11,7 +11,7 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { getElementDir, toAriaBoolean } from "../../utils/dom";
+import { getElementDir, slotChangeGetAssignedElements, toAriaBoolean } from "../../utils/dom";
 import {
   afterConnectDefaultValueSet,
   connectForm,
@@ -33,7 +33,6 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { Appearance, Layout, Scale, Status, Width } from "../interfaces";
-import { createObserver } from "../../utils/observers";
 import { Validation } from "../functional/Validation";
 import { IconNameOrString } from "../icon/interfaces";
 import { isBrowser } from "../../utils/browser";
@@ -98,7 +97,7 @@ export class SegmentedControl
 
   @Watch("value")
   valueHandler(value: string): void {
-    const items = this.getItems();
+    const { items } = this;
     items.forEach((item) => (item.checked = item.value === value));
   }
 
@@ -110,7 +109,7 @@ export class SegmentedControl
   @Prop({ mutable: true }) selectedItem: HTMLCalciteSegmentedControlItemElement;
 
   @Watch("selectedItem")
-  protected handleSelectedItemChange<T extends HTMLCalciteSegmentedControlItemElement>(
+  handleSelectedItemChange<T extends HTMLCalciteSegmentedControlItemElement>(
     newItem: T,
     oldItem: T,
   ): void {
@@ -118,7 +117,7 @@ export class SegmentedControl
     if (newItem === oldItem) {
       return;
     }
-    const items = this.getItems();
+    const { items } = this;
     const match = items.filter((item) => item === newItem).pop();
 
     if (match) {
@@ -169,7 +168,6 @@ export class SegmentedControl
 
   componentWillLoad(): void {
     setUpLoadableComponent(this);
-    this.setUpItems();
   }
 
   componentDidLoad(): void {
@@ -180,15 +178,11 @@ export class SegmentedControl
   connectedCallback(): void {
     connectLabel(this);
     connectForm(this);
-    this.mutationObserver?.observe(this.el, { childList: true });
-
-    this.handleItemPropChange();
   }
 
   disconnectedCallback(): void {
     disconnectLabel(this);
     disconnectForm(this);
-    this.mutationObserver?.unobserve(this.el);
   }
 
   componentDidRender(): void {
@@ -204,7 +198,7 @@ export class SegmentedControl
           class={CSS.itemWrapper}
         >
           <InteractiveContainer disabled={this.disabled}>
-            <slot />
+            <slot onSlotchange={this.handleDefaultSlotChange} />
             <HiddenFormInputSlot component={this} />
           </InteractiveContainer>
         </div>
@@ -227,7 +221,7 @@ export class SegmentedControl
   //
   //--------------------------------------------------------------------------
 
-  protected handleClick = (event: MouseEvent): void => {
+  private handleClick = (event: MouseEvent): void => {
     if (this.disabled) {
       return;
     }
@@ -238,7 +232,7 @@ export class SegmentedControl
   };
 
   @Listen("calciteInternalSegmentedControlItemChange")
-  protected handleSelected(event: Event): void {
+  handleSelected(event: Event): void {
     event.preventDefault();
     const el = event.target as HTMLCalciteSegmentedControlItemElement;
     if (el.checked) {
@@ -268,7 +262,7 @@ export class SegmentedControl
       }
     }
 
-    const items = this.getItems();
+    const { items } = this;
     let selectedIndex = -1;
 
     items.forEach((item, index) => {
@@ -321,7 +315,7 @@ export class SegmentedControl
   async setFocus(): Promise<void> {
     await componentFocusable(this);
 
-    (this.selectedItem || this.getItems()[0])?.focus();
+    (this.selectedItem || this.items[0])?.focus();
   }
 
   //--------------------------------------------------------------------------
@@ -332,16 +326,22 @@ export class SegmentedControl
 
   @Element() el: HTMLCalciteSegmentedControlElement;
 
+  private items: HTMLCalciteSegmentedControlItemElement[] = [];
+
   labelEl: HTMLCalciteLabelElement;
 
   formEl: HTMLFormElement;
 
   defaultValue: SegmentedControl["value"];
 
-  private mutationObserver = createObserver("mutation", () => this.setUpItems());
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
 
   private handleItemPropChange(): void {
-    const items = this.getItems();
+    const { items } = this;
 
     items.forEach((item) => {
       item.appearance = this.appearance;
@@ -350,18 +350,32 @@ export class SegmentedControl
     });
   }
 
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
+  private handleSelectedItem(): void {
+    const { items } = this;
 
-  onLabelClick(): void {
-    this.setFocus();
+    const lastChecked = items.filter((item) => item.checked).pop();
+
+    if (lastChecked) {
+      this.selectItem(lastChecked);
+    } else if (items[0]) {
+      items[0].tabIndex = 0;
+    }
   }
 
-  private getItems(): HTMLCalciteSegmentedControlItemElement[] {
-    return Array.from(this.el.querySelectorAll("calcite-segmented-control-item"));
+  private handleDefaultSlotChange = (event: Event): void => {
+    const items = slotChangeGetAssignedElements(event).filter(
+      (el): el is HTMLCalciteSegmentedControlItemElement =>
+        el.matches("calcite-segmented-control-item"),
+    );
+
+    this.items = items;
+
+    this.handleSelectedItem();
+    this.handleItemPropChange();
+  };
+
+  onLabelClick(): void {
+    this.setFocus();
   }
 
   private selectItem(selected: HTMLCalciteSegmentedControlItemElement, emit = false): void {
@@ -369,7 +383,7 @@ export class SegmentedControl
       return;
     }
 
-    const items = this.getItems();
+    const { items } = this;
     let match: HTMLCalciteSegmentedControlItemElement = null;
 
     items.forEach((item) => {
@@ -395,15 +409,4 @@ export class SegmentedControl
       match.focus();
     }
   }
-
-  private setUpItems(): void {
-    const items = this.getItems();
-    const lastChecked = items.filter((item) => item.checked).pop();
-
-    if (lastChecked) {
-      this.selectItem(lastChecked);
-    } else if (items[0]) {
-      items[0].tabIndex = 0;
-    }
-  }
 }
diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx
index 91e9fe2a746..65dfa5f0a3f 100644
--- a/packages/calcite-components/src/components/slider/slider.tsx
+++ b/packages/calcite-components/src/components/slider/slider.tsx
@@ -438,7 +438,6 @@ export class Slider
 
     return (
       <div
-        aria-disabled={this.disabled}
         aria-label={ariaLabel}
         aria-orientation="horizontal"
         aria-valuemax={this.max}
diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/packages/calcite-components/src/components/table-cell/table-cell.tsx
index fc2fb286338..27e4be9c61a 100644
--- a/packages/calcite-components/src/components/table-cell/table-cell.tsx
+++ b/packages/calcite-components/src/components/table-cell/table-cell.tsx
@@ -222,7 +222,6 @@ export class TableCell
       <Host>
         <InteractiveContainer disabled={this.disabled}>
           <td
-            aria-disabled={this.disabled}
             class={{
               [CSS.footerCell]: this.parentRowType === "foot",
               [CSS.contentCell]: !this.numberCell && !this.selectionCell,
@@ -244,11 +243,7 @@ export class TableCell
             tabIndex={staticCell ? -1 : 0}
           >
             {(this.selectionCell || this.readCellContentsToAT) && (
-              <span
-                aria-hidden={true}
-                aria-live={this.focused ? "polite" : "off"}
-                class={CSS.assistiveText}
-              >
+              <span aria-live={this.focused ? "polite" : "off"} class={CSS.assistiveText}>
                 {this.selectionCell && this.selectionText}
                 {this.readCellContentsToAT && !this.selectionCell && this.contentsText}
               </span>
diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx
index a5ea7bec4d9..f39778658e2 100644
--- a/packages/calcite-components/src/components/table-header/table-header.tsx
+++ b/packages/calcite-components/src/components/table-header/table-header.tsx
@@ -261,11 +261,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo
             />
           )}
           {(this.selectionCell || this.numberCell) && (
-            <span
-              aria-hidden={true}
-              aria-live={this.focused ? "polite" : "off"}
-              class={CSS.assistiveText}
-            >
+            <span aria-live={this.focused ? "polite" : "off"} class={CSS.assistiveText}>
               {this.screenReaderText}
             </span>
           )}
diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx
index 9c616ebce7b..9e2d841c6cf 100644
--- a/packages/calcite-components/src/components/table-row/table-row.tsx
+++ b/packages/calcite-components/src/components/table-row/table-row.tsx
@@ -13,7 +13,11 @@ import {
 } from "@stencil/core";
 import { LocalizedComponent } from "../../utils/locale";
 import { Alignment, Scale, SelectionMode } from "../interfaces";
-import { focusElementInGroup, FocusElementInGroupDestination } from "../../utils/dom";
+import {
+  focusElementInGroup,
+  FocusElementInGroupDestination,
+  toAriaBoolean,
+} from "../../utils/dom";
 import { RowType, TableInteractionMode, TableRowFocusEvent } from "../table/interfaces";
 import { isActivationKey } from "../../utils/key";
 import {
@@ -409,9 +413,8 @@ export class TableRow implements InteractiveComponent, LocalizedComponent {
       <Host>
         <InteractiveContainer disabled={this.disabled}>
           <tr
-            aria-disabled={this.disabled}
             aria-rowindex={this.positionAll + 1}
-            aria-selected={this.selected}
+            aria-selected={toAriaBoolean(this.selected)}
             class={{ [CSS.lastVisibleRow]: this.lastVisibleRow }}
             onKeyDown={this.keyDownHandler}
             ref={(el) => (this.tableRowEl = el)}
diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss
index 77c8cf070f0..5d2ef27d57c 100644
--- a/packages/calcite-components/src/components/text-area/text-area.scss
+++ b/packages/calcite-components/src/components/text-area/text-area.scss
@@ -3,17 +3,17 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-text-area-background-color: Specifies the background color of the component.
- * @prop --calcite-text-area-border-color: Specifies the border color of the text area.
- * @prop --calcite-text-area-character-limit-text-color: Specifies the color of the character limit text displayed in footer of the component.
+ * @prop --calcite-text-area-background-color: Specifies the component's background color.
+ * @prop --calcite-text-area-border-color: Specifies the component's text area border color.
+ * @prop --calcite-text-area-character-limit-text-color: Specifies the color of the character limit text displayed in the footer of the component.
  * @prop --calcite-text-area-divider-color: Specifies the color of the divider between the text area and footer.
- * @prop --calcite-text-area-font-size: Specifies the font size of the thext area and footer.
- * @prop --calcite-text-area-max-height: Specifies the the maximum height of the text area in the component.
- * @prop --calcite-text-area-min-height: Specifies the minimum height of the text area in the component.
- * @prop --calcite-text-area-max-width: Specifies the the maximum width of the text area in the component.
- * @prop --calcite-text-area-min-width: Specifies the minimum width of the text area in the component.
- * @prop --calcite-text-area-text-color: Specifies the color of text in the component.
- * @prop --calcite-text-area-footer-border-color: Specifies the border color of the footer.
+ * @prop --calcite-text-area-font-size: Specifies the font size of the text area and footer.
+ * @prop --calcite-text-area-max-height: Specifies the component's text area maximum height.
+ * @prop --calcite-text-area-min-height: Specifies the component's text area minimum height.
+ * @prop --calcite-text-area-max-width: Specifies the component's text area maximum width.
+ * @prop --calcite-text-area-min-width: Specifies the component's text area minimum width.
+ * @prop --calcite-text-area-text-color: Specifies the component's text color.
+ * @prop --calcite-text-area-footer-border-color: Specifies the footer's border color.
  */
 
 :host {
@@ -62,10 +62,7 @@
   }
 
   &.text-area--invalid {
-    --calcite-internal-text-area-border-color: var(
-      --calcite-text-area-border-color,
-      var(--calcite-color-status-danger)
-    );
+    --calcite-internal-text-area-border-color: var(--calcite-color-status-danger);
 
     &:focus {
       @apply focus-inset-danger;
@@ -192,7 +189,7 @@
 }
 
 :host([status="invalid"]) {
-  --calcite-internal-text-area-border-color: var(--calcite-text-area-border-color, var(--calcite-color-status-danger));
+  --calcite-internal-text-area-border-color: var(--calcite-color-status-danger);
 
   .text-area:focus {
     @apply focus-inset-danger;
diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx
index e9562989af4..fe68f538946 100644
--- a/packages/calcite-components/src/components/text-area/text-area.tsx
+++ b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -366,7 +366,7 @@ export class TextArea
           </footer>
           <HiddenFormInputSlot component={this} />
           {this.isCharacterLimitExceeded() && (
-            <span aria-hidden={true} aria-live="polite" class={CSS.assistiveText} id={this.guid}>
+            <span aria-live="polite" class={CSS.assistiveText} id={this.guid}>
               {this.replacePlaceHoldersInMessages()}
             </span>
           )}
diff --git a/packages/calcite-components/src/components/tip-manager/tip-manager.scss b/packages/calcite-components/src/components/tip-manager/tip-manager.scss
index aaeb6652eaa..d1ce9c0a559 100644
--- a/packages/calcite-components/src/components/tip-manager/tip-manager.scss
+++ b/packages/calcite-components/src/components/tip-manager/tip-manager.scss
@@ -14,11 +14,11 @@
   box-border
   block;
 
+  --calcite-tip-manager-height: 19vh;
+
   * {
     @apply box-border;
   }
-
-  --calcite-tip-manager-height: 19vh;
 }
 
 :host([closed]) {
diff --git a/packages/calcite-components/src/components/tooltip/TooltipManager.ts b/packages/calcite-components/src/components/tooltip/TooltipManager.ts
index 302841ebb1e..157e46ecffb 100644
--- a/packages/calcite-components/src/components/tooltip/TooltipManager.ts
+++ b/packages/calcite-components/src/components/tooltip/TooltipManager.ts
@@ -22,6 +22,8 @@ export default class TooltipManager {
 
   private registeredElementCount = 0;
 
+  private clickedTooltip: HTMLCalciteTooltipElement = null;
+
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -100,11 +102,17 @@ export default class TooltipManager {
       return;
     }
 
+    if (tooltip === this.clickedTooltip) {
+      return;
+    }
+
     if (tooltip) {
       this.openHoveredTooltip(tooltip);
     } else if (activeTooltip?.open) {
       this.closeHoveredTooltip();
     }
+
+    this.clickedTooltip = null;
   };
 
   private pathHasOpenTooltip(tooltip: HTMLCalciteTooltipElement, composedPath: EventTarget[]): boolean {
@@ -116,6 +124,7 @@ export default class TooltipManager {
   }
 
   private clickHandler = (event: Event): void => {
+    this.clickedTooltip = null;
     const composedPath = event.composedPath();
     const tooltip = this.queryTooltip(composedPath);
 
@@ -133,6 +142,7 @@ export default class TooltipManager {
     this.clearHoverTimeout();
 
     if (tooltip.closeOnClick) {
+      this.clickedTooltip = tooltip;
       this.toggleTooltip(tooltip, false);
       return;
     }
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
index ab7770609c8..ab3b5a6a4a2 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
@@ -661,6 +661,14 @@ describe("calcite-tooltip", () => {
     await page.waitForChanges();
 
     expect(await tooltip.getProperty("open")).toBe(false);
+
+    await referenceElement.hover();
+
+    await page.waitForTimeout(TOOLTIP_OPEN_DELAY_MS);
+
+    await page.waitForChanges();
+
+    expect(await tooltip.getProperty("open")).toBe(false);
   });
 
   it("should close tooltip when closeOnClick is true and referenceElement is clicked quickly", async () => {
diff --git a/packages/calcite-components/src/components/tree/tree.tsx b/packages/calcite-components/src/components/tree/tree.tsx
index deaf636d865..6f07c8e5d91 100644
--- a/packages/calcite-components/src/components/tree/tree.tsx
+++ b/packages/calcite-components/src/components/tree/tree.tsx
@@ -9,7 +9,7 @@ import {
   Prop,
   VNode,
 } from "@stencil/core";
-import { focusElement, nodeListToArray } from "../../utils/dom";
+import { focusElement, nodeListToArray, toAriaBoolean } from "../../utils/dom";
 import { Scale, SelectionMode } from "../interfaces";
 import { TreeItemSelectDetail } from "../tree-item/interfaces";
 import { getTraversableItems, isTreeItem } from "./utils";
@@ -88,9 +88,9 @@ export class Tree {
         aria-multiselectable={
           this.child
             ? undefined
-            : (
-                this.selectionMode === "multiple" || this.selectionMode === "multichildren"
-              ).toString()
+            : toAriaBoolean(
+                this.selectionMode === "multiple" || this.selectionMode === "multichildren",
+              )
         }
         onKeyDown={this.keyDownHandler}
         role={!this.child ? "tree" : undefined}
diff --git a/packages/calcite-components/src/demos/list.html b/packages/calcite-components/src/demos/list.html
index 92e783add62..330842570b0 100644
--- a/packages/calcite-components/src/demos/list.html
+++ b/packages/calcite-components/src/demos/list.html
@@ -90,7 +90,14 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
                 --calcite-color-status-success
               ></calcite-icon>
             </calcite-list-item>
-            <calcite-list-item disabled label="test4" value="test4" description="hello world 4">
+            <calcite-list-item disabled label="test4" value="test4" description="hello world 4: disabled">
+              <calcite-icon
+                icon="compass"
+                slot="content-start"
+                style="color: var(--calcite-color-status-success)"
+              ></calcite-icon>
+            </calcite-list-item>
+            <calcite-list-item unavailable label="test4" value="test5" description="hello world 5: unavailable">
               <calcite-icon
                 icon="compass"
                 slot="content-start"
diff --git a/packages/calcite-components/src/tests/commonTests/floatingUI.ts b/packages/calcite-components/src/tests/commonTests/floatingUI.ts
index cb647efefed..51abd84f11a 100644
--- a/packages/calcite-components/src/tests/commonTests/floatingUI.ts
+++ b/packages/calcite-components/src/tests/commonTests/floatingUI.ts
@@ -132,3 +132,38 @@ export async function delegatesToFloatingUiOwningComponent(
     expect(await floatingUiOwningComponent.getProperty("overlayPositioning")).toBe("fixed");
   });
 }
+
+/**
+ * Helper to test if a component has a calcite-action-menu wired up correctly with placement and flipPlacements.
+ *
+ * @example
+ * describe("handles action-menu placement and flipPlacements", () => {
+ *   handlesActionMenuPlacements(html`
+ *    <calcite-panel placement="top">
+ *      <calcite-action text="test" icon="banana" slot="${SLOTS.headerMenuActions}"></calcite-action>
+ *     </calcite-panel>
+ *   `);
+ * });
+ *
+ * @param componentTagOrHTML - The component tag or HTML markup to test against.
+ */
+export async function handlesActionMenuPlacements(componentTagOrHTML: TagOrHTML): Promise<void> {
+  it("handles placement and flipPlacements", async () => {
+    const page = await simplePageSetup(componentTagOrHTML);
+    const tag = getTag(componentTagOrHTML);
+
+    await page.waitForChanges();
+
+    const flipPlacements = ["top", "bottom"];
+
+    const component = await page.find(tag);
+    component.setProperty("menuFlipPlacements", flipPlacements);
+    component.setProperty("menuPlacement", "top");
+    await page.waitForChanges();
+
+    const actionMenu = await page.find(`${tag} >>> calcite-action-menu`);
+
+    expect(await actionMenu.getProperty("placement")).toBe("top");
+    expect(await actionMenu.getProperty("flipPlacements")).toEqual(flipPlacements);
+  });
+}
diff --git a/packages/calcite-components/src/tests/commonTests/index.ts b/packages/calcite-components/src/tests/commonTests/index.ts
index f4e7e12baae..5842da83559 100644
--- a/packages/calcite-components/src/tests/commonTests/index.ts
+++ b/packages/calcite-components/src/tests/commonTests/index.ts
@@ -5,7 +5,7 @@ export { reflects } from "./reflects";
 export { renders } from "./renders";
 export { disabled } from "./disabled";
 export { hidden } from "./hidden";
-export { floatingUIOwner, delegatesToFloatingUiOwningComponent } from "./floatingUI";
+export { floatingUIOwner, delegatesToFloatingUiOwningComponent, handlesActionMenuPlacements } from "./floatingUI";
 export { focusable } from "./focusable";
 export { formAssociated } from "./formAssociated";
 export { slots } from "./slots";
diff --git a/packages/calcite-components/src/tests/commonTests/themed.ts b/packages/calcite-components/src/tests/commonTests/themed.ts
index e2045c7fb90..5667ec25a84 100644
--- a/packages/calcite-components/src/tests/commonTests/themed.ts
+++ b/packages/calcite-components/src/tests/commonTests/themed.ts
@@ -174,7 +174,7 @@ export function themed(componentTestSetup: ComponentTestSetup, tokens: Component
   });
 }
 
-type ContextSelectByAttr = { attribute: string; value: string | RegExp };
+type ContextSelectByAttr = { attribute: string; value: string };
 
 type CSSProp = Extract<keyof CSSStyleDeclaration, string>;
 
@@ -303,16 +303,13 @@ async function assertThemedProps(page: E2EPage, options: TestTarget): Promise<vo
       const searchInShadowDom = (node: Node): HTMLElement | SVGElement | Node | undefined => {
         const { attribute, value } = context as {
           attribute: string;
-          value: string | RegExp;
+          value: string;
         };
         if (node.nodeType === 1) {
           const attr = (node as Element).getAttribute(attribute);
           if (typeof value === "string" && attr === value) {
             return node;
           }
-          if (value instanceof RegExp && attr && value.test(attr)) {
-            return node ?? undefined;
-          }
           if (attr === value) {
             return node;
           }
diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts
index ad5faedea05..43503148793 100644
--- a/packages/calcite-components/src/utils/floating-ui.ts
+++ b/packages/calcite-components/src/utils/floating-ui.ts
@@ -271,6 +271,7 @@ export type MenuPlacement = Extract<
 >;
 
 export const defaultMenuPlacement: MenuPlacement = "bottom-start";
+export const defaultEndMenuPlacement: MenuPlacement = "bottom-end";
 
 export interface FloatingUIComponent {
   /**
@@ -319,6 +320,8 @@ export type FloatingLayout = Extract<Layout, "vertical" | "horizontal">;
 export const FloatingCSS = {
   animation: "calcite-floating-ui-anim",
   animationActive: "calcite-floating-ui-anim--active",
+  arrow: "calcite-floating-ui-arrow",
+  arrowStroke: "calcite-floating-ui-arrow__stroke",
 };
 
 function getMiddleware({
diff --git a/packages/calcite-ui-icons/docs/keywords.json b/packages/calcite-ui-icons/docs/keywords.json
index 1feb93e4586..67416a8edfb 100644
--- a/packages/calcite-ui-icons/docs/keywords.json
+++ b/packages/calcite-ui-icons/docs/keywords.json
@@ -9006,6 +9006,11 @@
     "category": "GIS",
     "release": "3.32.0"
   },
+  "parcel-parameter": {
+    "alias": ["3.32.0", "gis", "feature", "data", "points", "lines", "assets"],
+    "category": "GIS",
+    "release": "3.32.0"
+  },
   "n-variable": {
     "alias": ["3.32.0", "text", "variables", "math", "calculation", "letter"],
     "category": "Text",
@@ -9015,5 +9020,10 @@
     "alias": ["3.32.0", "gis", "forms", "variable", "text", "letter"],
     "category": "GIS",
     "release": "3.32.0"
+  },
+  "dashboard-graph": {
+    "alias": ["3.32.0", "windows", "measure", "objects", "statistics", "measurements"],
+    "category": "Windows",
+    "release": "3.32.0"
   }
 }
diff --git a/packages/calcite-ui-icons/icons/dashboard-graph-16.svg b/packages/calcite-ui-icons/icons/dashboard-graph-16.svg
new file mode 100755
index 00000000000..03858d0fb9c
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/dashboard-graph-16.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M0 1v14h16V1H0zm15 13H1V5h14v9zm0-10h-1V3h-1v1H1V2h14v2zm-5 3v6h3V7h-3zm2 5h-1V8h1v4zm-6 1h3V6H6v7zm1-6h1v5H7V7zm-5 6h3V9H2v4zm1-3h1v2H3v-2z"/><path fill="none" d="M0 0h16v16H0z"/></svg>
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/dashboard-graph-24.svg b/packages/calcite-ui-icons/icons/dashboard-graph-24.svg
new file mode 100755
index 00000000000..833647c38d4
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/dashboard-graph-24.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 6h-1V5h1v1zm2-3v18H1V3h22zM2 4v3h20V4H2zm20 16V8H2v12h20zm-7-9h4v8h-4v-8zm1 7h2v-6h-2v6zm-6-9h4v10h-4V9zm1 9h2v-8h-2v8zm-6-5h4v6H5v-6zm1 5h2v-4H6v4z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/dashboard-graph-32.svg b/packages/calcite-ui-icons/icons/dashboard-graph-32.svg
new file mode 100755
index 00000000000..8d29cfa050f
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/dashboard-graph-32.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27 8h-1V7h1v1zm3-3v23H2V5h28zM3 6v4h26V6H3zm26 21V11H3v16h26zm-9-12h4v10h-4V15zm1 9h2v-8h-2v8zm-7-11h4v12h-4V13zm1 11h2V14h-2v10zm-7-6h4v7H8v-7zm1 6h2v-5H9v5z"/><path fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/parcel-parameter-16.svg b/packages/calcite-ui-icons/icons/parcel-parameter-16.svg
new file mode 100755
index 00000000000..1f3b361915a
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/parcel-parameter-16.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" d="M0 0h16v16H0z"/><path d="M7 7H6V6h1v1zm-7 3v3h3v-1h2.026a9.9 9.9 0 0 1 .097-1H3v-1H2V3h1V2h7v1h1v3h-1v2h3V6h-1V3h1V0h-3v1H3V0H0v3h1v7H0zm15.276 5.991c.459-1.02.719-2.212.719-3.491 0-1.5-.36-2.882-.975-4.004h-1.15c.7 1.037 1.134 2.448 1.134 4.004 0 1.313-.311 2.522-.828 3.491h1.1zm-7.452 0c-.517-.97-.828-2.178-.828-3.491 0-1.556.434-2.967 1.134-4.004H6.98C6.365 9.618 6.005 11 6.005 12.5c0 1.278.26 2.47.72 3.491h1.1zM13.603 15l-1.983-2.5 1.982-2.5h-1.276l-1.344 1.695L9.638 10H8.362l1.982 2.5L8.362 15h1.276l1.344-1.696L12.327 15h1.276z"/></svg>
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/parcel-parameter-24.svg b/packages/calcite-ui-icons/icons/parcel-parameter-24.svg
new file mode 100755
index 00000000000..33c82116560
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/parcel-parameter-24.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.044 17c-.026.35-.044.69-.044 1H4v1H1v-3h1V4H1V1h3v1h12V1h3v3h-1v5h1v3h-2.593l-1 1h-1.414L16 10.993V9h1V4h-1V3H4v1H3v12h1v1h4.044zM9 9v2h2V9H9zm8.157 9l2.856-4H18.7l-2.2 3.08L14.3 14h-1.313l2.856 4-2.856 4H14.3l2.2-3.08L18.7 22h1.313l-2.856-4zm4.299-6C22.42 13.371 23 16.109 23 18s-.58 4.629-1.544 6h1.191c.854-1.431 1.303-4.15 1.303-6s-.45-4.569-1.303-6h-1.191zM10 18c0-1.891.58-4.629 1.544-6h-1.191C9.499 13.431 9 16.15 9 18s.5 4.569 1.353 6h1.191C10.58 22.629 10 19.891 10 18z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
\ No newline at end of file
diff --git a/packages/calcite-ui-icons/icons/parcel-parameter-32.svg b/packages/calcite-ui-icons/icons/parcel-parameter-32.svg
new file mode 100755
index 00000000000..5d103fc5da3
--- /dev/null
+++ b/packages/calcite-ui-icons/icons/parcel-parameter-32.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="none" d="M0 0h32v32H0z"/><path d="M11.137 21a23.5 23.5 0 0 0-.084 1H5v1H2v-3h1V5H2V2h3v1h15V2h3v3h-1v6h1v3h-1.593l-2 2h-1.414L20 13.993V11h1V5h-1V4H5v1H4v15h1v1h6.137zM11 13h2v-2h-2v2zm14.375 4L21.5 22.167 17.625 17h-1.25l4.5 6-4.5 6h1.25l3.875-5.167L25.375 29h1.25l-4.5-6 4.5-6h-1.25zm2.807-2c1.15 2.353 1.833 5.319 1.833 8.547 0 2.746-.494 5.3-1.35 7.453h1.05c.827-2.192 1.282-4.734 1.282-7.453 0-3.185-.63-6.13-1.734-8.547h-1.081zm-15.185 8.547c0-3.228.693-6.194 1.843-8.547h-1.082c-1.104 2.417-1.752 5.362-1.752 8.547 0 2.72.473 5.261 1.3 7.453h1.05c-.856-2.152-1.359-4.707-1.359-7.453z"/></svg>
\ No newline at end of file
diff --git a/packages/eslint-plugin-calcite-components/docs/enforce-ref-last-prop.md b/packages/eslint-plugin-calcite-components/docs/enforce-ref-last-prop.md
index 55528ecd2f7..c54081ede54 100644
--- a/packages/eslint-plugin-calcite-components/docs/enforce-ref-last-prop.md
+++ b/packages/eslint-plugin-calcite-components/docs/enforce-ref-last-prop.md
@@ -1,5 +1,7 @@
 # enforce-ref-last-prop
 
+**Deprecated** This rule is deprecated and will be removed in a future release. It is no longer needed if you are using Stencil 4.14.1 or greater.
+
 This ensures the node passed into the `ref` callback is in sync with its JSX attributes/properties when invoked.
 
 Placing `ref` last helps work around a [Stencil bug](https://github.com/ionic-team/stencil/issues/4074) where the `ref` callback is invoked in the specified order and not after initializing the element with all its attributes/properties. This can cause attributes/properties to be outdated by the time the callback is invoked.
diff --git a/packages/eslint-plugin-calcite-components/src/rules/enforce-ref-last-prop.ts b/packages/eslint-plugin-calcite-components/src/rules/enforce-ref-last-prop.ts
index 17a040121ef..3d6776b2dd2 100644
--- a/packages/eslint-plugin-calcite-components/src/rules/enforce-ref-last-prop.ts
+++ b/packages/eslint-plugin-calcite-components/src/rules/enforce-ref-last-prop.ts
@@ -3,6 +3,7 @@ import type { JSXAttribute, JSXOpeningElement, JSXSpreadAttribute } from "@babel
 
 const rule: Rule.RuleModule = {
   meta: {
+    deprecated: true,
     docs: {
       description: `This ensures the node passed into the ref callback is in sync with its JSX attributes/properties when invoked.`,
       recommended: true,
diff --git a/release-please-config.json b/release-please-config.json
index 9a78a7c49df..c74072f6a59 100644
--- a/release-please-config.json
+++ b/release-please-config.json
@@ -4,6 +4,20 @@
   "tag-separator": "@",
   "draft-pull-request": true,
   "include-v-in-tag": false,
+  "changelog-sections": [
+    { "type": "feat", "section": "Features" },
+    { "type": "fix", "section": "Bug Fixes" },
+    { "type": "perf", "section": "Performance Improvements" },
+    { "type": "revert", "section": "Reverts", "hidden": true },
+    { "type": "deprecate", "section": "Deprecations" },
+    { "type": "docs", "section": "Documentation", "hidden": true },
+    { "type": "style", "section": "Styles", "hidden": true },
+    { "type": "chore", "section": "Miscellaneous Chores", "hidden": true },
+    { "type": "refactor", "section": "Code Refactoring", "hidden": true },
+    { "type": "test", "section": "Tests", "hidden": true },
+    { "type": "build", "section": "Build System", "hidden": true },
+    { "type": "ci", "section": "Continuous Integration", "hidden": true }
+  ],
   "packages": {
     "packages/calcite-components": {
       "component": "@esri/calcite-components",