From 10668afa828a657ce6c57cf264e49fa98b0444c0 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Mon, 9 Sep 2024 14:03:36 -0700
Subject: [PATCH 01/26] feat(popover): add component tokens

---
 .../src/components/popover/popover.scss       | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index 0f440644919..99f273ac300 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -3,6 +3,10 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
+ * @prop --calcite-popover-background-color: Specifies the background color of the component.
+ * @prop --calcite-popover-border-color: Specifies the border color of the component.
+ * @prop --calcite-popover-corner-radius: Specifies the corner radius of the component.
+ * @prop --calcite-popover-text-color: Specifies the text color of the component.
  * @prop --calcite-popover-z-index: Sets the z-index value for the component.
  */
 
@@ -46,42 +50,44 @@
 }
 
 .calcite-floating-ui-anim {
-  @apply bg-foreground-1
-    border-color-3
-    rounded
-    border
+  @apply border
     border-solid;
+
+  background-color: var(--calcite-popover-background-color, var(--calcite-color-foreground-1));
+  border-color: var(--calcite-popover-border-color, var(--calcite-color-border-3));
+  border-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
 }
 
 .arrow::before {
-  outline: 1px solid var(--calcite-color-border-3);
+  outline: 1px solid var(--calcite-popover-border-color, var(--calcite-color-border-3));
 }
 
 .header {
-  @apply border-b-color-3
-    flex
+  @apply flex
     flex-auto
     items-stretch
     justify-start
     border-0
     border-b
     border-solid;
+
+  border-block-end-color: var(--calcite-popover-border-color, var(--calcite-color-border-3));
 }
 
 .heading {
-  @apply text-color-1
-  word-break
+  @apply word-break
   m-0
   block
   flex-auto
   self-center
   whitespace-normal
   font-medium;
+
+  color: var(--calcite-popover-text-color, var(--calcite-color-text-1));
 }
 
 .container {
-  @apply text-color-1
-    relative
+  @apply relative
     flex
     h-full
     flex-row
@@ -90,6 +96,8 @@
   &.has-header {
     @apply flex-col;
   }
+
+  color: var(--calcite-popover-text-color, var(--calcite-color-text-1));
 }
 
 .content {
@@ -105,12 +113,12 @@
 .close-button-container {
   @apply flex overflow-hidden;
   flex: 0 0 auto;
-  border-start-end-radius: theme("borderRadius.DEFAULT");
-  border-end-end-radius: theme("borderRadius.DEFAULT");
+  border-start-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
+  border-end-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
 }
 
 .has-header .close-button-container {
-  border-end-end-radius: none;
+  border-end-end-radius: var(--calcite-popover-corner-radius, none);
 }
 
 ::slotted(calcite-panel),

From d0c1d93c50cdefaaaf1eb9a4d4caa5f1b9c5b803 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Mon, 9 Sep 2024 15:58:33 -0700
Subject: [PATCH 02/26] themed e2e test

---
 .../src/components/popover/popover.e2e.ts     | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts
index 33047e32b11..eb7041a1a0f 100644
--- a/packages/calcite-components/src/components/popover/popover.e2e.ts
+++ b/packages/calcite-components/src/components/popover/popover.e2e.ts
@@ -9,6 +9,7 @@ import {
   openClose,
   renders,
   t9n,
+  themed,
 } from "../../tests/commonTests";
 import { CSS } from "./resources";
 
@@ -699,4 +700,64 @@ describe("calcite-popover", () => {
       });
     });
   });
+
+  describe("theme", () => {
+    const popoverHTML = html`
+      <calcite-popover heading="I'm a heading in the header using the 'heading' prop!" closable>
+        Lorem Ipsum
+      </calcite-popover>
+    `;
+
+    describe("default", () => {
+      themed(popoverHTML, {
+        "--calcite-popover-background-color": {
+          shadowSelector: ".calcite-floating-ui-anim",
+          targetProp: "backgroundColor",
+        },
+        "--calcite-popover-border-color": [
+          {
+            shadowSelector: ".calcite-floating-ui-anim",
+            targetProp: "borderColor",
+          },
+          // { shadowSelector: ".arrow::before", targetProp: "outline" },
+          {
+            shadowSelector: ".header",
+            targetProp: "borderBlockEndColor",
+          },
+        ],
+        "--calcite-popover-corner-radius": {
+          shadowSelector: ".calcite-floating-ui-anim",
+          targetProp: "borderRadius",
+        },
+        "--calcite-popover-text-color": [
+          {
+            shadowSelector: ".heading",
+            targetProp: "color",
+          },
+          {
+            shadowSelector: ".container",
+            targetProp: "color",
+          },
+        ],
+      });
+    });
+    describe("close-button", () => {
+      themed(popoverHTML, {
+        "--calcite-popover-corner-radius": [
+          {
+            shadowSelector: ".close-button-container",
+            targetProp: "borderStartEndRadius",
+          },
+          {
+            shadowSelector: ".close-button-container",
+            targetProp: "borderEndEndRadius",
+          },
+          {
+            shadowSelector: ".has-header .close-button-container",
+            targetProp: "borderEndEndRadius",
+          },
+        ],
+      });
+    });
+  });
 });

From 81df053bd361653a4bf4e627c822d707a2cc7732 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Mon, 9 Sep 2024 16:33:29 -0700
Subject: [PATCH 03/26] import CSS variables from resources

---
 .../src/components/popover/popover.e2e.ts      | 18 +++++++++---------
 .../src/components/popover/resources.ts        |  1 +
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts
index eb7041a1a0f..2b2af42433c 100644
--- a/packages/calcite-components/src/components/popover/popover.e2e.ts
+++ b/packages/calcite-components/src/components/popover/popover.e2e.ts
@@ -711,31 +711,31 @@ describe("calcite-popover", () => {
     describe("default", () => {
       themed(popoverHTML, {
         "--calcite-popover-background-color": {
-          shadowSelector: ".calcite-floating-ui-anim",
+          shadowSelector: `.${CSS.calciteFloatingUIAnim}`,
           targetProp: "backgroundColor",
         },
         "--calcite-popover-border-color": [
           {
-            shadowSelector: ".calcite-floating-ui-anim",
+            shadowSelector: `.${CSS.calciteFloatingUIAnim}`,
             targetProp: "borderColor",
           },
           // { shadowSelector: ".arrow::before", targetProp: "outline" },
           {
-            shadowSelector: ".header",
+            shadowSelector: `.${CSS.header}`,
             targetProp: "borderBlockEndColor",
           },
         ],
         "--calcite-popover-corner-radius": {
-          shadowSelector: ".calcite-floating-ui-anim",
+          shadowSelector: `.${CSS.calciteFloatingUIAnim}`,
           targetProp: "borderRadius",
         },
         "--calcite-popover-text-color": [
           {
-            shadowSelector: ".heading",
+            shadowSelector: `.${CSS.heading}`,
             targetProp: "color",
           },
           {
-            shadowSelector: ".container",
+            shadowSelector: `.${CSS.container}`,
             targetProp: "color",
           },
         ],
@@ -745,15 +745,15 @@ describe("calcite-popover", () => {
       themed(popoverHTML, {
         "--calcite-popover-corner-radius": [
           {
-            shadowSelector: ".close-button-container",
+            shadowSelector: `.${CSS.closeButtonContainer}`,
             targetProp: "borderStartEndRadius",
           },
           {
-            shadowSelector: ".close-button-container",
+            shadowSelector: `.${CSS.closeButtonContainer}`,
             targetProp: "borderEndEndRadius",
           },
           {
-            shadowSelector: ".has-header .close-button-container",
+            shadowSelector: `.${CSS.hasHeader} .${CSS.closeButtonContainer}`,
             targetProp: "borderEndEndRadius",
           },
         ],
diff --git a/packages/calcite-components/src/components/popover/resources.ts b/packages/calcite-components/src/components/popover/resources.ts
index c8ac0b31dba..78194faf92d 100644
--- a/packages/calcite-components/src/components/popover/resources.ts
+++ b/packages/calcite-components/src/components/popover/resources.ts
@@ -1,4 +1,5 @@
 export const CSS = {
+  calciteFloatingUIAnim: "calcite-floating-ui-anim",
   container: "container",
   imageContainer: "image-container",
   closeButtonContainer: "close-button-container",

From d4108060572d92a8f413ed7d67d62e80814b4931 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Mon, 9 Sep 2024 17:28:04 -0700
Subject: [PATCH 04/26] custom theme

---
 .../src/custom-theme.stories.ts               |  9 +++++--
 .../src/custom-theme/popover.ts               | 26 +++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 packages/calcite-components/src/custom-theme/popover.ts

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 6e6adf7970f..553d05737b3 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -21,6 +21,7 @@ import { icon } from "./custom-theme/icon";
 import { loader } from "./custom-theme/loader";
 import { notices } from "./custom-theme/notice";
 import { pagination } from "./custom-theme/pagination";
+import { popover, popoverTokens } from "./custom-theme/popover";
 import { segmentedControl } from "./custom-theme/segmented-control";
 import { slider } from "./custom-theme/slider";
 import { calciteSwitch } from "./custom-theme/switch";
@@ -104,7 +105,9 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
           <div>${checkbox}</div>
           ${chips} ${pagination} ${slider}
         </div>
-        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch}</div>
+        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} 
+        <div style="margin-top: 40px">${popover}</div>
+        </div>
       </div>
     </div>
   </div>`;
@@ -119,6 +122,7 @@ export default {
     ...actionPadTokens,
     ...actionGroupTokens,
     ...cardTokens,
+    ...popoverTokens,
   },
 };
 
@@ -126,7 +130,7 @@ export const themingInteractive = (args: Record<string, string>): string => {
   return kitchenSink(args);
 };
 
-export const theming_TestOnly = (): string => {
+export const theming = (): string => {
   return kitchenSink(
     {
       ...actionTokens,
@@ -135,6 +139,7 @@ export const theming_TestOnly = (): string => {
       ...actionPadTokens,
       ...actionGroupTokens,
       ...cardTokens,
+      ...popoverTokens,
     },
     true,
   );
diff --git a/packages/calcite-components/src/custom-theme/popover.ts b/packages/calcite-components/src/custom-theme/popover.ts
new file mode 100644
index 00000000000..8a403480851
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/popover.ts
@@ -0,0 +1,26 @@
+import { html } from "../../support/formatting";
+
+export const popoverTokens = {
+  calcitePopoverBackgroundColor: "",
+  calcitePopoverBorderColor: "",
+  calcitePopoverCornerRadius: "",
+  calcitePopoverTextColor: "",
+  calcitePopoverFloatingUIZIndex: "",
+};
+
+export const popover = html`
+  <calcite-button title="Reference Element" id="reference-element">nostrud exercitation</calcite-button>
+  <calcite-popover
+    heading="these 🥨s are making me thirsty"
+    reference-element="reference-element"
+    placement="auto"
+    open
+    closable
+    scale="l"
+  >
+    <div style="width: 300px; padding:12px 16px;">
+      <b>I am a title!</b> <br />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
+    </div>
+  </calcite-popover>
+`;

From 69e0cbcd33c5020d2aa6affa38db3661e2e7acc7 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 11 Sep 2024 12:59:34 -0700
Subject: [PATCH 05/26] import FloatingCSS and clean up resources

---
 .../src/components/popover/popover.e2e.ts                | 9 +++++----
 .../src/components/popover/resources.ts                  | 1 -
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts
index 2b2af42433c..b4801c66d97 100644
--- a/packages/calcite-components/src/components/popover/popover.e2e.ts
+++ b/packages/calcite-components/src/components/popover/popover.e2e.ts
@@ -11,6 +11,7 @@ import {
   t9n,
   themed,
 } from "../../tests/commonTests";
+import { FloatingCSS } from "../../utils/floating-ui";
 import { CSS } from "./resources";
 
 describe("calcite-popover", () => {
@@ -711,12 +712,12 @@ describe("calcite-popover", () => {
     describe("default", () => {
       themed(popoverHTML, {
         "--calcite-popover-background-color": {
-          shadowSelector: `.${CSS.calciteFloatingUIAnim}`,
+          shadowSelector: `.${FloatingCSS.animation}`,
           targetProp: "backgroundColor",
         },
         "--calcite-popover-border-color": [
           {
-            shadowSelector: `.${CSS.calciteFloatingUIAnim}`,
+            shadowSelector: `.${FloatingCSS.animation}`,
             targetProp: "borderColor",
           },
           // { shadowSelector: ".arrow::before", targetProp: "outline" },
@@ -726,7 +727,7 @@ describe("calcite-popover", () => {
           },
         ],
         "--calcite-popover-corner-radius": {
-          shadowSelector: `.${CSS.calciteFloatingUIAnim}`,
+          shadowSelector: `.${FloatingCSS.animation}`,
           targetProp: "borderRadius",
         },
         "--calcite-popover-text-color": [
@@ -741,7 +742,7 @@ describe("calcite-popover", () => {
         ],
       });
     });
-    describe("close-button", () => {
+    describe("closable", () => {
       themed(popoverHTML, {
         "--calcite-popover-corner-radius": [
           {
diff --git a/packages/calcite-components/src/components/popover/resources.ts b/packages/calcite-components/src/components/popover/resources.ts
index 78194faf92d..c8ac0b31dba 100644
--- a/packages/calcite-components/src/components/popover/resources.ts
+++ b/packages/calcite-components/src/components/popover/resources.ts
@@ -1,5 +1,4 @@
 export const CSS = {
-  calciteFloatingUIAnim: "calcite-floating-ui-anim",
   container: "container",
   imageContainer: "image-container",
   closeButtonContainer: "close-button-container",

From e70e1b710c6c2174ae45179f9e342d45d32e3a7a Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 11 Sep 2024 16:14:49 -0700
Subject: [PATCH 06/26] remove unused style

---
 .../calcite-components/src/components/popover/popover.e2e.ts  | 1 -
 .../calcite-components/src/components/popover/popover.scss    | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts
index b4801c66d97..d7251b6b0ea 100644
--- a/packages/calcite-components/src/components/popover/popover.e2e.ts
+++ b/packages/calcite-components/src/components/popover/popover.e2e.ts
@@ -720,7 +720,6 @@ describe("calcite-popover", () => {
             shadowSelector: `.${FloatingCSS.animation}`,
             targetProp: "borderColor",
           },
-          // { shadowSelector: ".arrow::before", targetProp: "outline" },
           {
             shadowSelector: `.${CSS.header}`,
             targetProp: "borderBlockEndColor",
diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index 99f273ac300..4a067bd66b0 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -58,10 +58,6 @@
   border-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
 }
 
-.arrow::before {
-  outline: 1px solid var(--calcite-popover-border-color, var(--calcite-color-border-3));
-}
-
 .header {
   @apply flex
     flex-auto

From a94882a4c447c4352c4c9e53dba919a1485e82f6 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 11 Sep 2024 16:44:18 -0700
Subject: [PATCH 07/26] remove redundant story

---
 .../src/components/popover/popover.stories.ts | 22 -------------------
 1 file changed, 22 deletions(-)

diff --git a/packages/calcite-components/src/components/popover/popover.stories.ts b/packages/calcite-components/src/components/popover/popover.stories.ts
index bb69f56f2a8..6a18d7d5587 100644
--- a/packages/calcite-components/src/components/popover/popover.stories.ts
+++ b/packages/calcite-components/src/components/popover/popover.stories.ts
@@ -186,25 +186,3 @@ export const largeScaleLayout_TestOnly = (): string => html`
     </calcite-popover>
   </div>
 `;
-
-export const transparentBG_TestOnly = (): string => html`
-  <style>
-    calcite-popover {
-      --calcite-color-foreground-1: rgba(0, 0, 0, 0.5);
-      --calcite-color-text-1: orange;
-    }
-  </style>
-  <div style="width: 400px;">
-    ${referenceElementHTML}
-    <calcite-popover
-      heading="these 🥨s are making me thirsty"
-      reference-element="reference-element"
-      placement="auto"
-      open
-      closable
-      scale="l"
-    >
-      ${contentHTML}
-    </calcite-popover>
-  </div>
-`;

From c43eab3619fd599fd5e293fbd3f74e8bdf803e48 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 12 Sep 2024 10:52:57 -0700
Subject: [PATCH 08/26] inline html and cleanup

---
 .../src/components/popover/popover.e2e.ts     | 100 +++++++++---------
 1 file changed, 52 insertions(+), 48 deletions(-)

diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts
index d7251b6b0ea..f679cf2ddd2 100644
--- a/packages/calcite-components/src/components/popover/popover.e2e.ts
+++ b/packages/calcite-components/src/components/popover/popover.e2e.ts
@@ -703,61 +703,65 @@ describe("calcite-popover", () => {
   });
 
   describe("theme", () => {
-    const popoverHTML = html`
-      <calcite-popover heading="I'm a heading in the header using the 'heading' prop!" closable>
-        Lorem Ipsum
-      </calcite-popover>
-    `;
-
     describe("default", () => {
-      themed(popoverHTML, {
-        "--calcite-popover-background-color": {
-          shadowSelector: `.${FloatingCSS.animation}`,
-          targetProp: "backgroundColor",
-        },
-        "--calcite-popover-border-color": [
-          {
+      themed(
+        html`
+          <calcite-popover heading="I'm a heading in the header using the 'heading' prop!">
+            Lorem Ipsum
+          </calcite-popover>
+        `,
+        {
+          "--calcite-popover-background-color": {
             shadowSelector: `.${FloatingCSS.animation}`,
-            targetProp: "borderColor",
+            targetProp: "backgroundColor",
           },
-          {
-            shadowSelector: `.${CSS.header}`,
-            targetProp: "borderBlockEndColor",
+          "--calcite-popover-border-color": [
+            {
+              shadowSelector: `.${FloatingCSS.animation}`,
+              targetProp: "borderColor",
+            },
+            {
+              shadowSelector: `.${CSS.header}`,
+              targetProp: "borderBlockEndColor",
+            },
+          ],
+          "--calcite-popover-corner-radius": {
+            shadowSelector: `.${FloatingCSS.animation}`,
+            targetProp: "borderRadius",
           },
-        ],
-        "--calcite-popover-corner-radius": {
-          shadowSelector: `.${FloatingCSS.animation}`,
-          targetProp: "borderRadius",
+          "--calcite-popover-text-color": [
+            {
+              shadowSelector: `.${CSS.heading}`,
+              targetProp: "color",
+            },
+            {
+              shadowSelector: `.${CSS.container}`,
+              targetProp: "color",
+            },
+          ],
         },
-        "--calcite-popover-text-color": [
-          {
-            shadowSelector: `.${CSS.heading}`,
-            targetProp: "color",
-          },
-          {
-            shadowSelector: `.${CSS.container}`,
-            targetProp: "color",
-          },
-        ],
-      });
+      );
     });
     describe("closable", () => {
-      themed(popoverHTML, {
-        "--calcite-popover-corner-radius": [
-          {
-            shadowSelector: `.${CSS.closeButtonContainer}`,
-            targetProp: "borderStartEndRadius",
-          },
-          {
-            shadowSelector: `.${CSS.closeButtonContainer}`,
-            targetProp: "borderEndEndRadius",
-          },
-          {
-            shadowSelector: `.${CSS.hasHeader} .${CSS.closeButtonContainer}`,
-            targetProp: "borderEndEndRadius",
-          },
-        ],
-      });
+      themed(
+        html`
+          <calcite-popover heading="I'm a heading in the header using the 'heading' prop!" closable>
+            Lorem Ipsum
+          </calcite-popover>
+        `,
+        {
+          "--calcite-popover-corner-radius": [
+            {
+              shadowSelector: `.${CSS.closeButtonContainer}`,
+              targetProp: "borderStartEndRadius",
+            },
+            {
+              shadowSelector: `.${CSS.closeButtonContainer}`,
+              targetProp: "borderEndEndRadius",
+            },
+          ],
+        },
+      );
     });
   });
 });

From ea7c73d6ff7707d5bab3eff15df4f3141e593e8c Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 12 Sep 2024 11:19:24 -0700
Subject: [PATCH 09/26] restore transparentBG_TestOnly story

---
 .../src/components/popover/popover.stories.ts | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/calcite-components/src/components/popover/popover.stories.ts b/packages/calcite-components/src/components/popover/popover.stories.ts
index 6a18d7d5587..bb69f56f2a8 100644
--- a/packages/calcite-components/src/components/popover/popover.stories.ts
+++ b/packages/calcite-components/src/components/popover/popover.stories.ts
@@ -186,3 +186,25 @@ export const largeScaleLayout_TestOnly = (): string => html`
     </calcite-popover>
   </div>
 `;
+
+export const transparentBG_TestOnly = (): string => html`
+  <style>
+    calcite-popover {
+      --calcite-color-foreground-1: rgba(0, 0, 0, 0.5);
+      --calcite-color-text-1: orange;
+    }
+  </style>
+  <div style="width: 400px;">
+    ${referenceElementHTML}
+    <calcite-popover
+      heading="these 🥨s are making me thirsty"
+      reference-element="reference-element"
+      placement="auto"
+      open
+      closable
+      scale="l"
+    >
+      ${contentHTML}
+    </calcite-popover>
+  </div>
+`;

From ef7ba80f2499aa3b7684acc3f5921582b44f36a3 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 12 Sep 2024 12:10:39 -0700
Subject: [PATCH 10/26] remove inline styling and add albel with layout inline
 instead

---
 .../calcite-components/src/custom-theme.stories.ts     |  3 +--
 packages/calcite-components/src/custom-theme/switch.ts | 10 ++++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 553d05737b3..aaa2ce60bc5 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -105,8 +105,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
           <div>${checkbox}</div>
           ${chips} ${pagination} ${slider}
         </div>
-        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} 
-        <div style="margin-top: 40px">${popover}</div>
+        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} ${popover}
         </div>
       </div>
     </div>
diff --git a/packages/calcite-components/src/custom-theme/switch.ts b/packages/calcite-components/src/custom-theme/switch.ts
index 2293379f7ef..994002603ef 100644
--- a/packages/calcite-components/src/custom-theme/switch.ts
+++ b/packages/calcite-components/src/custom-theme/switch.ts
@@ -1,6 +1,8 @@
 import { html } from "../../support/formatting";
 
-export const calciteSwitch = html`<label>
-  <calcite-switch scale="m" checked> </calcite-switch>
-  Red switch scale medium
-</label>`;
+export const calciteSwitch = html`
+  <calcite-label layout="inline">
+    <calcite-switch scale="m" checked></calcite-switch>
+    Red switch scale medium
+  </calcite-label>
+`;

From 38795c524cdb7a5d9fc19d8106a89670c21da520 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 13 Sep 2024 14:47:49 -0700
Subject: [PATCH 11/26] calcite-action rounded corner

---
 .../calcite-components/src/components/popover/popover.scss   | 5 +++++
 packages/calcite-components/src/custom-theme/popover.ts      | 3 +++
 2 files changed, 8 insertions(+)

diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index 4a067bd66b0..c595359b193 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -122,4 +122,9 @@
   @apply h-full;
 }
 
+calcite-action {
+  border-start-end-radius: var(calcite-popover-action-corner-radius, var(--calcite-corner-radius-round));
+  border-end-end-radius: var(calcite-popover-action-corner-radius, var(--calcite-corner-radius-round));
+}
+
 @include base-component();
diff --git a/packages/calcite-components/src/custom-theme/popover.ts b/packages/calcite-components/src/custom-theme/popover.ts
index bc106178405..e8988be9a50 100644
--- a/packages/calcite-components/src/custom-theme/popover.ts
+++ b/packages/calcite-components/src/custom-theme/popover.ts
@@ -9,6 +9,9 @@ export const popoverTokens = {
 };
 
 export const popover = html`
+  <style>
+    --calcite-popover-action-corner-radius: 42px;
+  </style>
   <calcite-label layout="inline">
     <calcite-button title="Reference Element" id="reference-element">nostrud exercitation</calcite-button>
     <calcite-popover

From 0a71e830c4adf97c4d763730d7152fc645562b3d Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 17 Sep 2024 15:01:36 -0700
Subject: [PATCH 12/26] add action public tokens

---
 packages/calcite-components/src/components/action/action.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
index 37936f0d69b..ad43bb2ac1d 100755
--- a/packages/calcite-components/src/components/action/action.scss
+++ b/packages/calcite-components/src/components/action/action.scss
@@ -7,6 +7,8 @@
  * @prop --calcite-action-background-color: Specifies the component's  background color.
  * @prop --calcite-action-background-color-hover: Specifies the component's background color when hovered or focused.
  * @prop --calcite-action-background-color-pressed: Specifies the component's background color when active.
+ * @prop --calcite-action-corner-radius-start-end: Specifies the component's corner radius start end.
+ * @prop --calcite-action-corner-radius-end-end: Specifies the component's corner radius end end.
  * @prop --calcite-action-text-color: Specifies the text color of the component.
  * @prop --calcite-action-text-color-pressed: Specifies the component's text color when hovered.
  */

From f047f66fd6d23d38280189f63b4e739c96aae7fb Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 17 Sep 2024 16:23:18 -0700
Subject: [PATCH 13/26] fine grained
 --calcite-internal-action-corner-radius-start/end for for close action button

---
 .../src/components/action/action.scss         | 58 +++++++++++++++++++
 .../src/components/popover/popover.scss       | 15 ++++-
 2 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
index ad43bb2ac1d..77a2f0614ba 100755
--- a/packages/calcite-components/src/components/action/action.scss
+++ b/packages/calcite-components/src/components/action/action.scss
@@ -16,6 +16,35 @@
 :host {
   @extend %component-host;
   @apply flex bg-transparent;
+
+  border-start-start-radius: var(
+    --calcite-action-corner-radius-start-start,
+    var(
+      --calcite-action-corner-radius,
+      var(--calcite-internal-action-corner-radius-start-start, var(--calcite-corner-radius))
+    )
+  );
+  border-start-end-radius: var(
+    --calcite-action-corner-radius-start-end,
+    var(
+      --calcite-action-corner-radius,
+      var(--calcite-internal-action-corner-radius-start-end, var(--calcite-corner-radius))
+    )
+  );
+  border-end-start-radius: var(
+    --calcite-action-corner-radius-end-start,
+    var(
+      --calcite-action-corner-radius,
+      var(--calcite-internal-action-corner-radius-end-start, var(--calcite-corner-radius))
+    )
+  );
+  border-end-end-radius: var(
+    --calcite-action-corner-radius-end-end,
+    var(
+      --calcite-action-corner-radius,
+      var(--calcite-internal-action-corner-radius-end-end, var(--calcite-corner-radius))
+    )
+  );
 }
 
 @mixin action-indicator() {
@@ -48,6 +77,35 @@
 
   background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));
   color: var(--calcite-action-text-color, var(--calcite-color-text-3));
+
+  border-start-start-radius: var(
+    --calcite-action-corner-radius-start-start,
+    var(
+      --calcite-action-corner-radius,
+      var(--calcite-internal-action-corner-radius-start-start, var(--calcite-corner-radius))
+    )
+  );
+  border-start-end-radius: var(
+    --calcite-action-corner-radius-start-end,
+    var(
+      --calcite-action-corner-radius,
+      var(--calcite-internal-action-corner-radius-start-end, var(--calcite-corner-radius))
+    )
+  );
+  border-end-start-radius: var(
+    --calcite-action-corner-radius-end-start,
+    var(
+      --calcite-action-corner-radius,
+      var(--calcite-internal-action-corner-radius-end-start, var(--calcite-corner-radius))
+    )
+  );
+  border-end-end-radius: var(
+    --calcite-action-corner-radius-end-end,
+    var(
+      --calcite-action-corner-radius,
+      var(--calcite-internal-action-corner-radius-end-end, var(--calcite-corner-radius))
+    )
+  );
   text-align: unset;
   flex: 1 0 auto;
 
diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index c595359b193..bc3ed7c91f3 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -111,20 +111,31 @@
   flex: 0 0 auto;
   border-start-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
   border-end-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
+  --calcite-internal-action-corner-radius-start-end: var(
+    --calcite-popover-corner-radius,
+    var(--calcite-corner-radius-sharp)
+  );
 }
 
 .has-header .close-button-container {
   border-end-end-radius: var(--calcite-popover-corner-radius, none);
 }
 
+:not(.has-header) .close-button-container {
+  --calcite-internal-action-corner-radius-end-end: var(
+    --calcite-popover-corner-radius,
+    var(--calcite-corner-radius-sharp)
+  );
+}
+
 ::slotted(calcite-panel),
 ::slotted(calcite-flow) {
   @apply h-full;
 }
 
 calcite-action {
-  border-start-end-radius: var(calcite-popover-action-corner-radius, var(--calcite-corner-radius-round));
-  border-end-end-radius: var(calcite-popover-action-corner-radius, var(--calcite-corner-radius-round));
+  border-start-end-radius: var(--calcite-action-corner-radius-start-end);
+  border-end-end-radius: var(--calcite-action-corner-radius-end-end);
 }
 
 @include base-component();

From 852b2a08d157c2b4b60377574cac8d1dc033b155 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 17 Sep 2024 17:11:12 -0700
Subject: [PATCH 14/26] cleanup

---
 packages/calcite-components/src/custom-theme/popover.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/calcite-components/src/custom-theme/popover.ts b/packages/calcite-components/src/custom-theme/popover.ts
index e8988be9a50..bc106178405 100644
--- a/packages/calcite-components/src/custom-theme/popover.ts
+++ b/packages/calcite-components/src/custom-theme/popover.ts
@@ -9,9 +9,6 @@ export const popoverTokens = {
 };
 
 export const popover = html`
-  <style>
-    --calcite-popover-action-corner-radius: 42px;
-  </style>
   <calcite-label layout="inline">
     <calcite-button title="Reference Element" id="reference-element">nostrud exercitation</calcite-button>
     <calcite-popover

From 9a56f7021bf18402d29789c53db14162fef0ac3b Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 18 Sep 2024 07:41:26 -0700
Subject: [PATCH 15/26] additional corner radius action tokens

---
 .../src/components/action/action.scss         | 65 +++++++------------
 .../src/components/popover/popover.scss       |  5 --
 .../src/custom-theme/handle.ts                |  3 +-
 3 files changed, 24 insertions(+), 49 deletions(-)

diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
index 77a2f0614ba..f8e139b018a 100755
--- a/packages/calcite-components/src/components/action/action.scss
+++ b/packages/calcite-components/src/components/action/action.scss
@@ -7,42 +7,52 @@
  * @prop --calcite-action-background-color: Specifies the component's  background color.
  * @prop --calcite-action-background-color-hover: Specifies the component's background color when hovered or focused.
  * @prop --calcite-action-background-color-pressed: Specifies the component's background color when active.
- * @prop --calcite-action-corner-radius-start-end: Specifies the component's corner radius start end.
+ * @prop --calcite-action-corner-radius: Specifies the component's corner radius.
  * @prop --calcite-action-corner-radius-end-end: Specifies the component's corner radius end end.
+ * @prop --calcite-action-corner-radius-end-start: Specifies the component's corner radius end start.
+ * @prop --calcite-action-corner-radius-start-end: Specifies the component's corner radius start end.
+ * @prop --calcite-action-corner-radius-start-start: Specifies the component's corner radius start start.
  * @prop --calcite-action-text-color: Specifies the text color of the component.
  * @prop --calcite-action-text-color-pressed: Specifies the component's text color when hovered.
+ * @prop --calcite-internal-action-corner-radius-end-end:: Specifies the component's internal corner radius end end.
+ * @prop --calcite-internal-action-corner-radius-end-start: Specifies the component's internal corner radius end start.
+ * @prop --calcite-internal-action-corner-radius-start-end: Specifies the component's internal corner radius start end.
+ * @prop --calcite-internal-action-corner-radius-start-start: Specifies the component's internal corner radius start start.
  */
 
 :host {
   @extend %component-host;
   @apply flex bg-transparent;
+}
 
-  border-start-start-radius: var(
-    --calcite-action-corner-radius-start-start,
+:host,
+button {
+  border-end-end-radius: var(
+    --calcite-action-corner-radius-end-end,
     var(
       --calcite-action-corner-radius,
-      var(--calcite-internal-action-corner-radius-start-start, var(--calcite-corner-radius))
+      var(--calcite-internal-action-corner-radius-end-end, var(--calcite-corner-radius))
     )
   );
-  border-start-end-radius: var(
-    --calcite-action-corner-radius-start-end,
+  border-end-start-radius: var(
+    --calcite-action-corner-radius-end-start,
     var(
       --calcite-action-corner-radius,
-      var(--calcite-internal-action-corner-radius-start-end, var(--calcite-corner-radius))
+      var(--calcite-internal-action-corner-radius-end-start, var(--calcite-corner-radius))
     )
   );
-  border-end-start-radius: var(
-    --calcite-action-corner-radius-end-start,
+  border-start-end-radius: var(
+    --calcite-action-corner-radius-start-end,
     var(
       --calcite-action-corner-radius,
-      var(--calcite-internal-action-corner-radius-end-start, var(--calcite-corner-radius))
+      var(--calcite-internal-action-corner-radius-start-end, var(--calcite-corner-radius))
     )
   );
-  border-end-end-radius: var(
-    --calcite-action-corner-radius-end-end,
+  border-start-start-radius: var(
+    --calcite-action-corner-radius-start-start,
     var(
       --calcite-action-corner-radius,
-      var(--calcite-internal-action-corner-radius-end-end, var(--calcite-corner-radius))
+      var(--calcite-internal-action-corner-radius-start-start, var(--calcite-corner-radius))
     )
   );
 }
@@ -77,35 +87,6 @@
 
   background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));
   color: var(--calcite-action-text-color, var(--calcite-color-text-3));
-
-  border-start-start-radius: var(
-    --calcite-action-corner-radius-start-start,
-    var(
-      --calcite-action-corner-radius,
-      var(--calcite-internal-action-corner-radius-start-start, var(--calcite-corner-radius))
-    )
-  );
-  border-start-end-radius: var(
-    --calcite-action-corner-radius-start-end,
-    var(
-      --calcite-action-corner-radius,
-      var(--calcite-internal-action-corner-radius-start-end, var(--calcite-corner-radius))
-    )
-  );
-  border-end-start-radius: var(
-    --calcite-action-corner-radius-end-start,
-    var(
-      --calcite-action-corner-radius,
-      var(--calcite-internal-action-corner-radius-end-start, var(--calcite-corner-radius))
-    )
-  );
-  border-end-end-radius: var(
-    --calcite-action-corner-radius-end-end,
-    var(
-      --calcite-action-corner-radius,
-      var(--calcite-internal-action-corner-radius-end-end, var(--calcite-corner-radius))
-    )
-  );
   text-align: unset;
   flex: 1 0 auto;
 
diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index bc3ed7c91f3..3963bae09d2 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -133,9 +133,4 @@
   @apply h-full;
 }
 
-calcite-action {
-  border-start-end-radius: var(--calcite-action-corner-radius-start-end);
-  border-end-end-radius: var(--calcite-action-corner-radius-end-end);
-}
-
 @include base-component();
diff --git a/packages/calcite-components/src/custom-theme/handle.ts b/packages/calcite-components/src/custom-theme/handle.ts
index 8e6db68604f..788e67360a3 100644
--- a/packages/calcite-components/src/custom-theme/handle.ts
+++ b/packages/calcite-components/src/custom-theme/handle.ts
@@ -12,6 +12,5 @@ export const handleTokens = {
 export const handle = html`
   <calcite-label layout="inline">
     <calcite-handle></calcite-handle>
-    <calcite-label> </calcite-label
-  ></calcite-label>
+  </calcite-label>
 `;

From 8daa1b5f5f5fb710fb7c685a4d24f9c5aeb9b4fd Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 18 Sep 2024 10:41:38 -0700
Subject: [PATCH 16/26] add container class and cleanup

---
 .../src/components/popover/popover.e2e.ts            |  7 +++----
 .../src/components/popover/popover.scss              | 12 +++++-------
 .../src/components/popover/popover.tsx               |  1 +
 .../calcite-components/src/custom-theme/handle.ts    |  6 +-----
 4 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts
index f679cf2ddd2..ba22bd8287c 100644
--- a/packages/calcite-components/src/components/popover/popover.e2e.ts
+++ b/packages/calcite-components/src/components/popover/popover.e2e.ts
@@ -11,7 +11,6 @@ import {
   t9n,
   themed,
 } from "../../tests/commonTests";
-import { FloatingCSS } from "../../utils/floating-ui";
 import { CSS } from "./resources";
 
 describe("calcite-popover", () => {
@@ -712,12 +711,12 @@ describe("calcite-popover", () => {
         `,
         {
           "--calcite-popover-background-color": {
-            shadowSelector: `.${FloatingCSS.animation}`,
+            shadowSelector: `.${CSS.container}`,
             targetProp: "backgroundColor",
           },
           "--calcite-popover-border-color": [
             {
-              shadowSelector: `.${FloatingCSS.animation}`,
+              shadowSelector: `.${CSS.container}`,
               targetProp: "borderColor",
             },
             {
@@ -726,7 +725,7 @@ describe("calcite-popover", () => {
             },
           ],
           "--calcite-popover-corner-radius": {
-            shadowSelector: `.${FloatingCSS.animation}`,
+            shadowSelector: `.${CSS.container}`,
             targetProp: "borderRadius",
           },
           "--calcite-popover-text-color": [
diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index 3963bae09d2..56c2e4257be 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -111,23 +111,21 @@
   flex: 0 0 auto;
   border-start-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
   border-end-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
+
   --calcite-internal-action-corner-radius-start-end: var(
     --calcite-popover-corner-radius,
     var(--calcite-corner-radius-sharp)
   );
-}
-
-.has-header .close-button-container {
-  border-end-end-radius: var(--calcite-popover-corner-radius, none);
-}
-
-:not(.has-header) .close-button-container {
   --calcite-internal-action-corner-radius-end-end: var(
     --calcite-popover-corner-radius,
     var(--calcite-corner-radius-sharp)
   );
 }
 
+.has-header .close-button-container {
+  border-end-end-radius: var(--calcite-popover-corner-radius, none);
+}
+
 ::slotted(calcite-panel),
 ::slotted(calcite-flow) {
   @apply h-full;
diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx
index 410f707a68c..54368a7a503 100644
--- a/packages/calcite-components/src/components/popover/popover.tsx
+++ b/packages/calcite-components/src/components/popover/popover.tsx
@@ -580,6 +580,7 @@ export class Popover
       >
         <div
           class={{
+            [CSS.container]: true,
             [FloatingCSS.animation]: true,
             [FloatingCSS.animationActive]: displayed,
           }}
diff --git a/packages/calcite-components/src/custom-theme/handle.ts b/packages/calcite-components/src/custom-theme/handle.ts
index 788e67360a3..9f132159207 100644
--- a/packages/calcite-components/src/custom-theme/handle.ts
+++ b/packages/calcite-components/src/custom-theme/handle.ts
@@ -9,8 +9,4 @@ export const handleTokens = {
   calciteHandleIconColorSelected: "",
 };
 
-export const handle = html`
-  <calcite-label layout="inline">
-    <calcite-handle></calcite-handle>
-  </calcite-label>
-`;
+export const handle = html`<calcite-handle></calcite-handle>`;

From 25219e94fa3ceb7a6129e7e758347078cdd57017 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 18 Sep 2024 10:47:21 -0700
Subject: [PATCH 17/26] token to match css prop

---
 packages/calcite-components/src/custom-theme/popover.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/custom-theme/popover.ts b/packages/calcite-components/src/custom-theme/popover.ts
index bc106178405..0c2083efd7b 100644
--- a/packages/calcite-components/src/custom-theme/popover.ts
+++ b/packages/calcite-components/src/custom-theme/popover.ts
@@ -5,7 +5,7 @@ export const popoverTokens = {
   calcitePopoverBorderColor: "",
   calcitePopoverCornerRadius: "",
   calcitePopoverTextColor: "",
-  calcitePopoverFloatingUIZIndex: "",
+  calcitePopoverZIndex: "",
 };
 
 export const popover = html`

From c9ddd1d891e486ce51cc9c0a14ff08c562947c21 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 18 Sep 2024 11:39:40 -0700
Subject: [PATCH 18/26] bring back selectors

---
 .../src/components/popover/popover.e2e.ts                  | 7 ++++---
 .../calcite-components/src/components/popover/popover.tsx  | 1 -
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts
index ba22bd8287c..f679cf2ddd2 100644
--- a/packages/calcite-components/src/components/popover/popover.e2e.ts
+++ b/packages/calcite-components/src/components/popover/popover.e2e.ts
@@ -11,6 +11,7 @@ import {
   t9n,
   themed,
 } from "../../tests/commonTests";
+import { FloatingCSS } from "../../utils/floating-ui";
 import { CSS } from "./resources";
 
 describe("calcite-popover", () => {
@@ -711,12 +712,12 @@ describe("calcite-popover", () => {
         `,
         {
           "--calcite-popover-background-color": {
-            shadowSelector: `.${CSS.container}`,
+            shadowSelector: `.${FloatingCSS.animation}`,
             targetProp: "backgroundColor",
           },
           "--calcite-popover-border-color": [
             {
-              shadowSelector: `.${CSS.container}`,
+              shadowSelector: `.${FloatingCSS.animation}`,
               targetProp: "borderColor",
             },
             {
@@ -725,7 +726,7 @@ describe("calcite-popover", () => {
             },
           ],
           "--calcite-popover-corner-radius": {
-            shadowSelector: `.${CSS.container}`,
+            shadowSelector: `.${FloatingCSS.animation}`,
             targetProp: "borderRadius",
           },
           "--calcite-popover-text-color": [
diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx
index 54368a7a503..410f707a68c 100644
--- a/packages/calcite-components/src/components/popover/popover.tsx
+++ b/packages/calcite-components/src/components/popover/popover.tsx
@@ -580,7 +580,6 @@ export class Popover
       >
         <div
           class={{
-            [CSS.container]: true,
             [FloatingCSS.animation]: true,
             [FloatingCSS.animationActive]: displayed,
           }}

From 356f00577b4ac18eba84ef2bee3b91c2df4bab56 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 18 Sep 2024 11:52:20 -0700
Subject: [PATCH 19/26] cleanup

---
 .../src/components/popover/popover.scss                   | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index 56c2e4257be..23ae09b7569 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -111,21 +111,19 @@
   flex: 0 0 auto;
   border-start-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
   border-end-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
-
   --calcite-internal-action-corner-radius-start-end: var(
     --calcite-popover-corner-radius,
     var(--calcite-corner-radius-sharp)
   );
+}
+
+:not(.has-header) .close-button-container {
   --calcite-internal-action-corner-radius-end-end: var(
     --calcite-popover-corner-radius,
     var(--calcite-corner-radius-sharp)
   );
 }
 
-.has-header .close-button-container {
-  border-end-end-radius: var(--calcite-popover-corner-radius, none);
-}
-
 ::slotted(calcite-panel),
 ::slotted(calcite-flow) {
   @apply h-full;

From 6d1a74cdeb0d023adfb6d3d3c9bd3bc48820e0a1 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 18 Sep 2024 14:42:19 -0700
Subject: [PATCH 20/26] e2e test for additional props

---
 .../src/components/action/action.e2e.ts       | 155 ++++++++++++++++++
 1 file changed, 155 insertions(+)

diff --git a/packages/calcite-components/src/components/action/action.e2e.ts b/packages/calcite-components/src/components/action/action.e2e.ts
index 2520e24855a..24b1fecf61a 100755
--- a/packages/calcite-components/src/components/action/action.e2e.ts
+++ b/packages/calcite-components/src/components/action/action.e2e.ts
@@ -206,6 +206,7 @@ describe("calcite-action", () => {
     expect(liveRegion.getAttribute("role")).toBe("region");
     expect(liveRegion.textContent).toBe("Indicator present");
   });
+
   describe("themed", () => {
     describe("default", () => {
       themed(html`calcite-action`, {
@@ -285,5 +286,159 @@ describe("calcite-action", () => {
         },
       );
     });
+    describe("corner radius", () => {
+      themed(html`calcite-action`, {
+        "--calcite-action-corner-radius": [
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderEndEndRadius",
+          },
+          {
+            targetProp: "borderEndEndRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderEndStartRadius",
+          },
+          {
+            targetProp: "borderEndStartRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderStartEndRadius",
+          },
+          {
+            targetProp: "borderStartEndRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderStartStartRadius",
+          },
+          {
+            targetProp: "borderStartStartRadius",
+          },
+        ],
+        "--calcite-action-corner-radius-end-end": [
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderEndEndRadius",
+          },
+          {
+            targetProp: "borderEndEndRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderEndStartRadius",
+          },
+          {
+            targetProp: "borderEndStartRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderStartEndRadius",
+          },
+          {
+            targetProp: "borderStartEndRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderStartStartRadius",
+          },
+          {
+            targetProp: "borderStartStartRadius",
+          },
+        ],
+        "--calcite-action-corner-radius-end-start": [
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderEndEndRadius",
+          },
+          {
+            targetProp: "borderEndEndRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderEndStartRadius",
+          },
+          {
+            targetProp: "borderEndStartRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderStartEndRadius",
+          },
+          {
+            targetProp: "borderStartEndRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderStartStartRadius",
+          },
+          {
+            targetProp: "borderStartStartRadius",
+          },
+        ],
+        "--calcite-action-corner-radius-start-end": [
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderEndEndRadius",
+          },
+          {
+            targetProp: "borderEndEndRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderEndStartRadius",
+          },
+          {
+            targetProp: "borderEndStartRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderStartEndRadius",
+          },
+          {
+            targetProp: "borderStartEndRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderStartStartRadius",
+          },
+          {
+            targetProp: "borderStartStartRadius",
+          },
+        ],
+        "--calcite-action-corner-radius-start-start": [
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderEndEndRadius",
+          },
+          {
+            targetProp: "borderEndEndRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderEndStartRadius",
+          },
+          {
+            targetProp: "borderEndStartRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderStartEndRadius",
+          },
+          {
+            targetProp: "borderStartEndRadius",
+          },
+          {
+            shadowSelector: `.${CSS.button}`,
+            targetProp: "borderStartStartRadius",
+          },
+          {
+            targetProp: "borderStartStartRadius",
+          },
+        ],
+      });
+    });
   });
 });

From 087cbf77932de8ca4a96307e15d17ad6a6575c11 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 18 Sep 2024 16:03:03 -0700
Subject: [PATCH 21/26] cleanup

---
 packages/calcite-components/src/components/action/action.scss  | 2 +-
 .../calcite-components/src/components/popover/popover.scss     | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
index f8e139b018a..fec6f36b850 100755
--- a/packages/calcite-components/src/components/action/action.scss
+++ b/packages/calcite-components/src/components/action/action.scss
@@ -14,7 +14,7 @@
  * @prop --calcite-action-corner-radius-start-start: Specifies the component's corner radius start start.
  * @prop --calcite-action-text-color: Specifies the text color of the component.
  * @prop --calcite-action-text-color-pressed: Specifies the component's text color when hovered.
- * @prop --calcite-internal-action-corner-radius-end-end:: Specifies the component's internal corner radius end end.
+ * @prop --calcite-internal-action-corner-radius-end-end: Specifies the component's internal corner radius end end.
  * @prop --calcite-internal-action-corner-radius-end-start: Specifies the component's internal corner radius end start.
  * @prop --calcite-internal-action-corner-radius-start-end: Specifies the component's internal corner radius start end.
  * @prop --calcite-internal-action-corner-radius-start-start: Specifies the component's internal corner radius start start.
diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index 23ae09b7569..4a4a44bd01e 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -115,9 +115,6 @@
     --calcite-popover-corner-radius,
     var(--calcite-corner-radius-sharp)
   );
-}
-
-:not(.has-header) .close-button-container {
   --calcite-internal-action-corner-radius-end-end: var(
     --calcite-popover-corner-radius,
     var(--calcite-corner-radius-sharp)

From 2383c6036561bcb7ff773e67d3109f2da294c29f Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 18 Sep 2024 20:35:02 -0700
Subject: [PATCH 22/26] remove internal prop docs

---
 packages/calcite-components/src/components/action/action.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
index fec6f36b850..3715cfeb4cb 100755
--- a/packages/calcite-components/src/components/action/action.scss
+++ b/packages/calcite-components/src/components/action/action.scss
@@ -14,10 +14,6 @@
  * @prop --calcite-action-corner-radius-start-start: Specifies the component's corner radius start start.
  * @prop --calcite-action-text-color: Specifies the text color of the component.
  * @prop --calcite-action-text-color-pressed: Specifies the component's text color when hovered.
- * @prop --calcite-internal-action-corner-radius-end-end: Specifies the component's internal corner radius end end.
- * @prop --calcite-internal-action-corner-radius-end-start: Specifies the component's internal corner radius end start.
- * @prop --calcite-internal-action-corner-radius-start-end: Specifies the component's internal corner radius start end.
- * @prop --calcite-internal-action-corner-radius-start-start: Specifies the component's internal corner radius start start.
  */
 
 :host {

From 989730627c3d6ff4952c8945917634111cab6774 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 18 Sep 2024 20:43:21 -0700
Subject: [PATCH 23/26] rename container

---
 .../src/components/popover/popover.e2e.ts                | 9 ++++-----
 .../src/components/popover/popover.tsx                   | 3 ++-
 .../src/components/popover/resources.ts                  | 1 +
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts
index f679cf2ddd2..9a078854371 100644
--- a/packages/calcite-components/src/components/popover/popover.e2e.ts
+++ b/packages/calcite-components/src/components/popover/popover.e2e.ts
@@ -11,7 +11,6 @@ import {
   t9n,
   themed,
 } from "../../tests/commonTests";
-import { FloatingCSS } from "../../utils/floating-ui";
 import { CSS } from "./resources";
 
 describe("calcite-popover", () => {
@@ -712,12 +711,12 @@ describe("calcite-popover", () => {
         `,
         {
           "--calcite-popover-background-color": {
-            shadowSelector: `.${FloatingCSS.animation}`,
+            shadowSelector: `.${CSS.container}`,
             targetProp: "backgroundColor",
           },
           "--calcite-popover-border-color": [
             {
-              shadowSelector: `.${FloatingCSS.animation}`,
+              shadowSelector: `.${CSS.container}`,
               targetProp: "borderColor",
             },
             {
@@ -726,7 +725,7 @@ describe("calcite-popover", () => {
             },
           ],
           "--calcite-popover-corner-radius": {
-            shadowSelector: `.${FloatingCSS.animation}`,
+            shadowSelector: `.${CSS.container}`,
             targetProp: "borderRadius",
           },
           "--calcite-popover-text-color": [
@@ -735,7 +734,7 @@ describe("calcite-popover", () => {
               targetProp: "color",
             },
             {
-              shadowSelector: `.${CSS.container}`,
+              shadowSelector: `.${CSS.headerContainer}`,
               targetProp: "color",
             },
           ],
diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx
index 410f707a68c..2f4686ed3ab 100644
--- a/packages/calcite-components/src/components/popover/popover.tsx
+++ b/packages/calcite-components/src/components/popover/popover.tsx
@@ -580,6 +580,7 @@ export class Popover
       >
         <div
           class={{
+            [CSS.container]: true,
             [FloatingCSS.animation]: true,
             [FloatingCSS.animationActive]: displayed,
           }}
@@ -589,7 +590,7 @@ export class Popover
           <div
             class={{
               [CSS.hasHeader]: !!heading,
-              [CSS.container]: true,
+              [CSS.headerContainer]: true,
             }}
           >
             {this.renderHeader()}
diff --git a/packages/calcite-components/src/components/popover/resources.ts b/packages/calcite-components/src/components/popover/resources.ts
index c8ac0b31dba..1ca6900a22b 100644
--- a/packages/calcite-components/src/components/popover/resources.ts
+++ b/packages/calcite-components/src/components/popover/resources.ts
@@ -6,6 +6,7 @@ export const CSS = {
   content: "content",
   hasHeader: "has-header",
   header: "header",
+  headerContainer: "headerContainer",
   headerContent: "header-content",
   heading: "heading",
 };

From 8cc2cd465451ccfe76bd252ea10e2e096a2dc5b8 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Thu, 19 Sep 2024 12:09:31 -0700
Subject: [PATCH 24/26] rename container css class

---
 packages/calcite-components/src/components/popover/popover.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index 4a4a44bd01e..ace48125fc2 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -82,7 +82,7 @@
   color: var(--calcite-popover-text-color, var(--calcite-color-text-1));
 }
 
-.container {
+.headerContainer {
   @apply relative
     flex
     h-full

From 435d74c362fe58f53fa5cb26187ba48dbfc9b349 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Mon, 23 Sep 2024 14:02:57 -0700
Subject: [PATCH 25/26] remove internal variables

---
 .../calcite-components/src/components.d.ts    | 100 ++++++++++++++++++
 .../src/components/action/action.scss         |  20 +---
 .../src/components/popover/popover.scss       |  13 +--
 3 files changed, 109 insertions(+), 24 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index bffc8ef3637..68d4f03e98e 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -9,91 +9,191 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind,
 import { RequestedItem } from "./components/accordion/interfaces";
 import { IconNameOrString } from "./components/icon/interfaces";
 import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+import { ActionMessages } from "./components/action/assets/action/t9n";
 import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
 import { Columns } from "./components/action-group/interfaces";
+import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 import { AlertDuration, AlertQueue } from "./components/alert/interfaces";
 import { NumberingSystem } from "./utils/locale";
+import { AlertMessages } from "./components/alert/assets/alert/t9n";
 import { HeadingLevel } from "./components/functional/Heading";
+import { BlockMessages } from "./components/block/assets/block/t9n";
 import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
 import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+import { ButtonMessages } from "./components/button/assets/button/t9n";
+import { CardMessages } from "./components/card/assets/card/t9n";
 import { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+import { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
 import { MutableValidityState } from "./utils/form";
+import { ChipMessages } from "./components/chip/assets/chip/t9n";
 import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 import { Format } from "./components/color-picker/utils";
+import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
 import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 import { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
+import { DialogMessages } from "./components/dialog/assets/dialog/t9n";
 import { DialogPlacement } from "./components/dialog/interfaces";
 import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+import { FilterMessages } from "./components/filter/assets/filter/t9n";
 import { FlowItemLikeElement } from "./components/flow/interfaces";
+import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
 import { ColorStop, DataSeries } from "./components/graph/interfaces";
+import { HandleMessages } from "./components/handle/assets/handle/t9n";
 import { HandleChange, HandleNudge } from "./components/handle/interfaces";
+import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
 import { InputPlacement } from "./components/input/interfaces";
+import { InputMessages } from "./components/input/assets/input/t9n";
+import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+import { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
 import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
 import { ListDragDetail } from "./components/list/interfaces";
 import { ItemData } from "./components/list-item/interfaces";
+import { ListMessages } from "./components/list/assets/list/t9n";
 import { SelectionAppearance } from "./components/list/resources";
+import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+import { MenuMessages } from "./components/menu/assets/menu/t9n";
+import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+import { ModalMessages } from "./components/modal/assets/modal/t9n";
+import { NoticeMessages } from "./components/notice/assets/notice/t9n";
+import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+import { PanelMessages } from "./components/panel/assets/panel/t9n";
 import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 import { ICON_TYPES } from "./components/pick-list/resources";
+import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+import { PopoverMessages } from "./components/popover/assets/popover/t9n";
+import { RatingMessages } from "./components/rating/assets/rating/t9n";
+import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 import { DisplayMode } from "./components/sheet/interfaces";
 import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 import { DragDetail } from "./utils/sortableComponent";
 import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
 import { Element } from "@stencil/core";
 import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
 import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+import { TableMessages } from "./components/table/assets/table/t9n";
+import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
 import { TileSelectType } from "./components/tile-select/interfaces";
 import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+import { TipMessages } from "./components/tip/assets/tip/t9n";
+import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 import { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 export { RequestedItem } from "./components/accordion/interfaces";
 export { IconNameOrString } from "./components/icon/interfaces";
 export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+export { ActionMessages } from "./components/action/assets/action/t9n";
 export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
 export { Columns } from "./components/action-group/interfaces";
+export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 export { AlertDuration, AlertQueue } from "./components/alert/interfaces";
 export { NumberingSystem } from "./utils/locale";
+export { AlertMessages } from "./components/alert/assets/alert/t9n";
 export { HeadingLevel } from "./components/functional/Heading";
+export { BlockMessages } from "./components/block/assets/block/t9n";
 export { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
 export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+export { ButtonMessages } from "./components/button/assets/button/t9n";
+export { CardMessages } from "./components/card/assets/card/t9n";
 export { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+export { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
 export { MutableValidityState } from "./utils/form";
+export { ChipMessages } from "./components/chip/assets/chip/t9n";
 export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 export { Format } from "./components/color-picker/utils";
+export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
 export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 export { DateLocaleData } from "./components/date-picker/utils";
 export { HoverRange } from "./utils/date";
+export { DialogMessages } from "./components/dialog/assets/dialog/t9n";
 export { DialogPlacement } from "./components/dialog/interfaces";
 export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+export { FilterMessages } from "./components/filter/assets/filter/t9n";
 export { FlowItemLikeElement } from "./components/flow/interfaces";
+export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
 export { ColorStop, DataSeries } from "./components/graph/interfaces";
+export { HandleMessages } from "./components/handle/assets/handle/t9n";
 export { HandleChange, HandleNudge } from "./components/handle/interfaces";
+export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
 export { InputPlacement } from "./components/input/interfaces";
+export { InputMessages } from "./components/input/assets/input/t9n";
+export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+export { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
 export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
 export { ListDragDetail } from "./components/list/interfaces";
 export { ItemData } from "./components/list-item/interfaces";
+export { ListMessages } from "./components/list/assets/list/t9n";
 export { SelectionAppearance } from "./components/list/resources";
+export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+export { MenuMessages } from "./components/menu/assets/menu/t9n";
+export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+export { ModalMessages } from "./components/modal/assets/modal/t9n";
+export { NoticeMessages } from "./components/notice/assets/notice/t9n";
+export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+export { PanelMessages } from "./components/panel/assets/panel/t9n";
 export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 export { ICON_TYPES } from "./components/pick-list/resources";
+export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+export { PopoverMessages } from "./components/popover/assets/popover/t9n";
+export { RatingMessages } from "./components/rating/assets/rating/t9n";
+export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 export { DisplayMode } from "./components/sheet/interfaces";
 export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 export { DragDetail } from "./utils/sortableComponent";
 export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
 export { Element } from "@stencil/core";
 export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
 export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+export { TableMessages } from "./components/table/assets/table/t9n";
+export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
 export { TileSelectType } from "./components/tile-select/interfaces";
 export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+export { TipMessages } from "./components/tip/assets/tip/t9n";
+export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 export { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+export { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 export { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export namespace Components {
     interface CalciteAccordion {
diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
index 3715cfeb4cb..c3da22ceaa8 100755
--- a/packages/calcite-components/src/components/action/action.scss
+++ b/packages/calcite-components/src/components/action/action.scss
@@ -25,31 +25,19 @@
 button {
   border-end-end-radius: var(
     --calcite-action-corner-radius-end-end,
-    var(
-      --calcite-action-corner-radius,
-      var(--calcite-internal-action-corner-radius-end-end, var(--calcite-corner-radius))
-    )
+    var(--calcite-action-corner-radius, var(--calcite-corner-radius))
   );
   border-end-start-radius: var(
     --calcite-action-corner-radius-end-start,
-    var(
-      --calcite-action-corner-radius,
-      var(--calcite-internal-action-corner-radius-end-start, var(--calcite-corner-radius))
-    )
+    var(--calcite-action-corner-radius, var(--calcite-corner-radius))
   );
   border-start-end-radius: var(
     --calcite-action-corner-radius-start-end,
-    var(
-      --calcite-action-corner-radius,
-      var(--calcite-internal-action-corner-radius-start-end, var(--calcite-corner-radius))
-    )
+    var(--calcite-action-corner-radius, var(--calcite-corner-radius))
   );
   border-start-start-radius: var(
     --calcite-action-corner-radius-start-start,
-    var(
-      --calcite-action-corner-radius,
-      var(--calcite-internal-action-corner-radius-start-start, var(--calcite-corner-radius))
-    )
+    var(--calcite-action-corner-radius, var(--calcite-corner-radius))
   );
 }
 
diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index ace48125fc2..3bfd2da3d5e 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -3,11 +3,14 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
+ * @prop --calcite-action-corner-radius-start-end: Specifies the component's corner radius start end.
+ * @prop --calcite-action-corner-radius-end-end: Specifies the component's corner radius end end.
  * @prop --calcite-popover-background-color: Specifies the background color of the component.
  * @prop --calcite-popover-border-color: Specifies the border color of the component.
  * @prop --calcite-popover-corner-radius: Specifies the corner radius of the component.
  * @prop --calcite-popover-text-color: Specifies the text color of the component.
  * @prop --calcite-popover-z-index: Sets the z-index value for the component.
+ 
  */
 
 :host {
@@ -111,14 +114,8 @@
   flex: 0 0 auto;
   border-start-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
   border-end-end-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));
-  --calcite-internal-action-corner-radius-start-end: var(
-    --calcite-popover-corner-radius,
-    var(--calcite-corner-radius-sharp)
-  );
-  --calcite-internal-action-corner-radius-end-end: var(
-    --calcite-popover-corner-radius,
-    var(--calcite-corner-radius-sharp)
-  );
+  --calcite-action-corner-radius-start-end: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-sharp));
+  --calcite-action-corner-radius-end-end: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-sharp));
 }
 
 ::slotted(calcite-panel),

From cb068f66b7e87c1030bba7d0d060e22ce0969960 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Mon, 23 Sep 2024 14:46:13 -0700
Subject: [PATCH 26/26] cleanup

---
 .../calcite-components/src/components/popover/popover.scss     | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index 3bfd2da3d5e..1314105f7dd 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -3,14 +3,11 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-action-corner-radius-start-end: Specifies the component's corner radius start end.
- * @prop --calcite-action-corner-radius-end-end: Specifies the component's corner radius end end.
  * @prop --calcite-popover-background-color: Specifies the background color of the component.
  * @prop --calcite-popover-border-color: Specifies the border color of the component.
  * @prop --calcite-popover-corner-radius: Specifies the corner radius of the component.
  * @prop --calcite-popover-text-color: Specifies the text color of the component.
  * @prop --calcite-popover-z-index: Sets the z-index value for the component.
- 
  */
 
 :host {