From d37919efda56208b5a231e4ed397ffc9ba6f17a9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 14 Dec 2022 21:38:47 +0000
Subject: [PATCH 01/21] 1.0.0-next.679

---
 CHANGELOG.md      | 28 +++++++++++++++-------------
 package-lock.json |  4 ++--
 package.json      |  2 +-
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index be4690b996e..ac9cbb89e4d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -337,25 +337,27 @@ Removed the event `calcitePaginationUpdate` event, use
 
 ### Features
 
-- **dropdown-item:** Add `calciteDropdownItemSelect` event ([#6015](https://github.com/Esri/calcite-components/issues/6015)) ([b565ac9](https://github.com/Esri/calcite-components/commit/b565ac97e0d8b63527767fa10a75dce78d7f5a4b)), closes [#5940](https://github.com/Esri/calcite-components/issues/5940) [#5940](https://github.com/Esri/calcite-components/issues/5940)
+- add built-in translations ([#5471](https://github.com/Esri/calcite-components/issues/5471)) ([d754b29](https://github.com/Esri/calcite-components/commit/d754b29467d40f8081eb7793fb13c1b4de9f7ebf)), closes [#4961](https://github.com/Esri/calcite-components/issues/4961)
 
-- **input, input-number, input-text:** add inputMode and enterKeyHint properties ([#5976](https://github.com/Esri/calcite-components/issues/5976)) ([d567a9f](https://github.com/Esri/calcite-components/commit/d567a9fde5b3619f308133555ba0bae20ca85168)), closes [#5917](https://github.com/Esri/calcite-components/issues/5917)
+* **dropdown-item:** Add `calciteDropdownItemSelect` event ([#6015](https://github.com/Esri/calcite-components/issues/6015)) ([b565ac9](https://github.com/Esri/calcite-components/commit/b565ac97e0d8b63527767fa10a75dce78d7f5a4b)), closes [#5940](https://github.com/Esri/calcite-components/issues/5940) [#5940](https://github.com/Esri/calcite-components/issues/5940)
 
-- **action:** add built-in translation support for indicator text ([#5895](https://github.com/Esri/calcite-components/issues/5895)) ([704db6d](https://github.com/Esri/calcite-components/commit/704db6dfbe3a875fbd5b20c9b0eb0975aca24258)), closes [#4813](https://github.com/Esri/calcite-components/issues/4813)
+* **input, input-number, input-text:** add inputMode and enterKeyHint properties ([#5976](https://github.com/Esri/calcite-components/issues/5976)) ([d567a9f](https://github.com/Esri/calcite-components/commit/d567a9fde5b3619f308133555ba0bae20ca85168)), closes [#5917](https://github.com/Esri/calcite-components/issues/5917)
 
-- **list-item:** Add content slot for specialized content ([#5876](https://github.com/Esri/calcite-components/issues/5876)) ([a510773](https://github.com/Esri/calcite-components/commit/a510773ba87994010e84184f7709c84ce40f2d2c)), closes [#3032](https://github.com/Esri/calcite-components/issues/3032) [#3032](https://github.com/Esri/calcite-components/issues/3032)
+* **action:** add built-in translation support for indicator text ([#5895](https://github.com/Esri/calcite-components/issues/5895)) ([704db6d](https://github.com/Esri/calcite-components/commit/704db6dfbe3a875fbd5b20c9b0eb0975aca24258)), closes [#4813](https://github.com/Esri/calcite-components/issues/4813)
 
-- **textarea:** add default message bundle ([#5870](https://github.com/Esri/calcite-components/issues/5870)) ([c7a8495](https://github.com/Esri/calcite-components/commit/c7a84955b4f3cd09dbf7315ea59e0edaa7be2a6c)), closes [#863](https://github.com/Esri/calcite-components/issues/863)
+* **list-item:** Add content slot for specialized content ([#5876](https://github.com/Esri/calcite-components/issues/5876)) ([a510773](https://github.com/Esri/calcite-components/commit/a510773ba87994010e84184f7709c84ce40f2d2c)), closes [#3032](https://github.com/Esri/calcite-components/issues/3032) [#3032](https://github.com/Esri/calcite-components/issues/3032)
 
-- **input, input-text, input-number:** add attributes autocomplete, accept, multiple, pattern ([#5807](https://github.com/Esri/calcite-components/issues/5807)) ([feb4fce](https://github.com/Esri/calcite-components/commit/feb4fce9528920041d836446ef437f0f1c0e8ce2)), closes [#4079](https://github.com/Esri/calcite-components/issues/4079)
+* **textarea:** add default message bundle ([#5870](https://github.com/Esri/calcite-components/issues/5870)) ([c7a8495](https://github.com/Esri/calcite-components/commit/c7a84955b4f3cd09dbf7315ea59e0edaa7be2a6c)), closes [#863](https://github.com/Esri/calcite-components/issues/863)
 
-- **alert:** support actions-end ([#5750](https://github.com/Esri/calcite-components/issues/5750)) ([2447e16](https://github.com/Esri/calcite-components/commit/2447e167eb731f3a59775a5692530137bf9a70fd))
-- **list, list-item, list-item-group:** Adds support for selecting and filtering list items. Improves accessibility by using aria "treegrid" role. ([#4527](https://github.com/Esri/calcite-components/issues/4527)) ([f489c57](https://github.com/Esri/calcite-components/commit/f489c57095ec21df1f427176d2d635675eea95d3))
-- **pick-list, value-list:** Add calciteListFilter event, filteredItems prop, filterText prop and filteredData prop. ([#5681](https://github.com/Esri/calcite-components/issues/5681)) ([943d208](https://github.com/Esri/calcite-components/commit/943d2088b7cf447a12ebcd0babab145f543538a2)), closes [#4333](https://github.com/Esri/calcite-components/issues/4333)
-- **popover:** Add focus-trap to popover and disableFocusTrap property. ([#5725](https://github.com/Esri/calcite-components/issues/5725)) ([a8ef353](https://github.com/Esri/calcite-components/commit/a8ef353bc031630b373f2bdd1bdc1cafd7e35be9)), closes [#2133](https://github.com/Esri/calcite-components/issues/2133)
-- **popover:** Escape key should close open popovers. ([#5726](https://github.com/Esri/calcite-components/issues/5726)) ([2e2621d](https://github.com/Esri/calcite-components/commit/2e2621d57c4701f7a7e84f74d801c543ad4f45c0))
-- **tabs:** Add support for navigating with Home and End keys ([#5727](https://github.com/Esri/calcite-components/issues/5727)) ([823c429](https://github.com/Esri/calcite-components/commit/823c429439ec9f8cd1d6a1ff2aedf0b2da9c741b)), closes [#5661](https://github.com/Esri/calcite-components/issues/5661)
-- **tooltip:** Add tooltip open, close, beforeOpen, and beforeClose events ([#5772](https://github.com/Esri/calcite-components/issues/5772)) ([64b5675](https://github.com/Esri/calcite-components/commit/64b56751d68f69d31ea943415f5d0d08bae634cc)), closes [#5734](https://github.com/Esri/calcite-components/issues/5734)
+* **input, input-text, input-number:** add attributes autocomplete, accept, multiple, pattern ([#5807](https://github.com/Esri/calcite-components/issues/5807)) ([feb4fce](https://github.com/Esri/calcite-components/commit/feb4fce9528920041d836446ef437f0f1c0e8ce2)), closes [#4079](https://github.com/Esri/calcite-components/issues/4079)
+
+* **alert:** support actions-end ([#5750](https://github.com/Esri/calcite-components/issues/5750)) ([2447e16](https://github.com/Esri/calcite-components/commit/2447e167eb731f3a59775a5692530137bf9a70fd))
+* **list, list-item, list-item-group:** Adds support for selecting and filtering list items. Improves accessibility by using aria "treegrid" role. ([#4527](https://github.com/Esri/calcite-components/issues/4527)) ([f489c57](https://github.com/Esri/calcite-components/commit/f489c57095ec21df1f427176d2d635675eea95d3))
+* **pick-list, value-list:** Add calciteListFilter event, filteredItems prop, filterText prop and filteredData prop. ([#5681](https://github.com/Esri/calcite-components/issues/5681)) ([943d208](https://github.com/Esri/calcite-components/commit/943d2088b7cf447a12ebcd0babab145f543538a2)), closes [#4333](https://github.com/Esri/calcite-components/issues/4333)
+* **popover:** Add focus-trap to popover and disableFocusTrap property. ([#5725](https://github.com/Esri/calcite-components/issues/5725)) ([a8ef353](https://github.com/Esri/calcite-components/commit/a8ef353bc031630b373f2bdd1bdc1cafd7e35be9)), closes [#2133](https://github.com/Esri/calcite-components/issues/2133)
+* **popover:** Escape key should close open popovers. ([#5726](https://github.com/Esri/calcite-components/issues/5726)) ([2e2621d](https://github.com/Esri/calcite-components/commit/2e2621d57c4701f7a7e84f74d801c543ad4f45c0))
+* **tabs:** Add support for navigating with Home and End keys ([#5727](https://github.com/Esri/calcite-components/issues/5727)) ([823c429](https://github.com/Esri/calcite-components/commit/823c429439ec9f8cd1d6a1ff2aedf0b2da9c741b)), closes [#5661](https://github.com/Esri/calcite-components/issues/5661)
+* **tooltip:** Add tooltip open, close, beforeOpen, and beforeClose events ([#5772](https://github.com/Esri/calcite-components/issues/5772)) ([64b5675](https://github.com/Esri/calcite-components/commit/64b56751d68f69d31ea943415f5d0d08bae634cc)), closes [#5734](https://github.com/Esri/calcite-components/issues/5734)
 
 ### Bug Fixes
 
diff --git a/package-lock.json b/package-lock.json
index a77bb934ee5..27cde262e5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.678",
+  "version": "1.0.0-next.679",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@esri/calcite-components",
-      "version": "1.0.0-next.678",
+      "version": "1.0.0-next.679",
       "license": "SEE LICENSE IN copyright.txt",
       "dependencies": {
         "@floating-ui/dom": "1.0.10",
diff --git a/package.json b/package.json
index 55d3fa983b8..51e3125ebd6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.678",
+  "version": "1.0.0-next.679",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

From 645dd1ef4caf78aed08e00f3878b8bfe942602ce Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Wed, 14 Dec 2022 15:20:14 -0800
Subject: [PATCH 02/21] refactor(input-date-picker)!: Remove deprecated
 calciteDatePickerChange event (#6040)

BREAKING CHANGE: Removed the `calciteDatePickerChange` event, use
`calciteInputDatePickerChange` instead.
---
 .../input-date-picker/input-date-picker.e2e.ts           | 5 -----
 src/components/input-date-picker/input-date-picker.tsx   | 9 +--------
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/components/input-date-picker/input-date-picker.e2e.ts b/src/components/input-date-picker/input-date-picker.e2e.ts
index 1904d5586b4..55ab27d61cb 100644
--- a/src/components/input-date-picker/input-date-picker.e2e.ts
+++ b/src/components/input-date-picker/input-date-picker.e2e.ts
@@ -45,7 +45,6 @@ describe("calcite-input-date-picker", () => {
 
       const input = await page.find("calcite-input-date-picker");
       const changeEvent = await page.spyOnEvent("calciteInputDatePickerChange");
-      const deprecatedChangeEvent = await page.spyOnEvent("calciteDatePickerChange");
 
       expect(await input.getProperty("value")).toBe("");
 
@@ -67,7 +66,6 @@ describe("calcite-input-date-picker", () => {
       expect(await input.getProperty("valueAsDate")).toBeDefined();
 
       expect(changeEvent).toHaveReceivedEventTimes(1);
-      expect(deprecatedChangeEvent).toHaveReceivedEventTimes(1);
 
       await page.keyboard.press("Backspace");
       await page.keyboard.press("Backspace");
@@ -83,7 +81,6 @@ describe("calcite-input-date-picker", () => {
       await page.waitForChanges();
 
       expect(changeEvent).toHaveReceivedEventTimes(2);
-      expect(deprecatedChangeEvent).toHaveReceivedEventTimes(2);
 
       expect(await input.getProperty("value")).toBe("");
       expect(await input.getProperty("valueAsDate")).toBeUndefined();
@@ -96,10 +93,8 @@ describe("calcite-input-date-picker", () => {
       element.setProperty("value", "");
       await page.waitForChanges();
       const changeEvent = await page.spyOnEvent("calciteInputDatePickerChange");
-      const deprecatedChangeEvent = await page.spyOnEvent("calciteDatePickerChange");
 
       expect(changeEvent).toHaveReceivedEventTimes(0);
-      expect(deprecatedChangeEvent).toHaveReceivedEventTimes(0);
       expect(await element.getProperty("value")).toBe("");
       expect(await element.getProperty("valueAsDate")).toBeUndefined();
     });
diff --git a/src/components/input-date-picker/input-date-picker.tsx b/src/components/input-date-picker/input-date-picker.tsx
index 0b4e85c6652..a94c0e2576a 100644
--- a/src/components/input-date-picker/input-date-picker.tsx
+++ b/src/components/input-date-picker/input-date-picker.tsx
@@ -374,12 +374,6 @@ export class InputDatePicker
   //  Events
   //
   //--------------------------------------------------------------------------
-  /**
-   * Fires when a user changes the date.
-   *
-   * @deprecated use `calciteInputDatePickerChange` instead.
-   */
-  @Event({ cancelable: false }) calciteDatePickerChange: EventEmitter<Date>;
 
   /**
    * Fires when a user changes the date range.
@@ -1011,9 +1005,8 @@ export class InputDatePicker
     this.value = newValue || "";
 
     const changeEvent = this.calciteInputDatePickerChange.emit();
-    const deprecatedDatePickerChangeEvent = this.calciteDatePickerChange.emit(value as Date);
 
-    if (changeEvent.defaultPrevented || deprecatedDatePickerChangeEvent.defaultPrevented) {
+    if (changeEvent.defaultPrevented) {
       this.value = oldValue;
       this.setInputValue(oldValue as string);
     }

From 9b759fd33a890a9444560d566319dc66ad66e9ae Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 14 Dec 2022 15:36:57 -0800
Subject: [PATCH 03/21] refactor(popover, dropdown, modal, pick-list-item,
 value-list-item)!: rename `disable*` properties (#6036)

BREAKING CHANGE: Renamed `disable*` properties.

- Dropdown
- Renamed the property `disableCloseOnSelect`, use
`closeOnSelectDisabled` instead.
- Modal
- Renamed the property `disableCloseButton`, use `closeButtonDisabled`
instead.
- Renamed the property `disableFocusTrap`, use `focusTrapDisabled`
instead.
- Renamed the property `disableOutsideClose`, use `outsideCloseDisabled`
instead.
  - Renamed the property `disableEscape`, use `escapeDisabled` instead.
- PickListItem
- Renamed the property `disableDeselect`, use `deselectDisabled`
instead.
- Popover
  - Renamed the property `disableFlip`, use `flipDisabled` instead.
- Renamed the property `disableFocusTrap`, use `focusTrapDisabled`
instead.
- Renamed the property `disablePointer`, use `pointerDisabled` instead.
- ValueListItem
- Renamed the property `disableDeselect`, use `deselectDisabled`
instead.
---
 src/components/action-menu/action-menu.tsx    |  4 +--
 src/components/dropdown/dropdown.e2e.ts       | 10 +++---
 src/components/dropdown/dropdown.stories.ts   | 22 ++++++------
 src/components/dropdown/dropdown.tsx          |  4 +--
 src/components/dropdown/readme.md             | 30 ++++++++--------
 .../usage/Disabling-close-on-select.md        |  4 +--
 .../input-time-picker/input-time-picker.tsx   |  2 +-
 src/components/modal/modal.e2e.ts             | 12 +++----
 src/components/modal/modal.stories.ts         |  4 +--
 src/components/modal/modal.tsx                | 20 +++++------
 src/components/modal/readme.md                | 34 +++++++++----------
 .../pick-list-item/pick-list-item.e2e.ts      |  4 +--
 .../pick-list-item/pick-list-item.tsx         |  6 ++--
 src/components/pick-list-item/readme.md       | 24 ++++++-------
 src/components/pick-list/shared-list-logic.ts |  2 +-
 src/components/popover/popover.e2e.ts         |  4 +--
 src/components/popover/popover.stories.ts     |  8 ++---
 src/components/popover/popover.tsx            | 22 ++++++------
 src/components/popover/readme.md              |  6 ++--
 .../value-list-item/value-list-item.e2e.ts    |  4 +--
 .../value-list-item/value-list-item.tsx       |  4 +--
 src/demos/color-picker.html                   |  6 ++--
 src/demos/modal.html                          | 18 +++++-----
 src/demos/shell/block-configurations.html     |  2 +-
 .../demo-app-advanced-2-shell-header.html     |  2 +-
 src/demos/shell/demo-app-advanced-2.html      |  2 +-
 src/demos/shell/demo-app-advanced-3.html      |  2 +-
 src/demos/shell/demo-app-advanced.html        |  6 ++--
 src/demos/shell/demo-app-blank.html           |  2 +-
 src/demos/shell/nesting-testing-flow.html     |  2 +-
 src/demos/shell/nesting-testing.html          |  2 +-
 src/demos/theme/auto.html                     |  6 ++--
 src/utils/floating-ui.ts                      | 17 +++++-----
 src/utils/focusTrapComponent.ts               |  4 +--
 34 files changed, 150 insertions(+), 151 deletions(-)

diff --git a/src/components/action-menu/action-menu.tsx b/src/components/action-menu/action-menu.tsx
index 6ea00650e7a..6d1fd2ea944 100755
--- a/src/components/action-menu/action-menu.tsx
+++ b/src/components/action-menu/action-menu.tsx
@@ -299,14 +299,14 @@ export class ActionMenu implements LoadableComponent {
 
     return (
       <calcite-popover
-        disableFocusTrap={true}
-        disablePointer={true}
         flipPlacements={flipPlacements}
+        focusTrapDisabled={true}
         label={label}
         offsetDistance={0}
         open={open}
         overlayPositioning={overlayPositioning}
         placement={placement}
+        pointerDisabled={true}
         referenceElement={menuButtonEl}
       >
         <div
diff --git a/src/components/dropdown/dropdown.e2e.ts b/src/components/dropdown/dropdown.e2e.ts
index 6955c85b2ba..45db0d3b5ee 100644
--- a/src/components/dropdown/dropdown.e2e.ts
+++ b/src/components/dropdown/dropdown.e2e.ts
@@ -692,9 +692,9 @@ describe("calcite-dropdown", () => {
     expect(await dropdownWrapper.isVisible()).toBe(false);
   });
 
-  it("remains open when disable-close-on-select is requested and selected item is not in a selection-mode:none group", async () => {
+  it("remains open when close-on-select-disabled is requested and selected item is not in a selection-mode:none group", async () => {
     const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown disable-close-on-select>
+    await page.setContent(html`<calcite-dropdown close-on-select-disabled>
       <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
       <calcite-dropdown-group id="group-1" selection-mode="single">
         <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
@@ -722,9 +722,9 @@ describe("calcite-dropdown", () => {
     expect(await dropdownWrapper.isVisible()).toBe(true);
   });
 
-  it("closes when disable-close-on-select is requested and selected item is in a selection-mode:none group", async () => {
+  it("closes when close-on-select-disabled is requested and selected item is in a selection-mode:none group", async () => {
     const page = await newE2EPage();
-    await page.setContent(html`<calcite-dropdown disable-close-on-select>
+    await page.setContent(html`<calcite-dropdown close-on-select-disabled>
       <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
       <calcite-dropdown-group id="group-1" selection-mode="none">
         <calcite-dropdown-item>
@@ -983,7 +983,7 @@ describe("calcite-dropdown", () => {
 
   it("item selection should work when placed inside shadow DOM (#992)", async () => {
     const wrappedDropdownTemplateHTML = html`
-      <calcite-dropdown disable-close-on-select>
+      <calcite-dropdown close-on-select-disabled>
         <calcite-button slot="trigger">Open</calcite-button>
         <calcite-dropdown-group selection-mode="single">
           <calcite-dropdown-item id="item-1" selected>1</calcite-dropdown-item>
diff --git a/src/components/dropdown/dropdown.stories.ts b/src/components/dropdown/dropdown.stories.ts
index 5ff10821f87..8143c3ebb51 100644
--- a/src/components/dropdown/dropdown.stories.ts
+++ b/src/components/dropdown/dropdown.stories.ts
@@ -25,7 +25,7 @@ export const simple = (): string => html`
     scale="${select("scale", ["s", "m", "l"], "m")}"
     width="${select("width", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
+    ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -46,7 +46,7 @@ export const simpleAutoWidth = (): string => html`
     placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
+    ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -70,7 +70,7 @@ export const simpleFullWidth = (): string => html`
       scale="${select("scale", ["s", "m", "l"], "m")}"
       width="${select("width", ["s", "m", "l"], "m")}"
       type="${select("type", ["click", "hover"], "click")}"
-      ${boolean("disable-close-on-select", false)}
+      ${boolean("close-on-select-disabled", false)}
       ${boolean("disabled", false)}
     >
       <calcite-button width="full" slot="trigger">Open Dropdown</calcite-button>
@@ -93,7 +93,7 @@ export const withIcons = (): string => html`
     scale="${select("scale", ["s", "m", "l"], "m")}"
     width="${select("width", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
+    ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -131,7 +131,7 @@ export const groupsAndSelectionModes = (): string => html`
     scale="${select("scale", ["s", "m", "l"], "m")}"
     width="${select("width", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
+    ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -159,7 +159,7 @@ export const itemsAsLinks = (): string => html`
     scale="${select("scale", ["s", "m", "l"], "m")}"
     width="${select("width", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
+    ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -197,7 +197,7 @@ export const darkThemeRTL_TestOnly = (): string => html`
     scale="${select("scale", ["s", "m", "l"], "m")}"
     width="${select("width", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
+    ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -232,7 +232,7 @@ export const itemsAsLinksDarkTheme = (): string => html`
     scale="${select("scale", ["s", "m", "l"], "m")}"
     width="${select("width", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
+    ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -271,7 +271,7 @@ export const scrollingAfterCertainItems_TestOnly = (): string => html`
     scale="${select("scale", ["s", "m", "l"], "m")}"
     width="${select("width", ["s", "m", "l"], "m")}"
     type="${select("type", ["click", "hover"], "click")}"
-    ${boolean("disable-close-on-select", false)}
+    ${boolean("close-on-select-disabled", false)}
     ${boolean("disabled", false)}
   >
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -398,7 +398,7 @@ export const alignedCenter_TestOnly = (): string => html`
       scale="${select("scale", ["s", "m", "l"], "m")}"
       width="${select("width", ["s", "m", "l"], "m")}"
       type="${select("type", ["click", "hover"], "click")}"
-      ${boolean("disable-close-on-select", false)}
+      ${boolean("close-on-select-disabled", false)}
       ${boolean("disabled", false)}
     >
       <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -427,7 +427,7 @@ export const alignedCenterRTL_TestOnly = (): string => html`
       scale="${select("scale", ["s", "m", "l"], "m")}"
       width="${select("width", ["s", "m", "l"], "m")}"
       type="${select("type", ["click", "hover"], "click")}"
-      ${boolean("disable-close-on-select", false)}
+      ${boolean("close-on-select-disabled", false)}
       ${boolean("disabled", false)}
     >
       <calcite-button slot="trigger">Open Dropdown</calcite-button>
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index bae63559d17..6bd1253e2ca 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -93,7 +93,7 @@ export class Dropdown implements InteractiveComponent, OpenCloseComponent, Float
    * If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close.
    *
    */
-  @Prop({ reflect: true }) disableCloseOnSelect = false;
+  @Prop({ reflect: true }) closeOnSelectDisabled = false;
 
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -384,7 +384,7 @@ export class Dropdown implements InteractiveComponent, OpenCloseComponent, Float
       item: event.detail.requestedDropdownItem
     });
     if (
-      !this.disableCloseOnSelect ||
+      !this.closeOnSelectDisabled ||
       event.detail.requestedDropdownGroup.selectionMode === "none"
     ) {
       this.closeCalciteDropdown();
diff --git a/src/components/dropdown/readme.md b/src/components/dropdown/readme.md
index 6bf290f4af1..52c699cc0cb 100644
--- a/src/components/dropdown/readme.md
+++ b/src/components/dropdown/readme.md
@@ -21,10 +21,10 @@ A `calcite-dropdown` can be used to provide an absolutely positioned set of sele
 
 ### Disabling-close-on-select
 
-You can choose to leave the dropdown open when an item is selected with the `disable-close-on-select` attribute. Note that this will only apply when the `calcite-dropdown-group` selection mode is set to `single` or `multi` - dropdowns will always close when an item in `none` selection mode is selected.
+You can choose to leave the dropdown open when an item is selected with the `close-on-select-disabled` attribute. Note that this will only apply when the `calcite-dropdown-group` selection mode is set to `single` or `multi` - dropdowns will always close when an item in `none` selection mode is selected.
 
 ```html
-<calcite-dropdown disable-close-on-select>
+<calcite-dropdown close-on-select-disabled>
   <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
   <calcite-dropdown-group id="group-1" selection-mode="single">
     <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
@@ -60,19 +60,19 @@ You can combine groups in a single dropdown, with varying selection modes:
 
 ## Properties
 
-| Property               | Attribute                 | Description                                                                                                                                                                                                                                                                                                                                                                 | Type                                                                              | Default                |
-| ---------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ---------------------- |
-| `disableCloseOnSelect` | `disable-close-on-select` | When `true`, the component will remain open after a selection is made. If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close.                                                                                                                                                   | `boolean`                                                                         | `false`                |
-| `disabled`             | `disabled`                | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                                                                                                                                                    | `boolean`                                                                         | `false`                |
-| `flipPlacements`       | --                        | Defines the available placements that can be used when a flip occurs.                                                                                                                                                                                                                                                                                                       | `Placement[]`                                                                     | `undefined`            |
-| `maxItems`             | `max-items`               | Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.                                                                                                                                                                           | `number`                                                                          | `0`                    |
-| `open`                 | `open`                    | When `true`, displays and positions the component.                                                                                                                                                                                                                                                                                                                          | `boolean`                                                                         | `false`                |
-| `overlayPositioning`   | `overlay-positioning`     | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"`                                                           | `"absolute"`           |
-| `placement`            | `placement`               | Determines where the component will be positioned relative to the container element.                                                                                                                                                                                                                                                                                        | `"bottom" \| "bottom-end" \| "bottom-start" \| "top" \| "top-end" \| "top-start"` | `defaultMenuPlacement` |
-| `scale`                | `scale`                   | Specifies the size of the component.                                                                                                                                                                                                                                                                                                                                        | `"l" \| "m" \| "s"`                                                               | `"m"`                  |
-| `selectedItems`        | --                        | Specifies the component's selected items.                                                                                                                                                                                                                                                                                                                                   | `HTMLCalciteDropdownItemElement[]`                                                | `[]`                   |
-| `type`                 | `type`                    | Specifies the action to open the component from the container element.                                                                                                                                                                                                                                                                                                      | `"click" \| "hover"`                                                              | `"click"`              |
-| `width`                | `width`                   | Specifies the width of the component.                                                                                                                                                                                                                                                                                                                                       | `"l" \| "m" \| "s"`                                                               | `undefined`            |
+| Property                | Attribute                  | Description                                                                                                                                                                                                                                                                                                                                                                 | Type                                                                              | Default                |
+| ----------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ---------------------- |
+| `closeOnSelectDisabled` | `close-on-select-disabled` | When `true`, the component will remain open after a selection is made. If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close.                                                                                                                                                   | `boolean`                                                                         | `false`                |
+| `disabled`              | `disabled`                 | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                                                                                                                                                    | `boolean`                                                                         | `false`                |
+| `flipPlacements`        | --                         | Defines the available placements that can be used when a flip occurs.                                                                                                                                                                                                                                                                                                       | `Placement[]`                                                                     | `undefined`            |
+| `maxItems`              | `max-items`                | Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.                                                                                                                                                                           | `number`                                                                          | `0`                    |
+| `open`                  | `open`                     | When `true`, displays and positions the component.                                                                                                                                                                                                                                                                                                                          | `boolean`                                                                         | `false`                |
+| `overlayPositioning`    | `overlay-positioning`      | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"`                                                           | `"absolute"`           |
+| `placement`             | `placement`                | Determines where the component will be positioned relative to the container element.                                                                                                                                                                                                                                                                                        | `"bottom" \| "bottom-end" \| "bottom-start" \| "top" \| "top-end" \| "top-start"` | `defaultMenuPlacement` |
+| `scale`                 | `scale`                    | Specifies the size of the component.                                                                                                                                                                                                                                                                                                                                        | `"l" \| "m" \| "s"`                                                               | `"m"`                  |
+| `selectedItems`         | --                         | Specifies the component's selected items.                                                                                                                                                                                                                                                                                                                                   | `HTMLCalciteDropdownItemElement[]`                                                | `[]`                   |
+| `type`                  | `type`                     | Specifies the action to open the component from the container element.                                                                                                                                                                                                                                                                                                      | `"click" \| "hover"`                                                              | `"click"`              |
+| `width`                 | `width`                    | Specifies the width of the component.                                                                                                                                                                                                                                                                                                                                       | `"l" \| "m" \| "s"`                                                               | `undefined`            |
 
 ## Events
 
diff --git a/src/components/dropdown/usage/Disabling-close-on-select.md b/src/components/dropdown/usage/Disabling-close-on-select.md
index b0e2469873e..cb3d543b2e2 100644
--- a/src/components/dropdown/usage/Disabling-close-on-select.md
+++ b/src/components/dropdown/usage/Disabling-close-on-select.md
@@ -1,7 +1,7 @@
-You can choose to leave the dropdown open when an item is selected with the `disable-close-on-select` attribute. Note that this will only apply when the `calcite-dropdown-group` selection mode is set to `single` or `multi` - dropdowns will always close when an item in `none` selection mode is selected.
+You can choose to leave the dropdown open when an item is selected with the `close-on-select-disabled` attribute. Note that this will only apply when the `calcite-dropdown-group` selection mode is set to `single` or `multi` - dropdowns will always close when an item in `none` selection mode is selected.
 
 ```html
-<calcite-dropdown disable-close-on-select>
+<calcite-dropdown close-on-select-disabled>
   <calcite-button id="trigger" slot="trigger">Open dropdown</calcite-button>
   <calcite-dropdown-group id="group-1" selection-mode="single">
     <calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
diff --git a/src/components/input-time-picker/input-time-picker.tsx b/src/components/input-time-picker/input-time-picker.tsx
index 8080c852a75..9282f68b080 100644
--- a/src/components/input-time-picker/input-time-picker.tsx
+++ b/src/components/input-time-picker/input-time-picker.tsx
@@ -607,7 +607,7 @@ export class InputTimePicker
           />
         </div>
         <calcite-popover
-          disableFocusTrap={true}
+          focusTrapDisabled={true}
           id={popoverId}
           label="Time Picker"
           open={this.open}
diff --git a/src/components/modal/modal.e2e.ts b/src/components/modal/modal.e2e.ts
index 017a843c765..5c2ee336cf9 100644
--- a/src/components/modal/modal.e2e.ts
+++ b/src/components/modal/modal.e2e.ts
@@ -22,7 +22,7 @@ describe("calcite-modal properties", () => {
     const page = await newE2EPage();
     await page.setContent("<calcite-modal></calcite-modal>");
     const modal = await page.find("calcite-modal");
-    modal.setProperty("disableCloseButton", true);
+    modal.setProperty("closeButtonDisabled", true);
     await page.waitForChanges();
     const closeButton = await page.find("calcite-modal >>> .close");
     expect(closeButton).toBe(null);
@@ -294,7 +294,7 @@ describe("calcite-modal accessibility checks", () => {
   it("traps focus within the modal when open and disabled close button", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<calcite-modal disable-close-button>
+      `<calcite-modal close-button-disabled>
         <div slot="content">
           <button class="btn-1">Focus1</button>
           <button class="btn-2">Focus1</button>
@@ -338,7 +338,7 @@ describe("calcite-modal accessibility checks", () => {
       }));
 
     it("focuses content if there is no close button", async () =>
-      focusable(createModalHTML(focusableContentHTML, "disable-close-button"), {
+      focusable(createModalHTML(focusableContentHTML, "close-button-disabled"), {
         focusTargetSelector: `.${focusableContentTargetClass}`
       }));
 
@@ -423,7 +423,7 @@ describe("calcite-modal accessibility checks", () => {
 
   it("should not close when the scrim is clicked", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-modal disable-outside-close intl-close="test"></calcite-modal>`);
+    await page.setContent(`<calcite-modal outside-close-disabled intl-close="test"></calcite-modal>`);
     const modal = await page.find("calcite-modal");
     modal.setProperty("open", true);
     await page.waitForChanges();
@@ -433,9 +433,9 @@ describe("calcite-modal accessibility checks", () => {
     expect(await modal.getProperty("open")).toBe(true);
   });
 
-  it("does not close when Escape is pressed and disable-escape is set", async () => {
+  it("does not close when Escape is pressed and escape-disabled is set", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-modal disable-escape></calcite-modal>`);
+    await page.setContent(`<calcite-modal escape-disabled></calcite-modal>`);
     const modal = await page.find("calcite-modal");
     await modal.setProperty("open", true);
     await page.waitForChanges();
diff --git a/src/components/modal/modal.stories.ts b/src/components/modal/modal.stories.ts
index c7afe12ba14..b5041d5a6ca 100644
--- a/src/components/modal/modal.stories.ts
+++ b/src/components/modal/modal.stories.ts
@@ -24,7 +24,7 @@ export const simple = (): string => html`
     width="${select("width", ["s", "m", "l"], "s")}"
     ${boolean("fullscreen", false)}
     ${boolean("docked", false)}
-    ${boolean("disable-escape", false)}
+    ${boolean("escape-disabled", false)}
     intl-close="${text("intl-close", "Close")}"
   >
     <h3 slot="header">Small Modal</h3>
@@ -50,7 +50,7 @@ export const darkThemeRTLCustomSize_TestOnly = (): string => html`
     width="${number("width", 300)}"
     ${boolean("fullscreen", false)}
     ${boolean("docked", false)}
-    ${boolean("disable-escape", false)}
+    ${boolean("escape-disabled", false)}
     intl-close="${text("intl-close", "Close")}"
   >
     <h3 slot="header">Small Modal</h3>
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index ed9b3a8f303..a3f9870e3bc 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -92,24 +92,24 @@ export class Modal
   beforeClose: (el: HTMLElement) => Promise<void> = () => Promise.resolve();
 
   /** When `true`, disables the component's close button. */
-  @Prop({ reflect: true }) disableCloseButton = false;
+  @Prop({ reflect: true }) closeButtonDisabled = false;
 
   /**
    * When `true`, prevents focus trapping.
    */
-  @Prop({ reflect: true }) disableFocusTrap = false;
+  @Prop({ reflect: true }) focusTrapDisabled = false;
 
-  @Watch("disableFocusTrap")
-  handleDisableFocusTrap(disableFocusTrap: boolean): void {
+  @Watch("focusTrapDisabled")
+  handlefocusTrapDisabled(focusTrapDisabled: boolean): void {
     if (!this.open) {
       return;
     }
 
-    disableFocusTrap ? deactivateFocusTrap(this) : activateFocusTrap(this);
+    focusTrapDisabled ? deactivateFocusTrap(this) : activateFocusTrap(this);
   }
 
   /** When `true`, disables the closing of the component when clicked outside. */
-  @Prop({ reflect: true }) disableOutsideClose = false;
+  @Prop({ reflect: true }) outsideCloseDisabled = false;
 
   /**
    * Accessible name for the component's close button.
@@ -122,7 +122,7 @@ export class Modal
   @Prop({ reflect: true }) docked: boolean;
 
   /** When `true`, disables the default close on escape behavior. */
-  @Prop({ reflect: true }) disableEscape = false;
+  @Prop({ reflect: true }) escapeDisabled = false;
 
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
@@ -252,7 +252,7 @@ export class Modal
   }
 
   renderCloseButton(): VNode {
-    return !this.disableCloseButton ? (
+    return !this.closeButtonDisabled ? (
       <button
         aria-label={this.messages.close}
         class={CSS.close}
@@ -350,7 +350,7 @@ export class Modal
 
   @Listen("keydown", { target: "window" })
   handleEscape(event: KeyboardEvent): void {
-    if (this.open && !this.disableEscape && event.key === "Escape" && !event.defaultPrevented) {
+    if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) {
       this.close();
       event.preventDefault();
     }
@@ -484,7 +484,7 @@ export class Modal
   }
 
   handleOutsideClose = (): void => {
-    if (this.disableOutsideClose) {
+    if (this.outsideCloseDisabled) {
       return;
     }
 
diff --git a/src/components/modal/readme.md b/src/components/modal/readme.md
index 3fbe7b23b16..18e13e4ee2b 100644
--- a/src/components/modal/readme.md
+++ b/src/components/modal/readme.md
@@ -55,23 +55,23 @@ modal.beforeClose = beforeClose;
 
 ## Properties
 
-| Property              | Attribute               | Description                                                                                                                                                          | Type                                 | Default                   |
-| --------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------- |
-| `active`              | `active`                | <span style="color:red">**[DEPRECATED]**</span> use `open` instead.<br/><br/>When `true`, the component is active.                                                   | `boolean`                            | `false`                   |
-| `backgroundColor`     | `background-color`      | Sets the background color of the component's content.                                                                                                                | `"grey" \| "white"`                  | `"white"`                 |
-| `beforeClose`         | --                      | Passes a function to run before the component closes.                                                                                                                | `(el: HTMLElement) => Promise<void>` | `() => Promise.resolve()` |
-| `color`               | `color`                 | Adds a color bar to the top of component for visual impact. Use color to add importance to destructive or workflow dialogs.                                          | `"blue" \| "red"`                    | `undefined`               |
-| `disableCloseButton`  | `disable-close-button`  | When `true`, disables the component's close button.                                                                                                                  | `boolean`                            | `false`                   |
-| `disableEscape`       | `disable-escape`        | When `true`, disables the default close on escape behavior.                                                                                                          | `boolean`                            | `false`                   |
-| `disableFocusTrap`    | `disable-focus-trap`    | When `true`, prevents focus trapping.                                                                                                                                | `boolean`                            | `false`                   |
-| `disableOutsideClose` | `disable-outside-close` | When `true`, disables the closing of the component when clicked outside.                                                                                             | `boolean`                            | `false`                   |
-| `docked`              | `docked`                | When `true`, prevents the component from expanding to the entire screen on mobile devices.                                                                           | `boolean`                            | `undefined`               |
-| `fullscreen`          | `fullscreen`            | Sets the component to always be fullscreen (overrides `width`).                                                                                                      | `boolean`                            | `undefined`               |
-| `intlClose`           | `intl-close`            | Accessible name for the component's close button.                                                                                                                    | `string`                             | `TEXT.close`              |
-| `noPadding`           | `no-padding`            | <span style="color:red">**[DEPRECATED]**</span> Use `--calcite-modal-padding` CSS variable instead.<br/><br/>When `true`, disables spacing to the content area slot. | `boolean`                            | `false`                   |
-| `open`                | `open`                  | When `true`, displays and positions the component.                                                                                                                   | `boolean`                            | `false`                   |
-| `scale`               | `scale`                 | Specifies the size of the component.                                                                                                                                 | `"l" \| "m" \| "s"`                  | `"m"`                     |
-| `width`               | `width`                 | Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels).                                                                     | `"l" \| "m" \| "s" \| number`        | `"m"`                     |
+| Property               | Attribute                | Description                                                                                                                                                          | Type                                 | Default                   |
+| ---------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------- |
+| `active`               | `active`                 | <span style="color:red">**[DEPRECATED]**</span> use `open` instead.<br/><br/>When `true`, the component is active.                                                   | `boolean`                            | `false`                   |
+| `backgroundColor`      | `background-color`       | Sets the background color of the component's content.                                                                                                                | `"grey" \| "white"`                  | `"white"`                 |
+| `beforeClose`          | --                       | Passes a function to run before the component closes.                                                                                                                | `(el: HTMLElement) => Promise<void>` | `() => Promise.resolve()` |
+| `color`                | `color`                  | Adds a color bar to the top of component for visual impact. Use color to add importance to destructive or workflow dialogs.                                          | `"blue" \| "red"`                    | `undefined`               |
+| `closeButtonDisabled`  | `close-button-disabled`  | When `true`, disables the component's close button.                                                                                                                  | `boolean`                            | `false`                   |
+| `escapeDisabled`       | `escape-disabled`        | When `true`, disables the default close on escape behavior.                                                                                                          | `boolean`                            | `false`                   |
+| `focusTrapDisabled`    | `focus-trap-disabled`    | When `true`, prevents focus trapping.                                                                                                                                | `boolean`                            | `false`                   |
+| `outsideCloseDisabled` | `outside-close-disabled` | When `true`, disables the closing of the component when clicked outside.                                                                                             | `boolean`                            | `false`                   |
+| `docked`               | `docked`                 | When `true`, prevents the component from expanding to the entire screen on mobile devices.                                                                           | `boolean`                            | `undefined`               |
+| `fullscreen`           | `fullscreen`             | Sets the component to always be fullscreen (overrides `width`).                                                                                                      | `boolean`                            | `undefined`               |
+| `intlClose`            | `intl-close`             | Accessible name for the component's close button.                                                                                                                    | `string`                             | `TEXT.close`              |
+| `noPadding`            | `no-padding`             | <span style="color:red">**[DEPRECATED]**</span> Use `--calcite-modal-padding` CSS variable instead.<br/><br/>When `true`, disables spacing to the content area slot. | `boolean`                            | `false`                   |
+| `open`                 | `open`                   | When `true`, displays and positions the component.                                                                                                                   | `boolean`                            | `false`                   |
+| `scale`                | `scale`                  | Specifies the size of the component.                                                                                                                                 | `"l" \| "m" \| "s"`                  | `"m"`                     |
+| `width`                | `width`                  | Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels).                                                                     | `"l" \| "m" \| "s" \| number`        | `"m"`                     |
 
 ## Events
 
diff --git a/src/components/pick-list-item/pick-list-item.e2e.ts b/src/components/pick-list-item/pick-list-item.e2e.ts
index 60e1b8942c9..a3af8f8d366 100644
--- a/src/components/pick-list-item/pick-list-item.e2e.ts
+++ b/src/components/pick-list-item/pick-list-item.e2e.ts
@@ -85,9 +85,9 @@ describe("calcite-pick-list-item", () => {
     expect(properties.get("shiftPressed")._remoteObject.value).toBe(false);
   });
 
-  it("prevents deselection when disableDeselect is true", async () => {
+  it("prevents deselection when deselectDisabled is true", async () => {
     const page = await newE2EPage({
-      html: `<calcite-pick-list-item label="test" value="example" disable-deselect selected></calcite-pick-list-item>`
+      html: `<calcite-pick-list-item label="test" value="example" deselect-disabled selected></calcite-pick-list-item>`
     });
     const item = await page.find("calcite-pick-list-item");
 
diff --git a/src/components/pick-list-item/pick-list-item.tsx b/src/components/pick-list-item/pick-list-item.tsx
index a1b44c5781d..17d256100cf 100644
--- a/src/components/pick-list-item/pick-list-item.tsx
+++ b/src/components/pick-list-item/pick-list-item.tsx
@@ -73,7 +73,7 @@ export class PickListItem
   /**
    * When `false`, the component cannot be deselected by user interaction.
    */
-  @Prop({ reflect: true }) disableDeselect = false;
+  @Prop({ reflect: true }) deselectDisabled = false;
 
   /**
    * @internal
@@ -287,7 +287,7 @@ export class PickListItem
   // --------------------------------------------------------------------------
 
   pickListClickHandler = (event: MouseEvent): void => {
-    if (this.disabled || (this.disableDeselect && this.selected) || this.nonInteractive) {
+    if (this.disabled || (this.deselectDisabled && this.selected) || this.nonInteractive) {
       return;
     }
 
@@ -298,7 +298,7 @@ export class PickListItem
   pickListKeyDownHandler = (event: KeyboardEvent): void => {
     if (event.key === " ") {
       event.preventDefault();
-      if ((this.disableDeselect && this.selected) || this.nonInteractive) {
+      if ((this.deselectDisabled && this.selected) || this.nonInteractive) {
         return;
       }
       this.selected = !this.selected;
diff --git a/src/components/pick-list-item/readme.md b/src/components/pick-list-item/readme.md
index ba92b64d52b..dd0622adde9 100644
--- a/src/components/pick-list-item/readme.md
+++ b/src/components/pick-list-item/readme.md
@@ -6,18 +6,18 @@
 
 ## Properties
 
-| Property             | Attribute          | Description                                                                                                | Type                                                        | Default       |
-| -------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------- |
-| `description`        | `description`      | A description for the component that displays below the label text.                                        | `string`                                                    | `undefined`   |
-| `disableDeselect`    | `disable-deselect` | When `false`, the component cannot be deselected by user interaction.                                      | `boolean`                                                   | `false`       |
-| `disabled`           | `disabled`         | When `true`, interaction is prevented and the component is displayed with lower opacity.                   | `boolean`                                                   | `false`       |
-| `icon`               | `icon`             | Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. | `ICON_TYPES.circle \| ICON_TYPES.grip \| ICON_TYPES.square` | `null`        |
-| `intlRemove`         | `intl-remove`      | When `removable` is `true`, the accessible name for the component's remove button.                         | `string`                                                    | `TEXT.remove` |
-| `label` _(required)_ | `label`            | Label and accessible name for the component. Appears next to the icon.                                     | `string`                                                    | `undefined`   |
-| `metadata`           | --                 | Provides additional metadata to the component. Primary use is for a filter on the parent list.             | `{ [x: string]: unknown; }`                                 | `undefined`   |
-| `removable`          | `removable`        | When `true`, displays a remove action that removes the item from the list.                                 | `boolean`                                                   | `false`       |
-| `selected`           | `selected`         | When `true`, selects an item. Toggles when an item is checked/unchecked.                                   | `boolean`                                                   | `false`       |
-| `value` _(required)_ | `value`            | The component's value.                                                                                     | `any`                                                       | `undefined`   |
+| Property             | Attribute           | Description                                                                                                | Type                                                        | Default       |
+| -------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------- |
+| `description`        | `description`       | A description for the component that displays below the label text.                                        | `string`                                                    | `undefined`   |
+| `deselectDisabled`   | `deselect-disabled` | When `false`, the component cannot be deselected by user interaction.                                      | `boolean`                                                   | `false`       |
+| `disabled`           | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity.                   | `boolean`                                                   | `false`       |
+| `icon`               | `icon`              | Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. | `ICON_TYPES.circle \| ICON_TYPES.grip \| ICON_TYPES.square` | `null`        |
+| `intlRemove`         | `intl-remove`       | When `removable` is `true`, the accessible name for the component's remove button.                         | `string`                                                    | `TEXT.remove` |
+| `label` _(required)_ | `label`             | Label and accessible name for the component. Appears next to the icon.                                     | `string`                                                    | `undefined`   |
+| `metadata`           | --                  | Provides additional metadata to the component. Primary use is for a filter on the parent list.             | `{ [x: string]: unknown; }`                                 | `undefined`   |
+| `removable`          | `removable`         | When `true`, displays a remove action that removes the item from the list.                                 | `boolean`                                                   | `false`       |
+| `selected`           | `selected`          | When `true`, selects an item. Toggles when an item is checked/unchecked.                                   | `boolean`                                                   | `false`       |
+| `value` _(required)_ | `value`             | The component's value.                                                                                     | `any`                                                       | `undefined`   |
 
 ## Events
 
diff --git a/src/components/pick-list/shared-list-logic.ts b/src/components/pick-list/shared-list-logic.ts
index adcd210a783..470f9d4fbd2 100644
--- a/src/components/pick-list/shared-list-logic.ts
+++ b/src/components/pick-list/shared-list-logic.ts
@@ -264,7 +264,7 @@ export function setUpItems<T extends Lists>(
   items.forEach((item) => {
     item.icon = this.getIconType();
     if (!this.multiple) {
-      item.disableDeselect = true;
+      item.deselectDisabled = true;
       toggleSingleSelectItemTabbing(item, false);
     }
     if (item.selected) {
diff --git a/src/components/popover/popover.e2e.ts b/src/components/popover/popover.e2e.ts
index 48d5b007d42..f584b073826 100644
--- a/src/components/popover/popover.e2e.ts
+++ b/src/components/popover/popover.e2e.ts
@@ -73,11 +73,11 @@ describe("calcite-popover", () => {
         defaultValue: false
       },
       {
-        propertyName: "disableFlip",
+        propertyName: "flipDisabled",
         defaultValue: false
       },
       {
-        propertyName: "disablePointer",
+        propertyName: "pointerDisabled",
         defaultValue: false
       },
       {
diff --git a/src/components/popover/popover.stories.ts b/src/components/popover/popover.stories.ts
index de567a2ae88..cd97be15ac4 100644
--- a/src/components/popover/popover.stories.ts
+++ b/src/components/popover/popover.stories.ts
@@ -33,8 +33,8 @@ export const simple = (): string => html`
     ${referenceElementHTML}
     <calcite-popover
       ${boolean("closable", false)}
-      ${boolean("disable-flip", false)}
-      ${boolean("disable-pointer", false)}
+      ${boolean("flip-disabled", false)}
+      ${boolean("pointer-disabled", false)}
       reference-element="reference-element"
       placement="${select("placement", placements, defaultPopoverPlacement)}"
       offset-distance="${number("offset-distance", 6)}"
@@ -56,8 +56,8 @@ export const darkThemeRTL_TestOnly = (): string => html` <style>
     ${referenceElementHTML}
     <calcite-popover
       ${boolean("closable", false)}
-      ${boolean("disable-flip", false)}
-      ${boolean("disable-pointer", false)}
+      ${boolean("flip-disabled", false)}
+      ${boolean("pointer-disabled", false)}
       reference-element="reference-element"
       placement="${select("placement", placements, defaultPopoverPlacement)}"
       offset-distance="${number("offset-distance", 6)}"
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index 7a5b3c74aec..4606919ba6d 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -101,26 +101,26 @@ export class Popover
   /**
    * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.
    */
-  @Prop({ reflect: true }) disableFlip = false;
+  @Prop({ reflect: true }) flipDisabled = false;
 
   /**
    * When `true`, prevents focus trapping.
    */
-  @Prop({ reflect: true }) disableFocusTrap = false;
+  @Prop({ reflect: true }) focusTrapDisabled = false;
 
-  @Watch("disableFocusTrap")
-  handleDisableFocusTrap(disableFocusTrap: boolean): void {
+  @Watch("focusTrapDisabled")
+  handlefocusTrapDisabled(focusTrapDisabled: boolean): void {
     if (!this.open) {
       return;
     }
 
-    disableFocusTrap ? deactivateFocusTrap(this) : activateFocusTrap(this);
+    focusTrapDisabled ? deactivateFocusTrap(this) : activateFocusTrap(this);
   }
 
   /**
    * When `true`, removes the caret pointer.
    */
-  @Prop({ reflect: true }) disablePointer = false;
+  @Prop({ reflect: true }) pointerDisabled = false;
 
   /**
    * Defines the available placements that can be used when a flip occurs.
@@ -365,7 +365,7 @@ export class Popover
       effectiveReferenceElement,
       placement,
       overlayPositioning,
-      disableFlip,
+      flipDisabled,
       filteredFlipPlacements,
       offsetDistance,
       offsetSkidding,
@@ -378,11 +378,11 @@ export class Popover
         referenceEl: effectiveReferenceElement,
         overlayPositioning,
         placement,
-        disableFlip,
+        flipDisabled,
         flipPlacements: filteredFlipPlacements,
         offsetDistance,
         offsetSkidding,
-        includeArrow: !this.disablePointer,
+        includeArrow: !this.pointerDisabled,
         arrowEl,
         type: "popover"
       },
@@ -582,10 +582,10 @@ export class Popover
   }
 
   render(): VNode {
-    const { effectiveReferenceElement, heading, label, open, disablePointer } = this;
+    const { effectiveReferenceElement, heading, label, open, pointerDisabled } = this;
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
-    const arrowNode = !disablePointer ? <div class={CSS.arrow} ref={this.storeArrowEl} /> : null;
+    const arrowNode = !pointerDisabled ? <div class={CSS.arrow} ref={this.storeArrowEl} /> : null;
 
     return (
       <Host
diff --git a/src/components/popover/readme.md b/src/components/popover/readme.md
index 94b19551bea..f91de97e621 100644
--- a/src/components/popover/readme.md
+++ b/src/components/popover/readme.md
@@ -47,9 +47,9 @@
 | ------------------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
 | `autoClose`                     | `auto-close`          | When `true`, clicking outside of the component automatically closes open `calcite-popover`s.                                                                                                                                                                                                                                                                                      | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
 | `closable`                      | `closable`            | When `true`, display a close button within the component.                                                                                                                                                                                                                                                                                                                         | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
-| `disableFlip`                   | `disable-flip`        | When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.                                                                                                                                                                                                                                                                                 | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
-| `disableFocusTrap`              | `disable-focus-trap`  | When `true`, prevents focus trapping.                                                                                                                                                                                                                                                                                                                                             | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
-| `disablePointer`                | `disable-pointer`     | When `true`, removes the caret pointer.                                                                                                                                                                                                                                                                                                                                           | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
+| `flipDisabled`                  | `flip-disabled`       | When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.                                                                                                                                                                                                                                                                                 | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
+| `focusTrapDisabled`             | `focus-trap-disabled` | When `true`, prevents focus trapping.                                                                                                                                                                                                                                                                                                                                             | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
+| `pointerDisabled`               | `pointer-disabled`    | When `true`, removes the caret pointer.                                                                                                                                                                                                                                                                                                                                           | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
 | `flipPlacements`                | --                    | Defines the available placements that can be used when a flip occurs.                                                                                                                                                                                                                                                                                                             | `Placement[]`                                                                                                                                                                                                                                                                                                     | `undefined`               |
 | `heading`                       | `heading`             | The component header text.                                                                                                                                                                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                          | `undefined`               |
 | `headingLevel`                  | `heading-level`       | Specifies the number at which section headings should start.                                                                                                                                                                                                                                                                                                                      | `1 \| 2 \| 3 \| 4 \| 5 \| 6`                                                                                                                                                                                                                                                                                      | `undefined`               |
diff --git a/src/components/value-list-item/value-list-item.e2e.ts b/src/components/value-list-item/value-list-item.e2e.ts
index 58616241280..468b7429fa9 100644
--- a/src/components/value-list-item/value-list-item.e2e.ts
+++ b/src/components/value-list-item/value-list-item.e2e.ts
@@ -69,9 +69,9 @@ describe("calcite-value-list-item", () => {
     expect(properties.get("shiftPressed")._remoteObject.value).toBe(false);
   });
 
-  it("prevents deselection when disableDeselect is true", async () => {
+  it("prevents deselection when deselectDisabled is true", async () => {
     const page = await newE2EPage({
-      html: `<calcite-value-list-item label="test" value="example" disable-deselect selected></calcite-value-list-item>`
+      html: `<calcite-value-list-item label="test" value="example" deselect-disabled selected></calcite-value-list-item>`
     });
     const item = await page.find("calcite-value-list-item");
 
diff --git a/src/components/value-list-item/value-list-item.tsx b/src/components/value-list-item/value-list-item.tsx
index ddb1a62ec47..dbb9688edd8 100644
--- a/src/components/value-list-item/value-list-item.tsx
+++ b/src/components/value-list-item/value-list-item.tsx
@@ -59,7 +59,7 @@ export class ValueListItem
   /**
    * @internal
    */
-  @Prop() disableDeselect = false;
+  @Prop() deselectDisabled = false;
 
   /**
    * When `true`, prevents the content of the component from user interaction.
@@ -258,7 +258,7 @@ export class ValueListItem
         {this.renderHandle()}
         <calcite-pick-list-item
           description={this.description}
-          disableDeselect={this.disableDeselect}
+          deselectDisabled={this.deselectDisabled}
           disabled={this.disabled}
           label={this.label}
           metadata={this.metadata}
diff --git a/src/demos/color-picker.html b/src/demos/color-picker.html
index 4151da33c2d..d70b168befc 100644
--- a/src/demos/color-picker.html
+++ b/src/demos/color-picker.html
@@ -145,21 +145,21 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
       <div class="parent">
         <div class="child right-aligned-text">Color-picker in Popover</div>
         <div class="child">
-          <calcite-popover disable-pointer placement="bottom-start" reference-element="popover-button-1">
+          <calcite-popover pointer-disabled placement="bottom-start" reference-element="popover-button-1">
             <calcite-color-picker appearance="minimal" scale="s"></calcite-color-picker>
           </calcite-popover>
           <calcite-button id="popover-button-1">Activate Popover</calcite-button>
         </div>
 
         <div class="child">
-          <calcite-popover disable-pointer placement="bottom-start" reference-element="popover-button-2">
+          <calcite-popover pointer-disabled placement="bottom-start" reference-element="popover-button-2">
             <calcite-color-picker appearance="minimal" scale="m"></calcite-color-picker>
           </calcite-popover>
           <calcite-button id="popover-button-2">Activate Popover</calcite-button>
         </div>
 
         <div class="child">
-          <calcite-popover disable-pointer placement="bottom-start" reference-element="popover-button-3">
+          <calcite-popover pointer-disabled placement="bottom-start" reference-element="popover-button-3">
             <calcite-color-picker appearance="minimal" scale="l"></calcite-color-picker>
           </calcite-popover>
           <calcite-button id="popover-button-3">Activate Popover</calcite-button>
diff --git a/src/demos/modal.html b/src/demos/modal.html
index ee0fc9fee1a..5ffc1c0dbec 100644
--- a/src/demos/modal.html
+++ b/src/demos/modal.html
@@ -498,10 +498,10 @@ <h3 slot="header">Information</h3>
 
         <!-- small width disabled -->
         <div class="child">
-          <calcite-modal class="js-modal-esc-disabled-s" disable-escape scale="s">
+          <calcite-modal class="js-modal-esc-disabled-s" escape-disabled scale="s">
             <h3 slot="header">Modal title</h3>
             <div slot="content">
-              <p>This modal has <code>disable-escape</code> set, so pressing the escape key will not dismiss it.</p>
+              <p>This modal has <code>escape-disabled</code> set, so pressing the escape key will not dismiss it.</p>
             </div>
             <calcite-button slot="secondary" width="full" scale="s" appearance="outline">Cancel</calcite-button>
           </calcite-modal>
@@ -513,10 +513,10 @@ <h3 slot="header">Modal title</h3>
 
         <!-- medium width disabled -->
         <div class="child">
-          <calcite-modal class="js-modal-esc-disabled-m" disable-escape scale="m">
+          <calcite-modal class="js-modal-esc-disabled-m" escape-disabled scale="m">
             <h3 slot="header">Modal title</h3>
             <div slot="content">
-              <p>This modal has <code>disable-escape</code> set, so pressing the escape key will not dismiss it.</p>
+              <p>This modal has <code>escape-disabled</code> set, so pressing the escape key will not dismiss it.</p>
             </div>
             <calcite-button slot="secondary" width="full" scale="m" appearance="outline">Cancel</calcite-button>
           </calcite-modal>
@@ -528,10 +528,10 @@ <h3 slot="header">Modal title</h3>
 
         <!-- large width disabled -->
         <div class="child">
-          <calcite-modal class="js-modal-esc-disabled-l" disable-escape scale="l">
+          <calcite-modal class="js-modal-esc-disabled-l" escape-disabled scale="l">
             <h3 slot="header">Modal title</h3>
             <div slot="content">
-              <p>This modal has <code>disable-escape</code> set, so pressing the escape key will not dismiss it.</p>
+              <p>This modal has <code>escape-disabled</code> set, so pressing the escape key will not dismiss it.</p>
             </div>
             <calcite-button slot="secondary" width="full" scale="l" appearance="outline">Cancel</calcite-button>
           </calcite-modal>
@@ -552,7 +552,7 @@ <h3 slot="header">Modal title</h3>
 
         <!-- small width no close button -->
         <div class="child">
-          <calcite-modal class="js-modal-no-close-s" disable-close-button scale="s">
+          <calcite-modal class="js-modal-no-close-s" close-button-disabled scale="s">
             <h3 slot="header">Modal title</h3>
             <div slot="content">
               <p>This modal has no close button.</p>
@@ -567,7 +567,7 @@ <h3 slot="header">Modal title</h3>
 
         <!-- medium width no close button -->
         <div class="child">
-          <calcite-modal class="js-modal-no-close-m" disable-close-button scale="m">
+          <calcite-modal class="js-modal-no-close-m" close-button-disabled scale="m">
             <h3 slot="header">Modal title</h3>
             <div slot="content">
               <p>This modal has no close button.</p>
@@ -582,7 +582,7 @@ <h3 slot="header">Modal title</h3>
 
         <!-- large width no close button -->
         <div class="child">
-          <calcite-modal class="js-modal-no-close-l" disable-close-button scale="l">
+          <calcite-modal class="js-modal-no-close-l" close-button-disabled scale="l">
             <h3 slot="header">Modal title</h3>
             <div slot="content">
               <p>This modal has no close button.</p>
diff --git a/src/demos/shell/block-configurations.html b/src/demos/shell/block-configurations.html
index 95e1f96c947..8f6cc9792f3 100644
--- a/src/demos/shell/block-configurations.html
+++ b/src/demos/shell/block-configurations.html
@@ -811,7 +811,7 @@
                   </calcite-block>
 
                   <calcite-fab slot="fab" id="label-fab" text="Add label class"></calcite-fab>
-                  <calcite-tooltip label="tooltip" reference-element="label-fab" disable-pointer>
+                  <calcite-tooltip label="tooltip" reference-element="label-fab" pointer-disabled>
                     Add label class
                   </calcite-tooltip>
                   <calcite-button slot="footer-actions" appearance="outline" width="half">Cancel</calcite-button>
diff --git a/src/demos/shell/demo-app-advanced-2-shell-header.html b/src/demos/shell/demo-app-advanced-2-shell-header.html
index 8671fdf13fa..108662577c5 100644
--- a/src/demos/shell/demo-app-advanced-2-shell-header.html
+++ b/src/demos/shell/demo-app-advanced-2-shell-header.html
@@ -228,7 +228,7 @@
                     </section>
                   </calcite-block>
                   <calcite-fab slot="fab" id="label-fab" text="Add label class"></calcite-fab>
-                  <calcite-tooltip label="tooltip" reference-element="label-fab" disable-pointer>
+                  <calcite-tooltip label="tooltip" reference-element="label-fab" pointer-disabled>
                     Add label class
                   </calcite-tooltip>
                   <calcite-button slot="footer-actions" appearance="outline" width="half">Cancel</calcite-button>
diff --git a/src/demos/shell/demo-app-advanced-2.html b/src/demos/shell/demo-app-advanced-2.html
index 59f0c30217b..24349a3110d 100644
--- a/src/demos/shell/demo-app-advanced-2.html
+++ b/src/demos/shell/demo-app-advanced-2.html
@@ -224,7 +224,7 @@
                   </section>
                 </calcite-block>
                 <calcite-fab slot="fab" id="label-fab" text="Add label class"></calcite-fab>
-                <calcite-tooltip label="tooltip" reference-element="label-fab" disable-pointer>
+                <calcite-tooltip label="tooltip" reference-element="label-fab" pointer-disabled>
                   Add label class
                 </calcite-tooltip>
               </calcite-panel>
diff --git a/src/demos/shell/demo-app-advanced-3.html b/src/demos/shell/demo-app-advanced-3.html
index 80018a2fca7..e34b29caa61 100644
--- a/src/demos/shell/demo-app-advanced-3.html
+++ b/src/demos/shell/demo-app-advanced-3.html
@@ -515,7 +515,7 @@
                   </section>
                 </calcite-block>
                 <calcite-fab slot="fab" id="label-fab" text="Add label class"></calcite-fab>
-                <calcite-tooltip label="tooltip" reference-element="label-fab" disable-pointer>
+                <calcite-tooltip label="tooltip" reference-element="label-fab" pointer-disabled>
                   Add label class
                 </calcite-tooltip>
               </calcite-panel>
diff --git a/src/demos/shell/demo-app-advanced.html b/src/demos/shell/demo-app-advanced.html
index 852b20fb449..260923b33ce 100644
--- a/src/demos/shell/demo-app-advanced.html
+++ b/src/demos/shell/demo-app-advanced.html
@@ -95,7 +95,7 @@
               <calcite-panel heading="Layers" height-scale="l" width-scale="m">
                 <div id="layerlist-container"></div>
                 <calcite-fab slot="fab" id="layer-fab" text="Add layers"></calcite-fab>
-                <calcite-tooltip label="tooltip" reference-element="layer-fab" disable-pointer
+                <calcite-tooltip label="tooltip" reference-element="layer-fab" pointer-disabled
                   >Add layers</calcite-tooltip
                 >
               </calcite-panel>
@@ -103,7 +103,7 @@
 
             <calcite-shell-panel slot="panel-end" position="end">
               <calcite-action-bar slot="action-bar">
-                <calcite-tooltip slot="expand-tooltip" label="tooltip" disable-pointer>Add layers</calcite-tooltip>
+                <calcite-tooltip slot="expand-tooltip" label="tooltip" pointer-disabled>Add layers</calcite-tooltip>
                 <calcite-action-group>
                   <calcite-action text="Layer properties" icon="sliders-horizontal"> </calcite-action>
                   <calcite-action text="Styles" icon="shapes"> </calcite-action>
@@ -228,7 +228,7 @@
                     </calcite-block>
                   </calcite-sortable-list>
                   <calcite-fab slot="fab" id="label-fab" text="Add label class"></calcite-fab>
-                  <calcite-tooltip label="tootltip" reference-element="label-fab" disable-pointer>
+                  <calcite-tooltip label="tootltip" reference-element="label-fab" pointer-disabled>
                     Add label class
                   </calcite-tooltip>
                 </calcite-flow-item>
diff --git a/src/demos/shell/demo-app-blank.html b/src/demos/shell/demo-app-blank.html
index 1abe8ea77bf..de958b588ea 100644
--- a/src/demos/shell/demo-app-blank.html
+++ b/src/demos/shell/demo-app-blank.html
@@ -64,7 +64,7 @@
                 Actionbar
             </div> -->
               <calcite-action-bar slot="action-bar">
-                <calcite-tooltip slot="expand-tooltip" label="tooltip" disable-pointer>Add layers</calcite-tooltip>
+                <calcite-tooltip slot="expand-tooltip" label="tooltip" pointer-disabled>Add layers</calcite-tooltip>
                 <calcite-action-group>
                   <calcite-action text="Layer properties" icon="sliders-horizontal"> </calcite-action>
                   <calcite-action text="Styles" icon="shapes"> </calcite-action>
diff --git a/src/demos/shell/nesting-testing-flow.html b/src/demos/shell/nesting-testing-flow.html
index c2bdf8aed29..8b0da40d8a2 100644
--- a/src/demos/shell/nesting-testing-flow.html
+++ b/src/demos/shell/nesting-testing-flow.html
@@ -255,7 +255,7 @@
                       </calcite-block>
 
                       <calcite-fab slot="fab" id="label-fab" text="Add label class"></calcite-fab>
-                      <calcite-tooltip label="tooltip" reference-element="label-fab" disable-pointer>
+                      <calcite-tooltip label="tooltip" reference-element="label-fab" pointer-disabled>
                         Add label class
                       </calcite-tooltip>
                       <calcite-button slot="footer-actions" appearance="outline" width="half">Cancel</calcite-button>
diff --git a/src/demos/shell/nesting-testing.html b/src/demos/shell/nesting-testing.html
index 976fec06a52..b75af40c5e9 100644
--- a/src/demos/shell/nesting-testing.html
+++ b/src/demos/shell/nesting-testing.html
@@ -208,7 +208,7 @@
                   </calcite-block>
 
                   <calcite-fab slot="fab" id="label-fab" text="Add label class"></calcite-fab>
-                  <calcite-tooltip label="tooltip" reference-element="label-fab" disable-pointer>
+                  <calcite-tooltip label="tooltip" reference-element="label-fab" pointer-disabled>
                     Add label class
                   </calcite-tooltip>
                   <calcite-button slot="footer-actions" appearance="outline" width="half">Cancel</calcite-button>
diff --git a/src/demos/theme/auto.html b/src/demos/theme/auto.html
index 6b7f0e851a1..51f7fdab1c5 100644
--- a/src/demos/theme/auto.html
+++ b/src/demos/theme/auto.html
@@ -106,7 +106,7 @@
               <calcite-panel heading="Layers" height-scale="l" width-scale="m">
                 <div id="layerlist-container"></div>
                 <calcite-fab slot="fab" id="layer-fab" text="Add layers"></calcite-fab>
-                <calcite-tooltip label="tooltip" reference-element="layer-fab" disable-pointer
+                <calcite-tooltip label="tooltip" reference-element="layer-fab" pointer-disabled
                   >Add layers
                 </calcite-tooltip>
               </calcite-panel>
@@ -114,7 +114,7 @@
 
             <calcite-shell-panel slot="panel-end" position="end">
               <calcite-action-bar slot="action-bar">
-                <calcite-tooltip slot="expand-tooltip" label="tooltip" disable-pointer>Add layers</calcite-tooltip>
+                <calcite-tooltip slot="expand-tooltip" label="tooltip" pointer-disabled>Add layers</calcite-tooltip>
                 <calcite-action-group>
                   <calcite-action text="Layer properties" icon="sliders-horizontal"> </calcite-action>
                   <calcite-action text="Styles" icon="shapes"> </calcite-action>
@@ -238,7 +238,7 @@
                     </calcite-block>
                   </calcite-sortable-list>
                   <calcite-fab slot="fab" id="label-fab" text="Add label class"></calcite-fab>
-                  <calcite-tooltip label="tootltip" reference-element="label-fab" disable-pointer>
+                  <calcite-tooltip label="tootltip" reference-element="label-fab" pointer-disabled>
                     Add label class
                   </calcite-tooltip>
                 </calcite-flow-item>
diff --git a/src/utils/floating-ui.ts b/src/utils/floating-ui.ts
index 34b8d621a72..5452587f459 100644
--- a/src/utils/floating-ui.ts
+++ b/src/utils/floating-ui.ts
@@ -191,7 +191,7 @@ export const FloatingCSS = {
 
 function getMiddleware({
   placement,
-  disableFlip,
+  flipDisabled,
   flipPlacements,
   offsetDistance,
   offsetSkidding,
@@ -199,7 +199,7 @@ function getMiddleware({
   type
 }: {
   placement: LogicalPlacement;
-  disableFlip?: boolean;
+  flipDisabled?: boolean;
   flipPlacements?: EffectivePlacement[];
   offsetDistance?: number;
   offsetSkidding?: number;
@@ -230,7 +230,7 @@ function getMiddleware({
       middleware.push(
         autoPlacement({ alignment: placement === "auto-start" ? "start" : placement === "auto-end" ? "end" : null })
       );
-    } else if (!disableFlip) {
+    } else if (!flipDisabled) {
       middleware.push(flip(flipPlacements ? { fallbackPlacements: flipPlacements } : {}));
     }
 
@@ -287,7 +287,7 @@ export function getEffectivePlacement(floatingEl: HTMLElement, placement: Logica
  * @param options.floatingEl
  * @param options.overlayPositioning
  * @param options.placement
- * @param options.disableFlip
+ * @param options.flipDisabled
  * @param options.flipPlacements
  * @param options.offsetDistance
  * @param options.offsetSkidding
@@ -322,7 +322,7 @@ const debouncedReposition = debounce(positionFloatingUI, repositionDebounceTimeo
  * @param root0.floatingEl
  * @param root0.overlayPositioning
  * @param root0.placement
- * @param root0.disableFlip
+ * @param root0.flipDisabled
  * @param root0.flipPlacements
  * @param root0.offsetDistance
  * @param root0.offsetSkidding
@@ -335,7 +335,7 @@ export async function positionFloatingUI({
   floatingEl,
   overlayPositioning = "absolute",
   placement,
-  disableFlip,
+  flipDisabled,
   flipPlacements,
   offsetDistance,
   offsetSkidding,
@@ -347,9 +347,8 @@ export async function positionFloatingUI({
   floatingEl: HTMLElement;
   overlayPositioning: Strategy;
   placement: LogicalPlacement;
-  disableFlip?: boolean;
+  flipDisabled?: boolean;
   flipPlacements?: EffectivePlacement[];
-
   offsetDistance?: number;
   offsetSkidding?: number;
   arrowEl?: HTMLElement;
@@ -376,7 +375,7 @@ export async function positionFloatingUI({
         : getEffectivePlacement(floatingEl, placement),
     middleware: getMiddleware({
       placement,
-      disableFlip,
+      flipDisabled,
       flipPlacements,
       offsetDistance,
       offsetSkidding,
diff --git a/src/utils/focusTrapComponent.ts b/src/utils/focusTrapComponent.ts
index a131b4cca8a..cd2c241ffa2 100644
--- a/src/utils/focusTrapComponent.ts
+++ b/src/utils/focusTrapComponent.ts
@@ -20,7 +20,7 @@ export interface FocusTrapComponent {
   /**
    * When `true`, prevents focus trapping.
    */
-  disableFocusTrap: boolean;
+  focusTrapDisabled: boolean;
 
   /**
    * The focus trap instance.
@@ -73,7 +73,7 @@ export function connectFocusTrap(component: FocusTrapComponent): void {
  * @param {FocusTrapComponent} component The FocusTrap component.
  */
 export function activateFocusTrap(component: FocusTrapComponent): void {
-  if (!component.disableFocusTrap) {
+  if (!component.focusTrapDisabled) {
     component.focusTrap?.activate();
   }
 }

From 77ee23cfb688023b3f69214155f0b0ab6f3dd9ce Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 14 Dec 2022 23:53:40 +0000
Subject: [PATCH 04/21] 1.0.0-next.680

---
 CHANGELOG.md      | 76 ++++++++++++++++++++++++++++++++---------------
 package-lock.json |  4 +--
 package.json      |  2 +-
 3 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ac9cbb89e4d..8b1a167ca7b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,57 +9,85 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### ⚠ BREAKING CHANGES
 
-- **date-picker:** Removed the `start` and `end` properties, set `value`
+- **popover, dropdown, modal, pick-list-item, value-list-item:** Renamed `disable*` properties.
+
+* Dropdown
+* Renamed the property `disableCloseOnSelect`, use
+  `closeOnSelectDisabled` instead.
+* Modal
+* Renamed the property `disableCloseButton`, use `closeButtonDisabled`
+  instead.
+* Renamed the property `disableFocusTrap`, use `focusTrapDisabled`
+  instead.
+* Renamed the property `disableOutsideClose`, use `outsideCloseDisabled`
+  instead.
+  - Renamed the property `disableEscape`, use `escapeDisabled` instead.
+* PickListItem
+* Renamed the property `disableDeselect`, use `deselectDisabled`
+  instead.
+* Popover
+  - Renamed the property `disableFlip`, use `flipDisabled` instead.
+* Renamed the property `disableFocusTrap`, use `focusTrapDisabled`
+  instead.
+* Renamed the property `disablePointer`, use `pointerDisabled` instead.
+* ValueListItem
+* Renamed the property `disableDeselect`, use `deselectDisabled`
+  instead.
+
+- **input-date-picker:** Removed the `calciteDatePickerChange` event, use
+  `calciteInputDatePickerChange` instead.
+
+* **date-picker:** Removed the `start` and `end` properties, set `value`
   as an array with the start as the first value and the end as the second
   value instead.
 
-* **combobox:** Renamed event.
+- **combobox:** Renamed event.
 
-- Renamed the event `calciteComboboxChipDismiss`, use
+* Renamed the event `calciteComboboxChipDismiss`, use
   `calciteComboboxChipClose` instead.
 
-* **alert:** Renamed properties.
+- **alert:** Renamed properties.
 
-- Renamed the property `autoDismiss`, use `autoClose` instead.
-- Renamed the property `autoDismissDuration`, use `autoCloseDuration`
+* Renamed the property `autoDismiss`, use `autoClose` instead.
+* Renamed the property `autoDismissDuration`, use `autoCloseDuration`
   instead.
 
-* **combobox:** Removed `event.detail` payload from events and added
+- **combobox:** Removed `event.detail` payload from events and added
   properties `selectedItems` and `filteredItems`.
 
-- Removed the `event.detail` property on the event
+* Removed the `event.detail` property on the event
   `calciteComboboxChange`, use `event.target.selectedItems` instead.
-- Removed the `event.detail` property on the event
+* Removed the `event.detail` property on the event
   `calciteComboboxFilterChange`, use `event.target.filteredItems` or
   `event.target.value` instead.
 
-* **chip:** Renamed event.
+- **chip:** Renamed event.
 
-- Renamed the event `calciteChipDismiss`, use `calciteChipClose`
+* Renamed the event `calciteChipDismiss`, use `calciteChipClose`
   instead.
 
-* **tip:** Renamed property.
+- **tip:** Renamed property.
 
-- Renamed the property `nonDismissible`, use `closeDisabled` instead.
+* Renamed the property `nonDismissible`, use `closeDisabled` instead.
 
-* **date-picker:** Removed `event.detail` payload from events.
+- **date-picker:** Removed `event.detail` payload from events.
 
-- Removed the `event.detail` property on the event
+* Removed the `event.detail` property on the event
   `calciteDatePickerChange`, use `event.target` instead.
-- Removed the `event.detail` property on the event
+* Removed the `event.detail` property on the event
   `calciteDatePickerRangeChange`, use `event.target` instead.
 
-- **modal:** Removed deprecated properties and method.
+* **modal:** Removed deprecated properties and method.
 
-* Removed the property `active`, use `open` instead.
-* Removed the property noPadding, use `--calcite-modal-padding` CSS
+- Removed the property `active`, use `open` instead.
+- Removed the property noPadding, use `--calcite-modal-padding` CSS
   property instead.
-* Removed the method `focusElement`, use `setFocus` method instead.
-* Removed the CSS property ` --calcite-modal-content-text`.
-* Removed the CSS property `--calcite-modal-padding-large`.
-* Removed the CSS property `--calcite-modal-title-text`.
+- Removed the method `focusElement`, use `setFocus` method instead.
+- Removed the CSS property ` --calcite-modal-content-text`.
+- Removed the CSS property `--calcite-modal-padding-large`.
+- Removed the CSS property `--calcite-modal-title-text`.
 
-- **pagination:** Removed deprecated event.
+* **pagination:** Removed deprecated event.
 
 Removed the event `calcitePaginationUpdate` event, use
 `calcitePaginationChange` event instead.
diff --git a/package-lock.json b/package-lock.json
index 27cde262e5d..cad574dd819 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.679",
+  "version": "1.0.0-next.680",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@esri/calcite-components",
-      "version": "1.0.0-next.679",
+      "version": "1.0.0-next.680",
       "license": "SEE LICENSE IN copyright.txt",
       "dependencies": {
         "@floating-ui/dom": "1.0.10",
diff --git a/package.json b/package.json
index 51e3125ebd6..ab5065e4c86 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.679",
+  "version": "1.0.0-next.680",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

From 88040c85ae06590af3f07cad8840a10e81faf08f Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Wed, 14 Dec 2022 18:34:55 -0600
Subject: [PATCH 05/21] 
 refactor(action,action-bar,action-group,action-pad,alert,block-section,block,button):
 remove deprecated `intl*` properties (#5982)

BREAKING CHANGE: Removed deprecated `intl*` properties , use
`messageOverrides` property instead.

- action:
* Removed the property `intlLoading` , use `messsageOverrides.loading`
instead.
* Removed the property `intlIndicator`, use `messageOverrides.indicator`
instead.

- action-bar:
* Removed the property `intlExpand` , use `messsageOverrides.expand`
instead.
* Removed the property `intlCollapse`, use `messageOverrides.collapse`
instead.

- action-group:
* Removed the property `intlMore` , use `messsageOverrides.more`
instead.

- action-pad:
* Removed the property `intlExpand` , use `messsageOverrides.expand`
instead.
* Removed the property `intlCollapse`, use `messageOverrides.collapse`
instead.

- alert:
* Removed the property `intlClose`, use `messageOverrides.close`
instead.

- block:
* Removed the property `intlExpand` , use `messsageOverrides.expand`
instead.
* Removed the property `intlCollapse`, use `messageOverrides.collapse`
instead.
* Removed the property `intlLoading` , use `messsageOverrides.loading`
instead.
* Removed the property `intlOptions`, use `messageOverrides.options`
instead.

- block-section:
* Removed the property `intlExpand` , use `messsageOverrides.expand`
instead.
* Removed the property `intlCollapse`, use `messageOverrides.collapse`
instead.

- button:
* Removed the property `intlLoading` , use `messsageOverrides.loading`
instead.

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: JC Franco <jfranco@esri.com>
Co-authored-by: Ben Elan <benelan@users.noreply.github.com>
Co-authored-by: jona7150 <jturpin@esri.com>
Co-authored-by: Ben Elan <belan@esri.com>
Co-authored-by: Calcite Admin <calcite-admin@esri.com>
Co-authored-by: jcfranco <jcfranco@users.noreply.github.com>
Co-authored-by: Kitty Hurley <khurley@esri.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Eliza Khachatryan <eli97736@esri.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Matt Driscoll <mdriscoll@esri.com>
Co-authored-by: Alison Stump <alisonailea@users.noreply.github.com>
---
 src/components/action-bar/action-bar.tsx      | 17 ---------
 src/components/action-group/action-group.tsx  |  8 -----
 src/components/action-pad/action-pad.tsx      | 16 ---------
 src/components/action/action.e2e.ts           |  6 ++--
 src/components/action/action.tsx              | 20 +----------
 .../action/assets/action/t9n/messages_en.json |  3 +-
 src/components/action/resources.ts            |  5 ---
 src/components/alert/alert.tsx                |  9 -----
 .../block-section/block-section.tsx           | 16 ---------
 src/components/block/block.stories.ts         | 24 -------------
 src/components/block/block.tsx                | 36 -------------------
 src/components/button/button.tsx              |  9 -----
 12 files changed, 6 insertions(+), 163 deletions(-)
 mode change 100755 => 100644 src/components/action/action.tsx

diff --git a/src/components/action-bar/action-bar.tsx b/src/components/action-bar/action-bar.tsx
index 458dc3fdca4..54f960aba8b 100755
--- a/src/components/action-bar/action-bar.tsx
+++ b/src/components/action-bar/action-bar.tsx
@@ -86,20 +86,6 @@ export class ActionBar
     this.conditionallyOverflowActions();
   }
 
-  /**
-   * Specifies the label of the expand icon when the component is collapsed.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlExpand: string;
-
-  /**
-   * Specifies the label of the collapse icon when the component is expanded.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlCollapse: string;
-
   /**
    *  The layout direction of the actions.
    */
@@ -139,8 +125,6 @@ export class ActionBar
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlCollapse")
-  @Watch("intlExpand")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
@@ -348,7 +332,6 @@ export class ActionBar
       <ExpandToggle
         el={el}
         expanded={expanded}
-        // rename intl properties for 1.0
         intlCollapse={messages.collapse}
         intlExpand={messages.expand}
         position={position}
diff --git a/src/components/action-group/action-group.tsx b/src/components/action-group/action-group.tsx
index 217c6c2ea7f..a7c5045e787 100755
--- a/src/components/action-group/action-group.tsx
+++ b/src/components/action-group/action-group.tsx
@@ -58,13 +58,6 @@ export class ActionGroup implements ConditionalSlotComponent, LocalizedComponent
    */
   @Prop({ reflect: true }) columns: Columns;
 
-  /**
-   * Specifies a text string for the `calcite-action-menu`.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlMore: string;
-
   /**
    * When `true`, the `calcite-action-menu` is open.
    */
@@ -87,7 +80,6 @@ export class ActionGroup implements ConditionalSlotComponent, LocalizedComponent
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlMore")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/action-pad/action-pad.tsx b/src/components/action-pad/action-pad.tsx
index f9ba78db640..313c3df33a9 100755
--- a/src/components/action-pad/action-pad.tsx
+++ b/src/components/action-pad/action-pad.tsx
@@ -75,20 +75,6 @@ export class ActionPad
    */
   @Prop({ reflect: true }) layout: Layout = "vertical";
 
-  /**
-   * Specifies the label of the expand icon when the component is collapsed.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlExpand: string;
-
-  /**
-   * Specifies the label of the collapse icon when the component is expanded.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlCollapse: string;
-
   /**
    * Arranges the component depending on the element's `dir` property.
    */
@@ -111,8 +97,6 @@ export class ActionPad
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlCollapse")
-  @Watch("intlExpand")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/action/action.e2e.ts b/src/components/action/action.e2e.ts
index 636f90ac166..13b6db46546 100755
--- a/src/components/action/action.e2e.ts
+++ b/src/components/action/action.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, disabled, hidden, renders, slots, t9n, defaults } from "../../tests/commonTests";
-import { CSS, SLOTS, TEXT } from "./resources";
+import { CSS, SLOTS } from "./resources";
 
 describe("calcite-action", () => {
   it("has property defaults", async () =>
@@ -136,7 +136,7 @@ describe("calcite-action", () => {
     await page.setContent(`<calcite-action indicator text="hello world"></calcite-action>`);
 
     const button = await page.find(`calcite-action >>> .${CSS.button}`);
-    expect(button.getAttribute("aria-label")).toBe(`hello world (${TEXT.indicator})`);
+    expect(button.getAttribute("aria-label")).toBe(`hello world (Indicator present)`);
   });
 
   it("should have label", async () => {
@@ -192,6 +192,6 @@ describe("calcite-action", () => {
 
     expect(liveRegion.getAttribute("aria-live")).toBe("polite");
     expect(liveRegion.getAttribute("role")).toBe("region");
-    expect(liveRegion.textContent).toBe(TEXT.indicator);
+    expect(liveRegion.textContent).toBe("Indicator present");
   });
 });
diff --git a/src/components/action/action.tsx b/src/components/action/action.tsx
old mode 100755
new mode 100644
index ea096fe8cc7..781e7a362e4
--- a/src/components/action/action.tsx
+++ b/src/components/action/action.tsx
@@ -12,7 +12,7 @@ import {
   Build
 } from "@stencil/core";
 import { Alignment, Appearance, Scale } from "../interfaces";
-import { CSS, TEXT, SLOTS } from "./resources";
+import { CSS, SLOTS } from "./resources";
 import { guid } from "../../utils/guid";
 import { createObserver } from "../../utils/observers";
 import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
@@ -82,21 +82,6 @@ export class Action
    */
   @Prop({ reflect: true }) indicator = false;
 
-  /**
-   * When `indicator` is `true`, specifies the accessible context of the `indicator`.
-   *
-   * @default "Indicator present"
-   */
-  @Prop() intlIndicator: string = TEXT.indicator;
-
-  /**
-   * Specifies the text label to display while loading.
-   *
-   * @default "Loading"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlLoading?: string;
-
   /**
    * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.
    */
@@ -134,8 +119,6 @@ export class Action
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlLoading")
-  @Watch("intlIndicator")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
@@ -295,7 +278,6 @@ export class Action
       buttonId,
       messages
     } = this;
-
     const ariaLabel = `${label || text}${indicator ? ` (${messages.indicator})` : ""}`;
 
     const buttonClasses = {
diff --git a/src/components/action/assets/action/t9n/messages_en.json b/src/components/action/assets/action/t9n/messages_en.json
index 53151fbbab3..7b1107df302 100644
--- a/src/components/action/assets/action/t9n/messages_en.json
+++ b/src/components/action/assets/action/t9n/messages_en.json
@@ -1,3 +1,4 @@
 {
-  "loading": "Loading"
+  "loading": "Loading",
+  "indicator": "Indicator present"
 }
diff --git a/src/components/action/resources.ts b/src/components/action/resources.ts
index a50419b8dc0..ddabbf437aa 100644
--- a/src/components/action/resources.ts
+++ b/src/components/action/resources.ts
@@ -10,11 +10,6 @@ export const CSS = {
   textContainerVisible: "text-container--visible"
 };
 
-export const TEXT = {
-  loading: "Loading",
-  indicator: "indicator present"
-};
-
 export const SLOTS = {
   tooltip: "tooltip"
 };
diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx
index 81507120713..1f708610d67 100644
--- a/src/components/alert/alert.tsx
+++ b/src/components/alert/alert.tsx
@@ -109,14 +109,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
    */
   @Prop({ reflect: true }) icon: string | boolean;
 
-  /**
-   * Specifies the text label for the close button.
-   *
-   * @default "Close"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlClose: string;
-
   /** Specifies an accessible name for the component. */
   @Prop() label!: string;
 
@@ -143,7 +135,6 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlClose")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/block-section/block-section.tsx b/src/components/block-section/block-section.tsx
index 9726328a0be..0846e1b6a8d 100644
--- a/src/components/block-section/block-section.tsx
+++ b/src/components/block-section/block-section.tsx
@@ -43,20 +43,6 @@ export class BlockSection implements LocalizedComponent, T9nComponent {
   //
   // --------------------------------------------------------------------------
 
-  /**
-   * Accessible name for the component's collapse button.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlCollapse: string;
-
-  /**
-   * Accessible name for the component's expand button.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlExpand: string;
-
   /**
    * When `true`, expands the component and its contents.
    */
@@ -93,8 +79,6 @@ export class BlockSection implements LocalizedComponent, T9nComponent {
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlCollapse")
-  @Watch("intlExpand")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/block/block.stories.ts b/src/components/block/block.stories.ts
index 7b62f8bdafb..7893a899019 100644
--- a/src/components/block/block.stories.ts
+++ b/src/components/block/block.stories.ts
@@ -85,22 +85,6 @@ const createBlockAttributes: (options?: { exceptions: string[] }) => Attributes
           delete this.build;
           return this;
         }
-      },
-      {
-        name: "intl-collapse",
-        commit(): Attribute {
-          this.value = text("intlCollapse", "Collapse", group);
-          delete this.build;
-          return this;
-        }
-      },
-      {
-        name: "intl-expand",
-        commit(): Attribute {
-          this.value = text("intlExpand", "Expand", group);
-          delete this.build;
-          return this;
-        }
       }
     ],
     exceptions
@@ -123,14 +107,6 @@ const createSectionAttributes: () => Attributes = () => {
     {
       name: "toggle-display",
       value: select("toggleDisplay", toggleDisplayOptions, toggleDisplayOptions[0], group)
-    },
-    {
-      name: "intl-collapse",
-      value: text("intlCollapse", "Collapse", group)
-    },
-    {
-      name: "intl-expand",
-      value: text("intlExpand", "Expand", group)
     }
   ];
 };
diff --git a/src/components/block/block.tsx b/src/components/block/block.tsx
index d78d2f71e05..7e7848b0b10 100644
--- a/src/components/block/block.tsx
+++ b/src/components/block/block.tsx
@@ -77,38 +77,6 @@ export class Block
    */
   @Prop({ reflect: true }) headingLevel: HeadingLevel;
 
-  /**
-   * Accessible name for the component's collapse button.
-   *
-   * @default "Collapse"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlCollapse?: string;
-
-  /**
-   * Accessible name for the component's expand button.
-   *
-   * @default "Expand"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlExpand?: string;
-
-  /**
-   * Accessible name when the component is loading.
-   *
-   * @default "Loading"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlLoading?: string;
-
-  /**
-   * Accessible name for the component's options button.
-   *
-   * @default "Options"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlOptions?: string;
-
   /**
    * When `true`, a busy indicator is displayed.
    */
@@ -141,10 +109,6 @@ export class Block
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlCollapse")
-  @Watch("intlExpand")
-  @Watch("intlLoading")
-  @Watch("intlOptions")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index bcb424d4f19..92bd41e8534 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -86,14 +86,6 @@ export class Button
   /** Specifies an icon to display at the start of the component. */
   @Prop({ reflect: true }) iconStart: string;
 
-  /**
-   * Accessible name when the component is loading.
-   *
-   * @default "Loading"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlLoading?: string;
-
   /**
    * When `true`, a busy indicator is displayed and interaction is disabled.
    */
@@ -166,7 +158,6 @@ export class Button
     }
   }
 
-  @Watch("intlLoading")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /** referred in t9n util */

From 4bf8b6d1dc983056ef20e3a24d3a62ca9d7191fb Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Wed, 14 Dec 2022 18:35:05 -0600
Subject: [PATCH 06/21] 
 refactor(chip,card,combobox,date-picker,flow,flow-item,filter,
 input-date-picker): remove deprecated `intl*` & accessible label properties
 (#6041)

BREAKING CHANGE: Removed deprecated intl* & accessible label properties.

- card:
* Removed the property` intlLoading` , use `messsageOverrides.loading`
instead.
* Removed the property `intlSelect` use `messageOverrides.select`
instead.
* Removed the property `intlDeselect` use `messageOverrides.deselect`
instead.

- chip:
* Removed the property `dismissLabel` , use
`messsageOverrides.dismissLabel ` instead.

- color-picker:
  * Removed the property `intlB` , use `messsageOverrides.b` instead.
* Removed the property `intlBlue` , use `messsageOverrides.blue`
instead.
* Removed the property `intlDeleteColor` , use
`messsageOverrides.deleteColor` instead.
  * Removed the property `intlG` , use `messsageOverrides.g` instead.
* Removed the property `intlGreen` , use `messsageOverrides.green`
instead.
  * Removed the property `intlH` , use `messsageOverrides.h` instead.
* Removed the property `intlHsv` , use `messsageOverrides.hsv` instead.
* Removed the property `intlHex` , use `messsageOverrides.hex` instead.
* Removed the property `intlHue` , use `messsageOverrides.hue` instead.
* Removed the property `intlNoColor` , use `messsageOverrides.noColor`
instead.
  * Removed the property `intlR` , use `messsageOverrides.r` instead.
* Removed the property `intlRed` , use `messsageOverrides.red` instead.
* Removed the property `intlRgb` , use `messsageOverrides.rgb` instead.
  * Removed the property `intlS` , use `messsageOverrides.s` instead.
* Removed the property `intlSaturation` , use
`messsageOverrides.saturation` instead.
* Removed the property `intlSaveColor` , use
`messsageOverrides.saveColor` instead.
* Removed the property `intlSaved` , use `messsageOverrides.saved`
instead.
  * Removed the property `intlV` , use `messsageOverrides.v` instead.
* Removed the property `intlValue` , use `messsageOverrides.value`
instead.

- combobox:
* Removed the property `intlRemoveTag` , use
`messsageOverrides.removeTag` instead.

- date-picker
* Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
instead.
* Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
instead.
* Removed the property `intlYear`, use `messageOverrides.year` instead.

- flow-item:
* Removed the property `intlBack` , use `messsageOverrides.back`
instead.
* Removed the property `intlClose`, use `messageOverrides.close`
instead.
* Removed the property `intlOptions` , use `messsageOverrides.options`
instead.

- filter:
* Removed the property `intlClear`, use `messsageOverrides.clear`
instead.
* Removed the property `intlLabel`, use `messageOverrides.label`
instead.

- input-date-picker:
* Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
instead.
* Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
instead.
* Removed the property `intlYear`, use `messageOverrides.year` instead.
---
 src/components/card/card.tsx                  |  25 ---
 src/components/chip/chip.e2e.ts               |   2 +-
 src/components/chip/chip.tsx                  |  19 ---
 src/components/color-picker/color-picker.tsx  | 154 ------------------
 src/components/combobox/combobox.tsx          |  11 +-
 .../date-picker/date-picker.stories.ts        |  16 --
 src/components/date-picker/date-picker.tsx    |  27 ---
 src/components/filter/filter.tsx              |  16 --
 src/components/flow-item/flow-item.tsx        |  22 ---
 .../input-date-picker.stories.ts              |   2 -
 .../input-date-picker/input-date-picker.tsx   |  28 ----
 11 files changed, 2 insertions(+), 320 deletions(-)

diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index ed31c33cfa9..d6cfa010ef6 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -71,28 +71,6 @@ export class Card implements ConditionalSlotComponent, LocalizedComponent, T9nCo
   /** When `true`, the component is selectable. */
   @Prop({ reflect: true }) selectable = false;
 
-  /**
-   * Accessible name when the component is loading.
-   *
-   * @default "Loading"
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlLoading?: string;
-
-  /**
-   * When `selectable` is `true`, the accessible name for the component's checkbox for selection.
-   *
-   * @default "Select"
-   */
-  @Prop({ reflect: false }) intlSelect?: string;
-
-  /**
-   * When `selectable` is `true`, the accessible name for the component's checkbox for deselection.
-   *
-   * @default "Deselect"
-   */
-  @Prop({ reflect: false }) intlDeselect?: string;
-
   /** Sets the placement of the thumbnail defined in the `thumbnail` slot. */
   @Prop({ reflect: true }) thumbnailPosition: LogicalFlowPosition = "block-start";
 
@@ -108,9 +86,6 @@ export class Card implements ConditionalSlotComponent, LocalizedComponent, T9nCo
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlLoading")
-  @Watch("intlDeselect")
-  @Watch("intlSelect")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/chip/chip.e2e.ts b/src/components/chip/chip.e2e.ts
index 44e1265dbc9..3bd9804f493 100644
--- a/src/components/chip/chip.e2e.ts
+++ b/src/components/chip/chip.e2e.ts
@@ -180,5 +180,5 @@ describe("calcite-chip", () => {
     });
   });
 
-  it("supports translation", () => t9n("calcite-chip", false, ["dismissLabel"]));
+  it("supports translation", () => t9n("calcite-chip"));
 });
diff --git a/src/components/chip/chip.tsx b/src/components/chip/chip.tsx
index 6cc205a02c2..b13cd0dc62f 100644
--- a/src/components/chip/chip.tsx
+++ b/src/components/chip/chip.tsx
@@ -64,14 +64,6 @@ export class Chip
   /** When `true`, a close button is added to the component. */
   @Prop({ reflect: true, mutable: true }) closable = false;
 
-  /**
-   * Accessible name for the component's close button.
-   *
-   * @default "Close"
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() dismissLabel?: string;
-
   /** Specifies an icon to display. */
   @Prop({ reflect: true }) icon: string;
 
@@ -99,7 +91,6 @@ export class Chip
    */
   @Prop({ mutable: true }) messages: Messages;
 
-  @Watch("dismissLabel")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
@@ -191,16 +182,6 @@ export class Chip
 
   private guid: string = guid();
 
-  getExtraMessageOverrides(): Partial<Messages> {
-    const extraOverrides: Partial<Messages> = {};
-
-    if (this.dismissLabel) {
-      extraOverrides.dismissLabel = this.dismissLabel;
-    }
-
-    return extraOverrides;
-  }
-
   //--------------------------------------------------------------------------
   //
   //  Render Methods
diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx
index de633309f92..8774532fb17 100644
--- a/src/components/color-picker/color-picker.tsx
+++ b/src/components/color-picker/color-picker.tsx
@@ -131,140 +131,6 @@ export class ColorPicker
   /** When `true`, hides the saved colors section. */
   @Prop({ reflect: true }) hideSaved = false;
 
-  /**
-   * Accessible name for the RGB section's blue channel.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlB: string;
-
-  /**
-   * Accessible name for the RGB section's blue channel description.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlBlue: string;
-
-  /**
-   * Accessible name for the delete color button.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlDeleteColor: string;
-
-  /**
-   * Accessible name for the RGB section's green channel.
-   *
-   * @default "G"
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlG: string;
-
-  /**
-   * Accessible name for the RGB section's green channel description.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlGreen: string;
-
-  /**
-   * Accessible name for the HSV section's hue channel.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlH: string;
-
-  /**
-   * Accessible name for the HSV mode.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlHsv: string;
-
-  /**
-   * Accessible name for the Hex input.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlHex: string;
-
-  /**
-   * Accessible name for the HSV section's hue channel description.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlHue: string;
-
-  /**
-   * Accessible name for the Hex input when there is no color selected.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlNoColor: string;
-
-  /**
-   * Accessible name for the RGB section's red channel.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlR: string;
-
-  /**
-   * Accessible name for the RGB section's red channel description.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlRed: string;
-
-  /**
-   * Accessible name for the RGB mode.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlRgb: string;
-
-  /**
-   * Accessible name for the HSV section's saturation channel.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlS: string;
-
-  /**
-   * Accessible name for the HSV section's saturation channel description.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlSaturation: string;
-
-  /**
-   * Accessible name for the save color button.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlSaveColor: string;
-
-  /**
-   * Accessible name for the saved colors section.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlSaved: string;
-
-  /**
-   * Accessible name for the HSV section's value channel.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlV: string;
-
-  /**
-   * Accessible name for the HSV section's value channel description.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlValue: string;
-
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
@@ -282,26 +148,6 @@ export class ColorPicker
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlG")
-  @Watch("intlB")
-  @Watch("intlV")
-  @Watch("intlBlue")
-  @Watch("intlDeleteColor")
-  @Watch("intlGreen")
-  @Watch("intlH")
-  @Watch("intlHsv")
-  @Watch("intlHex")
-  @Watch("intlHue")
-  @Watch("intlNoColor")
-  @Watch("intlR")
-  @Watch("intlRed")
-  @Watch("intlRgb")
-  @Watch("intlS")
-  @Watch("intlSaturation")
-  @Watch("intlSaveColor")
-  @Watch("intlSaved")
-  @Watch("intlV")
-  @Watch("intlValue")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/combobox/combobox.tsx b/src/components/combobox/combobox.tsx
index d868a7c11f3..2962bdab696 100644
--- a/src/components/combobox/combobox.tsx
+++ b/src/components/combobox/combobox.tsx
@@ -213,14 +213,6 @@ export class Combobox
     }
   }
 
-  /**
-   * Accessible name for the component's remove tag when a `calcite-combobox-item` is selected.
-   *
-   * @default "Remove tag"
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
-   */
-  @Prop({ reflect: false }) intlRemoveTag: string;
-
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
@@ -238,7 +230,6 @@ export class Combobox
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlRemoveTag")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /*  wired up by t9n util */
@@ -1074,10 +1065,10 @@ export class Combobox
         <calcite-chip
           class={chipClasses}
           closable
-          dismissLabel={messages.removeTag}
           icon={item.icon}
           id={item.guid ? `${chipUidPrefix}${item.guid}` : null}
           key={item.textLabel}
+          messageOverrides={{ dismissLabel: messages.removeTag }}
           onCalciteChipClose={() => this.calciteChipCloseHandler(item)}
           scale={scale}
           title={label}
diff --git a/src/components/date-picker/date-picker.stories.ts b/src/components/date-picker/date-picker.stories.ts
index 65fe322bdca..0095963ff6e 100644
--- a/src/components/date-picker/date-picker.stories.ts
+++ b/src/components/date-picker/date-picker.stories.ts
@@ -38,22 +38,6 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
           return this;
         }
       },
-      {
-        name: "intl-next-month",
-        commit(): Attribute {
-          this.value = text("intl-next-month", "Next month");
-          delete this.build;
-          return this;
-        }
-      },
-      {
-        name: "intl-prev-month",
-        commit(): Attribute {
-          this.value = text("intl-prev-month", "Previous month");
-          delete this.build;
-          return this;
-        }
-      },
       {
         name: "lang",
         commit(): Attribute {
diff --git a/src/components/date-picker/date-picker.tsx b/src/components/date-picker/date-picker.tsx
index 3b20d47a5a7..a1d74ab88da 100644
--- a/src/components/date-picker/date-picker.tsx
+++ b/src/components/date-picker/date-picker.tsx
@@ -142,30 +142,6 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
     }
   }
 
-  /**
-   * Accessible name for the component's previous month button.
-   *
-   * @default "Previous month"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlPrevMonth?: string;
-
-  /**
-   * Accessible name for the component's next month button.
-   *
-   * @default "Next month"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlNextMonth?: string;
-
-  /**
-   * Accessible name for the component's year input.
-   *
-   * @default "Year"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlYear?: string;
-
   /**
    * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.
    *
@@ -193,9 +169,6 @@ export class DatePicker implements LocalizedComponent, T9nComponent {
    */
   @Prop({ mutable: true }) messages: Messages;
 
-  @Watch("intlNextMonth")
-  @Watch("intlPrevMonth")
-  @Watch("intlYear")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/filter/filter.tsx b/src/components/filter/filter.tsx
index 38195ef413c..ebcfccd4ee0 100644
--- a/src/components/filter/filter.tsx
+++ b/src/components/filter/filter.tsx
@@ -75,20 +75,6 @@ export class Filter
    */
   @Prop({ mutable: true }) filteredItems: object[] = [];
 
-  /**
-   * A text label that will appear on the clear button.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
-   */
-  @Prop() intlClear: string;
-
-  /**
-   * Accessible name for the component.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
-   */
-  @Prop() intlLabel: string;
-
   /**
    * Specifies placeholder text for the input element.
    */
@@ -116,8 +102,6 @@ export class Filter
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlClear")
-  @Watch("intlLabel")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/flow-item/flow-item.tsx b/src/components/flow-item/flow-item.tsx
index c9d3da0c88d..e737c63d617 100644
--- a/src/components/flow-item/flow-item.tsx
+++ b/src/components/flow-item/flow-item.tsx
@@ -92,25 +92,6 @@ export class FlowItem
    */
   @Prop({ reflect: true }) heightScale: Scale;
 
-  /**
-   * When `showBackButton` is `true`, the accessible name for the component's back button.
-   *
-   * @deprecated use `calcite-flow-item` instead.
-   */
-  @Prop() intlBack: string;
-
-  /**
-   * When `closable` is `true`, the accessible name for the component's close button.
-   */
-  @Prop() intlClose: string;
-
-  /**
-   * Accessible name for the component's actions menu.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlOptions: string;
-
   /**
    * When `true`, a busy indicator is displayed.
    */
@@ -126,9 +107,6 @@ export class FlowItem
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlBack")
-  @Watch("intlClose")
-  @Watch("intlOptions")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/input-date-picker/input-date-picker.stories.ts b/src/components/input-date-picker/input-date-picker.stories.ts
index bb1bf6a070f..7e742b5eed3 100644
--- a/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/src/components/input-date-picker/input-date-picker.stories.ts
@@ -22,8 +22,6 @@ export const simple = (): string => html`
       min="${text("min", "2016-08-09")}"
       max="${text("max", "2023-12-18")}"
       lang="${select("locale", locales, "en")}"
-      intl-next-month="${text("intl-next-month", "Next month")}"
-      intl-prev-month="${text("intl-prev-month", "Previous month")}"
       placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
     ></calcite-input-date-picker
   </div>
diff --git a/src/components/input-date-picker/input-date-picker.tsx b/src/components/input-date-picker/input-date-picker.tsx
index a94c0e2576a..6cdbdf75ff9 100644
--- a/src/components/input-date-picker/input-date-picker.tsx
+++ b/src/components/input-date-picker/input-date-picker.tsx
@@ -241,30 +241,6 @@ export class InputDatePicker
    */
   @Prop({ reflect: true }) name: string;
 
-  /**
-   * Accessible name for the component's previous month button.
-   *
-   * @default "Previous month"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlPrevMonth?: string;
-
-  /**
-   * Accessible name for the component's next month button.
-   *
-   * @default "Next month"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlNextMonth?: string;
-
-  /**
-   * Accessible name for the component's year input.
-   *
-   * @default "Year"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlYear?: string;
-
   /**
    * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.
    *
@@ -575,10 +551,6 @@ export class InputDatePicker
                   activeRange={this.focusedInput}
                   endAsDate={this.endAsDate}
                   headingLevel={this.headingLevel}
-                  //t9n props are used here to forward the messages only.
-                  intlNextMonth={this.intlNextMonth}
-                  intlPrevMonth={this.intlPrevMonth}
-                  intlYear={this.intlYear}
                   max={this.max}
                   maxAsDate={this.maxAsDate}
                   messageOverrides={this.messageOverrides}

From a46bbc6b67f8993a0715a38bf9ba188215fe8982 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 15 Dec 2022 00:51:23 +0000
Subject: [PATCH 07/21] 1.0.0-next.681

---
 CHANGELOG.md      | 153 ++++++++++++++++++++++++++++++++++++++++++++++
 package-lock.json |   4 +-
 package.json      |   2 +-
 3 files changed, 156 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b1a167ca7b..ea088115ed9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,159 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### ⚠ BREAKING CHANGES
 
+- **chip,card,combobox,date-picker,flow,flow-item,filter, input-date-picker:** Removed deprecated intl\* & accessible label properties.
+
+* card:
+
+- Removed the property` intlLoading` , use `messsageOverrides.loading`
+  instead.
+- Removed the property `intlSelect` use `messageOverrides.select`
+  instead.
+- Removed the property `intlDeselect` use `messageOverrides.deselect`
+  instead.
+
+* chip:
+
+- Removed the property `dismissLabel` , use
+  `messsageOverrides.dismissLabel ` instead.
+
+* color-picker:
+  - Removed the property `intlB` , use `messsageOverrides.b` instead.
+
+- Removed the property `intlBlue` , use `messsageOverrides.blue`
+  instead.
+- Removed the property `intlDeleteColor` , use
+  `messsageOverrides.deleteColor` instead.
+  - Removed the property `intlG` , use `messsageOverrides.g` instead.
+- Removed the property `intlGreen` , use `messsageOverrides.green`
+  instead.
+  - Removed the property `intlH` , use `messsageOverrides.h` instead.
+- Removed the property `intlHsv` , use `messsageOverrides.hsv` instead.
+- Removed the property `intlHex` , use `messsageOverrides.hex` instead.
+- Removed the property `intlHue` , use `messsageOverrides.hue` instead.
+- Removed the property `intlNoColor` , use `messsageOverrides.noColor`
+  instead.
+  - Removed the property `intlR` , use `messsageOverrides.r` instead.
+- Removed the property `intlRed` , use `messsageOverrides.red` instead.
+- Removed the property `intlRgb` , use `messsageOverrides.rgb` instead.
+  - Removed the property `intlS` , use `messsageOverrides.s` instead.
+- Removed the property `intlSaturation` , use
+  `messsageOverrides.saturation` instead.
+- Removed the property `intlSaveColor` , use
+  `messsageOverrides.saveColor` instead.
+- Removed the property `intlSaved` , use `messsageOverrides.saved`
+  instead.
+  - Removed the property `intlV` , use `messsageOverrides.v` instead.
+- Removed the property `intlValue` , use `messsageOverrides.value`
+  instead.
+
+* combobox:
+
+- Removed the property `intlRemoveTag` , use
+  `messsageOverrides.removeTag` instead.
+
+* date-picker
+
+- Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
+  instead.
+- Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
+  instead.
+- Removed the property `intlYear`, use `messageOverrides.year` instead.
+
+* flow-item:
+
+- Removed the property `intlBack` , use `messsageOverrides.back`
+  instead.
+- Removed the property `intlClose`, use `messageOverrides.close`
+  instead.
+- Removed the property `intlOptions` , use `messsageOverrides.options`
+  instead.
+
+* filter:
+
+- Removed the property `intlClear`, use `messsageOverrides.clear`
+  instead.
+- Removed the property `intlLabel`, use `messageOverrides.label`
+  instead.
+
+* input-date-picker:
+
+- Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
+  instead.
+- Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
+  instead.
+- Removed the property `intlYear`, use `messageOverrides.year` instead.
+- **action,action-bar,action-group,action-pad,alert,block-section,block,button:** Removed deprecated `intl*` properties , use
+  `messageOverrides` property instead.
+
+* action:
+
+- Removed the property `intlLoading` , use `messsageOverrides.loading`
+  instead.
+- Removed the property `intlIndicator`, use `messageOverrides.indicator`
+  instead.
+
+* action-bar:
+
+- Removed the property `intlExpand` , use `messsageOverrides.expand`
+  instead.
+- Removed the property `intlCollapse`, use `messageOverrides.collapse`
+  instead.
+
+* action-group:
+
+- Removed the property `intlMore` , use `messsageOverrides.more`
+  instead.
+
+* action-pad:
+
+- Removed the property `intlExpand` , use `messsageOverrides.expand`
+  instead.
+- Removed the property `intlCollapse`, use `messageOverrides.collapse`
+  instead.
+
+* alert:
+
+- Removed the property `intlClose`, use `messageOverrides.close`
+  instead.
+
+* block:
+
+- Removed the property `intlExpand` , use `messsageOverrides.expand`
+  instead.
+- Removed the property `intlCollapse`, use `messageOverrides.collapse`
+  instead.
+- Removed the property `intlLoading` , use `messsageOverrides.loading`
+  instead.
+- Removed the property `intlOptions`, use `messageOverrides.options`
+  instead.
+
+* block-section:
+
+- Removed the property `intlExpand` , use `messsageOverrides.expand`
+  instead.
+- Removed the property `intlCollapse`, use `messageOverrides.collapse`
+  instead.
+
+* button:
+
+- Removed the property `intlLoading` , use `messsageOverrides.loading`
+  instead.
+
+Signed-off-by: dependabot[bot] <support@github.com>
+Co-authored-by: JC Franco <jfranco@esri.com>
+Co-authored-by: Ben Elan <benelan@users.noreply.github.com>
+Co-authored-by: jona7150 <jturpin@esri.com>
+Co-authored-by: Ben Elan <belan@esri.com>
+Co-authored-by: Calcite Admin <calcite-admin@esri.com>
+Co-authored-by: jcfranco <jcfranco@users.noreply.github.com>
+Co-authored-by: Kitty Hurley <khurley@esri.com>
+Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
+Co-authored-by: Eliza Khachatryan <eli97736@esri.com>
+Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
+Co-authored-by: Matt Driscoll <mdriscoll@esri.com>
+Co-authored-by: Alison Stump <alisonailea@users.noreply.github.com>
+
 - **popover, dropdown, modal, pick-list-item, value-list-item:** Renamed `disable*` properties.
 
 * Dropdown
diff --git a/package-lock.json b/package-lock.json
index cad574dd819..308e04c52b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.680",
+  "version": "1.0.0-next.681",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@esri/calcite-components",
-      "version": "1.0.0-next.680",
+      "version": "1.0.0-next.681",
       "license": "SEE LICENSE IN copyright.txt",
       "dependencies": {
         "@floating-ui/dom": "1.0.10",
diff --git a/package.json b/package.json
index ab5065e4c86..7ba22649310 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.680",
+  "version": "1.0.0-next.681",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

From bbdefd1cf61d33d09ca193f50aa6b54cdfe2c648 Mon Sep 17 00:00:00 2001
From: Calcite Admin <calcite-admin@esri.com>
Date: Wed, 14 Dec 2022 17:14:04 -0800
Subject: [PATCH 08/21] docs: update component READMEs (#6052)

This PR was automatically generated by the update-doc GitHub action

Co-authored-by: jcfranco <jcfranco@users.noreply.github.com>
---
 src/components/action-bar/readme.md           |  3 +-
 src/components/action-group/readme.md         | 16 ++--
 src/components/action-pad/readme.md           | 17 ++---
 src/components/action/readme.md               | 31 ++++----
 src/components/alert/readme.md                | 24 +++---
 src/components/block-section/readme.md        | 15 ++--
 src/components/block/readme.md                | 27 +++----
 src/components/button/readme.md               | 44 +++++------
 src/components/card/readme.md                 | 16 ++--
 src/components/chip/readme.md                 | 28 +++----
 src/components/color-picker/readme.md         | 46 ++++--------
 src/components/combobox/readme.md             | 52 ++++++-------
 .../date-picker-month-header/readme.md        | 21 +++---
 src/components/date-picker/readme.md          | 52 ++++++-------
 src/components/filter/readme.md               | 25 +++----
 src/components/flow-item/readme.md            | 32 ++++----
 src/components/inline-editable/readme.md      | 23 +++---
 src/components/input-date-picker/readme.md    |  5 +-
 src/components/input-number/readme.md         | 67 +++++++++--------
 src/components/input-text/readme.md           | 57 +++++++-------
 src/components/input-time-picker/readme.md    | 25 ++++---
 src/components/input/readme.md                | 75 ++++++++++---------
 src/components/modal/readme.md                | 54 ++++++-------
 src/components/notice/readme.md               | 23 +++---
 src/components/pagination/readme.md           | 21 +++---
 src/components/panel/readme.md                | 29 +++----
 src/components/pick-list-item/readme.md       | 25 ++++---
 src/components/popover/readme.md              |  9 ++-
 src/components/rating/readme.md               | 25 ++++---
 src/components/scrim/readme.md                |  9 ++-
 src/components/time-picker/readme.md          | 37 ++++-----
 src/components/tip/readme.md                  |  2 +-
 src/components/value-list/readme.md           | 35 ++++-----
 33 files changed, 467 insertions(+), 503 deletions(-)

diff --git a/src/components/action-bar/readme.md b/src/components/action-bar/readme.md
index 191eec794b3..327f024a0e2 100755
--- a/src/components/action-bar/readme.md
+++ b/src/components/action-bar/readme.md
@@ -65,9 +65,8 @@ Renders a group of `calcite-action`s contained in a `calcite-action-group`. Acti
 | ------------------------- | --------------------------- | ------------------------------------------------------------------------------- | ---------------------------- | ------------ |
 | `expandDisabled`          | `expand-disabled`           | When `true`, the expand-toggling behavior is disabled.                          | `boolean`                    | `false`      |
 | `expanded`                | `expanded`                  | When `true`, the component is expanded.                                         | `boolean`                    | `false`      |
-| `intlCollapse`            | `intl-collapse`             | Specifies the label of the collapse icon when the component is expanded.        | `string`                     | `undefined`  |
-| `intlExpand`              | `intl-expand`               | Specifies the label of the expand icon when the component is collapsed.         | `string`                     | `undefined`  |
 | `layout`                  | `layout`                    | The layout direction of the actions.                                            | `"horizontal" \| "vertical"` | `"vertical"` |
+| `messageOverrides`        | `message-overrides`         | Use this property to override individual strings used by the component.         | `Messages`                   | `undefined`  |
 | `overflowActionsDisabled` | `overflow-actions-disabled` | Disables automatically overflowing `calcite-action`s that won't fit into menus. | `boolean`                    | `false`      |
 | `position`                | `position`                  | Arranges the component depending on the element's `dir` property.               | `"end" \| "start"`           | `undefined`  |
 | `scale`                   | `scale`                     | Specifies the size of the expand `calcite-action`.                              | `"l" \| "m" \| "s"`          | `undefined`  |
diff --git a/src/components/action-group/readme.md b/src/components/action-group/readme.md
index 363ac3f64df..3ea63fe0a1b 100755
--- a/src/components/action-group/readme.md
+++ b/src/components/action-group/readme.md
@@ -6,14 +6,14 @@ The `calcite-action-group` is a wrapper for multiple `calcite-action`s and house
 
 ## Properties
 
-| Property   | Attribute   | Description                                            | Type                                   | Default      |
-| ---------- | ----------- | ------------------------------------------------------ | -------------------------------------- | ------------ |
-| `columns`  | `columns`   | Indicates number of columns.                           | `1 \| 2 \| 3 \| 4 \| 5 \| 6`           | `undefined`  |
-| `expanded` | `expanded`  | When `true`, the component is expanded.                | `boolean`                              | `false`      |
-| `intlMore` | `intl-more` | Specifies a text string for the `calcite-action-menu`. | `string`                               | `undefined`  |
-| `layout`   | `layout`    | Indicates the layout of the component.                 | `"grid" \| "horizontal" \| "vertical"` | `"vertical"` |
-| `menuOpen` | `menu-open` | When `true`, the `calcite-action-menu` is open.        | `boolean`                              | `false`      |
-| `scale`    | `scale`     | Specifies the size of the `calcite-action-menu`.       | `"l" \| "m" \| "s"`                    | `undefined`  |
+| Property           | Attribute           | Description                                                             | Type                                   | Default      |
+| ------------------ | ------------------- | ----------------------------------------------------------------------- | -------------------------------------- | ------------ |
+| `columns`          | `columns`           | Indicates number of columns.                                            | `1 \| 2 \| 3 \| 4 \| 5 \| 6`           | `undefined`  |
+| `expanded`         | `expanded`          | When `true`, the component is expanded.                                 | `boolean`                              | `false`      |
+| `layout`           | `layout`            | Indicates the layout of the component.                                  | `"grid" \| "horizontal" \| "vertical"` | `"vertical"` |
+| `menuOpen`         | `menu-open`         | When `true`, the `calcite-action-menu` is open.                         | `boolean`                              | `false`      |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages`                             | `undefined`  |
+| `scale`            | `scale`             | Specifies the size of the `calcite-action-menu`.                        | `"l" \| "m" \| "s"`                    | `undefined`  |
 
 ## Slots
 
diff --git a/src/components/action-pad/readme.md b/src/components/action-pad/readme.md
index 30da678ef25..8bfd464744f 100755
--- a/src/components/action-pad/readme.md
+++ b/src/components/action-pad/readme.md
@@ -50,15 +50,14 @@ Renders a group of `calcite-action`s contained in a `calcite-action-group`. Acti
 
 ## Properties
 
-| Property         | Attribute         | Description                                                              | Type                                   | Default      |
-| ---------------- | ----------------- | ------------------------------------------------------------------------ | -------------------------------------- | ------------ |
-| `expandDisabled` | `expand-disabled` | When `true`, the expand-toggling behavior is disabled.                   | `boolean`                              | `false`      |
-| `expanded`       | `expanded`        | When `true`, the component is expanded.                                  | `boolean`                              | `false`      |
-| `intlCollapse`   | `intl-collapse`   | Specifies the label of the collapse icon when the component is expanded. | `string`                               | `undefined`  |
-| `intlExpand`     | `intl-expand`     | Specifies the label of the expand icon when the component is collapsed.  | `string`                               | `undefined`  |
-| `layout`         | `layout`          | Indicates the layout of the component.                                   | `"grid" \| "horizontal" \| "vertical"` | `"vertical"` |
-| `position`       | `position`        | Arranges the component depending on the element's `dir` property.        | `"end" \| "start"`                     | `undefined`  |
-| `scale`          | `scale`           | Specifies the size of the expand `calcite-action`.                       | `"l" \| "m" \| "s"`                    | `undefined`  |
+| Property           | Attribute           | Description                                                             | Type                                   | Default      |
+| ------------------ | ------------------- | ----------------------------------------------------------------------- | -------------------------------------- | ------------ |
+| `expandDisabled`   | `expand-disabled`   | When `true`, the expand-toggling behavior is disabled.                  | `boolean`                              | `false`      |
+| `expanded`         | `expanded`          | When `true`, the component is expanded.                                 | `boolean`                              | `false`      |
+| `layout`           | `layout`            | Indicates the layout of the component.                                  | `"grid" \| "horizontal" \| "vertical"` | `"vertical"` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `Messages`                             | `undefined`  |
+| `position`         | `position`          | Arranges the component depending on the element's `dir` property.       | `"end" \| "start"`                     | `undefined`  |
+| `scale`            | `scale`             | Specifies the size of the expand `calcite-action`.                      | `"l" \| "m" \| "s"`                    | `undefined`  |
 
 ## Events
 
diff --git a/src/components/action/readme.md b/src/components/action/readme.md
index 7bfd56abc0e..7e1a36488b7 100755
--- a/src/components/action/readme.md
+++ b/src/components/action/readme.md
@@ -42,22 +42,21 @@ Renders a `calcite-action` that displays only an icon.
 
 ## Properties
 
-| Property            | Attribute        | Description                                                                                                                             | Type                           | Default          |
-| ------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ---------------- |
-| `active`            | `active`         | When `true`, the component is highlighted.                                                                                              | `boolean`                      | `false`          |
-| `alignment`         | `alignment`      | Specifies the horizontal alignment of button elements with text content.                                                                | `"center" \| "end" \| "start"` | `undefined`      |
-| `appearance`        | `appearance`     | Specifies the appearance of the component.                                                                                              | `"solid" \| "transparent"`     | `"solid"`        |
-| `compact`           | `compact`        | When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`. | `boolean`                      | `false`          |
-| `disabled`          | `disabled`       | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                | `boolean`                      | `false`          |
-| `icon`              | `icon`           | Specifies an icon to display.                                                                                                           | `string`                       | `undefined`      |
-| `indicator`         | `indicator`      | When `true`, displays a visual indicator.                                                                                               | `boolean`                      | `false`          |
-| `intlIndicator`     | `intl-indicator` | When `indicator` is `true`, specifies the accessible context of the `indicator`.                                                        | `string`                       | `TEXT.indicator` |
-| `intlLoading`       | `intl-loading`   | Specifies the text label to display while loading.                                                                                      | `string`                       | `TEXT.loading`   |
-| `label`             | `label`          | Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.                  | `string`                       | `undefined`      |
-| `loading`           | `loading`        | When `true`, a busy indicator is displayed.                                                                                             | `boolean`                      | `false`          |
-| `scale`             | `scale`          | Specifies the size of the component.                                                                                                    | `"l" \| "m" \| "s"`            | `"m"`            |
-| `text` _(required)_ | `text`           | Specifies text that accompanies the icon.                                                                                               | `string`                       | `undefined`      |
-| `textEnabled`       | `text-enabled`   | Indicates whether the text is displayed.                                                                                                | `boolean`                      | `false`          |
+| Property            | Attribute           | Description                                                                                                                             | Type                           | Default     |
+| ------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ----------- |
+| `active`            | `active`            | When `true`, the component is highlighted.                                                                                              | `boolean`                      | `false`     |
+| `alignment`         | `alignment`         | Specifies the horizontal alignment of button elements with text content.                                                                | `"center" \| "end" \| "start"` | `undefined` |
+| `appearance`        | `appearance`        | Specifies the appearance of the component.                                                                                              | `"solid" \| "transparent"`     | `"solid"`   |
+| `compact`           | `compact`           | When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`. | `boolean`                      | `false`     |
+| `disabled`          | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                | `boolean`                      | `false`     |
+| `icon`              | `icon`              | Specifies an icon to display.                                                                                                           | `string`                       | `undefined` |
+| `indicator`         | `indicator`         | When `true`, displays a visual indicator.                                                                                               | `boolean`                      | `false`     |
+| `label`             | `label`             | Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.                  | `string`                       | `undefined` |
+| `loading`           | `loading`           | When `true`, a busy indicator is displayed.                                                                                             | `boolean`                      | `false`     |
+| `messageOverrides`  | `message-overrides` | Use this property to override individual strings used by the component.                                                                 | `Messages`                     | `undefined` |
+| `scale`             | `scale`             | Specifies the size of the component.                                                                                                    | `"l" \| "m" \| "s"`            | `"m"`       |
+| `text` _(required)_ | `text`              | Specifies text that accompanies the icon.                                                                                               | `string`                       | `undefined` |
+| `textEnabled`       | `text-enabled`      | Indicates whether the text is displayed.                                                                                                | `boolean`                      | `false`     |
 
 ## Methods
 
diff --git a/src/components/alert/readme.md b/src/components/alert/readme.md
index cd73fef6fd6..f243b1047a9 100644
--- a/src/components/alert/readme.md
+++ b/src/components/alert/readme.md
@@ -18,18 +18,18 @@ A single instance of an alert. Multiple alerts will aggregate in a queue.
 
 ## Properties
 
-| Property              | Attribute             | Description                                                                                                           | Type                                                                                                                                                                                                                                    | Default                              |
-| --------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
-| `autoDismiss`         | `auto-close`          | When `true`, the component closes automatically (recommended for passive, non-blocking alerts).                       | `boolean`                                                                                                                                                                                                                               | `false`                              |
-| `autoDismissDuration` | `auto-close-duration` | Specifies the duration before the component automatically closes (only use with `autoDismiss`).                       | `"fast" \| "medium" \| "slow"`                                                                                                                                                                                                          | `this.autoDismiss ? "medium" : null` |
-| `color`               | `color`               | Specifies the color for the component (will apply to top border and icon).                                            | `"blue" \| "green" \| "red" \| "yellow"`                                                                                                                                                                                                | `"blue"`                             |
-| `icon`                | `icon`                | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| string`                                                                                                                                                                                                                     | `undefined`                          |
-| `intlClose`           | `intl-close`          | Specifies the text label for the close button.                                                                        | `string`                                                                                                                                                                                                                                | `TEXT.intlClose`                     |
-| `label` _(required)_  | `label`               | Specifies an accessible name for the component.                                                                       | `string`                                                                                                                                                                                                                                | `undefined`                          |
-| `numberingSystem`     | `numbering-system`    | Specifies the Unicode numeral system used by the component for localization.                                          | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined`                          |
-| `open`                | `open`                | When `true`, displays and positions the component.                                                                    | `boolean`                                                                                                                                                                                                                               | `false`                              |
-| `placement`           | `placement`           | Specifies the placement of the component                                                                              | `"bottom" \| "bottom-end" \| "bottom-start" \| "top" \| "top-end" \| "top-start"`                                                                                                                                                       | `"bottom"`                           |
-| `scale`               | `scale`               | Specifies the size of the component.                                                                                  | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`                                |
+| Property             | Attribute             | Description                                                                                                           | Type                                                                                                                                                                                                                                    | Default                            |
+| -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
+| `autoClose`          | `auto-close`          | When `true`, the component closes automatically (recommended for passive, non-blocking alerts).                       | `boolean`                                                                                                                                                                                                                               | `false`                            |
+| `autoCloseDuration`  | `auto-close-duration` | Specifies the duration before the component automatically closes (only use with `autoClose`).                         | `"fast" \| "medium" \| "slow"`                                                                                                                                                                                                          | `this.autoClose ? "medium" : null` |
+| `color`              | `color`               | Specifies the color for the component (will apply to top border and icon).                                            | `"blue" \| "green" \| "red" \| "yellow"`                                                                                                                                                                                                | `"blue"`                           |
+| `icon`               | `icon`                | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | `boolean \| string`                                                                                                                                                                                                                     | `undefined`                        |
+| `label` _(required)_ | `label`               | Specifies an accessible name for the component.                                                                       | `string`                                                                                                                                                                                                                                | `undefined`                        |
+| `messageOverrides`   | `message-overrides`   | Use this property to override individual strings used by the component.                                               | `Messages`                                                                                                                                                                                                                              | `undefined`                        |
+| `numberingSystem`    | `numbering-system`    | Specifies the Unicode numeral system used by the component for localization.                                          | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined`                        |
+| `open`               | `open`                | When `true`, displays and positions the component.                                                                    | `boolean`                                                                                                                                                                                                                               | `false`                            |
+| `placement`          | `placement`           | Specifies the placement of the component                                                                              | `"bottom" \| "bottom-end" \| "bottom-start" \| "top" \| "top-end" \| "top-start"`                                                                                                                                                       | `"bottom"`                         |
+| `scale`              | `scale`               | Specifies the size of the component.                                                                                  | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`                              |
 
 ## Events
 
diff --git a/src/components/block-section/readme.md b/src/components/block-section/readme.md
index bfbcc2c8a12..5676ab2b4f9 100644
--- a/src/components/block-section/readme.md
+++ b/src/components/block-section/readme.md
@@ -6,14 +6,13 @@ The `calcite-block-section` component is a child element of `calcite-block`. Sec
 
 ## Properties
 
-| Property        | Attribute        | Description                                                                                               | Type                             | Default     |
-| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
-| `intlCollapse`  | `intl-collapse`  | Accessible name for the component's collapse button.                                                      | `string`                         | `undefined` |
-| `intlExpand`    | `intl-expand`    | Accessible name for the component's expand button.                                                        | `string`                         | `undefined` |
-| `open`          | `open`           | When `true`, expands the component and its contents.                                                      | `boolean`                        | `false`     |
-| `status`        | `status`         | Displays a status-related indicator icon.                                                                 | `"idle" \| "invalid" \| "valid"` | `undefined` |
-| `text`          | `text`           | The component header text.                                                                                | `string`                         | `undefined` |
-| `toggleDisplay` | `toggle-display` | Specifies the component's toggle display - `"button"` (selectable header), or `"switch"` (toggle switch). | `"button" \| "switch"`           | `"button"`  |
+| Property           | Attribute           | Description                                                                                               | Type                             | Default     |
+| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component.                                   | `Messages`                       | `undefined` |
+| `open`             | `open`              | When `true`, expands the component and its contents.                                                      | `boolean`                        | `false`     |
+| `status`           | `status`            | Displays a status-related indicator icon.                                                                 | `"idle" \| "invalid" \| "valid"` | `undefined` |
+| `text`             | `text`              | The component header text.                                                                                | `string`                         | `undefined` |
+| `toggleDisplay`    | `toggle-display`    | Specifies the component's toggle display - `"button"` (selectable header), or `"switch"` (toggle switch). | `"button" \| "switch"`           | `"button"`  |
 
 ## Events
 
diff --git a/src/components/block/readme.md b/src/components/block/readme.md
index ebee6aaf638..1a6d6124156 100644
--- a/src/components/block/readme.md
+++ b/src/components/block/readme.md
@@ -56,21 +56,18 @@ Renders a header and icon with the icon.
 
 ## Properties
 
-| Property               | Attribute       | Description                                                                              | Type                             | Default         |
-| ---------------------- | --------------- | ---------------------------------------------------------------------------------------- | -------------------------------- | --------------- |
-| `collapsible`          | `collapsible`   | When `true`, the component is collapsible.                                               | `boolean`                        | `false`         |
-| `description`          | `description`   | A description for the component, which displays below the heading.                       | `string`                         | `undefined`     |
-| `disabled`             | `disabled`      | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean`                        | `false`         |
-| `dragHandle`           | `drag-handle`   | When `true`, displays a drag handle in the header.                                       | `boolean`                        | `false`         |
-| `heading` _(required)_ | `heading`       | The component header text.                                                               | `string`                         | `undefined`     |
-| `headingLevel`         | `heading-level` | Specifies the number at which section headings should start.                             | `1 \| 2 \| 3 \| 4 \| 5 \| 6`     | `undefined`     |
-| `intlCollapse`         | `intl-collapse` | Accessible name for the component's collapse button.                                     | `string`                         | `TEXT.collapse` |
-| `intlExpand`           | `intl-expand`   | Accessible name for the component's expand button.                                       | `string`                         | `TEXT.expand`   |
-| `intlLoading`          | `intl-loading`  | Accessible name when the component is loading.                                           | `string`                         | `TEXT.loading`  |
-| `intlOptions`          | `intl-options`  | Accessible name for the component's options button.                                      | `string`                         | `TEXT.options`  |
-| `loading`              | `loading`       | When `true`, a busy indicator is displayed.                                              | `boolean`                        | `false`         |
-| `open`                 | `open`          | When `true`, expands the component and its contents.                                     | `boolean`                        | `false`         |
-| `status`               | `status`        | Displays a status-related indicator icon.                                                | `"idle" \| "invalid" \| "valid"` | `undefined`     |
+| Property               | Attribute           | Description                                                                              | Type                             | Default     |
+| ---------------------- | ------------------- | ---------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| `collapsible`          | `collapsible`       | When `true`, the component is collapsible.                                               | `boolean`                        | `false`     |
+| `description`          | `description`       | A description for the component, which displays below the heading.                       | `string`                         | `undefined` |
+| `disabled`             | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity. | `boolean`                        | `false`     |
+| `dragHandle`           | `drag-handle`       | When `true`, displays a drag handle in the header.                                       | `boolean`                        | `false`     |
+| `heading` _(required)_ | `heading`           | The component header text.                                                               | `string`                         | `undefined` |
+| `headingLevel`         | `heading-level`     | Specifies the number at which section headings should start.                             | `1 \| 2 \| 3 \| 4 \| 5 \| 6`     | `undefined` |
+| `loading`              | `loading`           | When `true`, a busy indicator is displayed.                                              | `boolean`                        | `false`     |
+| `messageOverrides`     | `message-overrides` | Use this property to override individual strings used by the component.                  | `Messages`                       | `undefined` |
+| `open`                 | `open`              | When `true`, expands the component and its contents.                                     | `boolean`                        | `false`     |
+| `status`               | `status`            | Displays a status-related indicator icon.                                                | `"idle" \| "invalid" \| "valid"` | `undefined` |
 
 ## Events
 
diff --git a/src/components/button/readme.md b/src/components/button/readme.md
index e314e38eff5..2d635783c80 100644
--- a/src/components/button/readme.md
+++ b/src/components/button/readme.md
@@ -61,28 +61,28 @@ Any additional attributes set on `<calcite-button>` are passed to the internal `
 
 ## Properties
 
-| Property      | Attribute       | Description                                                                                                                                                                        | Type                                                                                                        | Default        |
-| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | -------------- |
-| `alignment`   | `alignment`     | Specifies the alignment of the component's elements.                                                                                                                               | `"center" \| "end" \| "icon-end-space-between" \| "icon-start-space-between" \| "space-between" \| "start"` | `"center"`     |
-| `appearance`  | `appearance`    | Specifies the appearance style of the component.                                                                                                                                   | `"clear" \| "minimal" \| "outline" \| "solid" \| "transparent"`                                             | `"solid"`      |
-| `color`       | `color`         | Specifies the color of the component.                                                                                                                                              | `"blue" \| "inverse" \| "neutral" \| "red"`                                                                 | `"blue"`       |
-| `disabled`    | `disabled`      | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                           | `boolean`                                                                                                   | `false`        |
-| `form`        | `form`          | <span style="color:red">**[DEPRECATED]**</span> – The property is no longer needed if the component is placed inside a form.<br/><br/>The form ID to associate with the component. | `string`                                                                                                    | `undefined`    |
-| `href`        | `href`          | Specifies the URL of the linked resource, which can be set as an absolute or relative path.                                                                                        | `string`                                                                                                    | `undefined`    |
-| `iconEnd`     | `icon-end`      | Specifies an icon to display at the end of the component.                                                                                                                          | `string`                                                                                                    | `undefined`    |
-| `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).                                                                                       | `"both" \| "end" \| "start"`                                                                                | `undefined`    |
-| `iconStart`   | `icon-start`    | Specifies an icon to display at the start of the component.                                                                                                                        | `string`                                                                                                    | `undefined`    |
-| `intlLoading` | `intl-loading`  | Accessible name when the component is loading.                                                                                                                                     | `string`                                                                                                    | `TEXT.loading` |
-| `label`       | `label`         | Accessible name for the component.                                                                                                                                                 | `string`                                                                                                    | `undefined`    |
-| `loading`     | `loading`       | When `true`, a busy indicator is displayed and interaction is disabled.                                                                                                            | `boolean`                                                                                                   | `false`        |
-| `name`        | `name`          | Specifies the name of the component on form submission.                                                                                                                            | `string`                                                                                                    | `undefined`    |
-| `rel`         | `rel`           | Defines the relationship between the `href` value and the current document.                                                                                                        | `string`                                                                                                    | `undefined`    |
-| `round`       | `round`         | When `true`, adds a round style to the component.                                                                                                                                  | `boolean`                                                                                                   | `false`        |
-| `scale`       | `scale`         | Specifies the size of the component.                                                                                                                                               | `"l" \| "m" \| "s"`                                                                                         | `"m"`          |
-| `splitChild`  | `split-child`   | Specifies if the component is a child of a `calcite-split-button`.                                                                                                                 | `"primary" \| "secondary" \| boolean`                                                                       | `false`        |
-| `target`      | `target`        | Specifies where to open the linked document defined in the `href` property.                                                                                                        | `string`                                                                                                    | `undefined`    |
-| `type`        | `type`          | Specifies the default behavior of the button.                                                                                                                                      | `string`                                                                                                    | `"button"`     |
-| `width`       | `width`         | Specifies the width of the component.                                                                                                                                              | `"auto" \| "full" \| "half"`                                                                                | `"auto"`       |
+| Property           | Attribute           | Description                                                                                                                                                                        | Type                                                                                                        | Default     |
+| ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------- |
+| `alignment`        | `alignment`         | Specifies the alignment of the component's elements.                                                                                                                               | `"center" \| "end" \| "icon-end-space-between" \| "icon-start-space-between" \| "space-between" \| "start"` | `"center"`  |
+| `appearance`       | `appearance`        | Specifies the appearance style of the component.                                                                                                                                   | `"clear" \| "minimal" \| "outline" \| "solid" \| "transparent"`                                             | `"solid"`   |
+| `color`            | `color`             | Specifies the color of the component.                                                                                                                                              | `"blue" \| "inverse" \| "neutral" \| "red"`                                                                 | `"blue"`    |
+| `disabled`         | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                           | `boolean`                                                                                                   | `false`     |
+| `form`             | `form`              | <span style="color:red">**[DEPRECATED]**</span> – The property is no longer needed if the component is placed inside a form.<br/><br/>The form ID to associate with the component. | `string`                                                                                                    | `undefined` |
+| `href`             | `href`              | Specifies the URL of the linked resource, which can be set as an absolute or relative path.                                                                                        | `string`                                                                                                    | `undefined` |
+| `iconEnd`          | `icon-end`          | Specifies an icon to display at the end of the component.                                                                                                                          | `string`                                                                                                    | `undefined` |
+| `iconFlipRtl`      | `icon-flip-rtl`     | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).                                                                                       | `"both" \| "end" \| "start"`                                                                                | `undefined` |
+| `iconStart`        | `icon-start`        | Specifies an icon to display at the start of the component.                                                                                                                        | `string`                                                                                                    | `undefined` |
+| `label`            | `label`             | Accessible name for the component.                                                                                                                                                 | `string`                                                                                                    | `undefined` |
+| `loading`          | `loading`           | When `true`, a busy indicator is displayed and interaction is disabled.                                                                                                            | `boolean`                                                                                                   | `false`     |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component.                                                                                                            | `Messages`                                                                                                  | `undefined` |
+| `name`             | `name`              | Specifies the name of the component on form submission.                                                                                                                            | `string`                                                                                                    | `undefined` |
+| `rel`              | `rel`               | Defines the relationship between the `href` value and the current document.                                                                                                        | `string`                                                                                                    | `undefined` |
+| `round`            | `round`             | When `true`, adds a round style to the component.                                                                                                                                  | `boolean`                                                                                                   | `false`     |
+| `scale`            | `scale`             | Specifies the size of the component.                                                                                                                                               | `"l" \| "m" \| "s"`                                                                                         | `"m"`       |
+| `splitChild`       | `split-child`       | Specifies if the component is a child of a `calcite-split-button`.                                                                                                                 | `"primary" \| "secondary" \| boolean`                                                                       | `false`     |
+| `target`           | `target`            | Specifies where to open the linked document defined in the `href` property.                                                                                                        | `string`                                                                                                    | `undefined` |
+| `type`             | `type`              | Specifies the default behavior of the button.                                                                                                                                      | `string`                                                                                                    | `"button"`  |
+| `width`            | `width`             | Specifies the width of the component.                                                                                                                                              | `"auto" \| "full" \| "half"`                                                                                | `"auto"`    |
 
 ## Methods
 
diff --git a/src/components/card/readme.md b/src/components/card/readme.md
index d027cc2179c..01481405f8d 100644
--- a/src/components/card/readme.md
+++ b/src/components/card/readme.md
@@ -19,15 +19,13 @@
 
 ## Properties
 
-| Property            | Attribute            | Description                                                                                    | Type                                                             | Default         |
-| ------------------- | -------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------- |
-| `intlDeselect`      | `intl-deselect`      | When `selectable` is `true`, the accessible name for the component's checkbox for deselection. | `string`                                                         | `TEXT.deselect` |
-| `intlLoading`       | `intl-loading`       | Accessible name when the component is loading.                                                 | `string`                                                         | `TEXT.loading`  |
-| `intlSelect`        | `intl-select`        | When `selectable` is `true`, the accessible name for the component's checkbox for selection.   | `string`                                                         | `TEXT.select`   |
-| `loading`           | `loading`            | When `true`, a busy indicator is displayed.                                                    | `boolean`                                                        | `false`         |
-| `selectable`        | `selectable`         | When `true`, the component is selectable.                                                      | `boolean`                                                        | `false`         |
-| `selected`          | `selected`           | When `true`, the component is selected.                                                        | `boolean`                                                        | `false`         |
-| `thumbnailPosition` | `thumbnail-position` | Sets the placement of the thumbnail defined in the `thumbnail` slot.                           | `"block-end" \| "block-start" \| "inline-end" \| "inline-start"` | `"block-start"` |
+| Property            | Attribute            | Description                                                             | Type                                                             | Default         |
+| ------------------- | -------------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------- |
+| `loading`           | `loading`            | When `true`, a busy indicator is displayed.                             | `boolean`                                                        | `false`         |
+| `messageOverrides`  | `message-overrides`  | Use this property to override individual strings used by the component. | `Messages`                                                       | `undefined`     |
+| `selectable`        | `selectable`         | When `true`, the component is selectable.                               | `boolean`                                                        | `false`         |
+| `selected`          | `selected`           | When `true`, the component is selected.                                 | `boolean`                                                        | `false`         |
+| `thumbnailPosition` | `thumbnail-position` | Sets the placement of the thumbnail defined in the `thumbnail` slot.    | `"block-end" \| "block-start" \| "inline-end" \| "inline-start"` | `"block-start"` |
 
 ## Events
 
diff --git a/src/components/chip/readme.md b/src/components/chip/readme.md
index d32586d7657..37279ea5c84 100644
--- a/src/components/chip/readme.md
+++ b/src/components/chip/readme.md
@@ -12,23 +12,23 @@
 
 ## Properties
 
-| Property             | Attribute       | Description                                                                                  | Type                                               | Default      |
-| -------------------- | --------------- | -------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------ |
-| `appearance`         | `appearance`    | Specifies the appearance style of the component.                                             | `"solid" \| "transparent"`                         | `"solid"`    |
-| `closable`           | `closable`      | When `true`, a close button is added to the component.                                       | `boolean`                                          | `false`      |
-| `closed`             | `closed`        | When `true`, hides the component.                                                            | `boolean`                                          | `false`      |
-| `color`              | `color`         | Specifies the color for the component.                                                       | `"blue" \| "green" \| "grey" \| "red" \| "yellow"` | `"grey"`     |
-| `dismissLabel`       | `dismiss-label` | Accessible name for the component's close button.                                            | `string`                                           | `TEXT.close` |
-| `icon`               | `icon`          | Specifies an icon to display.                                                                | `string`                                           | `undefined`  |
-| `iconFlipRtl`        | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean`                                          | `false`      |
-| `scale`              | `scale`         | Specifies the size of the component.                                                         | `"l" \| "m" \| "s"`                                | `"m"`        |
-| `value` _(required)_ | `value`         | The component's value.                                                                       | `any`                                              | `undefined`  |
+| Property             | Attribute           | Description                                                                                  | Type                                               | Default     |
+| -------------------- | ------------------- | -------------------------------------------------------------------------------------------- | -------------------------------------------------- | ----------- |
+| `appearance`         | `appearance`        | Specifies the appearance style of the component.                                             | `"solid" \| "transparent"`                         | `"solid"`   |
+| `closable`           | `closable`          | When `true`, a close button is added to the component.                                       | `boolean`                                          | `false`     |
+| `closed`             | `closed`            | When `true`, hides the component.                                                            | `boolean`                                          | `false`     |
+| `color`              | `color`             | Specifies the color for the component.                                                       | `"blue" \| "green" \| "grey" \| "red" \| "yellow"` | `"grey"`    |
+| `icon`               | `icon`              | Specifies an icon to display.                                                                | `string`                                           | `undefined` |
+| `iconFlipRtl`        | `icon-flip-rtl`     | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean`                                          | `false`     |
+| `messageOverrides`   | `message-overrides` | Use this property to override individual strings used by the component.                      | `Messages`                                         | `undefined` |
+| `scale`              | `scale`             | Specifies the size of the component.                                                         | `"l" \| "m" \| "s"`                                | `"m"`       |
+| `value` _(required)_ | `value`             | The component's value.                                                                       | `any`                                              | `undefined` |
 
 ## Events
 
-| Event              | Description                                                                                                                                               | Type               |
-| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `calciteChipClose` | Fires when the dismiss button is clicked. **Note:**: The `el` event payload props is deprecated, please use the event's `target`/`currentTarget` instead. | `CustomEvent<any>` |
+| Event              | Description                                                                                                                                             | Type               |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `calciteChipClose` | Fires when the close button is clicked. **Note:**: The `el` event payload props is deprecated, please use the event's `target`/`currentTarget` instead. | `CustomEvent<any>` |
 
 ## Methods
 
diff --git a/src/components/color-picker/readme.md b/src/components/color-picker/readme.md
index 1bd0e8861c2..695f1d9fa40 100644
--- a/src/components/color-picker/readme.md
+++ b/src/components/color-picker/readme.md
@@ -20,38 +20,20 @@ For a minimal design, you can hide unused color formats and options:
 
 ## Properties
 
-| Property          | Attribute           | Description                                                                                                                                                                                                                                                                                                    | Type                                                                                                                                                                                                                                    | Default            |
-| ----------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `allowEmpty`      | `allow-empty`       | When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component. When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`. | `boolean`                                                                                                                                                                                                                               | `false`            |
-| `appearance`      | `appearance`        | Specifies the appearance style of the component - `"solid"` (containing border) or `"minimal"` (no containing border).                                                                                                                                                                                         | `"default" \| "minimal" \| "solid"`                                                                                                                                                                                                     | `"solid"`          |
-| `disabled`        | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                                                                                       | `boolean`                                                                                                                                                                                                                               | `false`            |
-| `format`          | `format`            | The format of `value`. When `"auto"`, the format will be inferred from `value` when set.                                                                                                                                                                                                                       | `"auto" \| "hex" \| "hexa" \| "hsl" \| "hsl-css" \| "hsla" \| "hsla-css" \| "hsv" \| "hsva" \| "rgb" \| "rgb-css" \| "rgba" \| "rgba-css"`                                                                                              | `defaultFormat`    |
-| `hideChannels`    | `hide-channels`     | When `true`, hides the RGB/HSV channel inputs.                                                                                                                                                                                                                                                                 | `boolean`                                                                                                                                                                                                                               | `false`            |
-| `hideHex`         | `hide-hex`          | When `true`, hides the Hex input.                                                                                                                                                                                                                                                                              | `boolean`                                                                                                                                                                                                                               | `false`            |
-| `hideSaved`       | `hide-saved`        | When `true`, hides the saved colors section.                                                                                                                                                                                                                                                                   | `boolean`                                                                                                                                                                                                                               | `false`            |
-| `intlB`           | `intl-b`            | Accessible name for the RGB section's blue channel.                                                                                                                                                                                                                                                            | `string`                                                                                                                                                                                                                                | `TEXT.b`           |
-| `intlBlue`        | `intl-blue`         | Accessible name for the RGB section's blue channel description.                                                                                                                                                                                                                                                | `string`                                                                                                                                                                                                                                | `TEXT.blue`        |
-| `intlDeleteColor` | `intl-delete-color` | Accessible name for the delete color button.                                                                                                                                                                                                                                                                   | `string`                                                                                                                                                                                                                                | `TEXT.deleteColor` |
-| `intlG`           | `intl-g`            | Accessible name for the RGB section's green channel.                                                                                                                                                                                                                                                           | `string`                                                                                                                                                                                                                                | `TEXT.g`           |
-| `intlGreen`       | `intl-green`        | Accessible name for the RGB section's green channel description.                                                                                                                                                                                                                                               | `string`                                                                                                                                                                                                                                | `TEXT.green`       |
-| `intlH`           | `intl-h`            | Accessible name for the HSV section's hue channel.                                                                                                                                                                                                                                                             | `string`                                                                                                                                                                                                                                | `TEXT.h`           |
-| `intlHex`         | `intl-hex`          | Accessible name for the Hex input.                                                                                                                                                                                                                                                                             | `string`                                                                                                                                                                                                                                | `TEXT.hex`         |
-| `intlHsv`         | `intl-hsv`          | Accessible name for the HSV mode.                                                                                                                                                                                                                                                                              | `string`                                                                                                                                                                                                                                | `TEXT.hsv`         |
-| `intlHue`         | `intl-hue`          | Accessible name for the HSV section's hue channel description.                                                                                                                                                                                                                                                 | `string`                                                                                                                                                                                                                                | `TEXT.hue`         |
-| `intlNoColor`     | `intl-no-color`     | Accessible name for the Hex input when there is no color selected.                                                                                                                                                                                                                                             | `string`                                                                                                                                                                                                                                | `TEXT.noColor`     |
-| `intlR`           | `intl-r`            | Accessible name for the RGB section's red channel.                                                                                                                                                                                                                                                             | `string`                                                                                                                                                                                                                                | `TEXT.r`           |
-| `intlRed`         | `intl-red`          | Accessible name for the RGB section's red channel description.                                                                                                                                                                                                                                                 | `string`                                                                                                                                                                                                                                | `TEXT.red`         |
-| `intlRgb`         | `intl-rgb`          | Accessible name for the RGB mode.                                                                                                                                                                                                                                                                              | `string`                                                                                                                                                                                                                                | `TEXT.rgb`         |
-| `intlS`           | `intl-s`            | Accessible name for the HSV section's saturation channel.                                                                                                                                                                                                                                                      | `string`                                                                                                                                                                                                                                | `TEXT.s`           |
-| `intlSaturation`  | `intl-saturation`   | Accessible name for the HSV section's saturation channel description.                                                                                                                                                                                                                                          | `string`                                                                                                                                                                                                                                | `TEXT.saturation`  |
-| `intlSaveColor`   | `intl-save-color`   | Accessible name for the save color button.                                                                                                                                                                                                                                                                     | `string`                                                                                                                                                                                                                                | `TEXT.saveColor`   |
-| `intlSaved`       | `intl-saved`        | Accessible name for the saved colors section.                                                                                                                                                                                                                                                                  | `string`                                                                                                                                                                                                                                | `TEXT.saved`       |
-| `intlV`           | `intl-v`            | Accessible name for the HSV section's value channel.                                                                                                                                                                                                                                                           | `string`                                                                                                                                                                                                                                | `TEXT.v`           |
-| `intlValue`       | `intl-value`        | Accessible name for the HSV section's value channel description.                                                                                                                                                                                                                                               | `string`                                                                                                                                                                                                                                | `TEXT.value`       |
-| `numberingSystem` | `numbering-system`  | Specifies the Unicode numeral system used by the component for localization.                                                                                                                                                                                                                                   | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined`        |
-| `scale`           | `scale`             | Specifies the size of the component.                                                                                                                                                                                                                                                                           | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`              |
-| `storageId`       | `storage-id`        | Specifies the storage ID for colors.                                                                                                                                                                                                                                                                           | `string`                                                                                                                                                                                                                                | `undefined`        |
-| `value`           | `value`             | The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object. The type will be preserved as the color is updated.                                                                                                                                                             | `HSL \| HSL & ObjectWithAlpha \| HSV \| HSV & ObjectWithAlpha \| RGB \| RGB & ObjectWithAlpha \| string`                                                                                                                                | `defaultValue`     |
+| Property           | Attribute           | Description                                                                                                                                                                                                                                                                                                    | Type                                                                                                                                                                                                                                    | Default         |
+| ------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
+| `allowEmpty`       | `allow-empty`       | When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component. When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`. | `boolean`                                                                                                                                                                                                                               | `false`         |
+| `appearance`       | `appearance`        | Specifies the appearance style of the component - `"solid"` (containing border) or `"minimal"` (no containing border).                                                                                                                                                                                         | `"default" \| "minimal" \| "solid"`                                                                                                                                                                                                     | `"solid"`       |
+| `disabled`         | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                                                                                       | `boolean`                                                                                                                                                                                                                               | `false`         |
+| `format`           | `format`            | The format of `value`. When `"auto"`, the format will be inferred from `value` when set.                                                                                                                                                                                                                       | `"auto" \| "hex" \| "hexa" \| "hsl" \| "hsl-css" \| "hsla" \| "hsla-css" \| "hsv" \| "hsva" \| "rgb" \| "rgb-css" \| "rgba" \| "rgba-css"`                                                                                              | `defaultFormat` |
+| `hideChannels`     | `hide-channels`     | When `true`, hides the RGB/HSV channel inputs.                                                                                                                                                                                                                                                                 | `boolean`                                                                                                                                                                                                                               | `false`         |
+| `hideHex`          | `hide-hex`          | When `true`, hides the Hex input.                                                                                                                                                                                                                                                                              | `boolean`                                                                                                                                                                                                                               | `false`         |
+| `hideSaved`        | `hide-saved`        | When `true`, hides the saved colors section.                                                                                                                                                                                                                                                                   | `boolean`                                                                                                                                                                                                                               | `false`         |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component.                                                                                                                                                                                                                                        | `Messages`                                                                                                                                                                                                                              | `undefined`     |
+| `numberingSystem`  | `numbering-system`  | Specifies the Unicode numeral system used by the component for localization.                                                                                                                                                                                                                                   | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined`     |
+| `scale`            | `scale`             | Specifies the size of the component.                                                                                                                                                                                                                                                                           | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`           |
+| `storageId`        | `storage-id`        | Specifies the storage ID for colors.                                                                                                                                                                                                                                                                           | `string`                                                                                                                                                                                                                                | `undefined`     |
+| `value`            | `value`             | The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object. The type will be preserved as the color is updated.                                                                                                                                                             | `HSL \| HSL & ObjectWithAlpha \| HSV \| HSV & ObjectWithAlpha \| RGB \| RGB & ObjectWithAlpha \| string`                                                                                                                                | `defaultValue`  |
 
 ## Events
 
diff --git a/src/components/combobox/readme.md b/src/components/combobox/readme.md
index 5b7795646ee..ca60818538f 100644
--- a/src/components/combobox/readme.md
+++ b/src/components/combobox/readme.md
@@ -55,34 +55,36 @@
 
 ## Properties
 
-| Property             | Attribute             | Description                                                                                                                                                                                                                                                                                                                                                                 | Type                                               | Default          |
-| -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ---------------- |
-| `allowCustomValues`  | `allow-custom-values` | When `true`, allows entry of custom values, which are not in the original set of items.                                                                                                                                                                                                                                                                                     | `boolean`                                          | `undefined`      |
-| `disabled`           | `disabled`            | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                                                                                                                                                    | `boolean`                                          | `false`          |
-| `flipPlacements`     | --                    | Defines the available placements that can be used when a flip occurs.                                                                                                                                                                                                                                                                                                       | `Placement[]`                                      | `undefined`      |
-| `intlRemoveTag`      | `intl-remove-tag`     | Accessible name for the component's remove tag when a `calcite-combobox-item` is selected.                                                                                                                                                                                                                                                                                  | `string`                                           | `TEXT.removeTag` |
-| `label` _(required)_ | `label`               | Accessible name for the component.                                                                                                                                                                                                                                                                                                                                          | `string`                                           | `undefined`      |
-| `maxItems`           | `max-items`           | Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.                                                                                                                                                                                                                                              | `number`                                           | `0`              |
-| `name`               | `name`                | Specifies the name of the component on form submission.                                                                                                                                                                                                                                                                                                                     | `string`                                           | `undefined`      |
-| `open`               | `open`                | When `true`, displays and positions the component.                                                                                                                                                                                                                                                                                                                          | `boolean`                                          | `false`          |
-| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"`                            | `"absolute"`     |
-| `placeholder`        | `placeholder`         | Specifies the placeholder text for the input.                                                                                                                                                                                                                                                                                                                               | `string`                                           | `undefined`      |
-| `placeholderIcon`    | `placeholder-icon`    | Specifies the placeholder icon for the input.                                                                                                                                                                                                                                                                                                                               | `string`                                           | `undefined`      |
-| `scale`              | `scale`               | Specifies the size of the component.                                                                                                                                                                                                                                                                                                                                        | `"l" \| "m" \| "s"`                                | `"m"`            |
-| `selectionMode`      | `selection-mode`      | specify the selection mode - multiple: allow any number of selected items (default) - single: only one selection) - ancestors: like multiple, but show ancestors of selected items as selected, only deepest children shown in chips                                                                                                                                        | `"ancestors" \| "multi" \| "multiple" \| "single"` | `"multi"`        |
-| `value`              | `value`               | The component's value(s) from the selected `calcite-combobox-item`(s).                                                                                                                                                                                                                                                                                                      | `string \| string[]`                               | `null`           |
+| Property             | Attribute             | Description                                                                                                                                                                                                                                                                                                                                                                 | Type                                               | Default      |
+| -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------ |
+| `allowCustomValues`  | `allow-custom-values` | When `true`, allows entry of custom values, which are not in the original set of items.                                                                                                                                                                                                                                                                                     | `boolean`                                          | `undefined`  |
+| `disabled`           | `disabled`            | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                                                                                                                                                    | `boolean`                                          | `false`      |
+| `filteredItems`      | --                    | Specifies the component's filtered items.                                                                                                                                                                                                                                                                                                                                   | `HTMLCalciteComboboxItemElement[]`                 | `[]`         |
+| `flipPlacements`     | --                    | Defines the available placements that can be used when a flip occurs.                                                                                                                                                                                                                                                                                                       | `Placement[]`                                      | `undefined`  |
+| `label` _(required)_ | `label`               | Accessible name for the component.                                                                                                                                                                                                                                                                                                                                          | `string`                                           | `undefined`  |
+| `maxItems`           | `max-items`           | Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.                                                                                                                                                                                                                                              | `number`                                           | `0`          |
+| `messageOverrides`   | `message-overrides`   | Use this property to override individual strings used by the component.                                                                                                                                                                                                                                                                                                     | `Messages`                                         | `undefined`  |
+| `name`               | `name`                | Specifies the name of the component on form submission.                                                                                                                                                                                                                                                                                                                     | `string`                                           | `undefined`  |
+| `open`               | `open`                | When `true`, displays and positions the component.                                                                                                                                                                                                                                                                                                                          | `boolean`                                          | `false`      |
+| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"`                            | `"absolute"` |
+| `placeholder`        | `placeholder`         | Specifies the placeholder text for the input.                                                                                                                                                                                                                                                                                                                               | `string`                                           | `undefined`  |
+| `placeholderIcon`    | `placeholder-icon`    | Specifies the placeholder icon for the input.                                                                                                                                                                                                                                                                                                                               | `string`                                           | `undefined`  |
+| `scale`              | `scale`               | Specifies the size of the component.                                                                                                                                                                                                                                                                                                                                        | `"l" \| "m" \| "s"`                                | `"m"`        |
+| `selectedItems`      | --                    | Specifies the component's selected items.                                                                                                                                                                                                                                                                                                                                   | `HTMLCalciteComboboxItemElement[]`                 | `[]`         |
+| `selectionMode`      | `selection-mode`      | specify the selection mode - multiple: allow any number of selected items (default) - single: only one selection) - ancestors: like multiple, but show ancestors of selected items as selected, only deepest children shown in chips                                                                                                                                        | `"ancestors" \| "multi" \| "multiple" \| "single"` | `"multi"`    |
+| `value`              | `value`               | The component's value(s) from the selected `calcite-combobox-item`(s).                                                                                                                                                                                                                                                                                                      | `string \| string[]`                               | `null`       |
 
 ## Events
 
-| Event                         | Description                                                                                              | Type                                                                             |
-| ----------------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
-| `calciteComboboxBeforeClose`  | Fires when the component is requested to be closed, and before the closing transition begins.            | `CustomEvent<void>`                                                              |
-| `calciteComboboxBeforeOpen`   | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | `CustomEvent<void>`                                                              |
-| `calciteComboboxChange`       | Fires when the selected item(s) changes.                                                                 | `CustomEvent<{ selectedItems: HTMLCalciteComboboxItemElement[]; }>`              |
-| `calciteComboboxChipClose`    | Fires when a selected item in the component is dismissed via its `calcite-chip`.                         | `CustomEvent<any>`                                                               |
-| `calciteComboboxClose`        | Fires when the component is closed and animation is complete.                                            | `CustomEvent<void>`                                                              |
-| `calciteComboboxFilterChange` | Fires when text is added to filter the options list.                                                     | `CustomEvent<{ visibleItems: HTMLCalciteComboboxItemElement[]; text: string; }>` |
-| `calciteComboboxOpen`         | Fires when the component is open and animation is complete.                                              | `CustomEvent<void>`                                                              |
+| Event                         | Description                                                                                              | Type                |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------- |
+| `calciteComboboxBeforeClose`  | Fires when the component is requested to be closed, and before the closing transition begins.            | `CustomEvent<void>` |
+| `calciteComboboxBeforeOpen`   | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | `CustomEvent<void>` |
+| `calciteComboboxChange`       | Fires when the selected item(s) changes.                                                                 | `CustomEvent<void>` |
+| `calciteComboboxChipClose`    | Fires when a selected item in the component is closed via its `calcite-chip`.                            | `CustomEvent<void>` |
+| `calciteComboboxClose`        | Fires when the component is closed and animation is complete.                                            | `CustomEvent<void>` |
+| `calciteComboboxFilterChange` | Fires when text is added to filter the options list.                                                     | `CustomEvent<void>` |
+| `calciteComboboxOpen`         | Fires when the component is open and animation is complete.                                              | `CustomEvent<void>` |
 
 ## Methods
 
diff --git a/src/components/date-picker-month-header/readme.md b/src/components/date-picker-month-header/readme.md
index 3b7cf599a8f..78204ee9b6f 100644
--- a/src/components/date-picker-month-header/readme.md
+++ b/src/components/date-picker-month-header/readme.md
@@ -4,18 +4,15 @@
 
 ## Properties
 
-| Property        | Attribute         | Description                                                              | Type                         | Default     |
-| --------------- | ----------------- | ------------------------------------------------------------------------ | ---------------------------- | ----------- |
-| `activeDate`    | --                | Focused date with indicator (will become selected date if user proceeds) | `Date`                       | `undefined` |
-| `headingLevel`  | `heading-level`   | Specifies the number at which section headings should start.             | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
-| `intlNextMonth` | `intl-next-month` | Accessible name for the component's next month button.                   | `string`                     | `undefined` |
-| `intlPrevMonth` | `intl-prev-month` | Accessible name for the component's previous month button.               | `string`                     | `undefined` |
-| `intlYear`      | `intl-year`       | Accessible name for the component's year input.                          | `string`                     | `undefined` |
-| `localeData`    | --                | CLDR locale data for translated calendar info                            | `DateLocaleData`             | `undefined` |
-| `max`           | --                | Specifies the latest allowed date (`"yyyy-mm-dd"`).                      | `Date`                       | `undefined` |
-| `min`           | --                | Specifies the earliest allowed date (`"yyyy-mm-dd"`).                    | `Date`                       | `undefined` |
-| `scale`         | `scale`           | Specifies the size of the component.                                     | `"l" \| "m" \| "s"`          | `undefined` |
-| `selectedDate`  | --                | Already selected date.                                                   | `Date`                       | `undefined` |
+| Property       | Attribute       | Description                                                              | Type                         | Default     |
+| -------------- | --------------- | ------------------------------------------------------------------------ | ---------------------------- | ----------- |
+| `activeDate`   | --              | Focused date with indicator (will become selected date if user proceeds) | `Date`                       | `undefined` |
+| `headingLevel` | `heading-level` | Specifies the number at which section headings should start.             | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
+| `localeData`   | --              | CLDR locale data for translated calendar info                            | `DateLocaleData`             | `undefined` |
+| `max`          | --              | Specifies the latest allowed date (`"yyyy-mm-dd"`).                      | `Date`                       | `undefined` |
+| `min`          | --              | Specifies the earliest allowed date (`"yyyy-mm-dd"`).                    | `Date`                       | `undefined` |
+| `scale`        | `scale`         | Specifies the size of the component.                                     | `"l" \| "m" \| "s"`          | `undefined` |
+| `selectedDate` | --              | Already selected date.                                                   | `Date`                       | `undefined` |
 
 ## Events
 
diff --git a/src/components/date-picker/readme.md b/src/components/date-picker/readme.md
index 44a8d86f2d5..3a64dab920f 100644
--- a/src/components/date-picker/readme.md
+++ b/src/components/date-picker/readme.md
@@ -16,43 +16,39 @@ You can set a min and max range, as well as an initial value with ISO 8601 forma
 
 ### Range
 
-You can also add range property to activate date range mode. In this mode, you can specify start and end instead of the single value property.
+You can also add range property to activate date range mode. In this mode, you will have to set the value property directly on the component's instance to an array of date strings.
 
 ```html
-<calcite-date-picker range start="2020-03-15" end="2020-03-27" min="2020-02-01" max="2021-01-01" />
+<calcite-date-picker range min="2020-02-01" max="2021-01-01" />
 ```
 
 ## Properties
 
-| Property                     | Attribute                      | Description                                                                                                                                                                  | Type                                                                                                                                                                                                                                    | Default          |
-| ---------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
-| `activeDate`                 | --                             | Specifies the component's active date.                                                                                                                                       | `Date`                                                                                                                                                                                                                                  | `undefined`      |
-| `activeRange`                | `active-range`                 | When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date.                                     | `"end" \| "start"`                                                                                                                                                                                                                      | `undefined`      |
-| `end`                        | `end`                          | <span style="color:red">**[DEPRECATED]**</span> use `value` instead.<br/><br/>Specifies the selected end date.                                                               | `string`                                                                                                                                                                                                                                | `undefined`      |
-| `endAsDate`                  | --                             | <span style="color:red">**[DEPRECATED]**</span> use `valueAsDate` instead.<br/><br/>Specifies the selected end date as a full date object.                                   | `Date`                                                                                                                                                                                                                                  | `undefined`      |
-| `headingLevel`               | `heading-level`                | Specifies the number at which section headings should start.                                                                                                                 | `1 \| 2 \| 3 \| 4 \| 5 \| 6`                                                                                                                                                                                                            | `undefined`      |
-| `intlNextMonth`              | `intl-next-month`              | Accessible name for the component's next month button.                                                                                                                       | `string`                                                                                                                                                                                                                                | `TEXT.nextMonth` |
-| `intlPrevMonth`              | `intl-prev-month`              | Accessible name for the component's previous month button.                                                                                                                   | `string`                                                                                                                                                                                                                                | `TEXT.prevMonth` |
-| `intlYear`                   | `intl-year`                    | Accessible name for the component's year input.                                                                                                                              | `string`                                                                                                                                                                                                                                | `TEXT.year`      |
-| `max`                        | `max`                          | Specifies the latest allowed date (`"yyyy-mm-dd"`).                                                                                                                          | `string`                                                                                                                                                                                                                                | `undefined`      |
-| `maxAsDate`                  | --                             | Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`).                                                                                          | `Date`                                                                                                                                                                                                                                  | `undefined`      |
-| `min`                        | `min`                          | Specifies the earliest allowed date (`"yyyy-mm-dd"`).                                                                                                                        | `string`                                                                                                                                                                                                                                | `undefined`      |
-| `minAsDate`                  | --                             | Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`).                                                                                        | `Date`                                                                                                                                                                                                                                  | `undefined`      |
-| `numberingSystem`            | `numbering-system`             | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.                                                    | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined`      |
-| `proximitySelectionDisabled` | `proximity-selection-disabled` | When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range.                                            | `boolean`                                                                                                                                                                                                                               | `false`          |
-| `range`                      | `range`                        | When `true`, activates the component's range mode to allow a start and end date.                                                                                             | `boolean`                                                                                                                                                                                                                               | `false`          |
-| `scale`                      | `scale`                        | Specifies the size of the component.                                                                                                                                         | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`            |
-| `start`                      | `start`                        | <span style="color:red">**[DEPRECATED]**</span> use `value` instead.<br/><br/>Specifies the selected start date.                                                             | `string`                                                                                                                                                                                                                                | `undefined`      |
-| `startAsDate`                | --                             | <span style="color:red">**[DEPRECATED]**</span> use `valueAsDate` instead.<br/><br/>Specifies the selected start date as a full date object.                                 | `Date`                                                                                                                                                                                                                                  | `undefined`      |
-| `value`                      | `value`                        | Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`).                                        | `string \| string[]`                                                                                                                                                                                                                    | `undefined`      |
-| `valueAsDate`                | --                             | Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). | `Date \| Date[]`                                                                                                                                                                                                                        | `undefined`      |
+| Property                     | Attribute                      | Description                                                                                                                                                                  | Type                                                                                                                                                                                                                                    | Default     |
+| ---------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `activeDate`                 | --                             | Specifies the component's active date.                                                                                                                                       | `Date`                                                                                                                                                                                                                                  | `undefined` |
+| `activeRange`                | `active-range`                 | When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date.                                     | `"end" \| "start"`                                                                                                                                                                                                                      | `undefined` |
+| `endAsDate`                  | --                             | <span style="color:red">**[DEPRECATED]**</span> use `valueAsDate` instead.<br/><br/>Specifies the selected end date as a full date object.                                   | `Date`                                                                                                                                                                                                                                  | `undefined` |
+| `headingLevel`               | `heading-level`                | Specifies the number at which section headings should start.                                                                                                                 | `1 \| 2 \| 3 \| 4 \| 5 \| 6`                                                                                                                                                                                                            | `undefined` |
+| `max`                        | `max`                          | Specifies the latest allowed date (`"yyyy-mm-dd"`).                                                                                                                          | `string`                                                                                                                                                                                                                                | `undefined` |
+| `maxAsDate`                  | --                             | Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`).                                                                                          | `Date`                                                                                                                                                                                                                                  | `undefined` |
+| `messageOverrides`           | `message-overrides`            | Use this property to override individual strings used by the component.                                                                                                      | `Messages`                                                                                                                                                                                                                              | `undefined` |
+| `min`                        | `min`                          | Specifies the earliest allowed date (`"yyyy-mm-dd"`).                                                                                                                        | `string`                                                                                                                                                                                                                                | `undefined` |
+| `minAsDate`                  | --                             | Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`).                                                                                        | `Date`                                                                                                                                                                                                                                  | `undefined` |
+| `numberingSystem`            | `numbering-system`             | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.                                                    | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` |
+| `proximitySelectionDisabled` | `proximity-selection-disabled` | When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range.                                            | `boolean`                                                                                                                                                                                                                               | `false`     |
+| `range`                      | `range`                        | When `true`, activates the component's range mode to allow a start and end date.                                                                                             | `boolean`                                                                                                                                                                                                                               | `false`     |
+| `scale`                      | `scale`                        | Specifies the size of the component.                                                                                                                                         | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`       |
+| `startAsDate`                | --                             | <span style="color:red">**[DEPRECATED]**</span> use `valueAsDate` instead.<br/><br/>Specifies the selected start date as a full date object.                                 | `Date`                                                                                                                                                                                                                                  | `undefined` |
+| `value`                      | `value`                        | Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`).                                        | `string \| string[]`                                                                                                                                                                                                                    | `undefined` |
+| `valueAsDate`                | --                             | Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). | `Date \| Date[]`                                                                                                                                                                                                                        | `undefined` |
 
 ## Events
 
-| Event                          | Description                                                                                                           | Type                           |
-| ------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
-| `calciteDatePickerChange`      | Emits when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`.               | `CustomEvent<Date>`            |
-| `calciteDatePickerRangeChange` | Emits when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`. | `CustomEvent<DateRangeChange>` |
+| Event                          | Description                                                                                                           | Type                |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `calciteDatePickerChange`      | Emits when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`.               | `CustomEvent<void>` |
+| `calciteDatePickerRangeChange` | Emits when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`. | `CustomEvent<void>` |
 
 ## Dependencies
 
diff --git a/src/components/filter/readme.md b/src/components/filter/readme.md
index 76f3bdf64cd..19c20e0b40d 100644
--- a/src/components/filter/readme.md
+++ b/src/components/filter/readme.md
@@ -4,22 +4,21 @@
 
 ## Properties
 
-| Property        | Attribute     | Description                                                                                                                                                                                                                                 | Type                | Default     |
-| --------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------- |
-| `disabled`      | `disabled`    | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                    | `boolean`           | `false`     |
-| `filteredItems` | --            | The component's resulting items after filtering.                                                                                                                                                                                            | `object[]`          | `[]`        |
-| `intlClear`     | `intl-clear`  | Accessible name for the component's clear button.                                                                                                                                                                                           | `string`            | `undefined` |
-| `intlLabel`     | `intl-label`  | Accessible name for the component.                                                                                                                                                                                                          | `string`            | `undefined` |
-| `items`         | --            | Defines the items to filter. The component uses the values as the starting point, and returns items that contain the string entered in the input, using a partial match and recursive search. This property is needed to conduct filtering. | `object[]`          | `[]`        |
-| `placeholder`   | `placeholder` | Specifies placeholder text for the input element.                                                                                                                                                                                           | `string`            | `undefined` |
-| `scale`         | `scale`       | Specifies the size of the component.                                                                                                                                                                                                        | `"l" \| "m" \| "s"` | `"m"`       |
-| `value`         | `value`       | The component's value.                                                                                                                                                                                                                      | `string`            | `""`        |
+| Property           | Attribute           | Description                                                                                                                                                                                                                                 | Type                | Default     |
+| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------- |
+| `disabled`         | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                    | `boolean`           | `false`     |
+| `filteredItems`    | --                  | The component's resulting items after filtering.                                                                                                                                                                                            | `object[]`          | `[]`        |
+| `items`            | --                  | Defines the items to filter. The component uses the values as the starting point, and returns items that contain the string entered in the input, using a partial match and recursive search. This property is needed to conduct filtering. | `object[]`          | `[]`        |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component.                                                                                                                                                                     | `Messages`          | `undefined` |
+| `placeholder`      | `placeholder`       | Specifies placeholder text for the input element.                                                                                                                                                                                           | `string`            | `undefined` |
+| `scale`            | `scale`             | Specifies the size of the component.                                                                                                                                                                                                        | `"l" \| "m" \| "s"` | `"m"`       |
+| `value`            | `value`             | The component's value.                                                                                                                                                                                                                      | `string`            | `""`        |
 
 ## Events
 
-| Event                 | Description                              | Type                |
-| --------------------- | ---------------------------------------- | ------------------- |
-| `calciteFilterChange` | Fires when the component's text changes. | `CustomEvent<void>` |
+| Event                 | Description                                    | Type                |
+| --------------------- | ---------------------------------------------- | ------------------- |
+| `calciteFilterChange` | This event fires when the filter text changes. | `CustomEvent<void>` |
 
 ## Methods
 
diff --git a/src/components/flow-item/readme.md b/src/components/flow-item/readme.md
index bf1acf24e97..a9f2914949b 100644
--- a/src/components/flow-item/readme.md
+++ b/src/components/flow-item/readme.md
@@ -4,23 +4,21 @@
 
 ## Properties
 
-| Property         | Attribute          | Description                                                                                   | Type                         | Default     |
-| ---------------- | ------------------ | --------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
-| `beforeBack`     | --                 | When provided, the method will be called before it is removed from its parent `calcite-flow`. | `() => Promise<void>`        | `undefined` |
-| `closable`       | `closable`         | When `true`, displays a close button in the trailing side of the component's header.          | `boolean`                    | `false`     |
-| `closed`         | `closed`           | When `true`, the component will be hidden.                                                    | `boolean`                    | `false`     |
-| `description`    | `description`      | A description for the component.                                                              | `string`                     | `undefined` |
-| `disabled`       | `disabled`         | When `true`, interaction is prevented and the component is displayed with lower opacity.      | `boolean`                    | `false`     |
-| `heading`        | `heading`          | The component header text.                                                                    | `string`                     | `undefined` |
-| `headingLevel`   | `heading-level`    | Specifies the number at which section headings should start.                                  | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
-| `heightScale`    | `height-scale`     | Specifies the maximum height of the component.                                                | `"l" \| "m" \| "s"`          | `undefined` |
-| `intlBack`       | `intl-back`        | When `showBackButton` is `true`, the accessible name for the component's back button.         | `string`                     | `undefined` |
-| `intlClose`      | `intl-close`       | When `closable` is `true`, the accessible name for the component's close button.              | `string`                     | `undefined` |
-| `intlOptions`    | `intl-options`     | Accessible name for the component's actions menu.                                             | `string`                     | `undefined` |
-| `loading`        | `loading`          | When `true`, a busy indicator is displayed.                                                   | `boolean`                    | `false`     |
-| `menuOpen`       | `menu-open`        | When `true`, the action menu items in the `header-menu-actions` slot are open.                | `boolean`                    | `false`     |
-| `showBackButton` | `show-back-button` | When `true`, displays a back button in the component's header.                                | `boolean`                    | `false`     |
-| `widthScale`     | `width-scale`      | Specifies the width of the component.                                                         | `"l" \| "m" \| "s"`          | `undefined` |
+| Property           | Attribute           | Description                                                                                                     | Type                         | Default     |
+| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| `beforeBack`       | --                  | When provided, the method will be called before it is removed from its parent `calcite-flow`.                   | `() => Promise<void>`        | `undefined` |
+| `closable`         | `closable`          | When `true`, displays a close button in the trailing side of the component's header.                            | `boolean`                    | `false`     |
+| `closed`           | `closed`            | When `true`, the component will be hidden.                                                                      | `boolean`                    | `false`     |
+| `description`      | `description`       | A description for the component.                                                                                | `string`                     | `undefined` |
+| `disabled`         | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity.                        | `boolean`                    | `false`     |
+| `heading`          | `heading`           | The component header text.                                                                                      | `string`                     | `undefined` |
+| `headingLevel`     | `heading-level`     | Specifies the number at which section headings should start.                                                    | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
+| `heightScale`      | `height-scale`      | Specifies the maximum height of the component.                                                                  | `"l" \| "m" \| "s"`          | `undefined` |
+| `loading`          | `loading`           | When `true`, a busy indicator is displayed.                                                                     | `boolean`                    | `false`     |
+| `menuOpen`         | `menu-open`         | When `true`, the action menu items in the `header-menu-actions` slot are open.                                  | `boolean`                    | `false`     |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component.                                         | `Messages`                   | `undefined` |
+| `showBackButton`   | `show-back-button`  | When true, displays a back button in the header. When `true`, displays a back button in the component's header. | `boolean`                    | `false`     |
+| `widthScale`       | `width-scale`       | Specifies the width of the component.                                                                           | `"l" \| "m" \| "s"`          | `undefined` |
 
 ## Events
 
diff --git a/src/components/inline-editable/readme.md b/src/components/inline-editable/readme.md
index 9705c3407c0..6d20d858e66 100644
--- a/src/components/inline-editable/readme.md
+++ b/src/components/inline-editable/readme.md
@@ -35,17 +35,18 @@ There is no need to set a theme or scale on the `<calcite-inline-editable>` comp
 
 ## Properties
 
-| Property             | Attribute              | Description                                                                                                                                                  | Type                  | Default                    |
-| -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | -------------------------- |
-| `afterConfirm`       | --                     | Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. | `() => Promise<void>` | `undefined`                |
-| `controls`           | `controls`             | When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component.                                                              | `boolean`             | `false`                    |
-| `disabled`           | `disabled`             | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                     | `boolean`             | `false`                    |
-| `editingEnabled`     | `editing-enabled`      | When `true`, inline editing is enabled on the component.                                                                                                     | `boolean`             | `false`                    |
-| `intlCancelEditing`  | `intl-cancel-editing`  | Accessible name for the component's cancel editing button.                                                                                                   | `string`              | `TEXT.intlCancelEditing`   |
-| `intlConfirmChanges` | `intl-confirm-changes` | Accessible name for the component's confirm edits button.                                                                                                    | `string`              | `TEXT.intlConfirmChanges`  |
-| `intlEnableEditing`  | `intl-enable-editing`  | Accessible name for the component's enable editing button.                                                                                                   | `string`              | `TEXT.intlEnablingEditing` |
-| `loading`            | `loading`              | When `true`, a busy indicator is displayed.                                                                                                                  | `boolean`             | `false`                    |
-| `scale`              | `scale`                | Specifies the size of the component. Defaults to the scale of the wrapped `calcite-input` or the scale of the closest wrapping component with a set scale.   | `"l" \| "m" \| "s"`   | `undefined`                |
+| Property             | Attribute              | Description                                                                                                                                                                                                           | Type                  | Default     |
+| -------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| `afterConfirm`       | --                     | Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically.                                                          | `() => Promise<void>` | `undefined` |
+| `controls`           | `controls`             | When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component.                                                                                                                       | `boolean`             | `false`     |
+| `disabled`           | `disabled`             | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                              | `boolean`             | `false`     |
+| `editingEnabled`     | `editing-enabled`      | When `true`, inline editing is enabled on the component.                                                                                                                                                              | `boolean`             | `false`     |
+| `intlCancelEditing`  | `intl-cancel-editing`  | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`.<br/><br/>Accessible name for the component's cancel editing button. | `string`              | `undefined` |
+| `intlConfirmChanges` | `intl-confirm-changes` | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`.<br/><br/>Accessible name for the component's confirm edits button.  | `string`              | `undefined` |
+| `intlEnableEditing`  | `intl-enable-editing`  | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`.<br/><br/>Accessible name for the component's enable editing button. | `string`              | `undefined` |
+| `loading`            | `loading`              | When `true`, a busy indicator is displayed.                                                                                                                                                                           | `boolean`             | `false`     |
+| `messageOverrides`   | `message-overrides`    | Use this property to override individual strings used by the component.                                                                                                                                               | `Messages`            | `undefined` |
+| `scale`              | `scale`                | Specifies the size of the component. Defaults to the scale of the wrapped `calcite-input` or the scale of the closest wrapping component with a set scale.                                                            | `"l" \| "m" \| "s"`   | `undefined` |
 
 ## Events
 
diff --git a/src/components/input-date-picker/readme.md b/src/components/input-date-picker/readme.md
index 35bb9406c0a..2858671403c 100644
--- a/src/components/input-date-picker/readme.md
+++ b/src/components/input-date-picker/readme.md
@@ -32,12 +32,10 @@
 | `endAsDate`                  | --                             | <span style="color:red">**[DEPRECATED]**</span> use `valueAsDate` instead.<br/><br/>The component's end date as a full date object.                                                                                                                                                                                                                                         | `Date`                                                                                                                                                                                                                                  | `undefined`            |
 | `flipPlacements`             | --                             | Defines the available placements that can be used when a flip occurs.                                                                                                                                                                                                                                                                                                       | `Placement[]`                                                                                                                                                                                                                           | `undefined`            |
 | `headingLevel`               | `heading-level`                | Specifies the number at which section headings should start.                                                                                                                                                                                                                                                                                                                | `1 \| 2 \| 3 \| 4 \| 5 \| 6`                                                                                                                                                                                                            | `undefined`            |
-| `intlNextMonth`              | `intl-next-month`              | Accessible name for the component's next month button.                                                                                                                                                                                                                                                                                                                      | `string`                                                                                                                                                                                                                                | `TEXT.nextMonth`       |
-| `intlPrevMonth`              | `intl-prev-month`              | Accessible name for the component's previous month button.                                                                                                                                                                                                                                                                                                                  | `string`                                                                                                                                                                                                                                | `TEXT.prevMonth`       |
-| `intlYear`                   | `intl-year`                    | Accessible name for the component's year input.                                                                                                                                                                                                                                                                                                                             | `string`                                                                                                                                                                                                                                | `TEXT.year`            |
 | `layout`                     | `layout`                       | Defines the layout of the component.                                                                                                                                                                                                                                                                                                                                        | `"horizontal" \| "vertical"`                                                                                                                                                                                                            | `"horizontal"`         |
 | `max`                        | `max`                          | Specifies the latest allowed date ("yyyy-mm-dd").                                                                                                                                                                                                                                                                                                                           | `string`                                                                                                                                                                                                                                | `undefined`            |
 | `maxAsDate`                  | --                             | Specifies the latest allowed date as a full date object.                                                                                                                                                                                                                                                                                                                    | `Date`                                                                                                                                                                                                                                  | `undefined`            |
+| `messageOverrides`           | `message-overrides`            | Use this property to override individual strings used by the component.                                                                                                                                                                                                                                                                                                     | `Messages`                                                                                                                                                                                                                              | `undefined`            |
 | `min`                        | `min`                          | Specifies the earliest allowed date ("yyyy-mm-dd").                                                                                                                                                                                                                                                                                                                         | `string`                                                                                                                                                                                                                                | `undefined`            |
 | `minAsDate`                  | --                             | Specifies the earliest allowed date as a full date object.                                                                                                                                                                                                                                                                                                                  | `Date`                                                                                                                                                                                                                                  | `undefined`            |
 | `name`                       | `name`                         | Specifies the name of the component on form submission.                                                                                                                                                                                                                                                                                                                     | `string`                                                                                                                                                                                                                                | `undefined`            |
@@ -58,7 +56,6 @@
 
 | Event                               | Description                                                                                                                                    | Type                           |
 | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
-| `calciteDatePickerChange`           | <span style="color:red">**[DEPRECATED]**</span> use `calciteInputDatePickerChange` instead.<br/><br/>Fires when a user changes the date.       | `CustomEvent<Date>`            |
 | `calciteDatePickerRangeChange`      | <span style="color:red">**[DEPRECATED]**</span> use `calciteInputDatePickerChange` instead.<br/><br/>Fires when a user changes the date range. | `CustomEvent<DateRangeChange>` |
 | `calciteInputDatePickerBeforeClose` | Fires when the component is requested to be closed and before the closing transition begins.                                                   | `CustomEvent<void>`            |
 | `calciteInputDatePickerBeforeOpen`  | Fires when the component is added to the DOM but not rendered, and before the opening transition begins.                                       | `CustomEvent<void>`            |
diff --git a/src/components/input-number/readme.md b/src/components/input-number/readme.md
index 6a467768453..2f1eaf02d2a 100644
--- a/src/components/input-number/readme.md
+++ b/src/components/input-number/readme.md
@@ -4,39 +4,40 @@
 
 ## Properties
 
-| Property           | Attribute            | Description                                                                                                                                            | Type                                                                                                                                                                                                                                    | Default               |
-| ------------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
-| `alignment`        | `alignment`          | Specifies the text alignment of the component's value.                                                                                                 | `"end" \| "start"`                                                                                                                                                                                                                      | `"start"`             |
-| `autocomplete`     | `autocomplete`       | Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info.                       | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `autofocus`        | `autofocus`          | When `true`, the component is focused on page load.                                                                                                    | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `clearable`        | `clearable`          | When `true`, a clear button is displayed when the component has a value.                                                                               | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `disabled`         | `disabled`           | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                               | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `enterKeyHint`     | `enter-key-hint`     | Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info.             | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `groupSeparator`   | `group-separator`    | When `true`, number values are displayed with a group separator corresponding to the language and country format.                                      | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `hidden`           | `hidden`             | When `true`, the component will not be visible.                                                                                                        | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `icon`             | `icon`               | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.                                  | `boolean \| string`                                                                                                                                                                                                                     | `undefined`           |
-| `iconFlipRtl`      | `icon-flip-rtl`      | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).                                                           | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `inputMode`        | `input-mode`         | Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. | `string`                                                                                                                                                                                                                                | `"decimal"`           |
-| `intlClear`        | `intl-clear`         | A text label that will appear on the clear button for screen readers.                                                                                  | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `intlLoading`      | `intl-loading`       | Accessible name that will appear while loading.                                                                                                        | `string`                                                                                                                                                                                                                                | `COMMON_TEXT.loading` |
-| `label`            | `label`              | Accessible name for the component's button or hyperlink.                                                                                               | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `loading`          | `loading`            | When `true`, the component is in the loading state and `calcite-progress` is displayed.                                                                | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `max`              | `max`                | Specifies the maximum value.                                                                                                                           | `number`                                                                                                                                                                                                                                | `undefined`           |
-| `maxLength`        | `max-length`         | Specifies the maximum length of text for the component's value.                                                                                        | `number`                                                                                                                                                                                                                                | `undefined`           |
-| `min`              | `min`                | Specifies the minimum value.                                                                                                                           | `number`                                                                                                                                                                                                                                | `undefined`           |
-| `minLength`        | `min-length`         | Specifies the minimum length of text for the component's value.                                                                                        | `number`                                                                                                                                                                                                                                | `undefined`           |
-| `name`             | `name`               | Specifies the name of the component.                                                                                                                   | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `numberButtonType` | `number-button-type` | Specifies the placement of the buttons.                                                                                                                | `"horizontal" \| "none" \| "vertical"`                                                                                                                                                                                                  | `"vertical"`          |
-| `numberingSystem`  | `numbering-system`   | Specifies the Unicode numeral system used by the component for localization.                                                                           | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined`           |
-| `placeholder`      | `placeholder`        | Specifies placeholder text for the component.                                                                                                          | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `prefixText`       | `prefix-text`        | Adds text to the start of the component.                                                                                                               | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `readOnly`         | `read-only`          | When `true`, the component's value can be read, but cannot be modified.                                                                                | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `required`         | `required`           | When `true`, the component must have a value in order for the form to submit.                                                                          | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `scale`            | `scale`              | Specifies the size of the component.                                                                                                                   | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`                 |
-| `status`           | `status`             | Specifies the status of the input field, which determines message and icons.                                                                           | `"idle" \| "invalid" \| "valid"`                                                                                                                                                                                                        | `"idle"`              |
-| `step`             | `step`               | Specifies the granularity that the component's value must adhere to.                                                                                   | `"any" \| number`                                                                                                                                                                                                                       | `undefined`           |
-| `suffixText`       | `suffix-text`        | Adds text to the end of the component.                                                                                                                 | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `value`            | `value`              | The component's value.                                                                                                                                 | `string`                                                                                                                                                                                                                                | `""`                  |
+| Property           | Attribute            | Description                                                                                                                                                                                                                      | Type                                                                                                                                                                                                                                    | Default      |
+| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
+| `alignment`        | `alignment`          | Specifies the text alignment of the component's value.                                                                                                                                                                           | `"end" \| "start"`                                                                                                                                                                                                                      | `"start"`    |
+| `autocomplete`     | `autocomplete`       | Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info.                                                                                                 | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `autofocus`        | `autofocus`          | When `true`, the component is focused on page load.                                                                                                                                                                              | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `clearable`        | `clearable`          | When `true`, a clear button is displayed when the component has a value.                                                                                                                                                         | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `disabled`         | `disabled`           | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                         | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `enterKeyHint`     | `enter-key-hint`     | Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info.                                                                                       | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `groupSeparator`   | `group-separator`    | When `true`, number values are displayed with a group separator corresponding to the language and country format.                                                                                                                | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `hidden`           | `hidden`             | When `true`, the component will not be visible.                                                                                                                                                                                  | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `icon`             | `icon`               | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.                                                                                                            | `boolean \| string`                                                                                                                                                                                                                     | `undefined`  |
+| `iconFlipRtl`      | `icon-flip-rtl`      | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).                                                                                                                                     | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `inputMode`        | `input-mode`         | Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info.                                                                           | `string`                                                                                                                                                                                                                                | `"decimal"`  |
+| `intlClear`        | `intl-clear`         | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`.<br/><br/>A text label that will appear on the clear button for screen readers. | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `intlLoading`      | `intl-loading`       | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`.<br/><br/>Accessible name that will appear while loading.                       | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `label`            | `label`              | Accessible name for the component's button or hyperlink.                                                                                                                                                                         | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `loading`          | `loading`            | When `true`, the component is in the loading state and `calcite-progress` is displayed.                                                                                                                                          | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `max`              | `max`                | Specifies the maximum value.                                                                                                                                                                                                     | `number`                                                                                                                                                                                                                                | `undefined`  |
+| `maxLength`        | `max-length`         | Specifies the maximum length of text for the component's value.                                                                                                                                                                  | `number`                                                                                                                                                                                                                                | `undefined`  |
+| `messageOverrides` | `message-overrides`  | Use this property to override individual strings used by the component.                                                                                                                                                          | `Messages`                                                                                                                                                                                                                              | `undefined`  |
+| `min`              | `min`                | Specifies the minimum value.                                                                                                                                                                                                     | `number`                                                                                                                                                                                                                                | `undefined`  |
+| `minLength`        | `min-length`         | Specifies the minimum length of text for the component's value.                                                                                                                                                                  | `number`                                                                                                                                                                                                                                | `undefined`  |
+| `name`             | `name`               | Specifies the name of the component.                                                                                                                                                                                             | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `numberButtonType` | `number-button-type` | Specifies the placement of the buttons.                                                                                                                                                                                          | `"horizontal" \| "none" \| "vertical"`                                                                                                                                                                                                  | `"vertical"` |
+| `numberingSystem`  | `numbering-system`   | Specifies the Unicode numeral system used by the component for localization.                                                                                                                                                     | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined`  |
+| `placeholder`      | `placeholder`        | Specifies placeholder text for the component.                                                                                                                                                                                    | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `prefixText`       | `prefix-text`        | Adds text to the start of the component.                                                                                                                                                                                         | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `readOnly`         | `read-only`          | When `true`, the component's value can be read, but cannot be modified.                                                                                                                                                          | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `required`         | `required`           | When `true`, the component must have a value in order for the form to submit.                                                                                                                                                    | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `scale`            | `scale`              | Specifies the size of the component.                                                                                                                                                                                             | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`        |
+| `status`           | `status`             | Specifies the status of the input field, which determines message and icons.                                                                                                                                                     | `"idle" \| "invalid" \| "valid"`                                                                                                                                                                                                        | `"idle"`     |
+| `step`             | `step`               | Specifies the granularity that the component's value must adhere to.                                                                                                                                                             | `"any" \| number`                                                                                                                                                                                                                       | `undefined`  |
+| `suffixText`       | `suffix-text`        | Adds text to the end of the component.                                                                                                                                                                                           | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `value`            | `value`              | The component's value.                                                                                                                                                                                                           | `string`                                                                                                                                                                                                                                | `""`         |
 
 ## Events
 
diff --git a/src/components/input-text/readme.md b/src/components/input-text/readme.md
index 5b450e3392c..fe84b99ac3c 100644
--- a/src/components/input-text/readme.md
+++ b/src/components/input-text/readme.md
@@ -4,34 +4,35 @@
 
 ## Properties
 
-| Property       | Attribute        | Description                                                                                                                                            | Type                             | Default               |
-| -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------- |
-| `alignment`    | `alignment`      | Specifies the text alignment of the component's value.                                                                                                 | `"end" \| "start"`               | `"start"`             |
-| `autocomplete` | `autocomplete`   | Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info.                       | `string`                         | `undefined`           |
-| `autofocus`    | `autofocus`      | When `true`, the component is focused on page load.                                                                                                    | `boolean`                        | `false`               |
-| `clearable`    | `clearable`      | When `true`, a clear button is displayed when the component has a value.                                                                               | `boolean`                        | `false`               |
-| `disabled`     | `disabled`       | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                               | `boolean`                        | `false`               |
-| `enterKeyHint` | `enter-key-hint` | Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info.             | `string`                         | `undefined`           |
-| `hidden`       | `hidden`         | When `true`, the component will not be visible.                                                                                                        | `boolean`                        | `false`               |
-| `icon`         | `icon`           | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.                                  | `boolean \| string`              | `undefined`           |
-| `iconFlipRtl`  | `icon-flip-rtl`  | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).                                                           | `boolean`                        | `false`               |
-| `inputMode`    | `input-mode`     | Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. | `string`                         | `"text"`              |
-| `intlClear`    | `intl-clear`     | A text label that will appear on the clear button for screen readers.                                                                                  | `string`                         | `undefined`           |
-| `intlLoading`  | `intl-loading`   | Accessible name that will appear while loading.                                                                                                        | `string`                         | `COMMON_TEXT.loading` |
-| `label`        | `label`          | Accessible name for the component's button or hyperlink.                                                                                               | `string`                         | `undefined`           |
-| `loading`      | `loading`        | When `true`, the component is in the loading state and `calcite-progress` is displayed.                                                                | `boolean`                        | `false`               |
-| `maxLength`    | `max-length`     | Specifies the maximum length of text for the component's value.                                                                                        | `number`                         | `undefined`           |
-| `minLength`    | `min-length`     | Specifies the minimum length of text for the component's value.                                                                                        | `number`                         | `undefined`           |
-| `name`         | `name`           | Specifies the name of the component.                                                                                                                   | `string`                         | `undefined`           |
-| `pattern`      | `pattern`        | Specifies a regex pattern the component's `value` must match for validation. Read the native attribute's documentation on MDN for more info.           | `string`                         | `undefined`           |
-| `placeholder`  | `placeholder`    | Specifies placeholder text for the component.                                                                                                          | `string`                         | `undefined`           |
-| `prefixText`   | `prefix-text`    | Adds text to the start of the component.                                                                                                               | `string`                         | `undefined`           |
-| `readOnly`     | `read-only`      | When `true`, the component's value can be read, but cannot be modified.                                                                                | `boolean`                        | `false`               |
-| `required`     | `required`       | When `true`, the component must have a value in order for the form to submit.                                                                          | `boolean`                        | `false`               |
-| `scale`        | `scale`          | Specifies the size of the component.                                                                                                                   | `"l" \| "m" \| "s"`              | `"m"`                 |
-| `status`       | `status`         | Specifies the status of the input field, which determines message and icons.                                                                           | `"idle" \| "invalid" \| "valid"` | `"idle"`              |
-| `suffixText`   | `suffix-text`    | Adds text to the end of the component.                                                                                                                 | `string`                         | `undefined`           |
-| `value`        | `value`          | The component's value.                                                                                                                                 | `string`                         | `""`                  |
+| Property           | Attribute           | Description                                                                                                                                                                                                                      | Type                             | Default     |
+| ------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| `alignment`        | `alignment`         | Specifies the text alignment of the component's value.                                                                                                                                                                           | `"end" \| "start"`               | `"start"`   |
+| `autocomplete`     | `autocomplete`      | Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info.                                                                                                 | `string`                         | `undefined` |
+| `autofocus`        | `autofocus`         | When `true`, the component is focused on page load.                                                                                                                                                                              | `boolean`                        | `false`     |
+| `clearable`        | `clearable`         | When `true`, a clear button is displayed when the component has a value.                                                                                                                                                         | `boolean`                        | `false`     |
+| `disabled`         | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                         | `boolean`                        | `false`     |
+| `enterKeyHint`     | `enter-key-hint`    | Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info.                                                                                       | `string`                         | `undefined` |
+| `hidden`           | `hidden`            | When `true`, the component will not be visible.                                                                                                                                                                                  | `boolean`                        | `false`     |
+| `icon`             | `icon`              | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.                                                                                                            | `boolean \| string`              | `undefined` |
+| `iconFlipRtl`      | `icon-flip-rtl`     | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).                                                                                                                                     | `boolean`                        | `false`     |
+| `inputMode`        | `input-mode`        | Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info.                                                                           | `string`                         | `"text"`    |
+| `intlClear`        | `intl-clear`        | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`.<br/><br/>A text label that will appear on the clear button for screen readers. | `string`                         | `undefined` |
+| `intlLoading`      | `intl-loading`      | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`.<br/><br/>Accessible name that will appear while loading.                       | `string`                         | `undefined` |
+| `label`            | `label`             | Accessible name for the component's button or hyperlink.                                                                                                                                                                         | `string`                         | `undefined` |
+| `loading`          | `loading`           | When `true`, the component is in the loading state and `calcite-progress` is displayed.                                                                                                                                          | `boolean`                        | `false`     |
+| `maxLength`        | `max-length`        | Specifies the maximum length of text for the component's value.                                                                                                                                                                  | `number`                         | `undefined` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component.                                                                                                                                                          | `Messages`                       | `undefined` |
+| `minLength`        | `min-length`        | Specifies the minimum length of text for the component's value.                                                                                                                                                                  | `number`                         | `undefined` |
+| `name`             | `name`              | Specifies the name of the component.                                                                                                                                                                                             | `string`                         | `undefined` |
+| `pattern`          | `pattern`           | Specifies a regex pattern the component's `value` must match for validation. Read the native attribute's documentation on MDN for more info.                                                                                     | `string`                         | `undefined` |
+| `placeholder`      | `placeholder`       | Specifies placeholder text for the component.                                                                                                                                                                                    | `string`                         | `undefined` |
+| `prefixText`       | `prefix-text`       | Adds text to the start of the component.                                                                                                                                                                                         | `string`                         | `undefined` |
+| `readOnly`         | `read-only`         | When `true`, the component's value can be read, but cannot be modified.                                                                                                                                                          | `boolean`                        | `false`     |
+| `required`         | `required`          | When `true`, the component must have a value in order for the form to submit.                                                                                                                                                    | `boolean`                        | `false`     |
+| `scale`            | `scale`             | Specifies the size of the component.                                                                                                                                                                                             | `"l" \| "m" \| "s"`              | `"m"`       |
+| `status`           | `status`            | Specifies the status of the input field, which determines message and icons.                                                                                                                                                     | `"idle" \| "invalid" \| "valid"` | `"idle"`    |
+| `suffixText`       | `suffix-text`       | Adds text to the end of the component.                                                                                                                                                                                           | `string`                         | `undefined` |
+| `value`            | `value`             | The component's value.                                                                                                                                                                                                           | `string`                         | `""`        |
 
 ## Events
 
diff --git a/src/components/input-time-picker/readme.md b/src/components/input-time-picker/readme.md
index 424e1f08edf..35a4f113363 100644
--- a/src/components/input-time-picker/readme.md
+++ b/src/components/input-time-picker/readme.md
@@ -21,18 +21,19 @@
 | Property             | Attribute             | Description                                                                                                                                                                                                                                                                                                                                                                 | Type                                                                                                                                                                                                                                                                                                              | Default      |
 | -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
 | `disabled`           | `disabled`            | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                                                                                                                                                    | `boolean`                                                                                                                                                                                                                                                                                                         | `false`      |
-| `intlHour`           | `intl-hour`           | Accessible name for the component's hour input.                                                                                                                                                                                                                                                                                                                             | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
-| `intlHourDown`       | `intl-hour-down`      | Accessible name for the component's hour down button.                                                                                                                                                                                                                                                                                                                       | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
-| `intlHourUp`         | `intl-hour-up`        | Accessible name for the component's hour up button.                                                                                                                                                                                                                                                                                                                         | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
-| `intlMeridiem`       | `intl-meridiem`       | Accessible name for the component's meridiem (am/pm) input.                                                                                                                                                                                                                                                                                                                 | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
-| `intlMeridiemDown`   | `intl-meridiem-down`  | Accessible name for the component's meridiem (am/pm) down button.                                                                                                                                                                                                                                                                                                           | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
-| `intlMeridiemUp`     | `intl-meridiem-up`    | Accessible name for the component's meridiem (am/pm) up button.                                                                                                                                                                                                                                                                                                             | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
-| `intlMinute`         | `intl-minute`         | Accessible name for the component's minute input.                                                                                                                                                                                                                                                                                                                           | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
-| `intlMinuteDown`     | `intl-minute-down`    | Accessible name for the component's minute down button.                                                                                                                                                                                                                                                                                                                     | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
-| `intlMinuteUp`       | `intl-minute-up`      | Accessible name for the component's minute up button.                                                                                                                                                                                                                                                                                                                       | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
-| `intlSecond`         | `intl-second`         | Accessible name for the component's second input.                                                                                                                                                                                                                                                                                                                           | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
-| `intlSecondDown`     | `intl-second-down`    | Accessible name for the component's second down button.                                                                                                                                                                                                                                                                                                                     | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
-| `intlSecondUp`       | `intl-second-up`      | Accessible name for the component's second up button.                                                                                                                                                                                                                                                                                                                       | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
+| `intlHour`           | `intl-hour`           | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's hour input.                                                                                                                                                                   | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
+| `intlHourDown`       | `intl-hour-down`      | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's hour down button.                                                                                                                                                             | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
+| `intlHourUp`         | `intl-hour-up`        | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's hour up button.                                                                                                                                                               | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
+| `intlMeridiem`       | `intl-meridiem`       | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's meridiem (am/pm) input.                                                                                                                                                       | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
+| `intlMeridiemDown`   | `intl-meridiem-down`  | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's meridiem (am/pm) down button.                                                                                                                                                 | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
+| `intlMeridiemUp`     | `intl-meridiem-up`    | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's meridiem (am/pm) up button.                                                                                                                                                   | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
+| `intlMinute`         | `intl-minute`         | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's minute input.                                                                                                                                                                 | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
+| `intlMinuteDown`     | `intl-minute-down`    | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's minute down button.                                                                                                                                                           | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
+| `intlMinuteUp`       | `intl-minute-up`      | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's minute up button.                                                                                                                                                             | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
+| `intlSecond`         | `intl-second`         | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's second input.                                                                                                                                                                 | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
+| `intlSecondDown`     | `intl-second-down`    | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's second down button.                                                                                                                                                           | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
+| `intlSecondUp`       | `intl-second-up`      | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's second up button.                                                                                                                                                             | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
+| `messagesOverrides`  | `messages-overrides`  | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Use this property to override individual strings used by the component.                                                                                                                                           | `Messages`                                                                                                                                                                                                                                                                                                        | `undefined`  |
 | `name`               | `name`                | Specifies the name of the component on form submission.                                                                                                                                                                                                                                                                                                                     | `string`                                                                                                                                                                                                                                                                                                          | `undefined`  |
 | `numberingSystem`    | `numbering-system`    | Specifies the Unicode numeral system used by the component for localization.                                                                                                                                                                                                                                                                                                | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"`                                                                           | `undefined`  |
 | `open`               | `open`                | When `true`, displays the `calcite-time-picker` component.                                                                                                                                                                                                                                                                                                                  | `boolean`                                                                                                                                                                                                                                                                                                         | `false`      |
diff --git a/src/components/input/readme.md b/src/components/input/readme.md
index 6e458ca839f..6cec6f6ec77 100644
--- a/src/components/input/readme.md
+++ b/src/components/input/readme.md
@@ -59,43 +59,44 @@ function logChange() {
 
 ## Properties
 
-| Property           | Attribute            | Description                                                                                                                                                                                                               | Type                                                                                                                                                                                                                                    | Default               |
-| ------------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
-| `accept`           | `accept`             | Specifies a comma separated list of unique file type specifiers for limiting accepted file types. This property only has an effect when `type` is "file". Read the native attribute's documentation on MDN for more info. | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `alignment`        | `alignment`          | Specifies the text alignment of the component's value.                                                                                                                                                                    | `"end" \| "start"`                                                                                                                                                                                                                      | `"start"`             |
-| `autocomplete`     | `autocomplete`       | Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info.                                                                                          | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `autofocus`        | `autofocus`          | When `true`, the component is focused on page load.                                                                                                                                                                       | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `clearable`        | `clearable`          | When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type.                  | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `disabled`         | `disabled`           | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                  | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `enterKeyHint`     | `enter-key-hint`     | Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info.                                                                                | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `groupSeparator`   | `group-separator`    | When `true`, number values are displayed with a group separator corresponding to the language and country format.                                                                                                         | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `hidden`           | `hidden`             | When `true`, the component will not be visible.                                                                                                                                                                           | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `icon`             | `icon`               | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.                                                                                                     | `boolean \| string`                                                                                                                                                                                                                     | `undefined`           |
-| `iconFlipRtl`      | `icon-flip-rtl`      | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).                                                                                                                              | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `inputMode`        | `input-mode`         | Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info.                                                                    | `string`                                                                                                                                                                                                                                | `"text"`              |
-| `intlClear`        | `intl-clear`         | Accessible name for the component's clear button.                                                                                                                                                                         | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `intlLoading`      | `intl-loading`       | Accessible name when the component is loading.                                                                                                                                                                            | `string`                                                                                                                                                                                                                                | `COMMON_TEXT.loading` |
-| `label`            | `label`              | Accessible name for the component.                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `loading`          | `loading`            | When `true`, a busy indicator is displayed.                                                                                                                                                                               | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `max`              | `max`                | Specifies the maximum value for type "number".                                                                                                                                                                            | `number`                                                                                                                                                                                                                                | `undefined`           |
-| `maxLength`        | `max-length`         | Specifies the maximum length of text for the component's value.                                                                                                                                                           | `number`                                                                                                                                                                                                                                | `undefined`           |
-| `min`              | `min`                | Specifies the minimum value for `type="number"`.                                                                                                                                                                          | `number`                                                                                                                                                                                                                                | `undefined`           |
-| `minLength`        | `min-length`         | Specifies the minimum length of text for the component's value.                                                                                                                                                           | `number`                                                                                                                                                                                                                                | `undefined`           |
-| `multiple`         | `multiple`           | When `true`, the component can accept more than one value. This property only has an effect when `type` is "email" or "file". Read the native attribute's documentation on MDN for more info.                             | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `name`             | `name`               | Specifies the name of the component on form submission.                                                                                                                                                                   | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `numberButtonType` | `number-button-type` | Specifies the placement of the buttons for `type="number"`.                                                                                                                                                               | `"horizontal" \| "none" \| "vertical"`                                                                                                                                                                                                  | `"vertical"`          |
-| `numberingSystem`  | `numbering-system`   | Specifies the Unicode numeral system used by the component for localization.                                                                                                                                              | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined`           |
-| `pattern`          | `pattern`            | Specifies a regex pattern the component's `value` must match for validation. Read the native attribute's documentation on MDN for more info.                                                                              | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `placeholder`      | `placeholder`        | Specifies placeholder text for the component.                                                                                                                                                                             | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `prefixText`       | `prefix-text`        | Adds text to the start of the component.                                                                                                                                                                                  | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `readOnly`         | `read-only`          | When `true`, the component's value can be read, but cannot be modified.                                                                                                                                                   | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `required`         | `required`           | When `true`, the component must have a value in order for the form to submit.                                                                                                                                             | `boolean`                                                                                                                                                                                                                               | `false`               |
-| `scale`            | `scale`              | Specifies the size of the component.                                                                                                                                                                                      | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`                 |
-| `status`           | `status`             | Specifies the status of the input field, which determines message and icons.                                                                                                                                              | `"idle" \| "invalid" \| "valid"`                                                                                                                                                                                                        | `"idle"`              |
-| `step`             | `step`               | Specifies the granularity the component's value must adhere to.                                                                                                                                                           | `"any" \| number`                                                                                                                                                                                                                       | `undefined`           |
-| `suffixText`       | `suffix-text`        | Adds text to the end of the component.                                                                                                                                                                                    | `string`                                                                                                                                                                                                                                | `undefined`           |
-| `type`             | `type`               | Specifies the component type. Note that the following `type`s add type-specific icons by default: `"date"`, `"email"`, `"password"`, `"search"`, `"tel"`, `"time"`.                                                       | `"color" \| "date" \| "datetime-local" \| "email" \| "file" \| "image" \| "month" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "textarea" \| "time" \| "url" \| "week"`                                                  | `"text"`              |
-| `value`            | `value`              | The component's value.                                                                                                                                                                                                    | `string`                                                                                                                                                                                                                                | `""`                  |
+| Property           | Attribute            | Description                                                                                                                                                                                                               | Type                                                                                                                                                                                                                                    | Default      |
+| ------------------ | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
+| `accept`           | `accept`             | Specifies a comma separated list of unique file type specifiers for limiting accepted file types. This property only has an effect when `type` is "file". Read the native attribute's documentation on MDN for more info. | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `alignment`        | `alignment`          | Specifies the text alignment of the component's value.                                                                                                                                                                    | `"end" \| "start"`                                                                                                                                                                                                                      | `"start"`    |
+| `autocomplete`     | `autocomplete`       | Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info.                                                                                          | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `autofocus`        | `autofocus`          | When `true`, the component is focused on page load.                                                                                                                                                                       | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `clearable`        | `clearable`          | When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type.                  | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `disabled`         | `disabled`           | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                  | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `enterKeyHint`     | `enter-key-hint`     | Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info.                                                                                | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `groupSeparator`   | `group-separator`    | When `true`, number values are displayed with a group separator corresponding to the language and country format.                                                                                                         | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `hidden`           | `hidden`             | When `true`, the component will not be visible.                                                                                                                                                                           | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `icon`             | `icon`               | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.                                                                                                     | `boolean \| string`                                                                                                                                                                                                                     | `undefined`  |
+| `iconFlipRtl`      | `icon-flip-rtl`      | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).                                                                                                                              | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `inputMode`        | `input-mode`         | Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info.                                                                    | `string`                                                                                                                                                                                                                                | `"text"`     |
+| `intlClear`        | `intl-clear`         | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`.<br/><br/>Accessible name for the component's clear button.              | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `intlLoading`      | `intl-loading`       | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`.<br/><br/>Accessible name when the component is loading.                 | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `label`            | `label`              | Accessible name for the component.                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `loading`          | `loading`            | When `true`, a busy indicator is displayed.                                                                                                                                                                               | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `max`              | `max`                | Specifies the maximum value for type "number".                                                                                                                                                                            | `number`                                                                                                                                                                                                                                | `undefined`  |
+| `maxLength`        | `max-length`         | Specifies the maximum length of text for the component's value.                                                                                                                                                           | `number`                                                                                                                                                                                                                                | `undefined`  |
+| `messageOverrides` | `message-overrides`  | Use this property to override individual strings used by the component.                                                                                                                                                   | `Messages`                                                                                                                                                                                                                              | `undefined`  |
+| `min`              | `min`                | Specifies the minimum value for `type="number"`.                                                                                                                                                                          | `number`                                                                                                                                                                                                                                | `undefined`  |
+| `minLength`        | `min-length`         | Specifies the minimum length of text for the component's value.                                                                                                                                                           | `number`                                                                                                                                                                                                                                | `undefined`  |
+| `multiple`         | `multiple`           | When `true`, the component can accept more than one value. This property only has an effect when `type` is "email" or "file". Read the native attribute's documentation on MDN for more info.                             | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `name`             | `name`               | Specifies the name of the component on form submission.                                                                                                                                                                   | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `numberButtonType` | `number-button-type` | Specifies the placement of the buttons for `type="number"`.                                                                                                                                                               | `"horizontal" \| "none" \| "vertical"`                                                                                                                                                                                                  | `"vertical"` |
+| `numberingSystem`  | `numbering-system`   | Specifies the Unicode numeral system used by the component for localization.                                                                                                                                              | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined`  |
+| `pattern`          | `pattern`            | Specifies a regex pattern the component's `value` must match for validation. Read the native attribute's documentation on MDN for more info.                                                                              | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `placeholder`      | `placeholder`        | Specifies placeholder text for the component.                                                                                                                                                                             | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `prefixText`       | `prefix-text`        | Adds text to the start of the component.                                                                                                                                                                                  | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `readOnly`         | `read-only`          | When `true`, the component's value can be read, but cannot be modified.                                                                                                                                                   | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `required`         | `required`           | When `true`, the component must have a value in order for the form to submit.                                                                                                                                             | `boolean`                                                                                                                                                                                                                               | `false`      |
+| `scale`            | `scale`              | Specifies the size of the component.                                                                                                                                                                                      | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`        |
+| `status`           | `status`             | Specifies the status of the input field, which determines message and icons.                                                                                                                                              | `"idle" \| "invalid" \| "valid"`                                                                                                                                                                                                        | `"idle"`     |
+| `step`             | `step`               | Specifies the granularity the component's value must adhere to.                                                                                                                                                           | `"any" \| number`                                                                                                                                                                                                                       | `undefined`  |
+| `suffixText`       | `suffix-text`        | Adds text to the end of the component.                                                                                                                                                                                    | `string`                                                                                                                                                                                                                                | `undefined`  |
+| `type`             | `type`               | Specifies the component type. Note that the following `type`s add type-specific icons by default: `"date"`, `"email"`, `"password"`, `"search"`, `"tel"`, `"time"`.                                                       | `"color" \| "date" \| "datetime-local" \| "email" \| "file" \| "image" \| "month" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "textarea" \| "time" \| "url" \| "week"`                                                  | `"text"`     |
+| `value`            | `value`              | The component's value.                                                                                                                                                                                                    | `string`                                                                                                                                                                                                                                | `""`         |
 
 ## Events
 
diff --git a/src/components/modal/readme.md b/src/components/modal/readme.md
index 18e13e4ee2b..8fa96e417b9 100644
--- a/src/components/modal/readme.md
+++ b/src/components/modal/readme.md
@@ -29,7 +29,7 @@ Customize the modal by passing your content into multiple named slots: `header`
 
 ### Open
 
-To open a modal, add the `open` prop. Once the opening animation is complete, the `calciteModalOpen` event will be fired.
+To open a modal, add the `active` prop. Once the opening animation is complete, the `calciteModalOpen` event will be fired.
 
 To close the modal, simply remove the attribute. This will run your before close method (if provided, see below) and fire the `calciteModalClose` event after the animation and teardown is complete.
 
@@ -55,23 +55,22 @@ modal.beforeClose = beforeClose;
 
 ## Properties
 
-| Property               | Attribute                | Description                                                                                                                                                          | Type                                 | Default                   |
-| ---------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------- |
-| `active`               | `active`                 | <span style="color:red">**[DEPRECATED]**</span> use `open` instead.<br/><br/>When `true`, the component is active.                                                   | `boolean`                            | `false`                   |
-| `backgroundColor`      | `background-color`       | Sets the background color of the component's content.                                                                                                                | `"grey" \| "white"`                  | `"white"`                 |
-| `beforeClose`          | --                       | Passes a function to run before the component closes.                                                                                                                | `(el: HTMLElement) => Promise<void>` | `() => Promise.resolve()` |
-| `color`                | `color`                  | Adds a color bar to the top of component for visual impact. Use color to add importance to destructive or workflow dialogs.                                          | `"blue" \| "red"`                    | `undefined`               |
-| `closeButtonDisabled`  | `close-button-disabled`  | When `true`, disables the component's close button.                                                                                                                  | `boolean`                            | `false`                   |
-| `escapeDisabled`       | `escape-disabled`        | When `true`, disables the default close on escape behavior.                                                                                                          | `boolean`                            | `false`                   |
-| `focusTrapDisabled`    | `focus-trap-disabled`    | When `true`, prevents focus trapping.                                                                                                                                | `boolean`                            | `false`                   |
-| `outsideCloseDisabled` | `outside-close-disabled` | When `true`, disables the closing of the component when clicked outside.                                                                                             | `boolean`                            | `false`                   |
-| `docked`               | `docked`                 | When `true`, prevents the component from expanding to the entire screen on mobile devices.                                                                           | `boolean`                            | `undefined`               |
-| `fullscreen`           | `fullscreen`             | Sets the component to always be fullscreen (overrides `width`).                                                                                                      | `boolean`                            | `undefined`               |
-| `intlClose`            | `intl-close`             | Accessible name for the component's close button.                                                                                                                    | `string`                             | `TEXT.close`              |
-| `noPadding`            | `no-padding`             | <span style="color:red">**[DEPRECATED]**</span> Use `--calcite-modal-padding` CSS variable instead.<br/><br/>When `true`, disables spacing to the content area slot. | `boolean`                            | `false`                   |
-| `open`                 | `open`                   | When `true`, displays and positions the component.                                                                                                                   | `boolean`                            | `false`                   |
-| `scale`                | `scale`                  | Specifies the size of the component.                                                                                                                                 | `"l" \| "m" \| "s"`                  | `"m"`                     |
-| `width`                | `width`                  | Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels).                                                                     | `"l" \| "m" \| "s" \| number`        | `"m"`                     |
+| Property               | Attribute                | Description                                                                                                                                                                                                  | Type                                 | Default                   |
+| ---------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------- |
+| `backgroundColor`      | `background-color`       | Sets the background color of the component's content.                                                                                                                                                        | `"grey" \| "white"`                  | `"white"`                 |
+| `beforeClose`          | --                       | Passes a function to run before the component closes.                                                                                                                                                        | `(el: HTMLElement) => Promise<void>` | `() => Promise.resolve()` |
+| `closeButtonDisabled`  | `close-button-disabled`  | When `true`, disables the component's close button.                                                                                                                                                          | `boolean`                            | `false`                   |
+| `color`                | `color`                  | Adds a color bar to the top of component for visual impact. Use color to add importance to destructive or workflow dialogs.                                                                                  | `"blue" \| "red"`                    | `undefined`               |
+| `docked`               | `docked`                 | When `true`, prevents the component from expanding to the entire screen on mobile devices.                                                                                                                   | `boolean`                            | `undefined`               |
+| `escapeDisabled`       | `escape-disabled`        | When `true`, disables the default close on escape behavior.                                                                                                                                                  | `boolean`                            | `false`                   |
+| `focusTrapDisabled`    | `focus-trap-disabled`    | When `true`, prevents focus trapping.                                                                                                                                                                        | `boolean`                            | `false`                   |
+| `fullscreen`           | `fullscreen`             | Sets the component to always be fullscreen (overrides `width`).                                                                                                                                              | `boolean`                            | `undefined`               |
+| `intlClose`            | `intl-close`             | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`.<br/><br/>Accessible name for the component's close button. | `string`                             | `undefined`               |
+| `messageOverrides`     | `message-overrides`      | Use this property to override individual strings used by the component.                                                                                                                                      | `Messages`                           | `undefined`               |
+| `open`                 | `open`                   | When `true`, displays and positions the component.                                                                                                                                                           | `boolean`                            | `false`                   |
+| `outsideCloseDisabled` | `outside-close-disabled` | When `true`, disables the closing of the component when clicked outside.                                                                                                                                     | `boolean`                            | `false`                   |
+| `scale`                | `scale`                  | Specifies the size of the component.                                                                                                                                                                         | `"l" \| "m" \| "s"`                  | `"m"`                     |
+| `width`                | `width`                  | Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels).                                                                                                             | `"l" \| "m" \| "s" \| number`        | `"m"`                     |
 
 ## Events
 
@@ -84,14 +83,6 @@ modal.beforeClose = beforeClose;
 
 ## Methods
 
-### `focusElement(el?: HTMLElement) => Promise<void>`
-
-<span style="color:red">**[DEPRECATED]**</span> use `setFocus` instead.<br/><br/>Focus the first interactive element.
-
-#### Returns
-
-Type: `Promise<void>`
-
 ### `scrollContent(top?: number, left?: number) => Promise<void>`
 
 Sets the scroll top of the component's content.
@@ -123,13 +114,10 @@ Type: `Promise<void>`
 
 ## CSS Custom Properties
 
-| Name                            | Description                                                            |
-| ------------------------------- | ---------------------------------------------------------------------- |
-| `--calcite-modal-content-text`  | [Deprecated] The component content's font size.                        |
-| `--calcite-modal-padding`       | [Deprecated] The padding around content area slot.                     |
-| `--calcite-modal-padding-large` | [Deprecated] The left/right padding around items within the component. |
-| `--calcite-modal-title-text`    | [Deprecated] The component title's font size.                          |
-| `--calcite-scrim-background`    | The component's semi-transparent background color.                     |
+| Name                         | Description                                        |
+| ---------------------------- | -------------------------------------------------- |
+| `--calcite-modal-padding`    | Specifies the padding of the modal.                |
+| `--calcite-scrim-background` | The component's semi-transparent background color. |
 
 ## Dependencies
 
diff --git a/src/components/notice/readme.md b/src/components/notice/readme.md
index 478253d97f5..da487a76e4d 100644
--- a/src/components/notice/readme.md
+++ b/src/components/notice/readme.md
@@ -25,17 +25,18 @@ You can programmatically focus the close button of a `dismissible` `calcite-noti
 
 ## Properties
 
-| Property      | Attribute     | Description                                                                                                                             | Type                                     | Default      |
-| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------ |
-| `active`      | `active`      | <span style="color:red">**[DEPRECATED]**</span> Use `open` instead.<br/><br/>When `true`, the component is active.                      | `boolean`                                | `false`      |
-| `closable`    | `closable`    | When `true`, a close button is added to the component.                                                                                  | `boolean`                                | `false`      |
-| `color`       | `color`       | The color for the component's top border and icon.                                                                                      | `"blue" \| "green" \| "red" \| "yellow"` | `"blue"`     |
-| `dismissible` | `dismissible` | <span style="color:red">**[DEPRECATED]**</span> use `closable` instead.<br/><br/>When `true`, a close button is added to the component. | `boolean`                                | `false`      |
-| `icon`        | `icon`        | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.                   | `boolean \| string`                      | `undefined`  |
-| `intlClose`   | `intl-close`  | Accessible name for the close button.                                                                                                   | `string`                                 | `TEXT.close` |
-| `open`        | `open`        | When `true`, the component is visible.                                                                                                  | `boolean`                                | `false`      |
-| `scale`       | `scale`       | Specifies the size of the component.                                                                                                    | `"l" \| "m" \| "s"`                      | `"m"`        |
-| `width`       | `width`       | Specifies the width of the component.                                                                                                   | `"auto" \| "full" \| "half"`             | `"auto"`     |
+| Property           | Attribute           | Description                                                                                                                                                                                      | Type                                     | Default     |
+| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------- |
+| `active`           | `active`            | <span style="color:red">**[DEPRECATED]**</span> Use `open` instead.<br/><br/>When `true`, the component is active.                                                                               | `boolean`                                | `false`     |
+| `closable`         | `closable`          | When `true`, a close button is added to the component.                                                                                                                                           | `boolean`                                | `false`     |
+| `color`            | `color`             | The color for the component's top border and icon.                                                                                                                                               | `"blue" \| "green" \| "red" \| "yellow"` | `"blue"`    |
+| `dismissible`      | `dismissible`       | <span style="color:red">**[DEPRECATED]**</span> use `closable` instead.<br/><br/>When `true`, a close button is added to the component.                                                          | `boolean`                                | `false`     |
+| `icon`             | `icon`              | When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.                                                                            | `boolean \| string`                      | `undefined` |
+| `intlClose`        | `intl-close`        | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`.<br/><br/>Accessible name for the close button. | `string`                                 | `undefined` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component.                                                                                                                          | `Messages`                               | `undefined` |
+| `open`             | `open`              | When `true`, the component is visible.                                                                                                                                                           | `boolean`                                | `false`     |
+| `scale`            | `scale`             | Specifies the size of the component.                                                                                                                                                             | `"l" \| "m" \| "s"`                      | `"m"`       |
+| `width`            | `width`             | Specifies the width of the component.                                                                                                                                                            | `"auto" \| "full" \| "half"`             | `"auto"`    |
 
 ## Events
 
diff --git a/src/components/pagination/readme.md b/src/components/pagination/readme.md
index feb09789a12..86d1fc37efe 100644
--- a/src/components/pagination/readme.md
+++ b/src/components/pagination/readme.md
@@ -27,16 +27,17 @@ For example, after querying the search API, you'll get back a response similar t
 
 ## Properties
 
-| Property            | Attribute             | Description                                                                                                       | Type                                                                                                                                                                                                                                    | Default              |
-| ------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
-| `groupSeparator`    | `group-separator`     | When `true`, number values are displayed with a group separator corresponding to the language and country format. | `boolean`                                                                                                                                                                                                                               | `false`              |
-| `num`               | `num`                 | Specifies the number of items per page.                                                                           | `number`                                                                                                                                                                                                                                | `20`                 |
-| `numberingSystem`   | `numbering-system`    | Specifies the Unicode numeral system used by the component for localization.                                      | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined`          |
-| `scale`             | `scale`               | Specifies the size of the component.                                                                              | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`                |
-| `start`             | `start`               | Specifies the starting item number.                                                                               | `number`                                                                                                                                                                                                                                | `1`                  |
-| `textLabelNext`     | `text-label-next`     | Accessible name for the component's next button.                                                                  | `string`                                                                                                                                                                                                                                | `TEXT.nextLabel`     |
-| `textLabelPrevious` | `text-label-previous` | Accessible name for the component's previous button.                                                              | `string`                                                                                                                                                                                                                                | `TEXT.previousLabel` |
-| `total`             | `total`               | Specifies the total number of items.                                                                              | `number`                                                                                                                                                                                                                                | `0`                  |
+| Property            | Attribute             | Description                                                                                                                                                                                                    | Type                                                                                                                                                                                                                                    | Default     |
+| ------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `groupSeparator`    | `group-separator`     | When `true`, number values are displayed with a group separator corresponding to the language and country format.                                                                                              | `boolean`                                                                                                                                                                                                                               | `false`     |
+| `messageOverrides`  | `message-overrides`   | Use this property to override individual strings used by the component.                                                                                                                                        | `Messages`                                                                                                                                                                                                                              | `undefined` |
+| `num`               | `num`                 | Specifies the number of items per page.                                                                                                                                                                        | `number`                                                                                                                                                                                                                                | `20`        |
+| `numberingSystem`   | `numbering-system`    | Specifies the Unicode numeral system used by the component for localization.                                                                                                                                   | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` |
+| `scale`             | `scale`               | Specifies the size of the component.                                                                                                                                                                           | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`       |
+| `start`             | `start`               | Specifies the starting item number.                                                                                                                                                                            | `number`                                                                                                                                                                                                                                | `1`         |
+| `textLabelNext`     | `text-label-next`     | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's next button.     | `string`                                                                                                                                                                                                                                | `undefined` |
+| `textLabelPrevious` | `text-label-previous` | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's previous button. | `string`                                                                                                                                                                                                                                | `undefined` |
+| `total`             | `total`               | Specifies the total number of items.                                                                                                                                                                           | `number`                                                                                                                                                                                                                                | `0`         |
 
 ## Events
 
diff --git a/src/components/panel/readme.md b/src/components/panel/readme.md
index b410b4db603..159bdc0d9d4 100644
--- a/src/components/panel/readme.md
+++ b/src/components/panel/readme.md
@@ -67,20 +67,21 @@ Renders a panel with a header and a footer.
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                                                       | Type                         | Default     |
-| -------------- | --------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
-| `closable`     | `closable`      | When `true`, displays a close button in the trailing side of the header.                                          | `boolean`                    | `false`     |
-| `closed`       | `closed`        | When `true`, the component will be hidden.                                                                        | `boolean`                    | `false`     |
-| `description`  | `description`   | A description for the component.                                                                                  | `string`                     | `undefined` |
-| `disabled`     | `disabled`      | When `true`, interaction is prevented and the component is displayed with lower opacity.                          | `boolean`                    | `false`     |
-| `heading`      | `heading`       | The component header text.                                                                                        | `string`                     | `undefined` |
-| `headingLevel` | `heading-level` | Specifies the number at which section headings should start.                                                      | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
-| `heightScale`  | `height-scale`  | Specifies the maximum height of the component.                                                                    | `"l" \| "m" \| "s"`          | `undefined` |
-| `intlClose`    | `intl-close`    | Accessible name for the component's close button. The close button will only be shown when `closeable` is `true`. | `string`                     | `undefined` |
-| `intlOptions`  | `intl-options`  | Accessible name for the component's actions menu.                                                                 | `string`                     | `undefined` |
-| `loading`      | `loading`       | When `true`, a busy indicator is displayed.                                                                       | `boolean`                    | `false`     |
-| `menuOpen`     | `menu-open`     | When `true`, the action menu items in the `header-menu-actions` slot are open.                                    | `boolean`                    | `false`     |
-| `widthScale`   | `width-scale`   | Specifies the width of the component.                                                                             | `"l" \| "m" \| "s"`          | `undefined` |
+| Property           | Attribute           | Description                                                                                                                                                                                                 | Type                         | Default     |
+| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| `closable`         | `closable`          | When `true`, displays a close button in the trailing side of the header.                                                                                                                                    | `boolean`                    | `false`     |
+| `closed`           | `closed`            | When `true`, the component will be hidden.                                                                                                                                                                  | `boolean`                    | `false`     |
+| `description`      | `description`       | A description for the component.                                                                                                                                                                            | `string`                     | `undefined` |
+| `disabled`         | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                    | `boolean`                    | `false`     |
+| `heading`          | `heading`           | The component header text.                                                                                                                                                                                  | `string`                     | `undefined` |
+| `headingLevel`     | `heading-level`     | Specifies the number at which section headings should start.                                                                                                                                                | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
+| `heightScale`      | `height-scale`      | Specifies the maximum height of the component.                                                                                                                                                              | `"l" \| "m" \| "s"`          | `undefined` |
+| `intlClose`        | `intl-close`        | <span style="color:red">**[DEPRECATED]**</span> use `calcite-flow-item` instead.<br/><br/>Accessible name for the component's close button. The close button will only be shown when `closeable` is `true`. | `string`                     | `undefined` |
+| `intlOptions`      | `intl-options`      | <span style="color:red">**[DEPRECATED]**</span> use `calcite-flow-item` instead.<br/><br/>Accessible name for the component's actions menu.                                                                 | `string`                     | `undefined` |
+| `loading`          | `loading`           | When `true`, a busy indicator is displayed.                                                                                                                                                                 | `boolean`                    | `false`     |
+| `menuOpen`         | `menu-open`         | When `true`, the action menu items in the `header-menu-actions` slot are open.                                                                                                                              | `boolean`                    | `false`     |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component.                                                                                                                                     | `Messages`                   | `undefined` |
+| `widthScale`       | `width-scale`       | Specifies the width of the component.                                                                                                                                                                       | `"l" \| "m" \| "s"`          | `undefined` |
 
 ## Events
 
diff --git a/src/components/pick-list-item/readme.md b/src/components/pick-list-item/readme.md
index dd0622adde9..ec8fe086040 100644
--- a/src/components/pick-list-item/readme.md
+++ b/src/components/pick-list-item/readme.md
@@ -6,18 +6,19 @@
 
 ## Properties
 
-| Property             | Attribute           | Description                                                                                                | Type                                                        | Default       |
-| -------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------- |
-| `description`        | `description`       | A description for the component that displays below the label text.                                        | `string`                                                    | `undefined`   |
-| `deselectDisabled`   | `deselect-disabled` | When `false`, the component cannot be deselected by user interaction.                                      | `boolean`                                                   | `false`       |
-| `disabled`           | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity.                   | `boolean`                                                   | `false`       |
-| `icon`               | `icon`              | Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. | `ICON_TYPES.circle \| ICON_TYPES.grip \| ICON_TYPES.square` | `null`        |
-| `intlRemove`         | `intl-remove`       | When `removable` is `true`, the accessible name for the component's remove button.                         | `string`                                                    | `TEXT.remove` |
-| `label` _(required)_ | `label`             | Label and accessible name for the component. Appears next to the icon.                                     | `string`                                                    | `undefined`   |
-| `metadata`           | --                  | Provides additional metadata to the component. Primary use is for a filter on the parent list.             | `{ [x: string]: unknown; }`                                 | `undefined`   |
-| `removable`          | `removable`         | When `true`, displays a remove action that removes the item from the list.                                 | `boolean`                                                   | `false`       |
-| `selected`           | `selected`          | When `true`, selects an item. Toggles when an item is checked/unchecked.                                   | `boolean`                                                   | `false`       |
-| `value` _(required)_ | `value`             | The component's value.                                                                                     | `any`                                                       | `undefined`   |
+| Property             | Attribute           | Description                                                                                                                                                                                                                                  | Type                                                        | Default     |
+| -------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- |
+| `description`        | `description`       | A description for the component that displays below the label text.                                                                                                                                                                          | `string`                                                    | `undefined` |
+| `deselectDisabled`   | `deselect-disabled` | When `false`, the component cannot be deselected by user interaction.                                                                                                                                                                        | `boolean`                                                   | `false`     |
+| `disabled`           | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                     | `boolean`                                                   | `false`     |
+| `icon`               | `icon`              | Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`.                                                                                                                                   | `ICON_TYPES.circle \| ICON_TYPES.grip \| ICON_TYPES.square` | `null`      |
+| `intlRemove`         | `intl-remove`       | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>When `removable` is `true`, the accessible name for the component's remove button. | `string`                                                    | `undefined` |
+| `label` _(required)_ | `label`             | Label and accessible name for the component. Appears next to the icon.                                                                                                                                                                       | `string`                                                    | `undefined` |
+| `messageOverrides`   | `message-overrides` | Use this property to override individual strings used by the component.                                                                                                                                                                      | `Messages`                                                  | `undefined` |
+| `metadata`           | --                  | Provides additional metadata to the component. Primary use is for a filter on the parent list.                                                                                                                                               | `{ [x: string]: unknown; }`                                 | `undefined` |
+| `removable`          | `removable`         | When `true`, displays a remove action that removes the item from the list.                                                                                                                                                                   | `boolean`                                                   | `false`     |
+| `selected`           | `selected`          | When `true`, selects an item. Toggles when an item is checked/unchecked.                                                                                                                                                                     | `boolean`                                                   | `false`     |
+| `value` _(required)_ | `value`             | The component's value.                                                                                                                                                                                                                       | `any`                                                       | `undefined` |
 
 ## Events
 
diff --git a/src/components/popover/readme.md b/src/components/popover/readme.md
index f91de97e621..162f4dc22b1 100644
--- a/src/components/popover/readme.md
+++ b/src/components/popover/readme.md
@@ -48,18 +48,19 @@
 | `autoClose`                     | `auto-close`          | When `true`, clicking outside of the component automatically closes open `calcite-popover`s.                                                                                                                                                                                                                                                                                      | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
 | `closable`                      | `closable`            | When `true`, display a close button within the component.                                                                                                                                                                                                                                                                                                                         | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
 | `flipDisabled`                  | `flip-disabled`       | When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.                                                                                                                                                                                                                                                                                 | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
-| `focusTrapDisabled`             | `focus-trap-disabled` | When `true`, prevents focus trapping.                                                                                                                                                                                                                                                                                                                                             | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
-| `pointerDisabled`               | `pointer-disabled`    | When `true`, removes the caret pointer.                                                                                                                                                                                                                                                                                                                                           | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
 | `flipPlacements`                | --                    | Defines the available placements that can be used when a flip occurs.                                                                                                                                                                                                                                                                                                             | `Placement[]`                                                                                                                                                                                                                                                                                                     | `undefined`               |
+| `focusTrapDisabled`             | `focus-trap-disabled` | When `true`, prevents focus trapping.                                                                                                                                                                                                                                                                                                                                             | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
 | `heading`                       | `heading`             | The component header text.                                                                                                                                                                                                                                                                                                                                                        | `string`                                                                                                                                                                                                                                                                                                          | `undefined`               |
 | `headingLevel`                  | `heading-level`       | Specifies the number at which section headings should start.                                                                                                                                                                                                                                                                                                                      | `1 \| 2 \| 3 \| 4 \| 5 \| 6`                                                                                                                                                                                                                                                                                      | `undefined`               |
-| `intlClose`                     | `intl-close`          | Accessible name for the component's close button.                                                                                                                                                                                                                                                                                                                                 | `string`                                                                                                                                                                                                                                                                                                          | `TEXT.close`              |
+| `intlClose`                     | `intl-close`          | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's close button.                                                                                                                                                                       | `string`                                                                                                                                                                                                                                                                                                          | `undefined`               |
 | `label` _(required)_            | `label`               | Accessible name for the component.                                                                                                                                                                                                                                                                                                                                                | `string`                                                                                                                                                                                                                                                                                                          | `undefined`               |
-| `offsetDistance`                | `offset-distance`     | Offsets the position of the component away from the `referenceElement`.                                                                                                                                                                                                                                                                                                           | `number`                                                                                                                                                                                                                                                                                                          | `defaultOffsetDistance`   |
+| `messageOverrides`              | `message-overrides`   | Use this property to override individual strings used by the component.                                                                                                                                                                                                                                                                                                           | `Messages`                                                                                                                                                                                                                                                                                                        | `undefined`               |
+| `offsetDistance`                | `offset-distance`     | Offsets the position of the popover away from the `referenceElement`.                                                                                                                                                                                                                                                                                                             | `number`                                                                                                                                                                                                                                                                                                          | `defaultOffsetDistance`   |
 | `offsetSkidding`                | `offset-skidding`     | Offsets the position of the component along the `referenceElement`.                                                                                                                                                                                                                                                                                                               | `number`                                                                                                                                                                                                                                                                                                          | `0`                       |
 | `open`                          | `open`                | When `true`, displays and positions the component.                                                                                                                                                                                                                                                                                                                                | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
 | `overlayPositioning`            | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"`                                                                                                                                                                                                                                                                                           | `"absolute"`              |
 | `placement`                     | `placement`           | Determines where the component will be positioned relative to the `referenceElement`.                                                                                                                                                                                                                                                                                             | `"auto" \| "top" \| "left" \| "right" \| "bottom-start" \| "leading-start" \| "bottom" \| "top-start" \| "top-end" \| "left-start" \| "left-end" \| "right-start" \| "right-end" \| "bottom-end" \| "auto-start" \| "auto-end" \| "leading" \| "leading-end" \| "trailing-end" \| "trailing" \| "trailing-start"` | `defaultPopoverPlacement` |
+| `pointerDisabled`               | `pointer-disabled`    | When `true`, removes the caret pointer.                                                                                                                                                                                                                                                                                                                                           | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
 | `referenceElement` _(required)_ | `reference-element`   | The `referenceElement` used to position the component according to its `placement` value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used.                                                                                                                             | `Element \| VirtualElement \| string`                                                                                                                                                                                                                                                                             | `undefined`               |
 | `scale`                         | `scale`               | Specifies the size of the component.                                                                                                                                                                                                                                                                                                                                              | `"l" \| "m" \| "s"`                                                                                                                                                                                                                                                                                               | `"m"`                     |
 | `triggerDisabled`               | `trigger-disabled`    | When `true`, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to `true` to manage when the component is open.                                                                                                                                                                                               | `boolean`                                                                                                                                                                                                                                                                                                         | `false`                   |
diff --git a/src/components/rating/readme.md b/src/components/rating/readme.md
index 9ed40ff1c5c..7f81fd30264 100644
--- a/src/components/rating/readme.md
+++ b/src/components/rating/readme.md
@@ -20,18 +20,19 @@
 
 ## Properties
 
-| Property     | Attribute     | Description                                                                                            | Type                | Default       |
-| ------------ | ------------- | ------------------------------------------------------------------------------------------------------ | ------------------- | ------------- |
-| `average`    | `average`     | Specifies a cumulative average from previous ratings to display.                                       | `number`            | `undefined`   |
-| `count`      | `count`       | Specifies the number of previous ratings to display.                                                   | `number`            | `undefined`   |
-| `disabled`   | `disabled`    | When `true`, interaction is prevented and the component is displayed with lower opacity.               | `boolean`           | `false`       |
-| `intlRating` | `intl-rating` | Accessible name for the component.                                                                     | `string`            | `TEXT.rating` |
-| `intlStars`  | `intl-stars`  | Accessible name for each star. The `${num}` in the string will be replaced by the number.              | `string`            | `TEXT.stars`  |
-| `name`       | `name`        | Specifies the name of the component on form submission.                                                | `string`            | `undefined`   |
-| `readOnly`   | `read-only`   | When `true`, the component's value can be read, but cannot be modified.                                | `boolean`           | `false`       |
-| `scale`      | `scale`       | Specifies the size of the component.                                                                   | `"l" \| "m" \| "s"` | `"m"`         |
-| `showChip`   | `show-chip`   | When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. | `boolean`           | `false`       |
-| `value`      | `value`       | The component's value.                                                                                 | `number`            | `0`           |
+| Property           | Attribute           | Description                                                                                                                                                                                                                                         | Type                | Default     |
+| ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------- |
+| `average`          | `average`           | Specifies a cumulative average from previous ratings to display.                                                                                                                                                                                    | `number`            | `undefined` |
+| `count`            | `count`             | Specifies the number of previous ratings to display.                                                                                                                                                                                                | `number`            | `undefined` |
+| `disabled`         | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                            | `boolean`           | `false`     |
+| `intlRating`       | `intl-rating`       | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component.                                                        | `string`            | `undefined` |
+| `intlStars`        | `intl-stars`        | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for each star. The `${num}` in the string will be replaced by the number. | `string`            | `undefined` |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component.                                                                                                                                                                             | `Messages`          | `undefined` |
+| `name`             | `name`              | Specifies the name of the component on form submission.                                                                                                                                                                                             | `string`            | `undefined` |
+| `readOnly`         | `read-only`         | When `true`, the component's value can be read, but cannot be modified.                                                                                                                                                                             | `boolean`           | `false`     |
+| `scale`            | `scale`             | Specifies the size of the component.                                                                                                                                                                                                                | `"l" \| "m" \| "s"` | `"m"`       |
+| `showChip`         | `show-chip`         | When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`.                                                                                                                                              | `boolean`           | `false`     |
+| `value`            | `value`             | The component's value.                                                                                                                                                                                                                              | `number`            | `0`         |
 
 ## Events
 
diff --git a/src/components/scrim/readme.md b/src/components/scrim/readme.md
index 42028a1e237..73151688c8c 100644
--- a/src/components/scrim/readme.md
+++ b/src/components/scrim/readme.md
@@ -36,10 +36,11 @@
 
 ## Properties
 
-| Property      | Attribute      | Description                                    | Type      | Default        |
-| ------------- | -------------- | ---------------------------------------------- | --------- | -------------- |
-| `intlLoading` | `intl-loading` | Accessible name when the component is loading. | `string`  | `TEXT.loading` |
-| `loading`     | `loading`      | When `true`, a busy indicator is displayed.    | `boolean` | `false`        |
+| Property           | Attribute           | Description                                                                                                                                                                                              | Type       | Default     |
+| ------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ----------- |
+| `intlLoading`      | `intl-loading`      | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name when the component is loading. | `string`   | `undefined` |
+| `loading`          | `loading`           | When `true`, a busy indicator is displayed.                                                                                                                                                              | `boolean`  | `false`     |
+| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component.                                                                                                                                  | `Messages` | `undefined` |
 
 ## Slots
 
diff --git a/src/components/time-picker/readme.md b/src/components/time-picker/readme.md
index 863ca877298..a21c4c89d20 100644
--- a/src/components/time-picker/readme.md
+++ b/src/components/time-picker/readme.md
@@ -4,24 +4,25 @@
 
 ## Properties
 
-| Property           | Attribute            | Description                                                                  | Type                                                                                                                                                                                                                                    | Default             |
-| ------------------ | -------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
-| `intlHour`         | `intl-hour`          | Accessible name for the component's hour input.                              | `string`                                                                                                                                                                                                                                | `TEXT.hour`         |
-| `intlHourDown`     | `intl-hour-down`     | Accessible name for the component's hour down button.                        | `string`                                                                                                                                                                                                                                | `TEXT.hourDown`     |
-| `intlHourUp`       | `intl-hour-up`       | Accessible name for the component's hour up button.                          | `string`                                                                                                                                                                                                                                | `TEXT.hourUp`       |
-| `intlMeridiem`     | `intl-meridiem`      | Accessible name for the component's meridiem (AM/PM) input.                  | `string`                                                                                                                                                                                                                                | `TEXT.meridiem`     |
-| `intlMeridiemDown` | `intl-meridiem-down` | Accessible name for the component's meridiem (AM/PM) down button.            | `string`                                                                                                                                                                                                                                | `TEXT.meridiemDown` |
-| `intlMeridiemUp`   | `intl-meridiem-up`   | Accessible name for the component's meridiem (AM/PM) up button.              | `string`                                                                                                                                                                                                                                | `TEXT.meridiemUp`   |
-| `intlMinute`       | `intl-minute`        | Accessible name for the component's minute input.                            | `string`                                                                                                                                                                                                                                | `TEXT.minute`       |
-| `intlMinuteDown`   | `intl-minute-down`   | Accessible name for the component's minute down button.                      | `string`                                                                                                                                                                                                                                | `TEXT.minuteDown`   |
-| `intlMinuteUp`     | `intl-minute-up`     | Accessible name for the component's minute up button.                        | `string`                                                                                                                                                                                                                                | `TEXT.minuteUp`     |
-| `intlSecond`       | `intl-second`        | Accessible name for the component's second input.                            | `string`                                                                                                                                                                                                                                | `TEXT.second`       |
-| `intlSecondDown`   | `intl-second-down`   | Accessible name for the component's second down button.                      | `string`                                                                                                                                                                                                                                | `TEXT.secondDown`   |
-| `intlSecondUp`     | `intl-second-up`     | Accessible name for the component's second up button.                        | `string`                                                                                                                                                                                                                                | `TEXT.secondUp`     |
-| `numberingSystem`  | `numbering-system`   | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined`         |
-| `scale`            | `scale`              | Specifies the size of the component.                                         | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`               |
-| `step`             | `step`               | Specifies the granularity the `value` must adhere to (in seconds).           | `number`                                                                                                                                                                                                                                | `60`                |
-| `value`            | `value`              | The component's value in UTC (always 24-hour format).                        | `string`                                                                                                                                                                                                                                | `null`              |
+| Property           | Attribute            | Description                                                                                                                                                                                                                 | Type                                                                                                                                                                                                                                    | Default     |
+| ------------------ | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `intlHour`         | `intl-hour`          | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's hour input.                   | `string`                                                                                                                                                                                                                                | `undefined` |
+| `intlHourDown`     | `intl-hour-down`     | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's hour down button.             | `string`                                                                                                                                                                                                                                | `undefined` |
+| `intlHourUp`       | `intl-hour-up`       | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's hour up button.               | `string`                                                                                                                                                                                                                                | `undefined` |
+| `intlMeridiem`     | `intl-meridiem`      | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's meridiem (AM/PM) input.       | `string`                                                                                                                                                                                                                                | `undefined` |
+| `intlMeridiemDown` | `intl-meridiem-down` | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's meridiem (AM/PM) down button. | `string`                                                                                                                                                                                                                                | `undefined` |
+| `intlMeridiemUp`   | `intl-meridiem-up`   | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's meridiem (AM/PM) up button.   | `string`                                                                                                                                                                                                                                | `undefined` |
+| `intlMinute`       | `intl-minute`        | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's minute input.                 | `string`                                                                                                                                                                                                                                | `undefined` |
+| `intlMinuteDown`   | `intl-minute-down`   | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's minute down button.           | `string`                                                                                                                                                                                                                                | `undefined` |
+| `intlMinuteUp`     | `intl-minute-up`     | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's minute up button.             | `string`                                                                                                                                                                                                                                | `undefined` |
+| `intlSecond`       | `intl-second`        | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's second input.                 | `string`                                                                                                                                                                                                                                | `undefined` |
+| `intlSecondDown`   | `intl-second-down`   | Accessible name for the component's second down button.                                                                                                                                                                     | `string`                                                                                                                                                                                                                                | `undefined` |
+| `intlSecondUp`     | `intl-second-up`     | <span style="color:red">**[DEPRECATED]**</span> - translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>Accessible name for the component's second up button.             | `string`                                                                                                                                                                                                                                | `undefined` |
+| `messageOverrides` | `message-overrides`  | Use this property to override individual strings used by the component.                                                                                                                                                     | `Messages`                                                                                                                                                                                                                              | `undefined` |
+| `numberingSystem`  | `numbering-system`   | Specifies the Unicode numeral system used by the component for localization.                                                                                                                                                | `"arab" \| "arabext" \| "bali" \| "beng" \| "deva" \| "fullwide" \| "gujr" \| "guru" \| "hanidec" \| "khmr" \| "knda" \| "laoo" \| "latn" \| "limb" \| "mlym" \| "mong" \| "mymr" \| "orya" \| "tamldec" \| "telu" \| "thai" \| "tibt"` | `undefined` |
+| `scale`            | `scale`              | Specifies the size of the component.                                                                                                                                                                                        | `"l" \| "m" \| "s"`                                                                                                                                                                                                                     | `"m"`       |
+| `step`             | `step`               | Specifies the granularity the `value` must adhere to (in seconds).                                                                                                                                                          | `number`                                                                                                                                                                                                                                | `60`        |
+| `value`            | `value`              | The component's value in UTC (always 24-hour format).                                                                                                                                                                       | `string`                                                                                                                                                                                                                                | `null`      |
 
 ## Methods
 
diff --git a/src/components/tip/readme.md b/src/components/tip/readme.md
index 8646a32e605..fd89ca6fa5d 100644
--- a/src/components/tip/readme.md
+++ b/src/components/tip/readme.md
@@ -22,11 +22,11 @@ Renders a close-disabled tip with a heading, thumbnail, info and a link.
 
 | Property        | Attribute        | Description                                                                                                                                            | Type                         | Default     |
 | --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- |
+| `closeDisabled` | `close-disabled` | When `true`, the close button is not present on the component.                                                                                         | `boolean`                    | `false`     |
 | `dismissed`     | `dismissed`      | When `true`, the component does not display.                                                                                                           | `boolean`                    | `false`     |
 | `heading`       | `heading`        | The component header text.                                                                                                                             | `string`                     | `undefined` |
 | `headingLevel`  | `heading-level`  | Specifies the number at which section headings should start.                                                                                           | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` |
 | `intlClose`     | `intl-close`     | Accessible name for the component's close button.                                                                                                      | `string`                     | `undefined` |
-| `closeDisabled` | `close-disabled` | When `true`, the close button is not present on the component.                                                                                         | `boolean`                    | `false`     |
 | `selected`      | `selected`       | When `true`, the component is selected if it has a parent `calcite-tip-manager`. Only one tip can be selected within the `calcite-tip-manager` parent. | `boolean`                    | `false`     |
 
 ## Events
diff --git a/src/components/value-list/readme.md b/src/components/value-list/readme.md
index 79f6b64e7ab..093d75a67ce 100644
--- a/src/components/value-list/readme.md
+++ b/src/components/value-list/readme.md
@@ -44,23 +44,24 @@ Renders a value list with drag and drop capability between the items.
 
 ## Properties
 
-| Property                | Attribute                 | Description                                                                                                                                                                                                                                                                                               | Type                                                                                          | Default     |
-| ----------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ----------- |
-| `disabled`              | `disabled`                | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                                                                                  | `boolean`                                                                                     | `false`     |
-| `dragEnabled`           | `drag-enabled`            | When `true`, `calcite-value-list-item`s are sortable via a draggable button.                                                                                                                                                                                                                              | `boolean`                                                                                     | `false`     |
-| `filterEnabled`         | `filter-enabled`          | When `true`, an input appears at the top of the component that can be used by end users to filter list items.                                                                                                                                                                                             | `boolean`                                                                                     | `false`     |
-| `filterPlaceholder`     | `filter-placeholder`      | Placeholder text for the filter's input field.                                                                                                                                                                                                                                                            | `string`                                                                                      | `undefined` |
-| `filterText`            | `filter-text`             | Text for the filter input field.                                                                                                                                                                                                                                                                          | `string`                                                                                      | `undefined` |
-| `filteredData`          | --                        | **read-only** The currently filtered items                                                                                                                                                                                                                                                                | `{ label: string; description: string; metadata: Record<string, unknown>; value: string; }[]` | `[]`        |
-| `filteredItems`         | --                        | **read-only** The currently filtered items                                                                                                                                                                                                                                                                | `HTMLCalciteValueListItemElement[]`                                                           | `[]`        |
-| `group`                 | `group`                   | The component's group identifier. To drag elements from one list into another, both lists must have the same group value.                                                                                                                                                                                 | `string`                                                                                      | `undefined` |
-| `intlDragHandleActive`  | `intl-drag-handle-active` | When `dragEnabled` is `true` and active, specifies accessible context to the component. Use "`${position}` of `${total}`" as a placeholder for displaying indices and `${item.label}` as a placeholder for displaying the `calcite-value-list-item` label.                                                | `string`                                                                                      | `undefined` |
-| `intlDragHandleChange`  | `intl-drag-handle-change` | When `dragEnabled` is `true` and active, specifies accessible context to the `calcite-value-list-item`s new position. Use "`${position}` of `${total}`" as a placeholder for displaying indices and `${item.label}` as a placeholder for displaying the `calcite-value-list-item` label.                  | `string`                                                                                      | `undefined` |
-| `intlDragHandleCommit`  | `intl-drag-handle-commit` | When `dragEnabled` is `true` and active, specifies accessible context to the `calcite-value-list-item`s current position after commit. Use "`${position}` of `${total}`" as a placeholder for displaying indices and `${item.label}` as a placeholder for displaying the `calcite-value-list-item` label. | `string`                                                                                      | `undefined` |
-| `intlDragHandleIdle`    | `intl-drag-handle-idle`   | When `dragEnabled` is `true` and active, specifies accessible context to the `calcite-value-list-item`s initial position. Use "`${position}` of `${total}`" as a placeholder for displaying indices and `${item.label}` as a placeholder for displaying the `calcite-value-list-item` label.              | `string`                                                                                      | `undefined` |
-| `loading`               | `loading`                 | When `true`, a busy indicator is displayed.                                                                                                                                                                                                                                                               | `boolean`                                                                                     | `false`     |
-| `multiple`              | `multiple`                | Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-value-list-item`s at a time. When `false`, only a single `calcite-value-list-item` can be selected at a time, and a new selection will deselect previous selections.                                   | `boolean`                                                                                     | `false`     |
-| `selectionFollowsFocus` | `selection-follows-focus` | When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.                                                                                                                                                                               | `boolean`                                                                                     | `false`     |
+| Property                | Attribute                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                            | Type                                                                                          | Default     |
+| ----------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- | ----------- |
+| `disabled`              | `disabled`                | When `true`, interaction is prevented and the component is displayed with lower opacity.                                                                                                                                                                                                                                                                                                                                                               | `boolean`                                                                                     | `false`     |
+| `dragEnabled`           | `drag-enabled`            | When `true`, `calcite-value-list-item`s are sortable via a draggable button.                                                                                                                                                                                                                                                                                                                                                                           | `boolean`                                                                                     | `false`     |
+| `filterEnabled`         | `filter-enabled`          | When `true`, an input appears at the top of the component that can be used by end users to filter list items.                                                                                                                                                                                                                                                                                                                                          | `boolean`                                                                                     | `false`     |
+| `filterPlaceholder`     | `filter-placeholder`      | Placeholder text for the filter's input field.                                                                                                                                                                                                                                                                                                                                                                                                         | `string`                                                                                      | `undefined` |
+| `filterText`            | `filter-text`             | Text for the filter input field.                                                                                                                                                                                                                                                                                                                                                                                                                       | `string`                                                                                      | `undefined` |
+| `filteredData`          | --                        | **read-only** The currently filtered items                                                                                                                                                                                                                                                                                                                                                                                                             | `{ label: string; description: string; metadata: Record<string, unknown>; value: string; }[]` | `[]`        |
+| `filteredItems`         | --                        | **read-only** The currently filtered items                                                                                                                                                                                                                                                                                                                                                                                                             | `HTMLCalciteValueListItemElement[]`                                                           | `[]`        |
+| `group`                 | `group`                   | The component's group identifier. To drag elements from one list into another, both lists must have the same group value.                                                                                                                                                                                                                                                                                                                              | `string`                                                                                      | `undefined` |
+| `intlDragHandleActive`  | `intl-drag-handle-active` | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>When "drag-enabled" is true and active, specifies accessible context to the component. Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.                                                 | `string`                                                                                      | `undefined` |
+| `intlDragHandleChange`  | `intl-drag-handle-change` | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position. Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.                  | `string`                                                                                      | `undefined` |
+| `intlDragHandleCommit`  | `intl-drag-handle-commit` | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit. Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`. | `string`                                                                                      | `undefined` |
+| `intlDragHandleIdle`    | `intl-drag-handle-idle`   | <span style="color:red">**[DEPRECATED]**</span> – translations are now built-in, if you need to override a string, please use `messageOverrides`<br/><br/>When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position. Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.              | `string`                                                                                      | `undefined` |
+| `loading`               | `loading`                 | When `true`, a busy indicator is displayed.                                                                                                                                                                                                                                                                                                                                                                                                            | `boolean`                                                                                     | `false`     |
+| `messageOverrides`      | `message-overrides`       | Use this property to override individual strings used by the component.                                                                                                                                                                                                                                                                                                                                                                                | `Messages`                                                                                    | `undefined` |
+| `multiple`              | `multiple`                | Similar to standard radio buttons and checkboxes. When `true`, a user can select multiple `calcite-value-list-item`s at a time. When `false`, only a single `calcite-value-list-item` can be selected at a time, and a new selection will deselect previous selections.                                                                                                                                                                                | `boolean`                                                                                     | `false`     |
+| `selectionFollowsFocus` | `selection-follows-focus` | When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.                                                                                                                                                                                                                                                                                                                            | `boolean`                                                                                     | `false`     |
 
 ## Events
 

From 7dd5a387890709821c8059de8e8009feafb82a03 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Thu, 15 Dec 2022 09:24:46 -0600
Subject: [PATCH 09/21] 
 refactor(scrim,rating,time-picker,input-time-picker,value-list)!: removed
 deprecated `intl*`properties (#6053)

BREAKING CHANGE: Removed deprecated intl* & accessible label properties.

- rating:
* Removed the property `intlStars` , use `messsageOverrides.stars`
instead.
* Removed the property `intlRating` , use `messsageOverrides.rating`
instead.

- scrim:
* Removed the property `intlLoading` , use `messsageOverrides.loading`
instead.

- time-picker:
* Removed the property `intlHour`, use `messsageOverrides.hour` instead.
* Removed the property `intlHourDown`, use `messsageOverrides.hourDown`
instead.
* Removed the property `intlHourUp`, use `messsageOverrides.hourUp`
instead.
* Removed the property `intlMeridiem`, use `messsageOverrides.meridiem`
instead.
* Removed the property `intlMeridiemDown`, use
`messsageOverrides.meridiemDown` instead.
* Removed the property `intlMeridiemUp`, use
`messsageOverrides.meridiemUp` instead.
* Removed the property `intlMinute`, use `messsageOverrides.minute`
instead.
* Removed the property `intlMinuteUp`, use `messsageOverrides.minuteUp`
instead.
* Removed the property `intlMinuteDown`, use
`messsageOverrides.minuteDown` instead.
* Removed the property `intlSecond`, use `messsageOverrides.second`
instead.
* Removed the property `intlSecondUp`, use `messsageOverrides.secondUp`
instead.
* Removed the property `intlSecondDown`, use
`messsageOverrides.secondDown` instead.

- input-time-picker:
* Removed the property `intlHour`, use `messsageOverrides.hour` instead.
* Removed the property `intlHourDown`, use `messsageOverrides.hourDown`
instead.
* Removed the property `intlHourUp`, use `messsageOverrides.hourUp`
instead.
* Removed the property `intlMeridiem`, use `messsageOverrides.meridiem`
instead.
* Removed the property `intlMeridiemDown`, use
`messsageOverrides.meridiemDown` instead.
* Removed the property `intlMeridiemUp`, use
`messsageOverrides.meridiemUp` instead.
* Removed the property `intlMinute`, use `messsageOverrides.minute`
instead.
* Removed the property `intlMinuteUp`, use `messsageOverrides.minuteUp`
instead.
* Removed the property `intlMinuteDown`, use
`messsageOverrides.minuteDown` instead.
* Removed the property `intlSecond`, use `messsageOverrides.second`
instead.
* Removed the property `intlSecondUp`, use `messsageOverrides.secondUp`
instead.
* Removed the property `intlSecondDown`, use
`messsageOverrides.secondDown` instead.

- value-list:
* Removed the property `intlDragHandleActive` , use
`messsageOverrides.dragHandleActive` instead.
* Removed the property `intlDragHandleChange` , use
`messsageOverrides.dragHandleChange` instead.
* Removed the property `intlDragHandleCommit` , use
`messsageOverrides.dragHandleCommit` instead.
* Removed the property `intlDragHandleIdle` , use
`messsageOverrides.dragHandleIdle` instead.
---
 .../input-time-picker/input-time-picker.tsx   |  99 ----------------
 src/components/rating/rating.stories.ts       |   4 -
 src/components/rating/rating.tsx              |  16 ---
 src/components/scrim/scrim.tsx                |   8 +-
 src/components/time-picker/time-picker.tsx    | 107 ------------------
 src/components/value-list/value-list.tsx      |  40 -------
 6 files changed, 1 insertion(+), 273 deletions(-)

diff --git a/src/components/input-time-picker/input-time-picker.tsx b/src/components/input-time-picker/input-time-picker.tsx
index 9282f68b080..2e83417b955 100644
--- a/src/components/input-time-picker/input-time-picker.tsx
+++ b/src/components/input-time-picker/input-time-picker.tsx
@@ -104,94 +104,8 @@ export class InputTimePicker
     }
   }
 
-  /**
-   * Accessible name for the component's hour input.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlHour?: string;
-
-  /**
-   * Accessible name for the component's hour down button.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlHourDown?: string;
-
-  /**
-   * Accessible name for the component's hour up button.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlHourUp?: string;
-
-  /**
-   * Accessible name for the component's meridiem (am/pm) input.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlMeridiem?: string;
-
-  /**
-   * Accessible name for the component's meridiem (am/pm) down button.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlMeridiemDown?: string;
-
-  /**
-   * Accessible name for the component's meridiem (am/pm) up button.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlMeridiemUp?: string;
-
-  /**
-   * Accessible name for the component's minute input.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlMinute?: string;
-
-  /**
-   * Accessible name for the component's minute down button.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlMinuteDown?: string;
-
-  /**
-   * Accessible name for the component's minute up button.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlMinuteUp?: string;
-
-  /**
-   * Accessible name for the component's second input.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlSecond?: string;
-
-  /**
-   * Accessible name for the component's second down button.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlSecondDown?: string;
-
-  /**
-   * Accessible name for the component's second up button.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlSecondUp?: string;
-
   /**
    * Use this property to override individual strings used by the component.
-   *
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
   @Prop() messagesOverrides: Partial<Messages>;
 
@@ -618,19 +532,6 @@ export class InputTimePicker
           triggerDisabled={true}
         >
           <calcite-time-picker
-            //t9n props are used here to forward the messages only.
-            intlHour={this.intlHour}
-            intlHourDown={this.intlHourDown}
-            intlHourUp={this.intlHourUp}
-            intlMeridiem={this.intlMeridiem}
-            intlMeridiemDown={this.intlMeridiemDown}
-            intlMeridiemUp={this.intlMeridiemUp}
-            intlMinute={this.intlMinute}
-            intlMinuteDown={this.intlMinuteDown}
-            intlMinuteUp={this.intlMinuteUp}
-            intlSecond={this.intlSecond}
-            intlSecondDown={this.intlSecondDown}
-            intlSecondUp={this.intlSecondUp}
             lang={this.effectiveLocale}
             messageOverrides={this.messagesOverrides}
             numberingSystem={this.numberingSystem}
diff --git a/src/components/rating/rating.stories.ts b/src/components/rating/rating.stories.ts
index 00485b8871c..7b9dcd724fb 100644
--- a/src/components/rating/rating.stories.ts
+++ b/src/components/rating/rating.stories.ts
@@ -21,8 +21,6 @@ export const simple = (): string => html`
     count="${number("count", 10)}"
     ${boolean("read-only", false)}
     ${boolean("disabled", false)}
-    intl-rating="${text("intl-rating", "Rating")}"
-    intl-stars="${text("intl-rating", "Stars: ${num}")}"
   ></calcite-rating>
 `;
 
@@ -37,8 +35,6 @@ export const darkThemeRTL_TestOnly = (): string => html`
     count="${number("count", 10)}"
     ${boolean("read-only", false)}
     ${boolean("disabled", false)}
-    intl-rating="${text("intl-rating", "Rating")}"
-    intl-stars="${text("intl-rating", "Stars: ${num}")}"
   ></calcite-rating>
 `;
 
diff --git a/src/components/rating/rating.tsx b/src/components/rating/rating.tsx
index d84b2566cde..3f32318f31b 100644
--- a/src/components/rating/rating.tsx
+++ b/src/components/rating/rating.tsx
@@ -87,20 +87,6 @@ export class Rating
   /** Specifies the name of the component on form submission. */
   @Prop({ reflect: true }) name: string;
 
-  /**
-   * Accessible name for the component.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlRating: string;
-
-  /**
-   * Accessible name for each star. The `${num}` in the string will be replaced by the number.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlStars: string;
-
   /**
    * Made into a prop for testing purposes only
    *
@@ -120,8 +106,6 @@ export class Rating
    */
   @Prop({ reflect: true }) required = false;
 
-  @Watch("intlRating")
-  @Watch("intlStars")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/scrim/scrim.tsx b/src/components/scrim/scrim.tsx
index f7402ec3537..1e1c54a9290 100644
--- a/src/components/scrim/scrim.tsx
+++ b/src/components/scrim/scrim.tsx
@@ -27,12 +27,7 @@ export class Scrim implements LocalizedComponent, T9nComponent {
   // --------------------------------------------------------------------------
 
   /**
-   * Accessible name when the component is loading.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlLoading: string;
-
+   
   /**
    * When `true`, a busy indicator is displayed.
    */
@@ -50,7 +45,6 @@ export class Scrim implements LocalizedComponent, T9nComponent {
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlLoading")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/time-picker/time-picker.tsx b/src/components/time-picker/time-picker.tsx
index 3f1c6da3aa1..3d8121accb3 100644
--- a/src/components/time-picker/time-picker.tsx
+++ b/src/components/time-picker/time-picker.tsx
@@ -80,101 +80,6 @@ export class TimePicker
   //
   //--------------------------------------------------------------------------
 
-  /**
-   * Accessible name for the component's hour input.
-   *
-   * @default "Hour"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlHour: string;
-
-  /**
-   * Accessible name for the component's hour down button.
-   *
-   * @default "Decrease hour"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlHourDown: string;
-
-  /**
-   * Accessible name for the component's hour up button.
-   *
-   * @default "Increase hour"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlHourUp: string;
-
-  /**
-   * Accessible name for the component's meridiem (AM/PM) input.
-   *
-   * @default "AM/PM"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlMeridiem: string;
-
-  /**
-   * Accessible name for the component's meridiem (AM/PM) down button.
-   *
-   * @default "Decrease AM/PM"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlMeridiemDown: string;
-
-  /**
-   * Accessible name for the component's meridiem (AM/PM) up button.
-   *
-   * @default "Increase AM/PM"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlMeridiemUp: string;
-
-  /**
-   * Accessible name for the component's minute input.
-   *
-   * @default "Minute"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlMinute: string;
-
-  /**
-   * Accessible name for the component's minute down button.
-   *
-   * @default "Decrease minute"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlMinuteDown: string;
-
-  /**
-   * Accessible name for the component's minute up button.
-   *
-   * @default "Increase minute"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlMinuteUp: string;
-
-  /**
-   * Accessible name for the component's second input.
-   *
-   * @default "Second"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlSecond: string;
-
-  /**
-   * Accessible name for the component's second down button.
-   *
-   * @default "Decrease second"
-   */
-  @Prop() intlSecondDown: string;
-
-  /**
-   * Accessible name for the component's second up button.
-   *
-   * @default "Increase second"
-   * @deprecated - translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlSecondUp: string;
-
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 
@@ -207,18 +112,6 @@ export class TimePicker
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlHour")
-  @Watch("intlHourDown")
-  @Watch("intlHourUp")
-  @Watch("intlMeridiem")
-  @Watch("intlMeridiemDown")
-  @Watch("intlMeridiemUp")
-  @Watch("intlMinute")
-  @Watch("intlMinuteDown")
-  @Watch("intlMinuteUp")
-  @Watch("intlSecond")
-  @Watch("intlSecondDown")
-  @Watch("intlSecondUp")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/value-list/value-list.tsx b/src/components/value-list/value-list.tsx
index 49379ec78f4..c6ad7234431 100644
--- a/src/components/value-list/value-list.tsx
+++ b/src/components/value-list/value-list.tsx
@@ -140,51 +140,11 @@ export class ValueList<
    */
   @Prop({ reflect: true }) selectionFollowsFocus = false;
 
-  /**
-   * When "drag-enabled" is true and active, specifies accessible context to the component.
-   *
-   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlDragHandleActive: string;
-
-  /**
-   * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position.
-   *
-   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlDragHandleChange: string;
-
-  /**
-   * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit.
-   *
-   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlDragHandleCommit: string;
-
-  /**
-   * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position.
-   *
-   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
-   */
-  @Prop() intlDragHandleIdle: string;
-
   /**
    * Use this property to override individual strings used by the component.
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlDragHandleActive")
-  @Watch("intlDragHandleChange")
-  @Watch("intlDragHandleCommit")
-  @Watch("intlDragHandleIdle")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */

From 5a19e27b1128f9075c89c96c554e41118aa3893c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 15 Dec 2022 15:39:12 +0000
Subject: [PATCH 10/21] 1.0.0-next.682

---
 CHANGELOG.md      | 201 ++++++++++++++++++++++++++++++++--------------
 package-lock.json |   4 +-
 package.json      |   2 +-
 3 files changed, 142 insertions(+), 65 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea088115ed9..97209b18ce7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,143 +9,220 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### ⚠ BREAKING CHANGES
 
-- **chip,card,combobox,date-picker,flow,flow-item,filter, input-date-picker:** Removed deprecated intl\* & accessible label properties.
+- **scrim,rating,time-picker,input-time-picker,value-list:** Removed deprecated intl\* & accessible label properties.
 
-* card:
+* rating:
 
-- Removed the property` intlLoading` , use `messsageOverrides.loading`
+- Removed the property `intlStars` , use `messsageOverrides.stars`
   instead.
-- Removed the property `intlSelect` use `messageOverrides.select`
+- Removed the property `intlRating` , use `messsageOverrides.rating`
   instead.
-- Removed the property `intlDeselect` use `messageOverrides.deselect`
+
+* scrim:
+
+- Removed the property `intlLoading` , use `messsageOverrides.loading`
+  instead.
+
+* time-picker:
+
+- Removed the property `intlHour`, use `messsageOverrides.hour` instead.
+- Removed the property `intlHourDown`, use `messsageOverrides.hourDown`
+  instead.
+- Removed the property `intlHourUp`, use `messsageOverrides.hourUp`
+  instead.
+- Removed the property `intlMeridiem`, use `messsageOverrides.meridiem`
+  instead.
+- Removed the property `intlMeridiemDown`, use
+  `messsageOverrides.meridiemDown` instead.
+- Removed the property `intlMeridiemUp`, use
+  `messsageOverrides.meridiemUp` instead.
+- Removed the property `intlMinute`, use `messsageOverrides.minute`
+  instead.
+- Removed the property `intlMinuteUp`, use `messsageOverrides.minuteUp`
+  instead.
+- Removed the property `intlMinuteDown`, use
+  `messsageOverrides.minuteDown` instead.
+- Removed the property `intlSecond`, use `messsageOverrides.second`
+  instead.
+- Removed the property `intlSecondUp`, use `messsageOverrides.secondUp`
+  instead.
+- Removed the property `intlSecondDown`, use
+  `messsageOverrides.secondDown` instead.
+
+* input-time-picker:
+
+- Removed the property `intlHour`, use `messsageOverrides.hour` instead.
+- Removed the property `intlHourDown`, use `messsageOverrides.hourDown`
+  instead.
+- Removed the property `intlHourUp`, use `messsageOverrides.hourUp`
   instead.
+- Removed the property `intlMeridiem`, use `messsageOverrides.meridiem`
+  instead.
+- Removed the property `intlMeridiemDown`, use
+  `messsageOverrides.meridiemDown` instead.
+- Removed the property `intlMeridiemUp`, use
+  `messsageOverrides.meridiemUp` instead.
+- Removed the property `intlMinute`, use `messsageOverrides.minute`
+  instead.
+- Removed the property `intlMinuteUp`, use `messsageOverrides.minuteUp`
+  instead.
+- Removed the property `intlMinuteDown`, use
+  `messsageOverrides.minuteDown` instead.
+- Removed the property `intlSecond`, use `messsageOverrides.second`
+  instead.
+- Removed the property `intlSecondUp`, use `messsageOverrides.secondUp`
+  instead.
+- Removed the property `intlSecondDown`, use
+  `messsageOverrides.secondDown` instead.
+
+* value-list:
+
+- Removed the property `intlDragHandleActive` , use
+  `messsageOverrides.dragHandleActive` instead.
+- Removed the property `intlDragHandleChange` , use
+  `messsageOverrides.dragHandleChange` instead.
+- Removed the property `intlDragHandleCommit` , use
+  `messsageOverrides.dragHandleCommit` instead.
+- Removed the property `intlDragHandleIdle` , use
+  `messsageOverrides.dragHandleIdle` instead.
+
+* **chip,card,combobox,date-picker,flow,flow-item,filter, input-date-picker:** Removed deprecated intl\* & accessible label properties.
 
-* chip:
+- card:
 
-- Removed the property `dismissLabel` , use
+* Removed the property` intlLoading` , use `messsageOverrides.loading`
+  instead.
+* Removed the property `intlSelect` use `messageOverrides.select`
+  instead.
+* Removed the property `intlDeselect` use `messageOverrides.deselect`
+  instead.
+
+- chip:
+
+* Removed the property `dismissLabel` , use
   `messsageOverrides.dismissLabel ` instead.
 
-* color-picker:
+- color-picker:
   - Removed the property `intlB` , use `messsageOverrides.b` instead.
 
-- Removed the property `intlBlue` , use `messsageOverrides.blue`
+* Removed the property `intlBlue` , use `messsageOverrides.blue`
   instead.
-- Removed the property `intlDeleteColor` , use
+* Removed the property `intlDeleteColor` , use
   `messsageOverrides.deleteColor` instead.
   - Removed the property `intlG` , use `messsageOverrides.g` instead.
-- Removed the property `intlGreen` , use `messsageOverrides.green`
+* Removed the property `intlGreen` , use `messsageOverrides.green`
   instead.
   - Removed the property `intlH` , use `messsageOverrides.h` instead.
-- Removed the property `intlHsv` , use `messsageOverrides.hsv` instead.
-- Removed the property `intlHex` , use `messsageOverrides.hex` instead.
-- Removed the property `intlHue` , use `messsageOverrides.hue` instead.
-- Removed the property `intlNoColor` , use `messsageOverrides.noColor`
+* Removed the property `intlHsv` , use `messsageOverrides.hsv` instead.
+* Removed the property `intlHex` , use `messsageOverrides.hex` instead.
+* Removed the property `intlHue` , use `messsageOverrides.hue` instead.
+* Removed the property `intlNoColor` , use `messsageOverrides.noColor`
   instead.
   - Removed the property `intlR` , use `messsageOverrides.r` instead.
-- Removed the property `intlRed` , use `messsageOverrides.red` instead.
-- Removed the property `intlRgb` , use `messsageOverrides.rgb` instead.
+* Removed the property `intlRed` , use `messsageOverrides.red` instead.
+* Removed the property `intlRgb` , use `messsageOverrides.rgb` instead.
   - Removed the property `intlS` , use `messsageOverrides.s` instead.
-- Removed the property `intlSaturation` , use
+* Removed the property `intlSaturation` , use
   `messsageOverrides.saturation` instead.
-- Removed the property `intlSaveColor` , use
+* Removed the property `intlSaveColor` , use
   `messsageOverrides.saveColor` instead.
-- Removed the property `intlSaved` , use `messsageOverrides.saved`
+* Removed the property `intlSaved` , use `messsageOverrides.saved`
   instead.
   - Removed the property `intlV` , use `messsageOverrides.v` instead.
-- Removed the property `intlValue` , use `messsageOverrides.value`
+* Removed the property `intlValue` , use `messsageOverrides.value`
   instead.
 
-* combobox:
+- combobox:
 
-- Removed the property `intlRemoveTag` , use
+* Removed the property `intlRemoveTag` , use
   `messsageOverrides.removeTag` instead.
 
-* date-picker
+- date-picker
 
-- Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
+* Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
   instead.
-- Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
+* Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
   instead.
-- Removed the property `intlYear`, use `messageOverrides.year` instead.
+* Removed the property `intlYear`, use `messageOverrides.year` instead.
 
-* flow-item:
+- flow-item:
 
-- Removed the property `intlBack` , use `messsageOverrides.back`
+* Removed the property `intlBack` , use `messsageOverrides.back`
   instead.
-- Removed the property `intlClose`, use `messageOverrides.close`
+* Removed the property `intlClose`, use `messageOverrides.close`
   instead.
-- Removed the property `intlOptions` , use `messsageOverrides.options`
+* Removed the property `intlOptions` , use `messsageOverrides.options`
   instead.
 
-* filter:
+- filter:
 
-- Removed the property `intlClear`, use `messsageOverrides.clear`
+* Removed the property `intlClear`, use `messsageOverrides.clear`
   instead.
-- Removed the property `intlLabel`, use `messageOverrides.label`
+* Removed the property `intlLabel`, use `messageOverrides.label`
   instead.
 
-* input-date-picker:
+- input-date-picker:
 
-- Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
+* Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
   instead.
-- Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
+* Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
   instead.
-- Removed the property `intlYear`, use `messageOverrides.year` instead.
-- **action,action-bar,action-group,action-pad,alert,block-section,block,button:** Removed deprecated `intl*` properties , use
+* Removed the property `intlYear`, use `messageOverrides.year` instead.
+* **action,action-bar,action-group,action-pad,alert,block-section,block,button:** Removed deprecated `intl*` properties , use
   `messageOverrides` property instead.
 
-* action:
+- action:
 
-- Removed the property `intlLoading` , use `messsageOverrides.loading`
+* Removed the property `intlLoading` , use `messsageOverrides.loading`
   instead.
-- Removed the property `intlIndicator`, use `messageOverrides.indicator`
+* Removed the property `intlIndicator`, use `messageOverrides.indicator`
   instead.
 
-* action-bar:
+- action-bar:
 
-- Removed the property `intlExpand` , use `messsageOverrides.expand`
+* Removed the property `intlExpand` , use `messsageOverrides.expand`
   instead.
-- Removed the property `intlCollapse`, use `messageOverrides.collapse`
+* Removed the property `intlCollapse`, use `messageOverrides.collapse`
   instead.
 
-* action-group:
+- action-group:
 
-- Removed the property `intlMore` , use `messsageOverrides.more`
+* Removed the property `intlMore` , use `messsageOverrides.more`
   instead.
 
-* action-pad:
+- action-pad:
 
-- Removed the property `intlExpand` , use `messsageOverrides.expand`
+* Removed the property `intlExpand` , use `messsageOverrides.expand`
   instead.
-- Removed the property `intlCollapse`, use `messageOverrides.collapse`
+* Removed the property `intlCollapse`, use `messageOverrides.collapse`
   instead.
 
-* alert:
+- alert:
 
-- Removed the property `intlClose`, use `messageOverrides.close`
+* Removed the property `intlClose`, use `messageOverrides.close`
   instead.
 
-* block:
+- block:
 
-- Removed the property `intlExpand` , use `messsageOverrides.expand`
+* Removed the property `intlExpand` , use `messsageOverrides.expand`
   instead.
-- Removed the property `intlCollapse`, use `messageOverrides.collapse`
+* Removed the property `intlCollapse`, use `messageOverrides.collapse`
   instead.
-- Removed the property `intlLoading` , use `messsageOverrides.loading`
+* Removed the property `intlLoading` , use `messsageOverrides.loading`
   instead.
-- Removed the property `intlOptions`, use `messageOverrides.options`
+* Removed the property `intlOptions`, use `messageOverrides.options`
   instead.
 
-* block-section:
+- block-section:
 
-- Removed the property `intlExpand` , use `messsageOverrides.expand`
+* Removed the property `intlExpand` , use `messsageOverrides.expand`
   instead.
-- Removed the property `intlCollapse`, use `messageOverrides.collapse`
+* Removed the property `intlCollapse`, use `messageOverrides.collapse`
   instead.
 
-* button:
+- button:
 
-- Removed the property `intlLoading` , use `messsageOverrides.loading`
+* Removed the property `intlLoading` , use `messsageOverrides.loading`
   instead.
 
 Signed-off-by: dependabot[bot] <support@github.com>
diff --git a/package-lock.json b/package-lock.json
index 308e04c52b3..c9b56816f25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.681",
+  "version": "1.0.0-next.682",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@esri/calcite-components",
-      "version": "1.0.0-next.681",
+      "version": "1.0.0-next.682",
       "license": "SEE LICENSE IN copyright.txt",
       "dependencies": {
         "@floating-ui/dom": "1.0.10",
diff --git a/package.json b/package.json
index 7ba22649310..9f6227eb714 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.681",
+  "version": "1.0.0-next.682",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

From 438928128f9194476623526710a881f8811ed4d5 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Thu, 15 Dec 2022 09:41:59 -0600
Subject: [PATCH 11/21] 
 refactor(inline-editable,input,input-text,input-number)!: remove deprecated
 `intl*` properties (#6049)

BREAKING CHANGE: Removed deprecated intl* & accessible label properties.

- inline-editable:
* Removed the property` intlEnableEditing` , use
`messsageOverrides.enableEditing` instead.
* Removed the property `intlCancelEditing` use
`messageOverrides.cancelEditing` instead.
* Removed the property `intlConfirmChanges` use
`messageOverrides.confirmChanges` instead.

- input-number:
* Removed the property `intlClear` , use `messsageOverrides.clear`
instead.
* Removed the property `intlLoading` , use `messsageOverrides.loading`
instead.

- input-text:
* Removed the property `intlClear` , use `messsageOverrides.clear`
instead.
* Removed the property `intlLoading` , use `messsageOverrides.loading`
instead.

- input:
* Removed the property `intlClear` , use `messsageOverrides.clear`
instead.
* Removed the property `intlLoading` , use `messsageOverrides.loading`
instead.
---
 src/components/filter/filter.tsx              |  2 +-
 .../inline-editable.stories.ts                |  6 -----
 .../inline-editable/inline-editable.tsx       | 27 -------------------
 src/components/input-number/input-number.tsx  | 17 ------------
 src/components/input-text/input-text.e2e.ts   |  3 +--
 src/components/input-text/input-text.tsx      | 17 ------------
 src/components/input-text/resources.ts        |  4 ---
 src/components/input/input.e2e.ts             |  3 +--
 src/components/input/input.tsx                | 17 ------------
 src/components/input/resources.ts             |  4 ---
 10 files changed, 3 insertions(+), 97 deletions(-)

diff --git a/src/components/filter/filter.tsx b/src/components/filter/filter.tsx
index ebcfccd4ee0..4f9ea5910f1 100644
--- a/src/components/filter/filter.tsx
+++ b/src/components/filter/filter.tsx
@@ -247,7 +247,7 @@ export class Filter
               clearable={true}
               disabled={disabled}
               icon={ICONS.search}
-              intlClear={this.messages.clear}
+              messageOverrides={{ clear: this.messages.clear }}
               onCalciteInputInput={this.inputHandler}
               onKeyDown={this.keyDownHandler}
               placeholder={this.placeholder}
diff --git a/src/components/inline-editable/inline-editable.stories.ts b/src/components/inline-editable/inline-editable.stories.ts
index 63a4be2a671..f3e0ab51f42 100644
--- a/src/components/inline-editable/inline-editable.stories.ts
+++ b/src/components/inline-editable/inline-editable.stories.ts
@@ -20,9 +20,6 @@ export const simple = (): string => html`
       ${boolean("editing-enabled", false, "InlineEditable") && "editing-enabled"}
       ${boolean("loading", false, "InlineEditable") && "loading"}
       ${boolean("disabled", false, "InlineEditable") && "disabled"}
-      intl-cancel-editing="${text("intl-cancel-editing", "Cancelar", "InlineEditable")}"
-      intl-enable-editing="${text("intl-enable-editing", "Haga clic para editar", "InlineEditable")}"
-      intl-confirm-changes="${text("intl-confirm-changes", "Guardar", "InlineEditable")}"
     >
       <calcite-input
         alignment="${select("alignment", ["start", "end"], "start", "Input")}"
@@ -51,9 +48,6 @@ export const darkThemeRTL_TestOnly = (): string => html`
         ${boolean("editing-enabled", false, "InlineEditable") && "editing-enabled"}
         ${boolean("loading", false, "InlineEditable") && "loading"}
         ${boolean("disabled", false, "InlineEditable") && "disabled"}
-        intl-cancel-editing="${text("intl-cancel-editing", "Cancelar", "InlineEditable")}"
-        intl-enable-editing="${text("intl-enable-editing", "Haga clic para editar", "InlineEditable")}"
-        intl-confirm-changes="${text("intl-confirm-changes", "Guardar", "InlineEditable")}"
       >
         <calcite-input
           alignment="${select("alignment", ["start", "end"], "start", "Input")}"
diff --git a/src/components/inline-editable/inline-editable.tsx b/src/components/inline-editable/inline-editable.tsx
index edb8e7d4ad6..b1e13b00cd0 100644
--- a/src/components/inline-editable/inline-editable.tsx
+++ b/src/components/inline-editable/inline-editable.tsx
@@ -97,30 +97,6 @@ export class InlineEditable
   /** When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component. */
   @Prop({ reflect: true }) controls = false;
 
-  /**
-   * Accessible name for the component's enable editing button.
-   *
-   * @default "Click to edit"
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
-   */
-  @Prop({ reflect: true }) intlEnableEditing: string;
-
-  /**
-   * Accessible name for the component's cancel editing button.
-   *
-   * @default "Cancel"
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
-   */
-  @Prop({ reflect: true }) intlCancelEditing: string;
-
-  /**
-   * Accessible name for the component's confirm edits button.
-   *
-   * @default "Save"
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
-   */
-  @Prop({ reflect: true }) intlConfirmChanges: string;
-
   /** Specifies the size of the component. Defaults to the scale of the wrapped `calcite-input` or the scale of the closest wrapping component with a set scale. */
   @Prop({ reflect: true, mutable: true }) scale: Scale;
 
@@ -139,9 +115,6 @@ export class InlineEditable
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlCancelEditing")
-  @Watch("intlConfirmChanges")
-  @Watch("intlEnableEditing")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/input-number/input-number.tsx b/src/components/input-number/input-number.tsx
index fb16e4377cd..bf688cd9dc3 100644
--- a/src/components/input-number/input-number.tsx
+++ b/src/components/input-number/input-number.tsx
@@ -135,21 +135,6 @@ export class InputNumber
    */
   @Prop({ reflect: true }) icon: string | boolean;
 
-  /**
-   * A text label that will appear on the clear button for screen readers.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
-   */
-  @Prop() intlClear: string;
-
-  /**
-   * Accessible name that will appear while loading.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
-   * @default "Loading"
-   */
-  @Prop() intlLoading?: string;
-
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
 
@@ -301,8 +286,6 @@ export class InputNumber
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlClear")
-  @Watch("intlLoading")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/input-text/input-text.e2e.ts b/src/components/input-text/input-text.e2e.ts
index 0bd227acf29..9aaec710d40 100644
--- a/src/components/input-text/input-text.e2e.ts
+++ b/src/components/input-text/input-text.e2e.ts
@@ -11,7 +11,6 @@ import {
   t9n
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
-import { TEXT } from "./resources";
 
 describe("calcite-input-text", () => {
   it("is labelable", async () => labelable("calcite-input-text"));
@@ -167,7 +166,7 @@ describe("calcite-input-text", () => {
     await page.setContent(html`<calcite-input-text clearable value="John Doe"></calcite-input-text>`);
     const clearButton = await page.find("calcite-input-text >>> .clear-button");
     expect(clearButton).not.toBe(null);
-    expect(clearButton.getAttribute("aria-label")).toBe(TEXT.clear);
+    expect(clearButton.getAttribute("aria-label")).toBe("Clear value");
   });
 
   it("does not render clear button when clearable is requested and value is not populated", async () => {
diff --git a/src/components/input-text/input-text.tsx b/src/components/input-text/input-text.tsx
index 36930b062eb..f14eb69e384 100644
--- a/src/components/input-text/input-text.tsx
+++ b/src/components/input-text/input-text.tsx
@@ -113,21 +113,6 @@ export class InputText
    */
   @Prop({ reflect: true }) icon: string | boolean;
 
-  /**
-   * A text label that will appear on the clear button for screen readers.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
-   */
-  @Prop() intlClear: string;
-
-  /**
-   * Accessible name that will appear while loading.
-   *
-   * @default "Loading"
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
-   */
-  @Prop() intlLoading?: string;
-
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
 
@@ -239,8 +224,6 @@ export class InputText
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlClear")
-  @Watch("intlLoading")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/input-text/resources.ts b/src/components/input-text/resources.ts
index 7e65872c704..b7d97f61eb5 100644
--- a/src/components/input-text/resources.ts
+++ b/src/components/input-text/resources.ts
@@ -15,7 +15,3 @@ export const CSS = {
 export const SLOTS = {
   action: "action"
 };
-
-export const TEXT = {
-  clear: "Clear value"
-};
diff --git a/src/components/input/input.e2e.ts b/src/components/input/input.e2e.ts
index bd4f7d59cd0..d6d642d2762 100644
--- a/src/components/input/input.e2e.ts
+++ b/src/components/input/input.e2e.ts
@@ -15,7 +15,6 @@ import { letterKeys, numberKeys } from "../../utils/key";
 import { locales, numberStringFormatter } from "../../utils/locale";
 import { getElementXY } from "../../tests/utils";
 import { KeyInput } from "puppeteer";
-import { TEXT } from "./resources";
 
 describe("calcite-input", () => {
   const delayFor2UpdatesInMs = 200;
@@ -697,7 +696,7 @@ describe("calcite-input", () => {
     await page.setContent(html`<calcite-input clearable value="John Doe"></calcite-input>`);
     const clearButton = await page.find("calcite-input >>> .clear-button");
     expect(clearButton).not.toBe(null);
-    expect(clearButton.getAttribute("aria-label")).toBe(TEXT.clear);
+    expect(clearButton.getAttribute("aria-label")).toBe("Clear value");
   });
 
   it("does not render clear button when clearable is requested and value is not populated", async () => {
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index 1cc8105c8e5..18f09e07f8d 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -136,21 +136,6 @@ export class Input
    */
   @Prop({ reflect: true }) icon: string | boolean;
 
-  /**
-   * Accessible name for the component's clear button.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
-   */
-  @Prop() intlClear: string;
-
-  /**
-   * Accessible name when the component is loading.
-   *
-   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`.
-   * @default "Loading"
-   */
-  @Prop() intlLoading?: string;
-
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
 
@@ -352,8 +337,6 @@ export class Input
    */
   @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  @Watch("intlClear")
-  @Watch("intlLoading")
   @Watch("messageOverrides")
   onMessagesChange(): void {
     /* wired up by t9n util */
diff --git a/src/components/input/resources.ts b/src/components/input/resources.ts
index 054b2500588..fd44427a4c5 100644
--- a/src/components/input/resources.ts
+++ b/src/components/input/resources.ts
@@ -27,7 +27,3 @@ export const INPUT_TYPE_ICONS = {
 export const SLOTS = {
   action: "action"
 };
-
-export const TEXT = {
-  clear: "Clear value"
-};

From 7fc27964e2a3ba1af09daa986bd735260e840fa8 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Thu, 15 Dec 2022 08:43:49 -0800
Subject: [PATCH 12/21] refactor(rating)!: remove `event.detail` payload from
 events (#6045)

BREAKING CHANGE: Removed `event.detail` payload from events.

- Removed the `event.detail` property on the event
`calciteRatingChange`, use `event.target` instead.
---
 src/components/rating/rating.e2e.ts | 39 -----------------------------
 src/components/rating/rating.tsx    |  4 +--
 2 files changed, 2 insertions(+), 41 deletions(-)

diff --git a/src/components/rating/rating.e2e.ts b/src/components/rating/rating.e2e.ts
index 8d322e041f0..015df39d78c 100644
--- a/src/components/rating/rating.e2e.ts
+++ b/src/components/rating/rating.e2e.ts
@@ -331,21 +331,12 @@ describe("calcite-rating", () => {
     await labels[0].click();
     expect(element).toEqualAttribute("value", "1");
     expect(changeEvent).toHaveReceivedEventTimes(1);
-    expect(changeEvent).toHaveReceivedEventDetail({
-      value: 1
-    });
     await labels[3].click();
     expect(element).toEqualAttribute("value", "4");
     expect(changeEvent).toHaveReceivedEventTimes(2);
-    expect(changeEvent).toHaveReceivedEventDetail({
-      value: 4
-    });
     await labels[3].click();
     expect(element).toEqualAttribute("value", "0");
     expect(changeEvent).toHaveReceivedEventTimes(3);
-    expect(changeEvent).toHaveReceivedEventDetail({
-      value: 0
-    });
   });
 
   it("can be edited with keyboard like a set of radio inputs", async () => {
@@ -358,46 +349,22 @@ describe("calcite-rating", () => {
     expect(changeEvent).toHaveReceivedEventTimes(0);
     await element.press(" ");
     expect(changeEvent).toHaveReceivedEventTimes(1);
-    expect(changeEvent).toHaveReceivedEventDetail({
-      value: 0
-    });
     await page.keyboard.press("ArrowRight");
     expect(changeEvent).toHaveReceivedEventTimes(2);
-    expect(changeEvent).toHaveReceivedEventDetail({
-      value: 2
-    });
     await page.keyboard.press("ArrowLeft");
     expect(changeEvent).toHaveReceivedEventTimes(3);
-    expect(changeEvent).toHaveReceivedEventDetail({
-      value: 1
-    });
     await page.keyboard.press("ArrowLeft");
     expect(changeEvent).toHaveReceivedEventTimes(4);
-    expect(changeEvent).toHaveReceivedEventDetail({
-      value: 5
-    });
     await page.keyboard.press("ArrowRight");
     expect(changeEvent).toHaveReceivedEventTimes(5);
-    expect(changeEvent).toHaveReceivedEventDetail({
-      value: 1
-    });
     await page.keyboard.press("Enter");
     expect(changeEvent).toHaveReceivedEventTimes(6);
-    expect(changeEvent).toHaveReceivedEventDetail({
-      value: 0
-    });
     await labels[3].click();
     expect(element).toEqualAttribute("value", "4");
     expect(changeEvent).toHaveReceivedEventTimes(7);
-    expect(changeEvent).toHaveReceivedEventDetail({
-      value: 4
-    });
     await labels[3].click();
     expect(element).toEqualAttribute("value", "0");
     expect(changeEvent).toHaveReceivedEventTimes(8);
-    expect(changeEvent).toHaveReceivedEventDetail({
-      value: 0
-    });
   });
 
   it("cannot be cleared/reset when required props is set true", async () => {
@@ -415,15 +382,9 @@ describe("calcite-rating", () => {
     await labels[3].click();
     expect(element).toEqualAttribute("value", "4");
     expect(changeEvent).toHaveReceivedEventTimes(1);
-    expect(changeEvent).toHaveReceivedEventDetail({
-      value: 4
-    });
     await labels[3].click();
     expect(element).toEqualAttribute("value", "4");
     expect(changeEvent).toHaveReceivedEventTimes(1);
-    expect(changeEvent).toHaveReceivedEventDetail({
-      value: 4
-    });
   });
 
   it("disables click interaction when readonly is requested", async () => {
diff --git a/src/components/rating/rating.tsx b/src/components/rating/rating.tsx
index 3f32318f31b..c9db56ac833 100644
--- a/src/components/rating/rating.tsx
+++ b/src/components/rating/rating.tsx
@@ -153,7 +153,7 @@ export class Rating
   /**
    * Fires when the component's value changes.
    */
-  @Event({ cancelable: false }) calciteRatingChange: EventEmitter<{ value: number }>;
+  @Event({ cancelable: false }) calciteRatingChange: EventEmitter<void>;
 
   //--------------------------------------------------------------------------
   //
@@ -264,7 +264,7 @@ export class Rating
 
   private updateValue(value: number) {
     this.value = value;
-    this.calciteRatingChange.emit({ value });
+    this.calciteRatingChange.emit();
   }
 
   private onKeyboardPressed = (event: KeyboardEvent): void => {

From 7253534fb9dc73b5a91b5b783694097e153e7b9f Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Thu, 15 Dec 2022 08:44:14 -0800
Subject: [PATCH 13/21] refactor(dropdown)!: remove `event.detail` payload from
 events (#6044)

BREAKING CHANGE: Removed `event.detail` payload from events.

- Removed the `event.detail` property on the event
`calciteDropdownSelect`, use `event.target` instead.
---
 src/components/dropdown/dropdown.e2e.ts | 60 +++++++------------------
 src/components/dropdown/dropdown.tsx    |  8 ++--
 src/components/dropdown/interfaces.ts   |  7 ---
 3 files changed, 19 insertions(+), 56 deletions(-)

diff --git a/src/components/dropdown/dropdown.e2e.ts b/src/components/dropdown/dropdown.e2e.ts
index 45db0d3b5ee..3a43f9e53e2 100644
--- a/src/components/dropdown/dropdown.e2e.ts
+++ b/src/components/dropdown/dropdown.e2e.ts
@@ -4,7 +4,6 @@ import dedent from "dedent";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
 import { GlobalTestProps } from "../../tests/utils";
-import { Selection } from "./interfaces";
 
 describe("calcite-dropdown", () => {
   it("renders", () =>
@@ -52,11 +51,6 @@ describe("calcite-dropdown", () => {
      * IDs from items to assert selection
      */
     expectedItemIds: string[];
-
-    /**
-     * If testing on the event payload, the most recent ID is used to assert the
-     */
-    mostRecentId?: string;
   }
 
   /**
@@ -67,24 +61,14 @@ describe("calcite-dropdown", () => {
    * @param page
    * @param root0
    * @param root0.expectedItemIds
-   * @param root0.mostRecentId
    */
-  async function assertSelectedItems(
-    page: E2EPage,
-    { expectedItemIds, mostRecentId }: SelectedItemsAssertionOptions
-  ): Promise<void> {
+  async function assertSelectedItems(page: E2EPage, { expectedItemIds }: SelectedItemsAssertionOptions): Promise<void> {
     await page.waitForTimeout(100);
     const selectedItemIds = await page.evaluate(() => {
       const dropdown = document.querySelector<HTMLCalciteDropdownElement>("calcite-dropdown");
       return dropdown.selectedItems.map((item) => item.id);
     });
 
-    if (mostRecentId) {
-      const selectedItemId = await page.evaluate(() => {
-        return (window as SelectionEventTestWindow).eventDetail.item.id;
-      });
-      expect(selectedItemId).toBe(mostRecentId);
-    }
     expect(selectedItemIds).toHaveLength(expectedItemIds.length);
 
     expectedItemIds.forEach((itemId, index) => expect(selectedItemIds[index]).toEqual(itemId));
@@ -260,24 +244,21 @@ describe("calcite-dropdown", () => {
     await item1.click();
     await page.waitForChanges();
     await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-2"],
-      mostRecentId: "item-1"
+      expectedItemIds: ["item-1", "item-2"]
     });
     await trigger.click();
     await page.waitForChanges();
     await item2.click();
     await page.waitForChanges();
     await assertSelectedItems(page, {
-      expectedItemIds: ["item-1"],
-      mostRecentId: "item-2"
+      expectedItemIds: ["item-1"]
     });
     await trigger.click();
     await page.waitForChanges();
     await item3.click();
     await page.waitForChanges();
     await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-3"],
-      mostRecentId: "item-3"
+      expectedItemIds: ["item-1", "item-3"]
     });
 
     expect(item1).toHaveAttribute("selected");
@@ -312,16 +293,14 @@ describe("calcite-dropdown", () => {
     await item1.click();
     await page.waitForChanges();
     await assertSelectedItems(page, {
-      expectedItemIds: ["item-1"],
-      mostRecentId: "item-1"
+      expectedItemIds: ["item-1"]
     });
     await trigger.click();
     await page.waitForChanges();
     await item3.click();
     await page.waitForChanges();
     await assertSelectedItems(page, {
-      expectedItemIds: ["item-3"],
-      mostRecentId: "item-3"
+      expectedItemIds: ["item-3"]
     });
 
     expect(item1).not.toHaveAttribute("selected");
@@ -353,15 +332,15 @@ describe("calcite-dropdown", () => {
     await trigger.click();
     await item1.click();
     await page.waitForChanges();
-    await assertSelectedItems(page, { expectedItemIds: [], mostRecentId: "item-1" });
+    await assertSelectedItems(page, { expectedItemIds: [] });
     await trigger.click();
     await item2.click();
     await page.waitForChanges();
-    await assertSelectedItems(page, { expectedItemIds: [], mostRecentId: "item-2" });
+    await assertSelectedItems(page, { expectedItemIds: [] });
     await trigger.click();
     await item3.click();
     await page.waitForChanges();
-    await assertSelectedItems(page, { expectedItemIds: [], mostRecentId: "item-3" });
+    await assertSelectedItems(page, { expectedItemIds: [] });
 
     expect(item1).not.toHaveAttribute("selected");
     expect(item2).not.toHaveAttribute("selected");
@@ -417,56 +396,49 @@ describe("calcite-dropdown", () => {
     await item1.click();
     await page.waitForChanges();
     await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-2", "item-5"],
-      mostRecentId: "item-1"
+      expectedItemIds: ["item-1", "item-2", "item-5"]
     });
     await trigger.click();
     await page.waitForChanges();
     await item2.click();
     await page.waitForChanges();
     await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-5"],
-      mostRecentId: "item-2"
+      expectedItemIds: ["item-1", "item-5"]
     });
     await trigger.click();
     await page.waitForChanges();
     await item3.click();
     await page.waitForChanges();
     await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-3", "item-5"],
-      mostRecentId: "item-3"
+      expectedItemIds: ["item-1", "item-3", "item-5"]
     });
     await trigger.click();
     await page.waitForChanges();
     await item4.click();
     await page.waitForChanges();
     await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-3", "item-4"],
-      mostRecentId: "item-4"
+      expectedItemIds: ["item-1", "item-3", "item-4"]
     });
     await trigger.click();
     await page.waitForChanges();
     await item6.click();
     await page.waitForChanges();
     await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-3", "item-6"],
-      mostRecentId: "item-6"
+      expectedItemIds: ["item-1", "item-3", "item-6"]
     });
     await trigger.click();
     await page.waitForChanges();
     await item7.click();
     await page.waitForChanges();
     await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-3", "item-6"],
-      mostRecentId: "item-7"
+      expectedItemIds: ["item-1", "item-3", "item-6"]
     });
     await trigger.click();
     await page.waitForChanges();
     await item9.click();
     await page.waitForChanges();
     await assertSelectedItems(page, {
-      expectedItemIds: ["item-1", "item-3", "item-6"],
-      mostRecentId: "item-9"
+      expectedItemIds: ["item-1", "item-3", "item-6"]
     });
 
     expect(item1).toHaveAttribute("selected");
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index 6bd1253e2ca..b4eab4cef81 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -11,7 +11,7 @@ import {
   VNode,
   Watch
 } from "@stencil/core";
-import { ItemKeyboardEvent, Selection } from "./interfaces";
+import { ItemKeyboardEvent } from "./interfaces";
 
 import { focusElement, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
 import {
@@ -287,7 +287,7 @@ export class Dropdown implements InteractiveComponent, OpenCloseComponent, Float
   //--------------------------------------------------------------------------
 
   /** Fires when a `calcite-dropdown-item`'s selection changes. */
-  @Event({ cancelable: false }) calciteDropdownSelect: EventEmitter<Selection>;
+  @Event({ cancelable: false }) calciteDropdownSelect: EventEmitter<void>;
 
   /** Fires when the component is requested to be closed and before the closing transition begins. */
   @Event({ cancelable: false }) calciteDropdownBeforeClose: EventEmitter<void>;
@@ -380,9 +380,7 @@ export class Dropdown implements InteractiveComponent, OpenCloseComponent, Float
   handleItemSelect(event: CustomEvent<RequestedItem>): void {
     this.updateSelectedItems();
     event.stopPropagation();
-    this.calciteDropdownSelect.emit({
-      item: event.detail.requestedDropdownItem
-    });
+    this.calciteDropdownSelect.emit();
     if (
       !this.closeOnSelectDisabled ||
       event.detail.requestedDropdownGroup.selectionMode === "none"
diff --git a/src/components/dropdown/interfaces.ts b/src/components/dropdown/interfaces.ts
index 0812a137428..706431488e5 100644
--- a/src/components/dropdown/interfaces.ts
+++ b/src/components/dropdown/interfaces.ts
@@ -1,10 +1,3 @@
 export interface ItemKeyboardEvent {
   keyboardEvent: KeyboardEvent;
 }
-
-export interface Selection {
-  /**
-   * The item that caused a selection event to emit.
-   */
-  item: HTMLCalciteDropdownItemElement;
-}

From 43f711d7ad0e19c0b1627b2398621815c8955e32 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Thu, 15 Dec 2022 08:55:26 -0800
Subject: [PATCH 14/21] refactor(pagination)!: remove `event.detail` payload
 from events (#6047)

BREAKING CHANGE: Removed `event.detail` payload from events.

- Removed the `event.detail` property on the event
`calcitePaginationChange`, use `event.target` instead.
---
 src/components/pagination/pagination.e2e.ts | 21 ---------------------
 src/components/pagination/pagination.tsx    | 12 ++----------
 2 files changed, 2 insertions(+), 31 deletions(-)

diff --git a/src/components/pagination/pagination.e2e.ts b/src/components/pagination/pagination.e2e.ts
index 5169f58da31..2ab38b5e015 100644
--- a/src/components/pagination/pagination.e2e.ts
+++ b/src/components/pagination/pagination.e2e.ts
@@ -114,13 +114,6 @@ describe("calcite-pagination", () => {
       const page = await newE2EPage();
       await page.setContent(`<calcite-pagination start="1" total="36" num="10"></calcite-pagination>`);
       const toggleSpy = await page.spyOnEvent("calcitePaginationChange");
-
-      await page.evaluate(() => {
-        document.addEventListener("calcitePaginationChange", (event: CustomEvent): void => {
-          (window as any).eventDetail = event.detail;
-        });
-      });
-
       const pages = await page.findAll("calcite-pagination >>> .page");
       await pages[1].click();
       await page.waitForChanges();
@@ -129,20 +122,6 @@ describe("calcite-pagination", () => {
       expect(selectedPage.innerText).toBe("2");
       expect(toggleSpy).toHaveReceivedEventTimes(1);
 
-      const eventDetail: any = await page.evaluateHandle(() => {
-        const detail = (window as any).eventDetail;
-        return {
-          num: detail.num,
-          start: detail.start,
-          total: detail.total
-        };
-      });
-      const properties = await eventDetail.getProperties();
-      expect(eventDetail).toBeDefined();
-      expect(properties.get("num")._remoteObject.value).toBe(10);
-      expect(properties.get("start")._remoteObject.value).toBe(11);
-      expect(properties.get("total")._remoteObject.value).toBe(36);
-
       await pages[2].click();
       await page.waitForChanges();
 
diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
index 38cc8fa0b23..713f8cb201a 100644
--- a/src/components/pagination/pagination.tsx
+++ b/src/components/pagination/pagination.tsx
@@ -157,10 +157,8 @@ export class Pagination implements LocalizedComponent, LocalizedComponent, T9nCo
 
   /**
    * Emits when the selected page changes.
-   *
-   * @see [PaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/pagination/pagination.tsx#L23)
    */
-  @Event({ cancelable: false }) calcitePaginationChange: EventEmitter<PaginationDetail>;
+  @Event({ cancelable: false }) calcitePaginationChange: EventEmitter<void>;
 
   // --------------------------------------------------------------------------
   //
@@ -231,13 +229,7 @@ export class Pagination implements LocalizedComponent, LocalizedComponent, T9nCo
   }
 
   private emitUpdate() {
-    const changePayload = {
-      start: this.start,
-      total: this.total,
-      num: this.num
-    };
-
-    this.calcitePaginationChange.emit(changePayload);
+    this.calcitePaginationChange.emit();
   }
 
   //--------------------------------------------------------------------------

From d45c4e3aa1ec1dcb00f28ef7427232155c759020 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 15 Dec 2022 17:11:59 +0000
Subject: [PATCH 15/21] 1.0.0-next.683

---
 CHANGELOG.md      | 243 +++++++++++++++++++++++++++-------------------
 package-lock.json |   4 +-
 package.json      |   2 +-
 3 files changed, 148 insertions(+), 101 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 97209b18ce7..f93cf155e40 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,220 +9,267 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### ⚠ BREAKING CHANGES
 
-- **scrim,rating,time-picker,input-time-picker,value-list:** Removed deprecated intl\* & accessible label properties.
+- **pagination:** Removed `event.detail` payload from events.
 
-* rating:
+* Removed the `event.detail` property on the event
+  `calcitePaginationChange`, use `event.target` instead.
+
+- **dropdown:** Removed `event.detail` payload from events.
+
+* Removed the `event.detail` property on the event
+  `calciteDropdownSelect`, use `event.target` instead.
+
+- **rating:** Removed `event.detail` payload from events.
+
+* Removed the `event.detail` property on the event
+  `calciteRatingChange`, use `event.target` instead.
+
+- **inline-editable,input,input-text,input-number:** Removed deprecated intl\* & accessible label properties.
+
+* inline-editable:
 
-- Removed the property `intlStars` , use `messsageOverrides.stars`
+- Removed the property` intlEnableEditing` , use
+  `messsageOverrides.enableEditing` instead.
+- Removed the property `intlCancelEditing` use
+  `messageOverrides.cancelEditing` instead.
+- Removed the property `intlConfirmChanges` use
+  `messageOverrides.confirmChanges` instead.
+
+* input-number:
+
+- Removed the property `intlClear` , use `messsageOverrides.clear`
   instead.
-- Removed the property `intlRating` , use `messsageOverrides.rating`
+- Removed the property `intlLoading` , use `messsageOverrides.loading`
   instead.
 
-* scrim:
+* input-text:
 
+- Removed the property `intlClear` , use `messsageOverrides.clear`
+  instead.
 - Removed the property `intlLoading` , use `messsageOverrides.loading`
   instead.
 
-* time-picker:
+* input:
 
-- Removed the property `intlHour`, use `messsageOverrides.hour` instead.
-- Removed the property `intlHourDown`, use `messsageOverrides.hourDown`
+- Removed the property `intlClear` , use `messsageOverrides.clear`
   instead.
-- Removed the property `intlHourUp`, use `messsageOverrides.hourUp`
+- Removed the property `intlLoading` , use `messsageOverrides.loading`
   instead.
-- Removed the property `intlMeridiem`, use `messsageOverrides.meridiem`
+
+* **scrim,rating,time-picker,input-time-picker,value-list:** Removed deprecated intl\* & accessible label properties.
+
+- rating:
+
+* Removed the property `intlStars` , use `messsageOverrides.stars`
   instead.
-- Removed the property `intlMeridiemDown`, use
+* Removed the property `intlRating` , use `messsageOverrides.rating`
+  instead.
+
+- scrim:
+
+* Removed the property `intlLoading` , use `messsageOverrides.loading`
+  instead.
+
+- time-picker:
+
+* Removed the property `intlHour`, use `messsageOverrides.hour` instead.
+* Removed the property `intlHourDown`, use `messsageOverrides.hourDown`
+  instead.
+* Removed the property `intlHourUp`, use `messsageOverrides.hourUp`
+  instead.
+* Removed the property `intlMeridiem`, use `messsageOverrides.meridiem`
+  instead.
+* Removed the property `intlMeridiemDown`, use
   `messsageOverrides.meridiemDown` instead.
-- Removed the property `intlMeridiemUp`, use
+* Removed the property `intlMeridiemUp`, use
   `messsageOverrides.meridiemUp` instead.
-- Removed the property `intlMinute`, use `messsageOverrides.minute`
+* Removed the property `intlMinute`, use `messsageOverrides.minute`
   instead.
-- Removed the property `intlMinuteUp`, use `messsageOverrides.minuteUp`
+* Removed the property `intlMinuteUp`, use `messsageOverrides.minuteUp`
   instead.
-- Removed the property `intlMinuteDown`, use
+* Removed the property `intlMinuteDown`, use
   `messsageOverrides.minuteDown` instead.
-- Removed the property `intlSecond`, use `messsageOverrides.second`
+* Removed the property `intlSecond`, use `messsageOverrides.second`
   instead.
-- Removed the property `intlSecondUp`, use `messsageOverrides.secondUp`
+* Removed the property `intlSecondUp`, use `messsageOverrides.secondUp`
   instead.
-- Removed the property `intlSecondDown`, use
+* Removed the property `intlSecondDown`, use
   `messsageOverrides.secondDown` instead.
 
-* input-time-picker:
+- input-time-picker:
 
-- Removed the property `intlHour`, use `messsageOverrides.hour` instead.
-- Removed the property `intlHourDown`, use `messsageOverrides.hourDown`
+* Removed the property `intlHour`, use `messsageOverrides.hour` instead.
+* Removed the property `intlHourDown`, use `messsageOverrides.hourDown`
   instead.
-- Removed the property `intlHourUp`, use `messsageOverrides.hourUp`
+* Removed the property `intlHourUp`, use `messsageOverrides.hourUp`
   instead.
-- Removed the property `intlMeridiem`, use `messsageOverrides.meridiem`
+* Removed the property `intlMeridiem`, use `messsageOverrides.meridiem`
   instead.
-- Removed the property `intlMeridiemDown`, use
+* Removed the property `intlMeridiemDown`, use
   `messsageOverrides.meridiemDown` instead.
-- Removed the property `intlMeridiemUp`, use
+* Removed the property `intlMeridiemUp`, use
   `messsageOverrides.meridiemUp` instead.
-- Removed the property `intlMinute`, use `messsageOverrides.minute`
+* Removed the property `intlMinute`, use `messsageOverrides.minute`
   instead.
-- Removed the property `intlMinuteUp`, use `messsageOverrides.minuteUp`
+* Removed the property `intlMinuteUp`, use `messsageOverrides.minuteUp`
   instead.
-- Removed the property `intlMinuteDown`, use
+* Removed the property `intlMinuteDown`, use
   `messsageOverrides.minuteDown` instead.
-- Removed the property `intlSecond`, use `messsageOverrides.second`
+* Removed the property `intlSecond`, use `messsageOverrides.second`
   instead.
-- Removed the property `intlSecondUp`, use `messsageOverrides.secondUp`
+* Removed the property `intlSecondUp`, use `messsageOverrides.secondUp`
   instead.
-- Removed the property `intlSecondDown`, use
+* Removed the property `intlSecondDown`, use
   `messsageOverrides.secondDown` instead.
 
-* value-list:
+- value-list:
 
-- Removed the property `intlDragHandleActive` , use
+* Removed the property `intlDragHandleActive` , use
   `messsageOverrides.dragHandleActive` instead.
-- Removed the property `intlDragHandleChange` , use
+* Removed the property `intlDragHandleChange` , use
   `messsageOverrides.dragHandleChange` instead.
-- Removed the property `intlDragHandleCommit` , use
+* Removed the property `intlDragHandleCommit` , use
   `messsageOverrides.dragHandleCommit` instead.
-- Removed the property `intlDragHandleIdle` , use
+* Removed the property `intlDragHandleIdle` , use
   `messsageOverrides.dragHandleIdle` instead.
 
-* **chip,card,combobox,date-picker,flow,flow-item,filter, input-date-picker:** Removed deprecated intl\* & accessible label properties.
+- **chip,card,combobox,date-picker,flow,flow-item,filter, input-date-picker:** Removed deprecated intl\* & accessible label properties.
 
-- card:
+* card:
 
-* Removed the property` intlLoading` , use `messsageOverrides.loading`
+- Removed the property` intlLoading` , use `messsageOverrides.loading`
   instead.
-* Removed the property `intlSelect` use `messageOverrides.select`
+- Removed the property `intlSelect` use `messageOverrides.select`
   instead.
-* Removed the property `intlDeselect` use `messageOverrides.deselect`
+- Removed the property `intlDeselect` use `messageOverrides.deselect`
   instead.
 
-- chip:
+* chip:
 
-* Removed the property `dismissLabel` , use
+- Removed the property `dismissLabel` , use
   `messsageOverrides.dismissLabel ` instead.
 
-- color-picker:
+* color-picker:
   - Removed the property `intlB` , use `messsageOverrides.b` instead.
 
-* Removed the property `intlBlue` , use `messsageOverrides.blue`
+- Removed the property `intlBlue` , use `messsageOverrides.blue`
   instead.
-* Removed the property `intlDeleteColor` , use
+- Removed the property `intlDeleteColor` , use
   `messsageOverrides.deleteColor` instead.
   - Removed the property `intlG` , use `messsageOverrides.g` instead.
-* Removed the property `intlGreen` , use `messsageOverrides.green`
+- Removed the property `intlGreen` , use `messsageOverrides.green`
   instead.
   - Removed the property `intlH` , use `messsageOverrides.h` instead.
-* Removed the property `intlHsv` , use `messsageOverrides.hsv` instead.
-* Removed the property `intlHex` , use `messsageOverrides.hex` instead.
-* Removed the property `intlHue` , use `messsageOverrides.hue` instead.
-* Removed the property `intlNoColor` , use `messsageOverrides.noColor`
+- Removed the property `intlHsv` , use `messsageOverrides.hsv` instead.
+- Removed the property `intlHex` , use `messsageOverrides.hex` instead.
+- Removed the property `intlHue` , use `messsageOverrides.hue` instead.
+- Removed the property `intlNoColor` , use `messsageOverrides.noColor`
   instead.
   - Removed the property `intlR` , use `messsageOverrides.r` instead.
-* Removed the property `intlRed` , use `messsageOverrides.red` instead.
-* Removed the property `intlRgb` , use `messsageOverrides.rgb` instead.
+- Removed the property `intlRed` , use `messsageOverrides.red` instead.
+- Removed the property `intlRgb` , use `messsageOverrides.rgb` instead.
   - Removed the property `intlS` , use `messsageOverrides.s` instead.
-* Removed the property `intlSaturation` , use
+- Removed the property `intlSaturation` , use
   `messsageOverrides.saturation` instead.
-* Removed the property `intlSaveColor` , use
+- Removed the property `intlSaveColor` , use
   `messsageOverrides.saveColor` instead.
-* Removed the property `intlSaved` , use `messsageOverrides.saved`
+- Removed the property `intlSaved` , use `messsageOverrides.saved`
   instead.
   - Removed the property `intlV` , use `messsageOverrides.v` instead.
-* Removed the property `intlValue` , use `messsageOverrides.value`
+- Removed the property `intlValue` , use `messsageOverrides.value`
   instead.
 
-- combobox:
+* combobox:
 
-* Removed the property `intlRemoveTag` , use
+- Removed the property `intlRemoveTag` , use
   `messsageOverrides.removeTag` instead.
 
-- date-picker
+* date-picker
 
-* Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
+- Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
   instead.
-* Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
+- Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
   instead.
-* Removed the property `intlYear`, use `messageOverrides.year` instead.
+- Removed the property `intlYear`, use `messageOverrides.year` instead.
 
-- flow-item:
+* flow-item:
 
-* Removed the property `intlBack` , use `messsageOverrides.back`
+- Removed the property `intlBack` , use `messsageOverrides.back`
   instead.
-* Removed the property `intlClose`, use `messageOverrides.close`
+- Removed the property `intlClose`, use `messageOverrides.close`
   instead.
-* Removed the property `intlOptions` , use `messsageOverrides.options`
+- Removed the property `intlOptions` , use `messsageOverrides.options`
   instead.
 
-- filter:
+* filter:
 
-* Removed the property `intlClear`, use `messsageOverrides.clear`
+- Removed the property `intlClear`, use `messsageOverrides.clear`
   instead.
-* Removed the property `intlLabel`, use `messageOverrides.label`
+- Removed the property `intlLabel`, use `messageOverrides.label`
   instead.
 
-- input-date-picker:
+* input-date-picker:
 
-* Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
+- Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
   instead.
-* Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
+- Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
   instead.
-* Removed the property `intlYear`, use `messageOverrides.year` instead.
-* **action,action-bar,action-group,action-pad,alert,block-section,block,button:** Removed deprecated `intl*` properties , use
+- Removed the property `intlYear`, use `messageOverrides.year` instead.
+- **action,action-bar,action-group,action-pad,alert,block-section,block,button:** Removed deprecated `intl*` properties , use
   `messageOverrides` property instead.
 
-- action:
+* action:
 
-* Removed the property `intlLoading` , use `messsageOverrides.loading`
+- Removed the property `intlLoading` , use `messsageOverrides.loading`
   instead.
-* Removed the property `intlIndicator`, use `messageOverrides.indicator`
+- Removed the property `intlIndicator`, use `messageOverrides.indicator`
   instead.
 
-- action-bar:
+* action-bar:
 
-* Removed the property `intlExpand` , use `messsageOverrides.expand`
+- Removed the property `intlExpand` , use `messsageOverrides.expand`
   instead.
-* Removed the property `intlCollapse`, use `messageOverrides.collapse`
+- Removed the property `intlCollapse`, use `messageOverrides.collapse`
   instead.
 
-- action-group:
+* action-group:
 
-* Removed the property `intlMore` , use `messsageOverrides.more`
+- Removed the property `intlMore` , use `messsageOverrides.more`
   instead.
 
-- action-pad:
+* action-pad:
 
-* Removed the property `intlExpand` , use `messsageOverrides.expand`
+- Removed the property `intlExpand` , use `messsageOverrides.expand`
   instead.
-* Removed the property `intlCollapse`, use `messageOverrides.collapse`
+- Removed the property `intlCollapse`, use `messageOverrides.collapse`
   instead.
 
-- alert:
+* alert:
 
-* Removed the property `intlClose`, use `messageOverrides.close`
+- Removed the property `intlClose`, use `messageOverrides.close`
   instead.
 
-- block:
+* block:
 
-* Removed the property `intlExpand` , use `messsageOverrides.expand`
+- Removed the property `intlExpand` , use `messsageOverrides.expand`
   instead.
-* Removed the property `intlCollapse`, use `messageOverrides.collapse`
+- Removed the property `intlCollapse`, use `messageOverrides.collapse`
   instead.
-* Removed the property `intlLoading` , use `messsageOverrides.loading`
+- Removed the property `intlLoading` , use `messsageOverrides.loading`
   instead.
-* Removed the property `intlOptions`, use `messageOverrides.options`
+- Removed the property `intlOptions`, use `messageOverrides.options`
   instead.
 
-- block-section:
+* block-section:
 
-* Removed the property `intlExpand` , use `messsageOverrides.expand`
+- Removed the property `intlExpand` , use `messsageOverrides.expand`
   instead.
-* Removed the property `intlCollapse`, use `messageOverrides.collapse`
+- Removed the property `intlCollapse`, use `messageOverrides.collapse`
   instead.
 
-- button:
+* button:
 
-* Removed the property `intlLoading` , use `messsageOverrides.loading`
+- Removed the property `intlLoading` , use `messsageOverrides.loading`
   instead.
 
 Signed-off-by: dependabot[bot] <support@github.com>
diff --git a/package-lock.json b/package-lock.json
index c9b56816f25..1e8bddff096 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.682",
+  "version": "1.0.0-next.683",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@esri/calcite-components",
-      "version": "1.0.0-next.682",
+      "version": "1.0.0-next.683",
       "license": "SEE LICENSE IN copyright.txt",
       "dependencies": {
         "@floating-ui/dom": "1.0.10",
diff --git a/package.json b/package.json
index 9f6227eb714..4ff2e094949 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.682",
+  "version": "1.0.0-next.683",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

From cc1d79187ad4651ffeb38ded51167fee3814661e Mon Sep 17 00:00:00 2001
From: Kitty Hurley <khurley@esri.com>
Date: Thu, 15 Dec 2022 11:27:06 -0600
Subject: [PATCH 16/21] docs(changelog): fix breaking change indent levels
 (#6057)

**Related Issue:** N/A

## Summary
Add formatting and indent levels to the changelog for readability.
---
 CHANGELOG.md | 538 ++++++++++++++++++++++++---------------------------
 1 file changed, 248 insertions(+), 290 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f93cf155e40..a48ca5d34b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,385 +11,343 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 - **pagination:** Removed `event.detail` payload from events.
 
-* Removed the `event.detail` property on the event
-  `calcitePaginationChange`, use `event.target` instead.
+  - Removed the `event.detail` property on the event
+    `calcitePaginationChange`, use `event.target` instead.
 
 - **dropdown:** Removed `event.detail` payload from events.
 
-* Removed the `event.detail` property on the event
-  `calciteDropdownSelect`, use `event.target` instead.
+  - Removed the `event.detail` property on the event
+    `calciteDropdownSelect`, use `event.target` instead.
 
 - **rating:** Removed `event.detail` payload from events.
 
-* Removed the `event.detail` property on the event
-  `calciteRatingChange`, use `event.target` instead.
-
-- **inline-editable,input,input-text,input-number:** Removed deprecated intl\* & accessible label properties.
-
-* inline-editable:
-
-- Removed the property` intlEnableEditing` , use
-  `messsageOverrides.enableEditing` instead.
-- Removed the property `intlCancelEditing` use
-  `messageOverrides.cancelEditing` instead.
-- Removed the property `intlConfirmChanges` use
-  `messageOverrides.confirmChanges` instead.
-
-* input-number:
-
-- Removed the property `intlClear` , use `messsageOverrides.clear`
-  instead.
-- Removed the property `intlLoading` , use `messsageOverrides.loading`
-  instead.
-
-* input-text:
-
-- Removed the property `intlClear` , use `messsageOverrides.clear`
-  instead.
-- Removed the property `intlLoading` , use `messsageOverrides.loading`
-  instead.
-
-* input:
-
-- Removed the property `intlClear` , use `messsageOverrides.clear`
-  instead.
-- Removed the property `intlLoading` , use `messsageOverrides.loading`
-  instead.
-
-* **scrim,rating,time-picker,input-time-picker,value-list:** Removed deprecated intl\* & accessible label properties.
-
-- rating:
-
-* Removed the property `intlStars` , use `messsageOverrides.stars`
-  instead.
-* Removed the property `intlRating` , use `messsageOverrides.rating`
-  instead.
-
-- scrim:
-
-* Removed the property `intlLoading` , use `messsageOverrides.loading`
-  instead.
-
-- time-picker:
-
-* Removed the property `intlHour`, use `messsageOverrides.hour` instead.
-* Removed the property `intlHourDown`, use `messsageOverrides.hourDown`
-  instead.
-* Removed the property `intlHourUp`, use `messsageOverrides.hourUp`
-  instead.
-* Removed the property `intlMeridiem`, use `messsageOverrides.meridiem`
-  instead.
-* Removed the property `intlMeridiemDown`, use
-  `messsageOverrides.meridiemDown` instead.
-* Removed the property `intlMeridiemUp`, use
-  `messsageOverrides.meridiemUp` instead.
-* Removed the property `intlMinute`, use `messsageOverrides.minute`
-  instead.
-* Removed the property `intlMinuteUp`, use `messsageOverrides.minuteUp`
-  instead.
-* Removed the property `intlMinuteDown`, use
-  `messsageOverrides.minuteDown` instead.
-* Removed the property `intlSecond`, use `messsageOverrides.second`
-  instead.
-* Removed the property `intlSecondUp`, use `messsageOverrides.secondUp`
-  instead.
-* Removed the property `intlSecondDown`, use
-  `messsageOverrides.secondDown` instead.
-
-- input-time-picker:
-
-* Removed the property `intlHour`, use `messsageOverrides.hour` instead.
-* Removed the property `intlHourDown`, use `messsageOverrides.hourDown`
-  instead.
-* Removed the property `intlHourUp`, use `messsageOverrides.hourUp`
-  instead.
-* Removed the property `intlMeridiem`, use `messsageOverrides.meridiem`
-  instead.
-* Removed the property `intlMeridiemDown`, use
-  `messsageOverrides.meridiemDown` instead.
-* Removed the property `intlMeridiemUp`, use
-  `messsageOverrides.meridiemUp` instead.
-* Removed the property `intlMinute`, use `messsageOverrides.minute`
-  instead.
-* Removed the property `intlMinuteUp`, use `messsageOverrides.minuteUp`
-  instead.
-* Removed the property `intlMinuteDown`, use
-  `messsageOverrides.minuteDown` instead.
-* Removed the property `intlSecond`, use `messsageOverrides.second`
-  instead.
-* Removed the property `intlSecondUp`, use `messsageOverrides.secondUp`
-  instead.
-* Removed the property `intlSecondDown`, use
-  `messsageOverrides.secondDown` instead.
-
-- value-list:
-
-* Removed the property `intlDragHandleActive` , use
-  `messsageOverrides.dragHandleActive` instead.
-* Removed the property `intlDragHandleChange` , use
-  `messsageOverrides.dragHandleChange` instead.
-* Removed the property `intlDragHandleCommit` , use
-  `messsageOverrides.dragHandleCommit` instead.
-* Removed the property `intlDragHandleIdle` , use
-  `messsageOverrides.dragHandleIdle` instead.
-
-- **chip,card,combobox,date-picker,flow,flow-item,filter, input-date-picker:** Removed deprecated intl\* & accessible label properties.
-
-* card:
-
-- Removed the property` intlLoading` , use `messsageOverrides.loading`
-  instead.
-- Removed the property `intlSelect` use `messageOverrides.select`
-  instead.
-- Removed the property `intlDeselect` use `messageOverrides.deselect`
-  instead.
-
-* chip:
-
-- Removed the property `dismissLabel` , use
-  `messsageOverrides.dismissLabel ` instead.
-
-* color-picker:
-  - Removed the property `intlB` , use `messsageOverrides.b` instead.
+  - Removed the `event.detail` property on the event
+    `calciteRatingChange`, use `event.target` instead.
+
+- **inline-editable,input,input-text,input-number:** Removed deprecated `intl\*` & accessible label properties.
+
+- **inline-editable:**
+
+  - Removed the property` intlEnableEditing`, use `messsageOverrides.enableEditing` instead.
+  - Removed the property `intlCancelEditing`, use `messageOverrides.cancelEditing` instead.
+  - Removed the property `intlConfirmChanges`, use `messageOverrides.confirmChanges` instead.
+
+- **input-number:**
+
+  - Removed the property `intlClear`, use `messsageOverrides.clear` instead.
+  - Removed the property `intlLoading`, use `messsageOverrides.loading` instead.
+
+- **input-text:**
+
+  - Removed the property `intlClear`, use `messsageOverrides.clear` instead.
+  - Removed the property `intlLoading`, use `messsageOverrides.loading` instead.
+
+- **input:**
+
+  - Removed the property `intlClear`, use `messsageOverrides.clear` instead.
+  - Removed the property `intlLoading`, use `messsageOverrides.loading` instead.
+
+- **scrim,rating,time-picker,input-time-picker,value-list:** Removed deprecated `intl\*` & accessible label properties.
+
+- **rating:**
+
+  - Removed the property `intlStars` , use `messsageOverrides.stars` instead.
+  - Removed the property `intlRating` , use `messsageOverrides.rating` instead.
+
+- **scrim:**
+
+  - Removed the property `intlLoading` , use `messsageOverrides.loading` instead.
+
+- **time-picker:**
+
+  - Removed the property `intlHour`, use `messsageOverrides.hour` instead.
+  - Removed the property `intlHourDown`, use `messsageOverrides.hourDown` instead.
+  - Removed the property `intlHourUp`, use `messsageOverrides.hourUp` instead.
+  - Removed the property `intlMeridiem`, use `messsageOverrides.meridiem` instead.
+  - Removed the property `intlMeridiemDown`, use `messsageOverrides.meridiemDown` instead.
+  - Removed the property `intlMeridiemUp`, use `messsageOverrides.meridiemUp` instead.
+  - Removed the property `intlMinute`, use `messsageOverrides.minute` instead.
+  - Removed the property `intlMinuteUp`, use `messsageOverrides.minuteUp` instead.
+  - Removed the property `intlMinuteDown`, use `messsageOverrides.minuteDown` instead.
+  - Removed the property `intlSecond`, use `messsageOverrides.second` instead.
+  - Removed the property `intlSecondUp`, use `messsageOverrides.secondUp` instead.
+  - Removed the property `intlSecondDown`, use `messsageOverrides.secondDown` instead.
+
+- **input-time-picker:**
+
+  - Removed the property `intlHour`, use `messsageOverrides.hour` instead.
+  - Removed the property `intlHourDown`, use `messsageOverrides.hourDown` instead.
+  - Removed the property `intlHourUp`, use `messsageOverrides.hourUp` instead.
+  - Removed the property `intlMeridiem`, use `messsageOverrides.meridiem` instead.
+  - Removed the property `intlMeridiemDown`, use`messsageOverrides.meridiemDown` instead.
+  - Removed the property `intlMeridiemUp`, use `messsageOverrides.meridiemUp` instead.
+  - Removed the property `intlMinute`, use `messsageOverrides.minute` instead.
+  - Removed the property `intlMinuteUp`, use `messsageOverrides.minuteUp` instead.
+  - Removed the property `intlMinuteDown`, use `messsageOverrides.minuteDown` instead.
+  - Removed the property `intlSecond`, use `messsageOverrides.second` instead.
+  - Removed the property `intlSecondUp`, use `messsageOverrides.secondUp` instead.
+  - Removed the property `intlSecondDown`, use `messsageOverrides.secondDown` instead.
+
+- **value-list:**
+
+  - Removed the property `intlDragHandleActive`, use `messsageOverrides.dragHandleActive` instead.
+  - Removed the property `intlDragHandleChange`, use `messsageOverrides.dragHandleChange` instead.
+  - Removed the property `intlDragHandleCommit`, use `messsageOverrides.dragHandleCommit` instead.
+  - Removed the property `intlDragHandleIdle`, use `messsageOverrides.dragHandleIdle` instead.
 
-- Removed the property `intlBlue` , use `messsageOverrides.blue`
-  instead.
-- Removed the property `intlDeleteColor` , use
-  `messsageOverrides.deleteColor` instead.
+- **chip,card,combobox,date-picker,flow,flow-item,filter, input-date-picker:** Removed deprecated `intl\*` & accessible label properties.
+
+- **card**:
+
+  - Removed the property `intlLoading` , use `messsageOverrides.loading`
+    instead.
+  - Removed the property `intlSelect` use `messageOverrides.select`
+    instead.
+  - Removed the property `intlDeselect` use `messageOverrides.deselect`
+    instead.
+
+- **chip**:
+
+  - Removed the property `dismissLabel` , use
+    `messsageOverrides.dismissLabel ` instead.
+
+- **color-picker:**
+
+  - Removed the property `intlB` , use `messsageOverrides.b` instead.
+  - Removed the property `intlBlue` , use `messsageOverrides.blue`
+    instead.
+  - Removed the property `intlDeleteColor` , use
+    `messsageOverrides.deleteColor` instead.
   - Removed the property `intlG` , use `messsageOverrides.g` instead.
-- Removed the property `intlGreen` , use `messsageOverrides.green`
-  instead.
+  - Removed the property `intlGreen` , use `messsageOverrides.green`
+    instead.
   - Removed the property `intlH` , use `messsageOverrides.h` instead.
-- Removed the property `intlHsv` , use `messsageOverrides.hsv` instead.
-- Removed the property `intlHex` , use `messsageOverrides.hex` instead.
-- Removed the property `intlHue` , use `messsageOverrides.hue` instead.
-- Removed the property `intlNoColor` , use `messsageOverrides.noColor`
-  instead.
+  - Removed the property `intlHsv` , use `messsageOverrides.hsv` instead.
+  - Removed the property `intlHex` , use `messsageOverrides.hex` instead.
+  - Removed the property `intlHue` , use `messsageOverrides.hue` instead.
+  - Removed the property `intlNoColor` , use `messsageOverrides.noColor`
+    instead.
   - Removed the property `intlR` , use `messsageOverrides.r` instead.
-- Removed the property `intlRed` , use `messsageOverrides.red` instead.
-- Removed the property `intlRgb` , use `messsageOverrides.rgb` instead.
+  - Removed the property `intlRed` , use `messsageOverrides.red` instead.
+  - Removed the property `intlRgb` , use `messsageOverrides.rgb` instead.
   - Removed the property `intlS` , use `messsageOverrides.s` instead.
-- Removed the property `intlSaturation` , use
-  `messsageOverrides.saturation` instead.
-- Removed the property `intlSaveColor` , use
-  `messsageOverrides.saveColor` instead.
-- Removed the property `intlSaved` , use `messsageOverrides.saved`
-  instead.
+  - Removed the property `intlSaturation` , use
+    `messsageOverrides.saturation` instead.
+  - Removed the property `intlSaveColor` , use
+    `messsageOverrides.saveColor` instead.
+  - Removed the property `intlSaved` , use `messsageOverrides.saved`
+    instead.
   - Removed the property `intlV` , use `messsageOverrides.v` instead.
-- Removed the property `intlValue` , use `messsageOverrides.value`
-  instead.
+  - Removed the property `intlValue` , use `messsageOverrides.value`
+    instead.
 
-* combobox:
+- **combobox:**
 
-- Removed the property `intlRemoveTag` , use
-  `messsageOverrides.removeTag` instead.
+  - Removed the property `intlRemoveTag` , use
+    `messsageOverrides.removeTag` instead.
 
-* date-picker
+- **date-picker:**
 
-- Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
-  instead.
-- Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
-  instead.
-- Removed the property `intlYear`, use `messageOverrides.year` instead.
+  - Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
+    instead.
+  - Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
+    instead.
+  - Removed the property `intlYear`, use `messageOverrides.year` instead.
 
-* flow-item:
+- **flow-item:**
 
-- Removed the property `intlBack` , use `messsageOverrides.back`
-  instead.
-- Removed the property `intlClose`, use `messageOverrides.close`
-  instead.
-- Removed the property `intlOptions` , use `messsageOverrides.options`
-  instead.
+  - Removed the property `intlBack` , use `messsageOverrides.back`
+    instead.
+  - Removed the property `intlClose`, use `messageOverrides.close`
+    instead.
+  - Removed the property `intlOptions` , use `messsageOverrides.options`
+    instead.
 
-* filter:
+- **filter:**
 
-- Removed the property `intlClear`, use `messsageOverrides.clear`
-  instead.
-- Removed the property `intlLabel`, use `messageOverrides.label`
-  instead.
+  - Removed the property `intlClear`, use `messsageOverrides.clear`
+    instead.
+  - Removed the property `intlLabel`, use `messageOverrides.label`
+    instead.
+
+- **input-date-picker:**
 
-* input-date-picker:
+  - Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
+    instead.
+  - Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
+    instead.
+  - Removed the property `intlYear`, use `messageOverrides.year` instead.
 
-- Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
-  instead.
-- Removed the property `intlPrevMonth`, use `messageOverrides.prevMonth`
-  instead.
-- Removed the property `intlYear`, use `messageOverrides.year` instead.
 - **action,action-bar,action-group,action-pad,alert,block-section,block,button:** Removed deprecated `intl*` properties , use
   `messageOverrides` property instead.
 
-* action:
+- **action:**
 
-- Removed the property `intlLoading` , use `messsageOverrides.loading`
-  instead.
-- Removed the property `intlIndicator`, use `messageOverrides.indicator`
-  instead.
-
-* action-bar:
+  - Removed the property `intlLoading` , use `messsageOverrides.loading`
+    instead.
+  - Removed the property `intlIndicator`, use `messageOverrides.indicator`
+    instead.
 
-- Removed the property `intlExpand` , use `messsageOverrides.expand`
-  instead.
-- Removed the property `intlCollapse`, use `messageOverrides.collapse`
-  instead.
+- **action-bar:**
 
-* action-group:
+  - Removed the property `intlExpand` , use `messsageOverrides.expand`
+    instead.
+  - Removed the property `intlCollapse`, use `messageOverrides.collapse`
+    instead.
 
-- Removed the property `intlMore` , use `messsageOverrides.more`
-  instead.
+- **action-group:**
 
-* action-pad:
+  - Removed the property `intlMore` , use `messsageOverrides.more`
+    instead.
 
-- Removed the property `intlExpand` , use `messsageOverrides.expand`
-  instead.
-- Removed the property `intlCollapse`, use `messageOverrides.collapse`
-  instead.
+- **action-pad**:
 
-* alert:
+  - Removed the property `intlExpand` , use `messsageOverrides.expand`
+    instead.
+  - Removed the property `intlCollapse`, use `messageOverrides.collapse`
+    instead.
 
-- Removed the property `intlClose`, use `messageOverrides.close`
-  instead.
+- **alert**:
 
-* block:
+  - Removed the property `intlClose`, use `messageOverrides.close`
+    instead.
 
-- Removed the property `intlExpand` , use `messsageOverrides.expand`
-  instead.
-- Removed the property `intlCollapse`, use `messageOverrides.collapse`
-  instead.
-- Removed the property `intlLoading` , use `messsageOverrides.loading`
-  instead.
-- Removed the property `intlOptions`, use `messageOverrides.options`
-  instead.
+- **block**:
 
-* block-section:
+  - Removed the property `intlExpand` , use `messsageOverrides.expand`
+    instead.
+  - Removed the property `intlCollapse`, use `messageOverrides.collapse`
+    instead.
+  - Removed the property `intlLoading` , use `messsageOverrides.loading`
+    instead.
+  - Removed the property `intlOptions`, use `messageOverrides.options`
+    instead.
 
-- Removed the property `intlExpand` , use `messsageOverrides.expand`
-  instead.
-- Removed the property `intlCollapse`, use `messageOverrides.collapse`
-  instead.
+- **block-section:**
 
-* button:
+  - Removed the property `intlExpand` , use `messsageOverrides.expand`
+    instead.
+  - Removed the property `intlCollapse`, use `messageOverrides.collapse`
+    instead.
 
-- Removed the property `intlLoading` , use `messsageOverrides.loading`
-  instead.
+- **button:**
 
-Signed-off-by: dependabot[bot] <support@github.com>
-Co-authored-by: JC Franco <jfranco@esri.com>
-Co-authored-by: Ben Elan <benelan@users.noreply.github.com>
-Co-authored-by: jona7150 <jturpin@esri.com>
-Co-authored-by: Ben Elan <belan@esri.com>
-Co-authored-by: Calcite Admin <calcite-admin@esri.com>
-Co-authored-by: jcfranco <jcfranco@users.noreply.github.com>
-Co-authored-by: Kitty Hurley <khurley@esri.com>
-Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
-Co-authored-by: Eliza Khachatryan <eli97736@esri.com>
-Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
-Co-authored-by: Matt Driscoll <mdriscoll@esri.com>
-Co-authored-by: Alison Stump <alisonailea@users.noreply.github.com>
+  - Removed the property `intlLoading` , use `messsageOverrides.loading`
+    instead.
 
 - **popover, dropdown, modal, pick-list-item, value-list-item:** Renamed `disable*` properties.
 
-* Dropdown
-* Renamed the property `disableCloseOnSelect`, use
-  `closeOnSelectDisabled` instead.
-* Modal
-* Renamed the property `disableCloseButton`, use `closeButtonDisabled`
-  instead.
-* Renamed the property `disableFocusTrap`, use `focusTrapDisabled`
-  instead.
-* Renamed the property `disableOutsideClose`, use `outsideCloseDisabled`
-  instead.
+- **dropdown:**
+
+  - Renamed the property `disableCloseOnSelect`, use
+    `closeOnSelectDisabled` instead.
+
+- **modal:**
+
+  - Renamed the property `disableCloseButton`, use `closeButtonDisabled`
+    instead.
+  - Renamed the property `disableFocusTrap`, use `focusTrapDisabled`
+    instead.
+  - Renamed the property `disableOutsideClose`, use `outsideCloseDisabled`
+    instead.
   - Renamed the property `disableEscape`, use `escapeDisabled` instead.
-* PickListItem
-* Renamed the property `disableDeselect`, use `deselectDisabled`
-  instead.
-* Popover
+
+- **pick-list-item:**
+
+  - Renamed the property `disableDeselect`, use `deselectDisabled`
+    instead.
+
+- **popover:**
+
   - Renamed the property `disableFlip`, use `flipDisabled` instead.
-* Renamed the property `disableFocusTrap`, use `focusTrapDisabled`
-  instead.
-* Renamed the property `disablePointer`, use `pointerDisabled` instead.
-* ValueListItem
-* Renamed the property `disableDeselect`, use `deselectDisabled`
-  instead.
+  - Renamed the property `disableFocusTrap`, use `focusTrapDisabled`
+    instead.
+  - Renamed the property `disablePointer`, use `pointerDisabled` instead.
+
+- **value-list-item:**
+
+  - Renamed the property `disableDeselect`, use `deselectDisabled`
+    instead.
 
 - **input-date-picker:** Removed the `calciteDatePickerChange` event, use
   `calciteInputDatePickerChange` instead.
 
-* **date-picker:** Removed the `start` and `end` properties, set `value`
+- **date-picker:** Removed the `start` and `end` properties, set `value`
   as an array with the start as the first value and the end as the second
   value instead.
 
 - **combobox:** Renamed event.
 
-* Renamed the event `calciteComboboxChipDismiss`, use
-  `calciteComboboxChipClose` instead.
+  - Renamed the event `calciteComboboxChipDismiss`, use
+    `calciteComboboxChipClose` instead.
 
 - **alert:** Renamed properties.
 
-* Renamed the property `autoDismiss`, use `autoClose` instead.
-* Renamed the property `autoDismissDuration`, use `autoCloseDuration`
-  instead.
+  - Renamed the property `autoDismiss`, use `autoClose` instead.
+  - Renamed the property `autoDismissDuration`, use `autoCloseDuration`
+    instead.
 
 - **combobox:** Removed `event.detail` payload from events and added
   properties `selectedItems` and `filteredItems`.
 
-* Removed the `event.detail` property on the event
-  `calciteComboboxChange`, use `event.target.selectedItems` instead.
-* Removed the `event.detail` property on the event
-  `calciteComboboxFilterChange`, use `event.target.filteredItems` or
-  `event.target.value` instead.
+  - Removed the `event.detail` property on the event
+    `calciteComboboxChange`, use `event.target.selectedItems` instead.
+  - Removed the `event.detail` property on the event
+    `calciteComboboxFilterChange`, use `event.target.filteredItems` or
+    `event.target.value` instead.
 
 - **chip:** Renamed event.
 
-* Renamed the event `calciteChipDismiss`, use `calciteChipClose`
-  instead.
+  - Renamed the event `calciteChipDismiss`, use `calciteChipClose`
+    instead.
 
 - **tip:** Renamed property.
 
-* Renamed the property `nonDismissible`, use `closeDisabled` instead.
+  - Renamed the property `nonDismissible`, use `closeDisabled` instead.
 
 - **date-picker:** Removed `event.detail` payload from events.
 
-* Removed the `event.detail` property on the event
-  `calciteDatePickerChange`, use `event.target` instead.
-* Removed the `event.detail` property on the event
-  `calciteDatePickerRangeChange`, use `event.target` instead.
+  - Removed the `event.detail` property on the event
+    `calciteDatePickerChange`, use `event.target` instead.
+  - Removed the `event.detail` property on the event
+    `calciteDatePickerRangeChange`, use `event.target` instead.
 
-* **modal:** Removed deprecated properties and method.
+- **modal:** Removed deprecated properties and method.
 
-- Removed the property `active`, use `open` instead.
-- Removed the property noPadding, use `--calcite-modal-padding` CSS
-  property instead.
-- Removed the method `focusElement`, use `setFocus` method instead.
-- Removed the CSS property ` --calcite-modal-content-text`.
-- Removed the CSS property `--calcite-modal-padding-large`.
-- Removed the CSS property `--calcite-modal-title-text`.
+  - Removed the property `active`, use `open` instead.
+  - Removed the property noPadding, use `--calcite-modal-padding` CSS
+    property instead.
+  - Removed the method `focusElement`, use `setFocus` method instead.
+  - Removed the CSS property ` --calcite-modal-content-text`.
+  - Removed the CSS property `--calcite-modal-padding-large`.
+  - Removed the CSS property `--calcite-modal-title-text`.
 
-* **pagination:** Removed deprecated event.
+- **pagination:** Removed deprecated event.
 
-Removed the event `calcitePaginationUpdate` event, use
-`calcitePaginationChange` event instead.
+  - Removed the event `calcitePaginationUpdate` event, use
+    `calcitePaginationChange` event instead.
 
 - **loader:** Removed deprecated properties.
 
-* Removed the property `active`, use global attribute `hidden` instead.
-* Removed the property `noPadding`, use `--calcite-loader-padding` CSS
-  property instead.
+  - Removed the property `active`, use global attribute `hidden` instead.
+  - Removed the property `noPadding`, use `--calcite-loader-padding` CSS
+    property instead.
 
-* **label:** The default display for label is now `flex` instead of
+- **label:** The default display for label is now `flex` instead of
   `inline`.
 
   - Use `--calcite-label-margin-bottom` CSS variable to disable space when
     in `layout` is `inline`.
 
-* **tabs:** Removed slot.
+- **tabs:** Removed slot.
 
   - Removed the slot `tab-nav`, use `title-group` instead.
 
-* **dropdown:** Removed slot.
+- **dropdown:** Removed slot.
 
   - Removed the slot `dropdown-trigger`, use `trigger` instead.
 
-* **action-menu:** Removed event.
+- **action-menu:** Removed event.
 
   - Removed the event `calciteActionMenuOpenChange`, use
     `calciteActionMenuOpen` instead.

From e1f5d7b8f6c71df3e2952cac03d40c8329aa2c93 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Thu, 15 Dec 2022 09:42:55 -0800
Subject: [PATCH 17/21] refactor(tree)!: remove `event.detail` payload from
 events (#6051)

BREAKING CHANGE: Removed `event.detail` payload from events and added
`selectedItems` property.

- Added property `selectedItems`.
- Removed the `event.detail` property on the event `calciteTreeSelect`,
use `event.target` instead.
---
 src/components/tree/interfaces.ts |  4 ---
 src/components/tree/tree.e2e.ts   | 60 ++++++++-----------------------
 src/components/tree/tree.tsx      | 31 ++++++++--------
 src/demos/tree.html               |  8 ++---
 4 files changed, 35 insertions(+), 68 deletions(-)

diff --git a/src/components/tree/interfaces.ts b/src/components/tree/interfaces.ts
index 593b0386e3d..d98449e7dac 100644
--- a/src/components/tree/interfaces.ts
+++ b/src/components/tree/interfaces.ts
@@ -1,5 +1 @@
-export interface TreeSelectDetail {
-  selected: HTMLCalciteTreeItemElement[];
-}
-
 export type TreeSelectionMode = "single" | "multi" | "none" | "children" | "multichildren" | "ancestors" | "multiple";
diff --git a/src/components/tree/tree.e2e.ts b/src/components/tree/tree.e2e.ts
index 6d5a93d8bc5..f0e88c991f8 100644
--- a/src/components/tree/tree.e2e.ts
+++ b/src/components/tree/tree.e2e.ts
@@ -298,35 +298,25 @@ describe("calcite-tree", () => {
           </calcite-tree>`
         });
 
-        const [item1, item2] = await page.findAll("calcite-tree-item");
-
-        type TestWindow = GlobalTestProps<{
-          selectedIds: string[];
-        }>;
-
-        await page.evaluateHandle(() =>
-          document.addEventListener("calciteTreeSelect", ({ detail }: CustomEvent) => {
-            (window as TestWindow).selectedIds = detail.selected.map((item) => item.id);
-          })
-        );
+        const tree = await page.find("calcite-tree");
 
-        const getSelectedIds = async (): Promise<any> => page.evaluate(() => (window as TestWindow).selectedIds);
+        const [item1, item2] = await page.findAll("calcite-tree-item");
 
         await item1.click();
 
-        expect(await getSelectedIds()).toEqual(["1"]);
+        expect(await tree.getProperty("selectedItems")).toHaveLength(1);
 
         await item2.click();
 
-        expect(await getSelectedIds()).toEqual(["1", "2"]);
+        expect(await tree.getProperty("selectedItems")).toHaveLength(2);
 
         await item2.click();
 
-        expect(await getSelectedIds()).toEqual(["1"]);
+        expect(await tree.getProperty("selectedItems")).toHaveLength(1);
 
         await item1.click();
 
-        expect(await getSelectedIds()).toEqual([]);
+        expect(await tree.getProperty("selectedItems")).toEqual([]);
       });
 
       it("contains current selection when selection=multichildren", async () => {
@@ -344,35 +334,25 @@ describe("calcite-tree", () => {
           </calcite-tree>`
         );
 
-        const [item1, item2, item3, item4] = await page.findAll("calcite-tree-item");
-
-        type TestWindow = GlobalTestProps<{
-          selectedIds: string[];
-        }>;
+        const tree = await page.find("calcite-tree");
 
-        await page.evaluateHandle(() =>
-          document.addEventListener("calciteTreeSelect", ({ detail }: CustomEvent) => {
-            (window as TestWindow).selectedIds = detail.selected.map((item) => item.id);
-          })
-        );
-
-        const getSelectedIds = async (): Promise<any> => page.evaluate(() => (window as TestWindow).selectedIds);
+        const [item1, item2, item3, item4] = await page.findAll("calcite-tree-item");
 
         await item1.click();
 
-        expect(await getSelectedIds()).toEqual(["1"]);
+        expect(await tree.getProperty("selectedItems")).toHaveLength(1);
 
         await item2.click();
 
-        expect(await getSelectedIds()).toEqual(["1", "2", "4"]);
+        expect(await tree.getProperty("selectedItems")).toHaveLength(3);
 
         await item3.click();
 
-        expect(await getSelectedIds()).toEqual(["1", "2", "4"]);
+        expect(await tree.getProperty("selectedItems")).toHaveLength(3);
 
         await item4.click();
 
-        expect(await getSelectedIds()).toEqual(["1", "2"]);
+        expect(await tree.getProperty("selectedItems")).toHaveLength(2);
       });
     });
 
@@ -421,30 +401,18 @@ describe("calcite-tree", () => {
           </calcite-tree>
         `);
 
-        type TestWindow = GlobalTestProps<{
-          selectedIds: string[];
-        }>;
-
-        await page.evaluateHandle(() =>
-          document.addEventListener("calciteTreeSelect", ({ detail }: CustomEvent) => {
-            (window as TestWindow).selectedIds = detail.selected.map((item) => item.id);
-          })
-        );
-
-        const getSelectedIds = async (): Promise<any> => page.evaluate(() => (window as TestWindow).selectedIds);
-
         const tree = await page.find(`calcite-tree`);
         const selectEventSpy = await tree.spyOnEvent("calciteTreeSelect");
         const [item1, item2] = await page.findAll(`calcite-tree-item`);
 
         await item1.click();
         expect(selectEventSpy).toHaveReceivedEventTimes(1);
-        expect(await getSelectedIds()).toEqual(["1"]);
+        expect(await tree.getProperty("selectedItems")).toHaveLength(1);
         expect(await page.findAll("calcite-tree-item[selected]")).toHaveLength(0);
 
         await item2.click();
         expect(selectEventSpy).toHaveReceivedEventTimes(2);
-        expect(await getSelectedIds()).toEqual(["2"]);
+        expect(await tree.getProperty("selectedItems")).toHaveLength(1);
         expect(await page.findAll("calcite-tree-item[selected]")).toHaveLength(0);
       });
     });
diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index 30a6d930928..8ba172b800f 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -11,7 +11,7 @@ import {
 } from "@stencil/core";
 import { focusElement, getRootNode, nodeListToArray } from "../../utils/dom";
 import { TreeItemSelectDetail } from "../tree-item/interfaces";
-import { TreeSelectDetail, TreeSelectionMode } from "./interfaces";
+import { TreeSelectionMode } from "./interfaces";
 import { Scale } from "../interfaces";
 import { getEnabledSiblingItem } from "./utils";
 
@@ -57,6 +57,13 @@ export class Tree {
    */
   @Prop({ mutable: true, reflect: true }) selectionMode: TreeSelectionMode = "single";
 
+  /**
+   * Specifies the component's selected items.
+   *
+   * @readonly
+   */
+  @Prop({ mutable: true }) selectedItems: HTMLCalciteTreeItemElement[] = [];
+
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -228,13 +235,13 @@ export class Tree {
       }
     }
 
-    const selected = isNoneSelectionMode
+    this.selectedItems = isNoneSelectionMode
       ? [target]
       : (nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter(
           (i) => i.selected
         ) as HTMLCalciteTreeItemElement[]);
 
-    this.calciteTreeSelect.emit({ selected });
+    this.calciteTreeSelect.emit();
 
     event.stopPropagation();
   }
@@ -373,13 +380,11 @@ export class Tree {
       ancestor.selected = !indeterminate;
     });
 
-    this.calciteTreeSelect.emit({
-      selected: (
-        nodeListToArray(
-          this.el.querySelectorAll("calcite-tree-item")
-        ) as HTMLCalciteTreeItemElement[]
-      ).filter((i) => i.selected)
-    });
+    this.selectedItems = (
+      nodeListToArray(this.el.querySelectorAll("calcite-tree-item")) as HTMLCalciteTreeItemElement[]
+    ).filter((i) => i.selected);
+
+    this.calciteTreeSelect.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -388,11 +393,9 @@ export class Tree {
   //--------------------------------------------------------------------------
 
   /**
-   * Fires when the user selects/deselects `calcite-tree-items`. An object including an array of selected items will be passed in the event's `detail` property.
-   *
-   * @see [TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L1)
+   * Fires when the user selects/deselects `calcite-tree-items`.
    */
-  @Event({ cancelable: false }) calciteTreeSelect: EventEmitter<TreeSelectDetail>;
+  @Event({ cancelable: false }) calciteTreeSelect: EventEmitter<void>;
 
   // --------------------------------------------------------------------------
   //
diff --git a/src/demos/tree.html b/src/demos/tree.html
index cdf1a5f41f8..5e7c35ded9d 100644
--- a/src/demos/tree.html
+++ b/src/demos/tree.html
@@ -503,8 +503,8 @@ <h1 style="margin: 0 auto; text-align: center">Tree</h1>
             const tree_small = document.getElementById("tree-events-demo-tree-small");
             const result_small = document.getElementById("tree-events-demo-result-small");
             tree_small.addEventListener("calciteTreeSelect", function (e) {
-              console.log(e.detail.selected);
-              result_small.textContent = e.detail.selected.length + " Selected";
+              console.log(e.target.selectedItems);
+              result_small.textContent = e.target.selectedItems.length + " Selected";
             });
           })();
 
@@ -512,8 +512,8 @@ <h1 style="margin: 0 auto; text-align: center">Tree</h1>
             const tree_medium = document.getElementById("tree-events-demo-tree-medium");
             const result_medium = document.getElementById("tree-events-demo-result-medium");
             tree_medium.addEventListener("calciteTreeSelect", function (e) {
-              console.log(e.detail.selected);
-              result_medium.textContent = e.detail.selected.length + " Selected";
+              console.log(e.target.selectedItems);
+              result_medium.textContent = e.target.selectedItems.length + " Selected";
             });
           })();
         </script>

From 3c7fc92c6323af534e3c3e206bc0cefbcc265218 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Thu, 15 Dec 2022 09:43:14 -0800
Subject: [PATCH 18/21] refactor(tab-nav, tab-title)!: remove `event.detail`
 payload from events (#6046)

BREAKING CHANGE: Removed `event.detail` payload from events.

- TabNav
- Removed the `event.detail` property on the event `calciteTabChange`,
use `event.target` instead.
- TabTitle
- Removed the `event.detail` property on the event
`calciteTabsActivate`, use `event.target` instead.
---
 src/components/tab-nav/tab-nav.tsx     | 12 +++---------
 src/components/tab-title/tab-title.tsx |  6 ++----
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/components/tab-nav/tab-nav.tsx b/src/components/tab-nav/tab-nav.tsx
index 2a76568caac..093bf72165a 100644
--- a/src/components/tab-nav/tab-nav.tsx
+++ b/src/components/tab-nav/tab-nav.tsx
@@ -234,12 +234,8 @@ export class TabNav {
     event.preventDefault();
   }
 
-  @Listen("calciteTabsActivate") activateTabHandler(
-    event: CustomEvent<TabChangeEventDetail>
-  ): void {
-    this.calciteTabChange.emit({
-      tab: this.selectedTab
-    });
+  @Listen("calciteTabsActivate") activateTabHandler(event: CustomEvent<void>): void {
+    this.calciteTabChange.emit();
 
     event.stopPropagation();
     event.preventDefault();
@@ -283,10 +279,8 @@ export class TabNav {
 
   /**
    * Emits when the selected `calcite-tab` changes.
-   *
-   * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
    */
-  @Event({ cancelable: false }) calciteTabChange: EventEmitter<TabChangeEventDetail>;
+  @Event({ cancelable: false }) calciteTabChange: EventEmitter<void>;
 
   /**
    * @internal
diff --git a/src/components/tab-title/tab-title.tsx b/src/components/tab-title/tab-title.tsx
index e00b7960cbc..2e91edbf68a 100644
--- a/src/components/tab-title/tab-title.tsx
+++ b/src/components/tab-title/tab-title.tsx
@@ -272,10 +272,8 @@ export class TabTitle implements InteractiveComponent {
 
   /**
    * Fires when a `calcite-tab` is selected. Emits the `tab` property, or the index position.
-   *
-   * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
    */
-  @Event({ cancelable: false }) calciteTabsActivate: EventEmitter<TabChangeEventDetail>;
+  @Event({ cancelable: false }) calciteTabsActivate: EventEmitter<void>;
 
   /**
    * Fires when a `calcite-tab` is selected (`event.details`).
@@ -392,7 +390,7 @@ export class TabTitle implements InteractiveComponent {
     this.calciteInternalTabsActivate.emit(payload);
 
     if (userTriggered) {
-      this.calciteTabsActivate.emit(payload);
+      this.calciteTabsActivate.emit();
     }
   }
 

From 3957170e96002fdd5521b9490009a05c0da86a1b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 15 Dec 2022 17:57:04 +0000
Subject: [PATCH 19/21] 1.0.0-next.684

---
 CHANGELOG.md      | 198 +++++++++++++++++++++++++---------------------
 package-lock.json |   4 +-
 package.json      |   2 +-
 3 files changed, 110 insertions(+), 94 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a48ca5d34b6..7ae7540a427 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,56 +9,72 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### ⚠ BREAKING CHANGES
 
-- **pagination:** Removed `event.detail` payload from events.
+- **tab-nav, tab-title:** Removed `event.detail` payload from events.
+
+* TabNav
+* Removed the `event.detail` property on the event `calciteTabChange`,
+  use `event.target` instead.
+* TabTitle
+* Removed the `event.detail` property on the event
+  `calciteTabsActivate`, use `event.target` instead.
+
+- **tree:** Removed `event.detail` payload from events and added
+  `selectedItems` property.
+
+* Added property `selectedItems`.
+* Removed the `event.detail` property on the event `calciteTreeSelect`,
+  use `event.target` instead.
+
+* **pagination:** Removed `event.detail` payload from events.
 
   - Removed the `event.detail` property on the event
     `calcitePaginationChange`, use `event.target` instead.
 
-- **dropdown:** Removed `event.detail` payload from events.
+* **dropdown:** Removed `event.detail` payload from events.
 
   - Removed the `event.detail` property on the event
     `calciteDropdownSelect`, use `event.target` instead.
 
-- **rating:** Removed `event.detail` payload from events.
+* **rating:** Removed `event.detail` payload from events.
 
   - Removed the `event.detail` property on the event
     `calciteRatingChange`, use `event.target` instead.
 
-- **inline-editable,input,input-text,input-number:** Removed deprecated `intl\*` & accessible label properties.
+* **inline-editable,input,input-text,input-number:** Removed deprecated `intl\*` & accessible label properties.
 
-- **inline-editable:**
+* **inline-editable:**
 
   - Removed the property` intlEnableEditing`, use `messsageOverrides.enableEditing` instead.
   - Removed the property `intlCancelEditing`, use `messageOverrides.cancelEditing` instead.
   - Removed the property `intlConfirmChanges`, use `messageOverrides.confirmChanges` instead.
 
-- **input-number:**
+* **input-number:**
 
   - Removed the property `intlClear`, use `messsageOverrides.clear` instead.
   - Removed the property `intlLoading`, use `messsageOverrides.loading` instead.
 
-- **input-text:**
+* **input-text:**
 
   - Removed the property `intlClear`, use `messsageOverrides.clear` instead.
   - Removed the property `intlLoading`, use `messsageOverrides.loading` instead.
 
-- **input:**
+* **input:**
 
   - Removed the property `intlClear`, use `messsageOverrides.clear` instead.
   - Removed the property `intlLoading`, use `messsageOverrides.loading` instead.
 
-- **scrim,rating,time-picker,input-time-picker,value-list:** Removed deprecated `intl\*` & accessible label properties.
+* **scrim,rating,time-picker,input-time-picker,value-list:** Removed deprecated `intl\*` & accessible label properties.
 
-- **rating:**
+* **rating:**
 
   - Removed the property `intlStars` , use `messsageOverrides.stars` instead.
   - Removed the property `intlRating` , use `messsageOverrides.rating` instead.
 
-- **scrim:**
+* **scrim:**
 
   - Removed the property `intlLoading` , use `messsageOverrides.loading` instead.
 
-- **time-picker:**
+* **time-picker:**
 
   - Removed the property `intlHour`, use `messsageOverrides.hour` instead.
   - Removed the property `intlHourDown`, use `messsageOverrides.hourDown` instead.
@@ -73,7 +89,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `intlSecondUp`, use `messsageOverrides.secondUp` instead.
   - Removed the property `intlSecondDown`, use `messsageOverrides.secondDown` instead.
 
-- **input-time-picker:**
+* **input-time-picker:**
 
   - Removed the property `intlHour`, use `messsageOverrides.hour` instead.
   - Removed the property `intlHourDown`, use `messsageOverrides.hourDown` instead.
@@ -88,16 +104,16 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `intlSecondUp`, use `messsageOverrides.secondUp` instead.
   - Removed the property `intlSecondDown`, use `messsageOverrides.secondDown` instead.
 
-- **value-list:**
+* **value-list:**
 
   - Removed the property `intlDragHandleActive`, use `messsageOverrides.dragHandleActive` instead.
   - Removed the property `intlDragHandleChange`, use `messsageOverrides.dragHandleChange` instead.
   - Removed the property `intlDragHandleCommit`, use `messsageOverrides.dragHandleCommit` instead.
   - Removed the property `intlDragHandleIdle`, use `messsageOverrides.dragHandleIdle` instead.
 
-- **chip,card,combobox,date-picker,flow,flow-item,filter, input-date-picker:** Removed deprecated `intl\*` & accessible label properties.
+* **chip,card,combobox,date-picker,flow,flow-item,filter, input-date-picker:** Removed deprecated `intl\*` & accessible label properties.
 
-- **card**:
+* **card**:
 
   - Removed the property `intlLoading` , use `messsageOverrides.loading`
     instead.
@@ -106,12 +122,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `intlDeselect` use `messageOverrides.deselect`
     instead.
 
-- **chip**:
+* **chip**:
 
   - Removed the property `dismissLabel` , use
     `messsageOverrides.dismissLabel ` instead.
 
-- **color-picker:**
+* **color-picker:**
 
   - Removed the property `intlB` , use `messsageOverrides.b` instead.
   - Removed the property `intlBlue` , use `messsageOverrides.blue`
@@ -141,12 +157,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `intlValue` , use `messsageOverrides.value`
     instead.
 
-- **combobox:**
+* **combobox:**
 
   - Removed the property `intlRemoveTag` , use
     `messsageOverrides.removeTag` instead.
 
-- **date-picker:**
+* **date-picker:**
 
   - Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
     instead.
@@ -154,7 +170,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
     instead.
   - Removed the property `intlYear`, use `messageOverrides.year` instead.
 
-- **flow-item:**
+* **flow-item:**
 
   - Removed the property `intlBack` , use `messsageOverrides.back`
     instead.
@@ -163,14 +179,14 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `intlOptions` , use `messsageOverrides.options`
     instead.
 
-- **filter:**
+* **filter:**
 
   - Removed the property `intlClear`, use `messsageOverrides.clear`
     instead.
   - Removed the property `intlLabel`, use `messageOverrides.label`
     instead.
 
-- **input-date-picker:**
+* **input-date-picker:**
 
   - Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
     instead.
@@ -178,41 +194,41 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
     instead.
   - Removed the property `intlYear`, use `messageOverrides.year` instead.
 
-- **action,action-bar,action-group,action-pad,alert,block-section,block,button:** Removed deprecated `intl*` properties , use
+* **action,action-bar,action-group,action-pad,alert,block-section,block,button:** Removed deprecated `intl*` properties , use
   `messageOverrides` property instead.
 
-- **action:**
+* **action:**
 
   - Removed the property `intlLoading` , use `messsageOverrides.loading`
     instead.
   - Removed the property `intlIndicator`, use `messageOverrides.indicator`
     instead.
 
-- **action-bar:**
+* **action-bar:**
 
   - Removed the property `intlExpand` , use `messsageOverrides.expand`
     instead.
   - Removed the property `intlCollapse`, use `messageOverrides.collapse`
     instead.
 
-- **action-group:**
+* **action-group:**
 
   - Removed the property `intlMore` , use `messsageOverrides.more`
     instead.
 
-- **action-pad**:
+* **action-pad**:
 
   - Removed the property `intlExpand` , use `messsageOverrides.expand`
     instead.
   - Removed the property `intlCollapse`, use `messageOverrides.collapse`
     instead.
 
-- **alert**:
+* **alert**:
 
   - Removed the property `intlClose`, use `messageOverrides.close`
     instead.
 
-- **block**:
+* **block**:
 
   - Removed the property `intlExpand` , use `messsageOverrides.expand`
     instead.
@@ -223,26 +239,26 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `intlOptions`, use `messageOverrides.options`
     instead.
 
-- **block-section:**
+* **block-section:**
 
   - Removed the property `intlExpand` , use `messsageOverrides.expand`
     instead.
   - Removed the property `intlCollapse`, use `messageOverrides.collapse`
     instead.
 
-- **button:**
+* **button:**
 
   - Removed the property `intlLoading` , use `messsageOverrides.loading`
     instead.
 
-- **popover, dropdown, modal, pick-list-item, value-list-item:** Renamed `disable*` properties.
+* **popover, dropdown, modal, pick-list-item, value-list-item:** Renamed `disable*` properties.
 
-- **dropdown:**
+* **dropdown:**
 
   - Renamed the property `disableCloseOnSelect`, use
     `closeOnSelectDisabled` instead.
 
-- **modal:**
+* **modal:**
 
   - Renamed the property `disableCloseButton`, use `closeButtonDisabled`
     instead.
@@ -252,42 +268,42 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
     instead.
   - Renamed the property `disableEscape`, use `escapeDisabled` instead.
 
-- **pick-list-item:**
+* **pick-list-item:**
 
   - Renamed the property `disableDeselect`, use `deselectDisabled`
     instead.
 
-- **popover:**
+* **popover:**
 
   - Renamed the property `disableFlip`, use `flipDisabled` instead.
   - Renamed the property `disableFocusTrap`, use `focusTrapDisabled`
     instead.
   - Renamed the property `disablePointer`, use `pointerDisabled` instead.
 
-- **value-list-item:**
+* **value-list-item:**
 
   - Renamed the property `disableDeselect`, use `deselectDisabled`
     instead.
 
-- **input-date-picker:** Removed the `calciteDatePickerChange` event, use
+* **input-date-picker:** Removed the `calciteDatePickerChange` event, use
   `calciteInputDatePickerChange` instead.
 
-- **date-picker:** Removed the `start` and `end` properties, set `value`
+* **date-picker:** Removed the `start` and `end` properties, set `value`
   as an array with the start as the first value and the end as the second
   value instead.
 
-- **combobox:** Renamed event.
+* **combobox:** Renamed event.
 
   - Renamed the event `calciteComboboxChipDismiss`, use
     `calciteComboboxChipClose` instead.
 
-- **alert:** Renamed properties.
+* **alert:** Renamed properties.
 
   - Renamed the property `autoDismiss`, use `autoClose` instead.
   - Renamed the property `autoDismissDuration`, use `autoCloseDuration`
     instead.
 
-- **combobox:** Removed `event.detail` payload from events and added
+* **combobox:** Removed `event.detail` payload from events and added
   properties `selectedItems` and `filteredItems`.
 
   - Removed the `event.detail` property on the event
@@ -296,23 +312,23 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
     `calciteComboboxFilterChange`, use `event.target.filteredItems` or
     `event.target.value` instead.
 
-- **chip:** Renamed event.
+* **chip:** Renamed event.
 
   - Renamed the event `calciteChipDismiss`, use `calciteChipClose`
     instead.
 
-- **tip:** Renamed property.
+* **tip:** Renamed property.
 
   - Renamed the property `nonDismissible`, use `closeDisabled` instead.
 
-- **date-picker:** Removed `event.detail` payload from events.
+* **date-picker:** Removed `event.detail` payload from events.
 
   - Removed the `event.detail` property on the event
     `calciteDatePickerChange`, use `event.target` instead.
   - Removed the `event.detail` property on the event
     `calciteDatePickerRangeChange`, use `event.target` instead.
 
-- **modal:** Removed deprecated properties and method.
+* **modal:** Removed deprecated properties and method.
 
   - Removed the property `active`, use `open` instead.
   - Removed the property noPadding, use `--calcite-modal-padding` CSS
@@ -322,37 +338,37 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the CSS property `--calcite-modal-padding-large`.
   - Removed the CSS property `--calcite-modal-title-text`.
 
-- **pagination:** Removed deprecated event.
+* **pagination:** Removed deprecated event.
 
   - Removed the event `calcitePaginationUpdate` event, use
     `calcitePaginationChange` event instead.
 
-- **loader:** Removed deprecated properties.
+* **loader:** Removed deprecated properties.
 
   - Removed the property `active`, use global attribute `hidden` instead.
   - Removed the property `noPadding`, use `--calcite-loader-padding` CSS
     property instead.
 
-- **label:** The default display for label is now `flex` instead of
+* **label:** The default display for label is now `flex` instead of
   `inline`.
 
   - Use `--calcite-label-margin-bottom` CSS variable to disable space when
     in `layout` is `inline`.
 
-- **tabs:** Removed slot.
+* **tabs:** Removed slot.
 
   - Removed the slot `tab-nav`, use `title-group` instead.
 
-- **dropdown:** Removed slot.
+* **dropdown:** Removed slot.
 
   - Removed the slot `dropdown-trigger`, use `trigger` instead.
 
-- **action-menu:** Removed event.
+* **action-menu:** Removed event.
 
   - Removed the event `calciteActionMenuOpenChange`, use
     `calciteActionMenuOpen` instead.
 
-- **combobox:** Removed deprecated properties, events, and event
+* **combobox:** Removed deprecated properties, events, and event
   payload.
 
   - Removed the property `active`, use `open` instead.
@@ -362,53 +378,53 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
     `calciteComboboxChipDismiss`, use the `value` property on the
     component to determine the removed value instead.
 
-- **combobox-item:** Removed deprecated property.
+* **combobox-item:** Removed deprecated property.
 
   - Removed the property `constant`, use `filterDisable` instead.
 
-- **action-menu:** Removed event.
+* **action-menu:** Removed event.
 
   - Removed the event `calciteActionMenuOpenChange`, use
     `calciteActionMenuOpen` instead.
 
-- **input-message:** removed deprecated properties
+* **input-message:** removed deprecated properties
 
   - Removed `active` property, use the global `hidden` attribute instead.
   - Removed `type` property, "floating" is no longer supported.
 
-- **input-text:** remove deprecated event payload
+* **input-text:** remove deprecated event payload
 
   - Removed `calciteInputTextInput` event payload, use the event's
     `target`/`currentTarget` instead.
 
-- **date-picker:** Removed deprecated properties
+* **date-picker:** Removed deprecated properties
 
   - Removed the `locale` property, use `lang` instead.
 
-- **input-date-picker:** Removed deprecated properties
+* **input-date-picker:** Removed deprecated properties
 
   - Removed the `active` property, use `open` instead.
   - Removed the `locale` property, use `lang` instead.
 
-- **input-time-picker:** Removed deprecated property
+* **input-time-picker:** Removed deprecated property
 
   - Removed the `active` property, use `open` instead.
 
-- **time-picker:** Removed deprecated property
+* **time-picker:** Removed deprecated property
 
   Removed the `locale` property, use `lang` instead.
 
-- **input:** remove deprecated properties and event payload.
+* **input:** remove deprecated properties and event payload.
 
   - Removed `maxlength` property, use `maxLength` instead.
   - Removed `locale` property, use `lang` instead.
   - Removed `calciteInputInput`'s `el`/`value` event payload properties, use the event's `target`/`currentTarget` instead.
 
-- **handle:** Removed deprecated event payload property on `calciteHandleNudge`.
+* **handle:** Removed deprecated event payload property on `calciteHandleNudge`.
 
   - Removed the `event.detail.handle` property on the event `calciteHandleNudge`, use `event.target` instead.
 
-- **tabs, tab-nav, tab-title, tab:** Removed deprecated properties and values.
+* **tabs, tab-nav, tab-title, tab:** Removed deprecated properties and values.
 
   - Removed the property `active` from `calcite-tab-title`, use `selected`
     instead.
@@ -419,20 +435,20 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the `below` value from the `position` property on
     `calcite-tabs`, use `bottom` instead.
 
-- **switch:** Removed deprecated `switched` property and
+* **switch:** Removed deprecated `switched` property and
   `calciteSwitchChange` event payload.
 
   - Removed the property `switched`, use `checked` instead.
   - Removed the `event.detail` from `calciteSwitchChange`, use
     `event.target.checked` instead.
 
-- **input-number:** remove deprecated property and event payload
+* **input-number:** remove deprecated property and event payload
 
   - Removed `locale` property, use `lang` instead.
   - Removed `calciteInputNumberInput` event payload properties, use the
     event's `target`/`currentTarget` instead.
 
-- **label:** Removed deprecated properties.
+* **label:** Removed deprecated properties.
 
   - Removed the property `status`, set the `status` property on the
     component the label is bound to instead.
@@ -441,64 +457,64 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `disableSpacing`, use the CSS variable
     `--calcite-label-margin-bottom` instead.
 
-- **stepper-item:** Removed deprecated properties.
+* **stepper-item:** Removed deprecated properties.
 
   - Removed the property `active`, use `selected` instead.
   - Removed the property `itemTitle`, use `heading` instead.
   - Removed the property `itemSubtitle`, use `description` instead.
 
-- **radio-group-item:** Removed deprecated properties.
+* **radio-group-item:** Removed deprecated properties.
 
   - Removed the property `icon`, use either `iconStart` or `iconEnd`
     instead.
   - Removed the property `iconPosition`, use either `iconStart` or
     `iconEnd` instead.
 
-- **split-button:** Removed the `event.detail` payload from the events
+* **split-button:** Removed the `event.detail` payload from the events
   `calciteSplitButtonPrimaryClick` and `calciteSplitButtonSecondaryClick`.
   Use separate mouse event listeners to get information about `click`
   events.
 
-- **slider:** Removed deprecated event.
+* **slider:** Removed deprecated event.
 
   - Removed the event `calciteSliderUpdate`, use `calciteSliderInput`
     instead.
 
-- **dropdown, dropdown-item:** Removed deprecated properties.
+* **dropdown, dropdown-item:** Removed deprecated properties.
 
   - Removed the property `active` on `calcite-dropdown-item`, use
     `selected` instead.
   - Removed the property `active`, on `calcite-dropdown`, use `open`
     instead.
 
-- **tree:** Removed the `inputEnabled` property.
+* **tree:** Removed the `inputEnabled` property.
 
   - Removed the property `inputEnabled`, use `selectionMode="ancestors"`
     instead.
 
-- **chip:** Removed the `dismissible` property and the `clear`
+* **chip:** Removed the `dismissible` property and the `clear`
   value for the `appearance` property.
 
   - Removed the property `dismissible`, use `closable` instead.
   - Use the value `transparent` instead of `clear` for `appearance`
     property.
 
-- **action-menu:** Removed the `event.detail` value from the
+* **action-menu:** Removed the `event.detail` value from the
   `calciteActionMenuOpenChange` event on the `action-menu` component.
 
   - When listening to `calciteActionMenuOpenChange`, use the `open`
     property on the `event.target` instead of `event.detail`.
 
-- **block:** Removed the `summary` and `disablePadding` properties.
+* **block:** Removed the `summary` and `disablePadding` properties.
 
   - Removed the property `summary`, use `description` instead.
   - Removed the property `disablePadding`, use the CSS variable
     `--calcite-block-padding` instead.
 
-- **popover-manager:** Removed the `calcite-popover-manager` component. This
+* **popover-manager:** Removed the `calcite-popover-manager` component. This
   component is no longer necessary for `calcite-popover`s.
 
-- **accordion-item:** Removed the properties `active`, `itemTitle`,
+* **accordion-item:** Removed the properties `active`, `itemTitle`,
   `itemSubtitle`, and `icon`.
 
   - Removed the property `active`, use `expanded` instead.
@@ -506,7 +522,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `itemSubtitle`, use `description` instead.
   - Removed the property `icon`, use `iconStart` or `iconEnd` instead.
 
-- **panel:** Removed deprecated events and properties.
+* **panel:** Removed deprecated events and properties.
 
   - Removed the property `dismissed`, use `closed` instead.
   - Removed the property `dismissible`, use `closable` instead.
@@ -524,14 +540,14 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the event `calcitePanelBackClick`, use the `calcite-flow-item`
     component instead.
 
-- **popover:** Removed the `closeButton` and `dismissible` properties.
+* **popover:** Removed the `closeButton` and `dismissible` properties.
 
   - Removed the property `closeButton`, use `closable` instead.
   - Removed the property `dismissible`, use `closable` instead.
 
-- **tooltip-manager:** Removed the `calcite-tooltip-manager` component. This
+* **tooltip-manager:** Removed the `calcite-tooltip-manager` component. This
   component is no longer necessary for `calcite-tooltip`s.
-- **alert:** Removed the deprecated `active` property.
+* **alert:** Removed the deprecated `active` property.
 
   - Removed the property `active`, use `open` instead.
 
@@ -548,18 +564,18 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
     longer necessary.
   - `nonInteractive` property on the `list-item` is no longer necessary.
 
-- **shell:** Removed the `primary-panel` and `contextual-panel`
+* **shell:** Removed the `primary-panel` and `contextual-panel`
   slots.
 
   - Removed the slot `primary-panel`, use `panel-start` instead.
   - Removed the slot `contextual-panel`, use `panel-end` instead.
 
-- **shell-panel:** Removed the `calciteShellPanelToggle` event.
+* **shell-panel:** Removed the `calciteShellPanelToggle` event.
 
   - Use a `ResizeObserver` on the component to listen for changes to its
     size. (https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
 
-- **flow, flow-item:** Removed the `calciteFlowItemBackClick` event and
+* **flow, flow-item:** Removed the `calciteFlowItemBackClick` event and
   support for slotting `calcite-panel`s.
 
   - Removed support for slotting `calcite-panel` components, use the
@@ -567,17 +583,17 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the event `calciteFlowItemBackClick`, use
     `calciteFlowItemBack` instead.
 
-- **tip-manager:** Removed the `calciteTipManagerToggle` event, use
+* **tip-manager:** Removed the `calciteTipManagerToggle` event, use
   `calciteTipManagerClose` instead.
 
-- **action:** Removed the `calciteActionClick` event and the `clear`
+* **action:** Removed the `calciteActionClick` event and the `clear`
   value for the `appearance` property.
 
   - Listen to the `click` event instead of `calciteActionClick.
   - Use the value `transparent` instead of `clear` for the property
     `appearance`.
 
-- **list, list-item, list-item-group:** To know when `calcite-list-item` content is selected, listen to the event `calciteListItemSelect` instead of `click`.
+* **list, list-item, list-item-group:** To know when `calcite-list-item` content is selected, listen to the event `calciteListItemSelect` instead of `click`.
 
   - `List`
     - Adds `label` property to specify an accessible name for the component.
@@ -595,8 +611,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
     - Adds `open` property to show child components.
     - Deprecates `nonInteractive` property.
 
-- **calcite-loader, calcite-input-message:** use hidden native global attribute to toggle visibility on the components instead of the deprecated active prop.
-- **block, date-picker, list-item-group, panel, pick-list-group, popover, tip, tip-manager:** Sets internal heading HTML element to be a div by default. If users would like to retain an internal H1-H6 HTML element, they will need to set the headingLevel property on the component. Users already setting the headingLevel property are not affected. ([#5728](https://github.com/Esri/calcite-components/pull/5728)) ([38ca639](https://github.com/Esri/calcite-components/commit/38ca639010b8bd1d1fe32c9cf9b54dfc38cf9877)), closes [5099](https://github.com/Esri/calcite-components/issues/5099)
+* **calcite-loader, calcite-input-message:** use hidden native global attribute to toggle visibility on the components instead of the deprecated active prop.
+* **block, date-picker, list-item-group, panel, pick-list-group, popover, tip, tip-manager:** Sets internal heading HTML element to be a div by default. If users would like to retain an internal H1-H6 HTML element, they will need to set the headingLevel property on the component. Users already setting the headingLevel property are not affected. ([#5728](https://github.com/Esri/calcite-components/pull/5728)) ([38ca639](https://github.com/Esri/calcite-components/commit/38ca639010b8bd1d1fe32c9cf9b54dfc38cf9877)), closes [5099](https://github.com/Esri/calcite-components/issues/5099)
 
 ### Features
 
diff --git a/package-lock.json b/package-lock.json
index 1e8bddff096..62df055e9fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.683",
+  "version": "1.0.0-next.684",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@esri/calcite-components",
-      "version": "1.0.0-next.683",
+      "version": "1.0.0-next.684",
       "license": "SEE LICENSE IN copyright.txt",
       "dependencies": {
         "@floating-ui/dom": "1.0.10",
diff --git a/package.json b/package.json
index 4ff2e094949..9cfc0fc8f24 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.683",
+  "version": "1.0.0-next.684",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

From a96bcc3bb78ecf9f08e59745e668a75fcb725329 Mon Sep 17 00:00:00 2001
From: Adam Tirella <macandcheese@users.noreply.github.com>
Date: Thu, 15 Dec 2022 10:55:58 -0800
Subject: [PATCH 20/21] refactor(modal)!: Renamed property and updated values
 (#6054)

BREAKING CHANGE: Renamed `color` property and updated values.

- Renamed the property `color`, use `kind` instead.
- Updated the accepted values of `kind` to `brand`, `danger`, `info`,
`success`, and `warning`.
---
 src/components/interfaces.ts          |   1 +
 src/components/modal/modal.scss       |  34 +++--
 src/components/modal/modal.stories.ts |   4 +-
 src/components/modal/modal.tsx        |   9 +-
 src/demos/modal.html                  | 212 ++++++++++++++++++++++++--
 5 files changed, 226 insertions(+), 34 deletions(-)

diff --git a/src/components/interfaces.ts b/src/components/interfaces.ts
index 0d612d648c0..26f29222962 100644
--- a/src/components/interfaces.ts
+++ b/src/components/interfaces.ts
@@ -4,6 +4,7 @@ export type Alignment = "start" | "center" | "end";
 export type Appearance = "solid" | "clear" | "outline" | "transparent" | "minimal";
 export type Columns = 1 | 2 | 3 | 4 | 5 | 6;
 export type FlipContext = "both" | "start" | "end";
+export type Kind = "brand" | "danger" | "info" | "warning" | "success";
 export type Layout = "horizontal" | "vertical" | "grid";
 export type LogicalFlowPosition = "inline-start" | "inline-end" | "block-start" | "block-end";
 export type Position = "start" | "end";
diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss
index bf833e0508b..910d286a731 100644
--- a/src/components/modal/modal.scss
+++ b/src/components/modal/modal.scss
@@ -310,28 +310,38 @@ slot[name="primary"] {
     }
 
     .close {
-      border-start-end-radius: var(--calcite-border-radius);
     }
   }
 }
 
 /**
- * Colors
+ * Kinds
  */
-:host([color="red"]) {
-  .modal {
-    @apply border-color-danger;
-  }
+:host([kind="brand"]) .modal {
+  @apply border-color-brand;
 }
 
-:host([color="blue"]) {
-  .modal {
-    @apply border-color-info;
-  }
+:host([kind="danger"]) .modal {
+  @apply border-color-danger;
+}
+
+:host([kind="info"]) .modal {
+  @apply border-color-info;
+}
+
+:host([kind="success"]) .modal {
+  @apply border-color-success;
+}
+
+:host([kind="warning"]) .modal {
+  @apply border-color-warning;
 }
 
-:host([color="red"]),
-:host([color="blue"]) {
+:host([kind="brand"]),
+:host([kind="danger"]),
+:host([kind="info"]),
+:host([kind="success"]),
+:host([kind="warning"]) {
   .modal {
     @apply border-0 border-t-4 border-solid;
   }
diff --git a/src/components/modal/modal.stories.ts b/src/components/modal/modal.stories.ts
index b5041d5a6ca..a7f869f6b1f 100644
--- a/src/components/modal/modal.stories.ts
+++ b/src/components/modal/modal.stories.ts
@@ -18,7 +18,7 @@ export default {
 export const simple = (): string => html`
   <calcite-modal
     ${boolean("open", true)}
-    color="${select("color", { blue: "blue", red: "red", none: "" }, "")}"
+    kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "")}"
     background-color="${select("background-color", ["white", "grey"], "white")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     width="${select("width", ["s", "m", "l"], "s")}"
@@ -44,7 +44,7 @@ export const darkThemeRTLCustomSize_TestOnly = (): string => html`
     class="calcite-theme-dark"
     dir="rtl"
     ${boolean("open", true)}
-    color="${select("color", { blue: "blue", red: "red", none: "" }, "")}"
+    kind="${select("kind", ["brand", "danger", "info", "success", "warning"], "")}"
     background-color="${select("background-color", ["white", "grey"], "white")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     width="${number("width", 300)}"
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index a3f9870e3bc..5bbbc180041 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -13,7 +13,7 @@ import {
   Watch
 } from "@stencil/core";
 import { ensureId, focusElement, getSlotted } from "../../utils/dom";
-import { Scale } from "../interfaces";
+import { Kind, Scale } from "../interfaces";
 import { ModalBackgroundColor } from "./interfaces";
 import { CSS, ICONS, SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
@@ -133,11 +133,8 @@ export class Modal
   /** Sets the component to always be fullscreen (overrides `width`). */
   @Prop({ reflect: true }) fullscreen: boolean;
 
-  /**
-   * Adds a color bar to the top of component for visual impact.
-   * Use color to add importance to destructive or workflow dialogs.
-   */
-  @Prop({ reflect: true }) color: "red" | "blue";
+  /** Specifies the kind of the component (will apply to top border). */
+  @Prop({ reflect: true }) kind: Kind;
 
   /** Sets the background color of the component's content. */
   @Prop({ reflect: true }) backgroundColor: ModalBackgroundColor = "white";
diff --git a/src/demos/modal.html b/src/demos/modal.html
index 5ffc1c0dbec..139b73f5981 100644
--- a/src/demos/modal.html
+++ b/src/demos/modal.html
@@ -361,18 +361,79 @@ <h3 slot="header">Large width and large scale modal</h3>
 
       <hr />
       <!-- A horizontal line -->
+      <!--
+        **************************************************
+        * BRAND
+        **************************************************
+      -->
+      <div class="parent">
+        <div class="child right-aligned-text">Brand</div>
+
+        <!-- small width brand -->
+        <div class="child">
+          <calcite-modal class="js-modal-brand-s" kind="brand" scale="s">
+            <h3 slot="header">Brand content!</h3>
+            <div slot="content">
+              <p>This is some great content</p>
+            </div>
+            <calcite-button slot="secondary" width="full" scale="s" appearance="outline" color="red"
+              >Cancel</calcite-button
+            >
+            <calcite-button slot="primary" width="full" scale="s">Add members now</calcite-button>
+          </calcite-modal>
+
+          <calcite-button onClick="openModal('.js-modal-brand-s')" appearance="outline" scale="s">
+            Scale Small
+          </calcite-button>
+        </div>
+
+        <!-- medium width brand -->
+        <div class="child">
+          <calcite-modal class="js-modal-brand-m" kind="brand" scale="m">
+            <h3 slot="header">Brand content!</h3>
+            <div slot="content">
+              <p>This is some great content</p>
+            </div>
+            <calcite-button slot="secondary" width="full" scale="m" appearance="outline" color="red"
+              >Cancel</calcite-button
+            >
+            <calcite-button slot="primary" width="full" scale="m">Add members now</calcite-button>
+          </calcite-modal>
+
+          <calcite-button onClick="openModal('.js-modal-brand-m')" appearance="outline" scale="s">
+            Scale Medium
+          </calcite-button>
+        </div>
 
+        <!-- large width brand -->
+        <div class="child">
+          <calcite-modal class="js-modal-brand-l" kind="brand" scale="l">
+            <h3 slot="header">Brand content!</h3>
+            <div slot="content">
+              <p>This is some great content</p>
+            </div>
+            <calcite-button slot="secondary" width="full" scale="l" appearance="outline" color="red"
+              >Cancel</calcite-button
+            >
+            <calcite-button slot="primary" width="full" scale="l">Add members now</calcite-button>
+          </calcite-modal>
+
+          <calcite-button onClick="openModal('.js-modal-brand-l')" appearance="outline" scale="s">
+            Scale Large
+          </calcite-button>
+        </div>
+      </div>
       <!--
       **************************************************
-      * DESTRUCTIVE
+      * DANGER
       **************************************************
     -->
       <div class="parent">
-        <div class="child right-aligned-text">Destructive</div>
+        <div class="child right-aligned-text">Danger</div>
 
-        <!-- small width destructive -->
+        <!-- small width danger -->
         <div class="child">
-          <calcite-modal class="js-modal-destructive-s" color="red" scale="s">
+          <calcite-modal class="js-modal-danger-s" kind="danger" scale="s">
             <h3 slot="header">Delete</h3>
             <div slot="content">
               <p>This will delete things and perform some desctructive action, do you wish to continue?</p>
@@ -383,14 +444,14 @@ <h3 slot="header">Delete</h3>
             <calcite-button slot="primary" width="full" scale="s" color="red">Delete</calcite-button>
           </calcite-modal>
 
-          <calcite-button onClick="openModal('.js-modal-destructive-s')" appearance="outline" scale="s">
+          <calcite-button onClick="openModal('.js-modal-danger-s')" appearance="outline" scale="s">
             Scale Small
           </calcite-button>
         </div>
 
-        <!-- medium width destructive -->
+        <!-- medium width danger -->
         <div class="child">
-          <calcite-modal class="js-modal-destructive-m" color="red" scale="m">
+          <calcite-modal class="js-modal-danger-m" kind="danger" scale="m">
             <h3 slot="header">Delete</h3>
             <div slot="content">
               <p>This will delete things and perform some desctructive action, do you wish to continue?</p>
@@ -401,14 +462,14 @@ <h3 slot="header">Delete</h3>
             <calcite-button slot="primary" width="full" scale="m" color="red">Delete</calcite-button>
           </calcite-modal>
 
-          <calcite-button onClick="openModal('.js-modal-destructive-m')" appearance="outline" scale="s">
+          <calcite-button onClick="openModal('.js-modal-danger-m')" appearance="outline" scale="s">
             Scale Medium
           </calcite-button>
         </div>
 
-        <!-- large width destructive -->
+        <!-- large width danger -->
         <div class="child">
-          <calcite-modal class="js-modal-destructive-l" color="red" scale="l">
+          <calcite-modal class="js-modal-danger-l" kind="danger" scale="l">
             <h3 slot="header">Delete</h3>
             <div slot="content">
               <p>This will delete things and perform some desctructive action, do you wish to continue?</p>
@@ -419,7 +480,7 @@ <h3 slot="header">Delete</h3>
             <calcite-button slot="primary" width="full" scale="l" color="red">Delete</calcite-button>
           </calcite-modal>
 
-          <calcite-button onClick="openModal('.js-modal-destructive-l')" appearance="outline" scale="s">
+          <calcite-button onClick="openModal('.js-modal-danger-l')" appearance="outline" scale="s">
             Scale Large
           </calcite-button>
         </div>
@@ -435,7 +496,7 @@ <h3 slot="header">Delete</h3>
 
         <!-- small width info -->
         <div class="child">
-          <calcite-modal class="js-modal-info-s" color="blue" scale="s">
+          <calcite-modal class="js-modal-info-s" kind="info" scale="s">
             <h3 slot="header">Information</h3>
             <div slot="content">
               <p>This dialog should be used when choosing two viable paths.</p>
@@ -453,7 +514,7 @@ <h3 slot="header">Information</h3>
 
         <!-- medium width info -->
         <div class="child">
-          <calcite-modal class="js-modal-info-m" color="blue" scale="m">
+          <calcite-modal class="js-modal-info-m" kind="info" scale="m">
             <h3 slot="header">Information</h3>
             <div slot="content">
               <p>This dialog should be used when choosing two viable paths.</p>
@@ -471,7 +532,7 @@ <h3 slot="header">Information</h3>
 
         <!-- large width info -->
         <div class="child">
-          <calcite-modal class="js-modal-info-l" color="blue" scale="l">
+          <calcite-modal class="js-modal-info-l" kind="info" scale="l">
             <h3 slot="header">Information</h3>
             <div slot="content">
               <p>This dialog should be used when choosing two viable paths.</p>
@@ -487,7 +548,130 @@ <h3 slot="header">Information</h3>
           </calcite-button>
         </div>
       </div>
+      <!--
+        **************************************************
+        * SUCCESS
+        **************************************************
+      -->
+      <div class="parent">
+        <div class="child right-aligned-text">Success</div>
+
+        <!-- small width success -->
+        <div class="child">
+          <calcite-modal class="js-modal-success-s" kind="success" scale="s">
+            <h3 slot="header">Rejoice!</h3>
+            <div slot="content">
+              <p>Something successful happened</p>
+            </div>
+            <calcite-button slot="secondary" width="full" scale="s" appearance="outline" color="red"
+              >Cancel</calcite-button
+            >
+            <calcite-button slot="primary" width="full" scale="s">Next</calcite-button>
+          </calcite-modal>
+
+          <calcite-button onClick="openModal('.js-modal-success-s')" appearance="outline" scale="s">
+            Scale Small
+          </calcite-button>
+        </div>
+
+        <!-- medium width success -->
+        <div class="child">
+          <calcite-modal class="js-modal-success-m" kind="success" scale="m">
+            <h3 slot="header">Rejoice!</h3>
+            <div slot="content">
+              <p>Something successful happened</p>
+            </div>
+            <calcite-button slot="secondary" width="full" scale="m" appearance="outline" color="red"
+              >Cancel</calcite-button
+            >
+            <calcite-button slot="primary" width="full" scale="m">Next</calcite-button>
+          </calcite-modal>
+
+          <calcite-button onClick="openModal('.js-modal-success-m')" appearance="outline" scale="s">
+            Scale Medium
+          </calcite-button>
+        </div>
+
+        <!-- large width success -->
+        <div class="child">
+          <calcite-modal class="js-modal-success-l" kind="success" scale="l">
+            <h3 slot="header">Rejoice!</h3>
+            <div slot="content">
+              <p>Something successful happened</p>
+            </div>
+            <calcite-button slot="secondary" width="full" scale="l" appearance="outline" color="red"
+              >Cancel</calcite-button
+            >
+            <calcite-button slot="primary" width="full" scale="l">Next</calcite-button>
+          </calcite-modal>
+
+          <calcite-button onClick="openModal('.js-modal-success-l')" appearance="outline" scale="s">
+            Scale Large
+          </calcite-button>
+        </div>
+      </div>
+      <!--
+                **************************************************
+                * WARNING
+                **************************************************
+              -->
+      <div class="parent">
+        <div class="child right-aligned-text">Warning</div>
+
+        <!-- small width warning -->
+        <div class="child">
+          <calcite-modal class="js-modal-warning-s" kind="warning" scale="s">
+            <h3 slot="header">Hold on a second...</h3>
+            <div slot="content">
+              <p>Something warningful happened</p>
+            </div>
+            <calcite-button slot="secondary" width="full" scale="s" appearance="outline" color="red"
+              >Cancel</calcite-button
+            >
+            <calcite-button slot="primary" width="full" scale="l">Next</calcite-button>
+          </calcite-modal>
+
+          <calcite-button onClick="openModal('.js-modal-warning-s')" appearance="outline" scale="s">
+            Scale Small
+          </calcite-button>
+        </div>
+
+        <!-- medium width warning -->
+        <div class="child">
+          <calcite-modal class="js-modal-warning-m" kind="warning" scale="m">
+            <h3 slot="header">Hold on a second...</h3>
+            <div slot="content">
+              <p>Something warningful happened</p>
+            </div>
+            <calcite-button slot="secondary" width="full" scale="m" appearance="outline" color="red"
+              >Cancel</calcite-button
+            >
+            <calcite-button slot="primary" width="full" scale="l">Next</calcite-button>
+          </calcite-modal>
 
+          <calcite-button onClick="openModal('.js-modal-warning-m')" appearance="outline" scale="s">
+            Scale Medium
+          </calcite-button>
+        </div>
+
+        <!-- large width warning -->
+        <div class="child">
+          <calcite-modal class="js-modal-warning-l" kind="warning" scale="l">
+            <h3 slot="header">Hold on a second...</h3>
+            <div slot="content">
+              <p>Something warningful happened</p>
+            </div>
+            <calcite-button slot="secondary" width="full" scale="l" appearance="outline" color="red"
+              >Cancel</calcite-button
+            >
+            <calcite-button slot="primary" width="full" scale="l">Next</calcite-button>
+          </calcite-modal>
+
+          <calcite-button onClick="openModal('.js-modal-warning-l')" appearance="outline" scale="s">
+            Scale Large
+          </calcite-button>
+        </div>
+      </div>
       <!--
       **************************************************
       * ESC DISABLED

From c90745d20cff85ef965f5b7a275d5d2f5d84f752 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 15 Dec 2022 19:11:34 +0000
Subject: [PATCH 21/21] 1.0.0-next.685

---
 CHANGELOG.md      | 204 ++++++++++++++++++++++++----------------------
 package-lock.json |   4 +-
 package.json      |   2 +-
 3 files changed, 108 insertions(+), 102 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ae7540a427..3d90818e282 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,72 +9,78 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### ⚠ BREAKING CHANGES
 
-- **tab-nav, tab-title:** Removed `event.detail` payload from events.
+- **modal:** Renamed `color` property and updated values.
 
-* TabNav
-* Removed the `event.detail` property on the event `calciteTabChange`,
+* Renamed the property `color`, use `kind` instead.
+* Updated the accepted values of `kind` to `brand`, `danger`, `info`,
+  `success`, and `warning`.
+
+* **tab-nav, tab-title:** Removed `event.detail` payload from events.
+
+- TabNav
+- Removed the `event.detail` property on the event `calciteTabChange`,
   use `event.target` instead.
-* TabTitle
-* Removed the `event.detail` property on the event
+- TabTitle
+- Removed the `event.detail` property on the event
   `calciteTabsActivate`, use `event.target` instead.
 
-- **tree:** Removed `event.detail` payload from events and added
+* **tree:** Removed `event.detail` payload from events and added
   `selectedItems` property.
 
-* Added property `selectedItems`.
-* Removed the `event.detail` property on the event `calciteTreeSelect`,
+- Added property `selectedItems`.
+- Removed the `event.detail` property on the event `calciteTreeSelect`,
   use `event.target` instead.
 
-* **pagination:** Removed `event.detail` payload from events.
+- **pagination:** Removed `event.detail` payload from events.
 
   - Removed the `event.detail` property on the event
     `calcitePaginationChange`, use `event.target` instead.
 
-* **dropdown:** Removed `event.detail` payload from events.
+- **dropdown:** Removed `event.detail` payload from events.
 
   - Removed the `event.detail` property on the event
     `calciteDropdownSelect`, use `event.target` instead.
 
-* **rating:** Removed `event.detail` payload from events.
+- **rating:** Removed `event.detail` payload from events.
 
   - Removed the `event.detail` property on the event
     `calciteRatingChange`, use `event.target` instead.
 
-* **inline-editable,input,input-text,input-number:** Removed deprecated `intl\*` & accessible label properties.
+- **inline-editable,input,input-text,input-number:** Removed deprecated `intl\*` & accessible label properties.
 
-* **inline-editable:**
+- **inline-editable:**
 
   - Removed the property` intlEnableEditing`, use `messsageOverrides.enableEditing` instead.
   - Removed the property `intlCancelEditing`, use `messageOverrides.cancelEditing` instead.
   - Removed the property `intlConfirmChanges`, use `messageOverrides.confirmChanges` instead.
 
-* **input-number:**
+- **input-number:**
 
   - Removed the property `intlClear`, use `messsageOverrides.clear` instead.
   - Removed the property `intlLoading`, use `messsageOverrides.loading` instead.
 
-* **input-text:**
+- **input-text:**
 
   - Removed the property `intlClear`, use `messsageOverrides.clear` instead.
   - Removed the property `intlLoading`, use `messsageOverrides.loading` instead.
 
-* **input:**
+- **input:**
 
   - Removed the property `intlClear`, use `messsageOverrides.clear` instead.
   - Removed the property `intlLoading`, use `messsageOverrides.loading` instead.
 
-* **scrim,rating,time-picker,input-time-picker,value-list:** Removed deprecated `intl\*` & accessible label properties.
+- **scrim,rating,time-picker,input-time-picker,value-list:** Removed deprecated `intl\*` & accessible label properties.
 
-* **rating:**
+- **rating:**
 
   - Removed the property `intlStars` , use `messsageOverrides.stars` instead.
   - Removed the property `intlRating` , use `messsageOverrides.rating` instead.
 
-* **scrim:**
+- **scrim:**
 
   - Removed the property `intlLoading` , use `messsageOverrides.loading` instead.
 
-* **time-picker:**
+- **time-picker:**
 
   - Removed the property `intlHour`, use `messsageOverrides.hour` instead.
   - Removed the property `intlHourDown`, use `messsageOverrides.hourDown` instead.
@@ -89,7 +95,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `intlSecondUp`, use `messsageOverrides.secondUp` instead.
   - Removed the property `intlSecondDown`, use `messsageOverrides.secondDown` instead.
 
-* **input-time-picker:**
+- **input-time-picker:**
 
   - Removed the property `intlHour`, use `messsageOverrides.hour` instead.
   - Removed the property `intlHourDown`, use `messsageOverrides.hourDown` instead.
@@ -104,16 +110,16 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `intlSecondUp`, use `messsageOverrides.secondUp` instead.
   - Removed the property `intlSecondDown`, use `messsageOverrides.secondDown` instead.
 
-* **value-list:**
+- **value-list:**
 
   - Removed the property `intlDragHandleActive`, use `messsageOverrides.dragHandleActive` instead.
   - Removed the property `intlDragHandleChange`, use `messsageOverrides.dragHandleChange` instead.
   - Removed the property `intlDragHandleCommit`, use `messsageOverrides.dragHandleCommit` instead.
   - Removed the property `intlDragHandleIdle`, use `messsageOverrides.dragHandleIdle` instead.
 
-* **chip,card,combobox,date-picker,flow,flow-item,filter, input-date-picker:** Removed deprecated `intl\*` & accessible label properties.
+- **chip,card,combobox,date-picker,flow,flow-item,filter, input-date-picker:** Removed deprecated `intl\*` & accessible label properties.
 
-* **card**:
+- **card**:
 
   - Removed the property `intlLoading` , use `messsageOverrides.loading`
     instead.
@@ -122,12 +128,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `intlDeselect` use `messageOverrides.deselect`
     instead.
 
-* **chip**:
+- **chip**:
 
   - Removed the property `dismissLabel` , use
     `messsageOverrides.dismissLabel ` instead.
 
-* **color-picker:**
+- **color-picker:**
 
   - Removed the property `intlB` , use `messsageOverrides.b` instead.
   - Removed the property `intlBlue` , use `messsageOverrides.blue`
@@ -157,12 +163,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `intlValue` , use `messsageOverrides.value`
     instead.
 
-* **combobox:**
+- **combobox:**
 
   - Removed the property `intlRemoveTag` , use
     `messsageOverrides.removeTag` instead.
 
-* **date-picker:**
+- **date-picker:**
 
   - Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
     instead.
@@ -170,7 +176,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
     instead.
   - Removed the property `intlYear`, use `messageOverrides.year` instead.
 
-* **flow-item:**
+- **flow-item:**
 
   - Removed the property `intlBack` , use `messsageOverrides.back`
     instead.
@@ -179,14 +185,14 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `intlOptions` , use `messsageOverrides.options`
     instead.
 
-* **filter:**
+- **filter:**
 
   - Removed the property `intlClear`, use `messsageOverrides.clear`
     instead.
   - Removed the property `intlLabel`, use `messageOverrides.label`
     instead.
 
-* **input-date-picker:**
+- **input-date-picker:**
 
   - Removed the property `intlNextMonth`, use `messageOverrides.nextMonth`
     instead.
@@ -194,41 +200,41 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
     instead.
   - Removed the property `intlYear`, use `messageOverrides.year` instead.
 
-* **action,action-bar,action-group,action-pad,alert,block-section,block,button:** Removed deprecated `intl*` properties , use
+- **action,action-bar,action-group,action-pad,alert,block-section,block,button:** Removed deprecated `intl*` properties , use
   `messageOverrides` property instead.
 
-* **action:**
+- **action:**
 
   - Removed the property `intlLoading` , use `messsageOverrides.loading`
     instead.
   - Removed the property `intlIndicator`, use `messageOverrides.indicator`
     instead.
 
-* **action-bar:**
+- **action-bar:**
 
   - Removed the property `intlExpand` , use `messsageOverrides.expand`
     instead.
   - Removed the property `intlCollapse`, use `messageOverrides.collapse`
     instead.
 
-* **action-group:**
+- **action-group:**
 
   - Removed the property `intlMore` , use `messsageOverrides.more`
     instead.
 
-* **action-pad**:
+- **action-pad**:
 
   - Removed the property `intlExpand` , use `messsageOverrides.expand`
     instead.
   - Removed the property `intlCollapse`, use `messageOverrides.collapse`
     instead.
 
-* **alert**:
+- **alert**:
 
   - Removed the property `intlClose`, use `messageOverrides.close`
     instead.
 
-* **block**:
+- **block**:
 
   - Removed the property `intlExpand` , use `messsageOverrides.expand`
     instead.
@@ -239,26 +245,26 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `intlOptions`, use `messageOverrides.options`
     instead.
 
-* **block-section:**
+- **block-section:**
 
   - Removed the property `intlExpand` , use `messsageOverrides.expand`
     instead.
   - Removed the property `intlCollapse`, use `messageOverrides.collapse`
     instead.
 
-* **button:**
+- **button:**
 
   - Removed the property `intlLoading` , use `messsageOverrides.loading`
     instead.
 
-* **popover, dropdown, modal, pick-list-item, value-list-item:** Renamed `disable*` properties.
+- **popover, dropdown, modal, pick-list-item, value-list-item:** Renamed `disable*` properties.
 
-* **dropdown:**
+- **dropdown:**
 
   - Renamed the property `disableCloseOnSelect`, use
     `closeOnSelectDisabled` instead.
 
-* **modal:**
+- **modal:**
 
   - Renamed the property `disableCloseButton`, use `closeButtonDisabled`
     instead.
@@ -268,42 +274,42 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
     instead.
   - Renamed the property `disableEscape`, use `escapeDisabled` instead.
 
-* **pick-list-item:**
+- **pick-list-item:**
 
   - Renamed the property `disableDeselect`, use `deselectDisabled`
     instead.
 
-* **popover:**
+- **popover:**
 
   - Renamed the property `disableFlip`, use `flipDisabled` instead.
   - Renamed the property `disableFocusTrap`, use `focusTrapDisabled`
     instead.
   - Renamed the property `disablePointer`, use `pointerDisabled` instead.
 
-* **value-list-item:**
+- **value-list-item:**
 
   - Renamed the property `disableDeselect`, use `deselectDisabled`
     instead.
 
-* **input-date-picker:** Removed the `calciteDatePickerChange` event, use
+- **input-date-picker:** Removed the `calciteDatePickerChange` event, use
   `calciteInputDatePickerChange` instead.
 
-* **date-picker:** Removed the `start` and `end` properties, set `value`
+- **date-picker:** Removed the `start` and `end` properties, set `value`
   as an array with the start as the first value and the end as the second
   value instead.
 
-* **combobox:** Renamed event.
+- **combobox:** Renamed event.
 
   - Renamed the event `calciteComboboxChipDismiss`, use
     `calciteComboboxChipClose` instead.
 
-* **alert:** Renamed properties.
+- **alert:** Renamed properties.
 
   - Renamed the property `autoDismiss`, use `autoClose` instead.
   - Renamed the property `autoDismissDuration`, use `autoCloseDuration`
     instead.
 
-* **combobox:** Removed `event.detail` payload from events and added
+- **combobox:** Removed `event.detail` payload from events and added
   properties `selectedItems` and `filteredItems`.
 
   - Removed the `event.detail` property on the event
@@ -312,23 +318,23 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
     `calciteComboboxFilterChange`, use `event.target.filteredItems` or
     `event.target.value` instead.
 
-* **chip:** Renamed event.
+- **chip:** Renamed event.
 
   - Renamed the event `calciteChipDismiss`, use `calciteChipClose`
     instead.
 
-* **tip:** Renamed property.
+- **tip:** Renamed property.
 
   - Renamed the property `nonDismissible`, use `closeDisabled` instead.
 
-* **date-picker:** Removed `event.detail` payload from events.
+- **date-picker:** Removed `event.detail` payload from events.
 
   - Removed the `event.detail` property on the event
     `calciteDatePickerChange`, use `event.target` instead.
   - Removed the `event.detail` property on the event
     `calciteDatePickerRangeChange`, use `event.target` instead.
 
-* **modal:** Removed deprecated properties and method.
+- **modal:** Removed deprecated properties and method.
 
   - Removed the property `active`, use `open` instead.
   - Removed the property noPadding, use `--calcite-modal-padding` CSS
@@ -338,37 +344,37 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the CSS property `--calcite-modal-padding-large`.
   - Removed the CSS property `--calcite-modal-title-text`.
 
-* **pagination:** Removed deprecated event.
+- **pagination:** Removed deprecated event.
 
   - Removed the event `calcitePaginationUpdate` event, use
     `calcitePaginationChange` event instead.
 
-* **loader:** Removed deprecated properties.
+- **loader:** Removed deprecated properties.
 
   - Removed the property `active`, use global attribute `hidden` instead.
   - Removed the property `noPadding`, use `--calcite-loader-padding` CSS
     property instead.
 
-* **label:** The default display for label is now `flex` instead of
+- **label:** The default display for label is now `flex` instead of
   `inline`.
 
   - Use `--calcite-label-margin-bottom` CSS variable to disable space when
     in `layout` is `inline`.
 
-* **tabs:** Removed slot.
+- **tabs:** Removed slot.
 
   - Removed the slot `tab-nav`, use `title-group` instead.
 
-* **dropdown:** Removed slot.
+- **dropdown:** Removed slot.
 
   - Removed the slot `dropdown-trigger`, use `trigger` instead.
 
-* **action-menu:** Removed event.
+- **action-menu:** Removed event.
 
   - Removed the event `calciteActionMenuOpenChange`, use
     `calciteActionMenuOpen` instead.
 
-* **combobox:** Removed deprecated properties, events, and event
+- **combobox:** Removed deprecated properties, events, and event
   payload.
 
   - Removed the property `active`, use `open` instead.
@@ -378,53 +384,53 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
     `calciteComboboxChipDismiss`, use the `value` property on the
     component to determine the removed value instead.
 
-* **combobox-item:** Removed deprecated property.
+- **combobox-item:** Removed deprecated property.
 
   - Removed the property `constant`, use `filterDisable` instead.
 
-* **action-menu:** Removed event.
+- **action-menu:** Removed event.
 
   - Removed the event `calciteActionMenuOpenChange`, use
     `calciteActionMenuOpen` instead.
 
-* **input-message:** removed deprecated properties
+- **input-message:** removed deprecated properties
 
   - Removed `active` property, use the global `hidden` attribute instead.
   - Removed `type` property, "floating" is no longer supported.
 
-* **input-text:** remove deprecated event payload
+- **input-text:** remove deprecated event payload
 
   - Removed `calciteInputTextInput` event payload, use the event's
     `target`/`currentTarget` instead.
 
-* **date-picker:** Removed deprecated properties
+- **date-picker:** Removed deprecated properties
 
   - Removed the `locale` property, use `lang` instead.
 
-* **input-date-picker:** Removed deprecated properties
+- **input-date-picker:** Removed deprecated properties
 
   - Removed the `active` property, use `open` instead.
   - Removed the `locale` property, use `lang` instead.
 
-* **input-time-picker:** Removed deprecated property
+- **input-time-picker:** Removed deprecated property
 
   - Removed the `active` property, use `open` instead.
 
-* **time-picker:** Removed deprecated property
+- **time-picker:** Removed deprecated property
 
   Removed the `locale` property, use `lang` instead.
 
-* **input:** remove deprecated properties and event payload.
+- **input:** remove deprecated properties and event payload.
 
   - Removed `maxlength` property, use `maxLength` instead.
   - Removed `locale` property, use `lang` instead.
   - Removed `calciteInputInput`'s `el`/`value` event payload properties, use the event's `target`/`currentTarget` instead.
 
-* **handle:** Removed deprecated event payload property on `calciteHandleNudge`.
+- **handle:** Removed deprecated event payload property on `calciteHandleNudge`.
 
   - Removed the `event.detail.handle` property on the event `calciteHandleNudge`, use `event.target` instead.
 
-* **tabs, tab-nav, tab-title, tab:** Removed deprecated properties and values.
+- **tabs, tab-nav, tab-title, tab:** Removed deprecated properties and values.
 
   - Removed the property `active` from `calcite-tab-title`, use `selected`
     instead.
@@ -435,20 +441,20 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the `below` value from the `position` property on
     `calcite-tabs`, use `bottom` instead.
 
-* **switch:** Removed deprecated `switched` property and
+- **switch:** Removed deprecated `switched` property and
   `calciteSwitchChange` event payload.
 
   - Removed the property `switched`, use `checked` instead.
   - Removed the `event.detail` from `calciteSwitchChange`, use
     `event.target.checked` instead.
 
-* **input-number:** remove deprecated property and event payload
+- **input-number:** remove deprecated property and event payload
 
   - Removed `locale` property, use `lang` instead.
   - Removed `calciteInputNumberInput` event payload properties, use the
     event's `target`/`currentTarget` instead.
 
-* **label:** Removed deprecated properties.
+- **label:** Removed deprecated properties.
 
   - Removed the property `status`, set the `status` property on the
     component the label is bound to instead.
@@ -457,64 +463,64 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `disableSpacing`, use the CSS variable
     `--calcite-label-margin-bottom` instead.
 
-* **stepper-item:** Removed deprecated properties.
+- **stepper-item:** Removed deprecated properties.
 
   - Removed the property `active`, use `selected` instead.
   - Removed the property `itemTitle`, use `heading` instead.
   - Removed the property `itemSubtitle`, use `description` instead.
 
-* **radio-group-item:** Removed deprecated properties.
+- **radio-group-item:** Removed deprecated properties.
 
   - Removed the property `icon`, use either `iconStart` or `iconEnd`
     instead.
   - Removed the property `iconPosition`, use either `iconStart` or
     `iconEnd` instead.
 
-* **split-button:** Removed the `event.detail` payload from the events
+- **split-button:** Removed the `event.detail` payload from the events
   `calciteSplitButtonPrimaryClick` and `calciteSplitButtonSecondaryClick`.
   Use separate mouse event listeners to get information about `click`
   events.
 
-* **slider:** Removed deprecated event.
+- **slider:** Removed deprecated event.
 
   - Removed the event `calciteSliderUpdate`, use `calciteSliderInput`
     instead.
 
-* **dropdown, dropdown-item:** Removed deprecated properties.
+- **dropdown, dropdown-item:** Removed deprecated properties.
 
   - Removed the property `active` on `calcite-dropdown-item`, use
     `selected` instead.
   - Removed the property `active`, on `calcite-dropdown`, use `open`
     instead.
 
-* **tree:** Removed the `inputEnabled` property.
+- **tree:** Removed the `inputEnabled` property.
 
   - Removed the property `inputEnabled`, use `selectionMode="ancestors"`
     instead.
 
-* **chip:** Removed the `dismissible` property and the `clear`
+- **chip:** Removed the `dismissible` property and the `clear`
   value for the `appearance` property.
 
   - Removed the property `dismissible`, use `closable` instead.
   - Use the value `transparent` instead of `clear` for `appearance`
     property.
 
-* **action-menu:** Removed the `event.detail` value from the
+- **action-menu:** Removed the `event.detail` value from the
   `calciteActionMenuOpenChange` event on the `action-menu` component.
 
   - When listening to `calciteActionMenuOpenChange`, use the `open`
     property on the `event.target` instead of `event.detail`.
 
-* **block:** Removed the `summary` and `disablePadding` properties.
+- **block:** Removed the `summary` and `disablePadding` properties.
 
   - Removed the property `summary`, use `description` instead.
   - Removed the property `disablePadding`, use the CSS variable
     `--calcite-block-padding` instead.
 
-* **popover-manager:** Removed the `calcite-popover-manager` component. This
+- **popover-manager:** Removed the `calcite-popover-manager` component. This
   component is no longer necessary for `calcite-popover`s.
 
-* **accordion-item:** Removed the properties `active`, `itemTitle`,
+- **accordion-item:** Removed the properties `active`, `itemTitle`,
   `itemSubtitle`, and `icon`.
 
   - Removed the property `active`, use `expanded` instead.
@@ -522,7 +528,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the property `itemSubtitle`, use `description` instead.
   - Removed the property `icon`, use `iconStart` or `iconEnd` instead.
 
-* **panel:** Removed deprecated events and properties.
+- **panel:** Removed deprecated events and properties.
 
   - Removed the property `dismissed`, use `closed` instead.
   - Removed the property `dismissible`, use `closable` instead.
@@ -540,14 +546,14 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the event `calcitePanelBackClick`, use the `calcite-flow-item`
     component instead.
 
-* **popover:** Removed the `closeButton` and `dismissible` properties.
+- **popover:** Removed the `closeButton` and `dismissible` properties.
 
   - Removed the property `closeButton`, use `closable` instead.
   - Removed the property `dismissible`, use `closable` instead.
 
-* **tooltip-manager:** Removed the `calcite-tooltip-manager` component. This
+- **tooltip-manager:** Removed the `calcite-tooltip-manager` component. This
   component is no longer necessary for `calcite-tooltip`s.
-* **alert:** Removed the deprecated `active` property.
+- **alert:** Removed the deprecated `active` property.
 
   - Removed the property `active`, use `open` instead.
 
@@ -564,18 +570,18 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
     longer necessary.
   - `nonInteractive` property on the `list-item` is no longer necessary.
 
-* **shell:** Removed the `primary-panel` and `contextual-panel`
+- **shell:** Removed the `primary-panel` and `contextual-panel`
   slots.
 
   - Removed the slot `primary-panel`, use `panel-start` instead.
   - Removed the slot `contextual-panel`, use `panel-end` instead.
 
-* **shell-panel:** Removed the `calciteShellPanelToggle` event.
+- **shell-panel:** Removed the `calciteShellPanelToggle` event.
 
   - Use a `ResizeObserver` on the component to listen for changes to its
     size. (https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
 
-* **flow, flow-item:** Removed the `calciteFlowItemBackClick` event and
+- **flow, flow-item:** Removed the `calciteFlowItemBackClick` event and
   support for slotting `calcite-panel`s.
 
   - Removed support for slotting `calcite-panel` components, use the
@@ -583,17 +589,17 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
   - Removed the event `calciteFlowItemBackClick`, use
     `calciteFlowItemBack` instead.
 
-* **tip-manager:** Removed the `calciteTipManagerToggle` event, use
+- **tip-manager:** Removed the `calciteTipManagerToggle` event, use
   `calciteTipManagerClose` instead.
 
-* **action:** Removed the `calciteActionClick` event and the `clear`
+- **action:** Removed the `calciteActionClick` event and the `clear`
   value for the `appearance` property.
 
   - Listen to the `click` event instead of `calciteActionClick.
   - Use the value `transparent` instead of `clear` for the property
     `appearance`.
 
-* **list, list-item, list-item-group:** To know when `calcite-list-item` content is selected, listen to the event `calciteListItemSelect` instead of `click`.
+- **list, list-item, list-item-group:** To know when `calcite-list-item` content is selected, listen to the event `calciteListItemSelect` instead of `click`.
 
   - `List`
     - Adds `label` property to specify an accessible name for the component.
@@ -611,8 +617,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
     - Adds `open` property to show child components.
     - Deprecates `nonInteractive` property.
 
-* **calcite-loader, calcite-input-message:** use hidden native global attribute to toggle visibility on the components instead of the deprecated active prop.
-* **block, date-picker, list-item-group, panel, pick-list-group, popover, tip, tip-manager:** Sets internal heading HTML element to be a div by default. If users would like to retain an internal H1-H6 HTML element, they will need to set the headingLevel property on the component. Users already setting the headingLevel property are not affected. ([#5728](https://github.com/Esri/calcite-components/pull/5728)) ([38ca639](https://github.com/Esri/calcite-components/commit/38ca639010b8bd1d1fe32c9cf9b54dfc38cf9877)), closes [5099](https://github.com/Esri/calcite-components/issues/5099)
+- **calcite-loader, calcite-input-message:** use hidden native global attribute to toggle visibility on the components instead of the deprecated active prop.
+- **block, date-picker, list-item-group, panel, pick-list-group, popover, tip, tip-manager:** Sets internal heading HTML element to be a div by default. If users would like to retain an internal H1-H6 HTML element, they will need to set the headingLevel property on the component. Users already setting the headingLevel property are not affected. ([#5728](https://github.com/Esri/calcite-components/pull/5728)) ([38ca639](https://github.com/Esri/calcite-components/commit/38ca639010b8bd1d1fe32c9cf9b54dfc38cf9877)), closes [5099](https://github.com/Esri/calcite-components/issues/5099)
 
 ### Features
 
diff --git a/package-lock.json b/package-lock.json
index 62df055e9fd..5d96b12f61d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.684",
+  "version": "1.0.0-next.685",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@esri/calcite-components",
-      "version": "1.0.0-next.684",
+      "version": "1.0.0-next.685",
       "license": "SEE LICENSE IN copyright.txt",
       "dependencies": {
         "@floating-ui/dom": "1.0.10",
diff --git a/package.json b/package.json
index 9cfc0fc8f24..6d41b3a81a1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "1.0.0-next.684",
+  "version": "1.0.0-next.685",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",