From f73582edef4406c0b331c2a95c7e5a46d6683572 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Thu, 3 Aug 2023 13:58:43 -0700
Subject: [PATCH 1/4] feat(action-bar): Deprecate "bottom-actions" slot in
 favor of new "actions-end" slot .

---
 .../components/action-bar/action-bar.e2e.ts    |  4 ++--
 .../src/components/action-bar/action-bar.scss  |  6 +++---
 .../action-bar/action-bar.stories.ts           | 18 +++++++++---------
 .../src/components/action-bar/action-bar.tsx   |  6 ++++--
 .../src/components/action-bar/readme.md        |  4 ++--
 .../src/components/action-bar/resources.ts     |  5 +++--
 .../components/action-bar/usage/Actions-end.md |  8 ++++++++
 .../action-bar/usage/Bottom-actions.md         |  8 --------
 .../src/components/shell/readme.md             |  2 +-
 .../src/components/shell/shell.stories.ts      | 18 +++++++++---------
 .../src/components/shell/usage/Advanced.md     |  2 +-
 .../calcite-components/src/demos/action.html   | 14 +++++++-------
 .../src/demos/mode/auto.html                   |  4 ++--
 .../calcite-components/src/demos/panel.html    |  2 +-
 .../src/demos/shell-panel.html                 |  8 ++++----
 .../src/demos/shell/block-configurations.html  |  4 ++--
 .../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 +-
 .../demo-app-advanced-center-row-async.html    |  4 ++--
 .../shell/demo-app-advanced-center-row.html    |  4 ++--
 .../src/demos/shell/demo-app-advanced.html     |  4 ++--
 .../src/demos/shell/demo-app-blank.html        |  8 ++++----
 .../shell/demo-app-center-row-action-bar.html  |  6 +++---
 .../shell/demo-app-full-window-reversed.html   |  2 +-
 .../src/demos/shell/demo-app-full-window.html  |  2 +-
 .../src/demos/shell/nesting-testing-flow.html  |  4 ++--
 .../src/demos/shell/nesting-testing.html       |  4 ++--
 .../src/demos/shell/popup-config-example.html  |  4 ++--
 .../src/demos/shell/resizable-panels.html      |  8 ++++----
 30 files changed, 86 insertions(+), 83 deletions(-)
 create mode 100644 packages/calcite-components/src/components/action-bar/usage/Actions-end.md
 delete mode 100644 packages/calcite-components/src/components/action-bar/usage/Bottom-actions.md

diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
index 6394bbe2e82..b5c78e09324 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
+++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
@@ -338,7 +338,7 @@ describe("calcite-action-bar", () => {
               <calcite-action text="Save" icon="save" disabled></calcite-action>
               <calcite-action icon="layers" text="Layers"></calcite-action>
             </calcite-action-group>
-            <calcite-action-group slot="bottom-actions">
+            <calcite-action-group slot="actions-end">
               <calcite-action text="Tips" icon="lightbulb"></calcite-action>
             </calcite-action-group>
           </calcite-action-bar>
@@ -386,7 +386,7 @@ describe("calcite-action-bar", () => {
               <calcite-action text="Save" icon="save" disabled></calcite-action>
               <calcite-action icon="layers" text="Layers"></calcite-action>
             </calcite-action-group>
-            <calcite-action-group slot="bottom-actions">
+            <calcite-action-group slot="actions-end">
               <calcite-action text="Tips" icon="lightbulb"></calcite-action>
             </calcite-action-group>
           </calcite-action-bar>
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.scss b/packages/calcite-components/src/components/action-bar/action-bar.scss
index 544f87fb75d..6d5aa78bf7f 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.scss
+++ b/packages/calcite-components/src/components/action-bar/action-bar.scss
@@ -16,14 +16,14 @@
 
 :host([layout="vertical"]) {
   @apply flex-col;
-  .action-group--bottom {
+  .action-group--end {
     margin-block-start: auto;
   }
 }
 
 :host([layout="horizontal"]) {
   @apply flex-row;
-  .action-group--bottom {
+  .action-group--end {
     @apply ms-auto;
   }
 }
@@ -58,7 +58,7 @@
   border-inline-end: 0;
 }
 
-.action-group--bottom {
+.action-group--end {
   @apply justify-end;
 }
 
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.stories.ts b/packages/calcite-components/src/components/action-bar/action-bar.stories.ts
index 3d074bbb957..3ade00f0a26 100644
--- a/packages/calcite-components/src/components/action-bar/action-bar.stories.ts
+++ b/packages/calcite-components/src/components/action-bar/action-bar.stories.ts
@@ -81,7 +81,7 @@ export const horizontal = (): string => html`
         <calcite-action text="Save" active icon="save"> </calcite-action>
         <calcite-action text="Layers" icon="layers"> </calcite-action>
       </calcite-action-group>
-      <calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
+      <calcite-action slot="actions-end" text="hello world" icon="layers"> </calcite-action>
     </calcite-action-bar>
   </div>
 `;
@@ -99,7 +99,7 @@ export const horizontalSmall = (): string => html`
         <calcite-action text="Save" active icon="save"> </calcite-action>
         <calcite-action text="Layers" icon="layers"> </calcite-action>
       </calcite-action-group>
-      <calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
+      <calcite-action slot="actions-end" text="hello world" icon="layers"> </calcite-action>
     </calcite-action-bar>
   </div>
 `;
@@ -172,7 +172,7 @@ export const adjacentTooltipsOpenQuickly = (): string => html`<div style="displa
         ><calcite-tooltip placement="right" slot="tooltip">Layers</calcite-tooltip></calcite-action
       >
     </calcite-action-group>
-    <calcite-action slot="bottom-actions" text="hello world" icon="layers"
+    <calcite-action slot="actions-end" text="hello world" icon="layers"
       ><calcite-tooltip placement="right" slot="tooltip">hello world</calcite-tooltip></calcite-action
     >
   </calcite-action-bar>
@@ -194,30 +194,30 @@ withTooltip_NoTest.parameters = {
 
 export const hebrewLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="he">
 <calcite-action text="Information" icon="information"></calcite-action>
-<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
+<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;
 
 export const norwegianLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="nb">
 <calcite-action text="Information" icon="information"></calcite-action>
-<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
+<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;
 
 export const FrenchLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="fr">
 <calcite-action text="Information" icon="information"></calcite-action>
-<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
+<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;
 
 export const hongKongLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="zh-HK">
 <calcite-action text="Information" icon="information"></calcite-action>
-<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
+<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;
 
 export const ukranianLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="uk">
 <calcite-action text="Information" icon="information"></calcite-action>
-<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
+<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;
 
 export const bosnianLocale_TestOnly = (): string => `<calcite-action-bar expanded lang="bs">
 <calcite-action text="Information" icon="information"></calcite-action>
-<calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
+<calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>`;
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx
index 8e5920af726..acc20e59b72 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.tsx
+++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -47,7 +47,8 @@ import {
 
 /**
  * @slot - A slot for adding `calcite-action`s that will appear at the top of the component.
- * @slot bottom-actions - A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.
+ * @slot bottom-actions - [Deprecated] Use the `"actions-end"` slot instead. A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.
+ * @slot actions-end - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.
  * @slot expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.
  */
 @Component({
@@ -371,7 +372,8 @@ export class ActionBar
     ) : null;
 
     return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (
-      <calcite-action-group class={CSS.actionGroupBottom} layout={layout} scale={scale}>
+      <calcite-action-group class={CSS.actionGroupEnd} layout={layout} scale={scale}>
+        <slot name={SLOTS.actionsEnd} />
         <slot name={SLOTS.bottomActions} />
         <slot name={SLOTS.expandTooltip} />
         {expandToggleNode}
diff --git a/packages/calcite-components/src/components/action-bar/readme.md b/packages/calcite-components/src/components/action-bar/readme.md
index 6a1ea264a54..30367b9c0a5 100755
--- a/packages/calcite-components/src/components/action-bar/readme.md
+++ b/packages/calcite-components/src/components/action-bar/readme.md
@@ -26,7 +26,7 @@ The bottom-actions slot renders `calcite-action`s that stick to the bottom of th
 ```html
 <calcite-action-bar>
   <calcite-action text="Information" icon="information"></calcite-action>
-  <calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
+  <calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
 </calcite-action-bar>
 ```
 
@@ -92,7 +92,7 @@ Type: `Promise<void>`
 | Slot               | Description                                                                                                            |
 | ------------------ | ---------------------------------------------------------------------------------------------------------------------- |
 |                    | A slot for adding `calcite-action`s that will appear at the top of the component.                                      |
-| `"bottom-actions"` | A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button. |
+| `"actions-end"`    | A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button. |
 | `"expand-tooltip"` | A slot to set the `calcite-tooltip` for the expand toggle.                                                             |
 
 ## CSS Custom Properties
diff --git a/packages/calcite-components/src/components/action-bar/resources.ts b/packages/calcite-components/src/components/action-bar/resources.ts
index 6f8cfdfff1d..0f44055d831 100644
--- a/packages/calcite-components/src/components/action-bar/resources.ts
+++ b/packages/calcite-components/src/components/action-bar/resources.ts
@@ -1,8 +1,9 @@
 export const CSS = {
-  actionGroupBottom: "action-group--bottom",
+  actionGroupEnd: "action-group--end",
 };
 
 export const SLOTS = {
-  bottomActions: "bottom-actions",
+  actionsEnd: "actions-end",
+  bottomActions: "actions-end",
   expandTooltip: "expand-tooltip",
 };
diff --git a/packages/calcite-components/src/components/action-bar/usage/Actions-end.md b/packages/calcite-components/src/components/action-bar/usage/Actions-end.md
new file mode 100644
index 00000000000..6b937fc14d6
--- /dev/null
+++ b/packages/calcite-components/src/components/action-bar/usage/Actions-end.md
@@ -0,0 +1,8 @@
+The actions-end slot renders `calcite-action`s that stick to the end of the bar prior to the expand/collapse icon.
+
+```html
+<calcite-action-bar>
+  <calcite-action text="Information" icon="information"></calcite-action>
+  <calcite-action text="Feedback" slot="actions-end" icon="mega-phone"></calcite-action>
+</calcite-action-bar>
+```
diff --git a/packages/calcite-components/src/components/action-bar/usage/Bottom-actions.md b/packages/calcite-components/src/components/action-bar/usage/Bottom-actions.md
deleted file mode 100644
index 4dadc7567c1..00000000000
--- a/packages/calcite-components/src/components/action-bar/usage/Bottom-actions.md
+++ /dev/null
@@ -1,8 +0,0 @@
-The bottom-actions slot renders `calcite-action`s that stick to the bottom of the bar above the expand/collapse icon.
-
-```html
-<calcite-action-bar>
-  <calcite-action text="Information" icon="information"></calcite-action>
-  <calcite-action text="Feedback" slot="bottom-actions" icon="mega-phone"></calcite-action>
-</calcite-action-bar>
-```
diff --git a/packages/calcite-components/src/components/shell/readme.md b/packages/calcite-components/src/components/shell/readme.md
index a3dc196ffdd..f7afb330f33 100644
--- a/packages/calcite-components/src/components/shell/readme.md
+++ b/packages/calcite-components/src/components/shell/readme.md
@@ -52,7 +52,7 @@ Renders a shell with leading and trailing floating panels, action bar/pad, block
           <calcite-action text="Save" disabled icon="save"></calcite-action>
           <calcite-action text="Layers" icon="layers"></calcite-action>
         </calcite-action-group>
-        <calcite-action slot="bottom-actions" text="Tips" icon="lightbulb"></calcite-action>
+        <calcite-action slot="actions-end" text="Tips" icon="lightbulb"></calcite-action>
       </calcite-action-bar>
       <calcite-flow>
         <calcite-flow-item heading="Layer settings">
diff --git a/packages/calcite-components/src/components/shell/shell.stories.ts b/packages/calcite-components/src/components/shell/shell.stories.ts
index ac6acb1443b..14a88909344 100644
--- a/packages/calcite-components/src/components/shell/shell.stories.ts
+++ b/packages/calcite-components/src/components/shell/shell.stories.ts
@@ -141,7 +141,7 @@ const centerRowWithActionBarHTML = html`
       <calcite-action text="Share" icon="share"></calcite-action>
       <calcite-action text="Print" icon="print"></calcite-action>
     </calcite-action-group>
-    <calcite-action-group slot="bottom-actions">
+    <calcite-action-group slot="actions-end">
       <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
       <calcite-action text="What's next" icon="mega-phone"></calcite-action>
     </calcite-action-group>
@@ -799,7 +799,7 @@ position:relative;
         <calcite-action text="Share" icon="share"></calcite-action>
         <calcite-action text="Print" icon="print"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
         <calcite-action text="What's next" icon="mega-phone"></calcite-action>
       </calcite-action-group>
@@ -826,7 +826,7 @@ position:relative;
         <calcite-action text-enabled icon="pencil-square" text="Edit" disabled slot="menu-actions"> </calcite-action>
         <calcite-action text-enabled icon="clock" text="Time" disabled slot="menu-actions"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Tips" id="tip-manager-button">
           <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
         </calcite-action>
@@ -869,7 +869,7 @@ position:relative;
         <calcite-action text="Share" icon="share"></calcite-action>
         <calcite-action text="Print" icon="print"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
         <calcite-action text="What's next" icon="mega-phone"></calcite-action>
       </calcite-action-group>
@@ -893,7 +893,7 @@ position:relative;
         <calcite-action text="Share" icon="share"></calcite-action>
         <calcite-action text="Print" icon="print"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
         <calcite-action text="What's next" icon="mega-phone"></calcite-action>
       </calcite-action-group>
@@ -926,7 +926,7 @@ position:relative;
         <calcite-action text="Share" icon="share"></calcite-action>
         <calcite-action text="Print" icon="print"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
         <calcite-action text="What's next" icon="mega-phone"></calcite-action>
       </calcite-action-group>
@@ -956,7 +956,7 @@ position:relative;
         <calcite-action text-enabled icon="pencil-square" text="Edit" disabled slot="menu-actions"> </calcite-action>
         <calcite-action text-enabled icon="clock" text="Time" disabled slot="menu-actions"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Tips" id="tip-manager-button">
           <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
         </calcite-action>
@@ -1091,7 +1091,7 @@ position:relative;
         <calcite-action text="Share" icon="share"></calcite-action>
         <calcite-action text="Print" icon="print"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
         <calcite-action text="What's next" icon="mega-phone"></calcite-action>
       </calcite-action-group>
@@ -1122,7 +1122,7 @@ position:relative;
         <calcite-action text="Share" icon="share"></calcite-action>
         <calcite-action text="Print" icon="print"></calcite-action>
       </calcite-action-group>
-      <calcite-action-group slot="bottom-actions">
+      <calcite-action-group slot="actions-end">
         <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
         <calcite-action text="What's next" icon="mega-phone"></calcite-action>
       </calcite-action-group>
diff --git a/packages/calcite-components/src/components/shell/usage/Advanced.md b/packages/calcite-components/src/components/shell/usage/Advanced.md
index d83c7324584..d27b54882e8 100644
--- a/packages/calcite-components/src/components/shell/usage/Advanced.md
+++ b/packages/calcite-components/src/components/shell/usage/Advanced.md
@@ -40,7 +40,7 @@ Renders a shell with leading and trailing floating panels, action bar/pad, block
           <calcite-action text="Save" disabled icon="save"></calcite-action>
           <calcite-action text="Layers" icon="layers"></calcite-action>
         </calcite-action-group>
-        <calcite-action slot="bottom-actions" text="Tips" icon="lightbulb"></calcite-action>
+        <calcite-action slot="actions-end" text="Tips" icon="lightbulb"></calcite-action>
       </calcite-action-bar>
       <calcite-flow>
         <calcite-flow-item heading="Layer settings">
diff --git a/packages/calcite-components/src/demos/action.html b/packages/calcite-components/src/demos/action.html
index be2347ee164..5d8fef79f56 100644
--- a/packages/calcite-components/src/demos/action.html
+++ b/packages/calcite-components/src/demos/action.html
@@ -443,7 +443,7 @@
           <calcite-action-bar>
             <calcite-action text="Add" icon="plus"> </calcite-action>
             <calcite-action text="Save" icon="save"> </calcite-action>
-            <calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
+            <calcite-action slot="actions-end" text="hello world" icon="layers"> </calcite-action>
           </calcite-action-bar>
         </div>
 
@@ -460,7 +460,7 @@
               <calcite-action text="Save" active icon="save"> </calcite-action>
               <calcite-action text="Layers" icon="layers"> </calcite-action>
             </calcite-action-group>
-            <calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
+            <calcite-action slot="actions-end" text="hello world" icon="layers"> </calcite-action>
           </calcite-action-bar>
         </div>
 
@@ -489,7 +489,7 @@
             const slotTestNode2 = document.getElementById("slot-test2");
             setTimeout(function () {
               const action = document.createElement("calcite-action");
-              action.setAttribute("slot", "bottom-actions");
+              action.setAttribute("slot", "actions-end");
               action.setAttribute("text", "Hello world");
               action.setAttribute("icon", "layers");
               slotTestNode2.appendChild(action);
@@ -509,7 +509,7 @@
             const expandedTestNode = document.getElementById("slot-test-expanded");
             setTimeout(function () {
               const action = document.createElement("calcite-action");
-              action.setAttribute("slot", "bottom-actions");
+              action.setAttribute("slot", "actions-end");
               action.setAttribute("text", "Hello world");
               action.setAttribute("icon", "layers");
               expandedTestNode.appendChild(action);
@@ -546,7 +546,7 @@
           <calcite-action-bar layout="horizontal">
             <calcite-action text="Add" icon="plus"> </calcite-action>
             <calcite-action text="Save" icon="save"> </calcite-action>
-            <calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
+            <calcite-action slot="actions-end" text="hello world" icon="layers"> </calcite-action>
           </calcite-action-bar>
         </div>
 
@@ -563,7 +563,7 @@
               <calcite-action text="Save" active icon="save"> </calcite-action>
               <calcite-action text="Layers" icon="layers"> </calcite-action>
             </calcite-action-group>
-            <calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
+            <calcite-action slot="actions-end" text="hello world" icon="layers"> </calcite-action>
           </calcite-action-bar>
         </div>
 
@@ -590,7 +590,7 @@
               <calcite-action text="Save" active icon="save"> </calcite-action>
               <calcite-action text="Layers" icon="layers"> </calcite-action>
             </calcite-action-group>
-            <calcite-action slot="bottom-actions" text="hello world" icon="layers"> </calcite-action>
+            <calcite-action slot="actions-end" text="hello world" icon="layers"> </calcite-action>
           </calcite-action-bar>
         </div>
       </div>
diff --git a/packages/calcite-components/src/demos/mode/auto.html b/packages/calcite-components/src/demos/mode/auto.html
index b9e9d2680a3..6909e199358 100644
--- a/packages/calcite-components/src/demos/mode/auto.html
+++ b/packages/calcite-components/src/demos/mode/auto.html
@@ -98,7 +98,7 @@
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
@@ -134,7 +134,7 @@
                   </calcite-action>
                   <calcite-action text-enabled icon="clock" text="Time" disabled slot="menu-actions"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button">
                     <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
                   </calcite-action>
diff --git a/packages/calcite-components/src/demos/panel.html b/packages/calcite-components/src/demos/panel.html
index 2aed96eba1a..ea345201c84 100644
--- a/packages/calcite-components/src/demos/panel.html
+++ b/packages/calcite-components/src/demos/panel.html
@@ -88,7 +88,7 @@
                 <calcite-action-group>
                   <calcite-action text="Add" icon="plus"> </calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Add" icon="plus"> </calcite-action>
                   <calcite-action text="Save" icon="save"> </calcite-action>
                   <calcite-action text="Layers" icon="layers"> </calcite-action>
diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html
index 1c80efa6a50..477c659571e 100644
--- a/packages/calcite-components/src/demos/shell-panel.html
+++ b/packages/calcite-components/src/demos/shell-panel.html
@@ -128,7 +128,7 @@
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
@@ -167,7 +167,7 @@
                   </calcite-action>
                   <calcite-action text-enabled icon="clock" text="Time" disabled slot="menu-actions"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button">
                     <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
                   </calcite-action>
@@ -208,7 +208,7 @@
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
@@ -242,7 +242,7 @@
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
diff --git a/packages/calcite-components/src/demos/shell/block-configurations.html b/packages/calcite-components/src/demos/shell/block-configurations.html
index de7f2d85e7d..f9f5ad2f1b8 100644
--- a/packages/calcite-components/src/demos/shell/block-configurations.html
+++ b/packages/calcite-components/src/demos/shell/block-configurations.html
@@ -75,7 +75,7 @@
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
@@ -124,7 +124,7 @@
                   <calcite-action icon="pencil-square" text="Edit" disabled></calcite-action>
                   <calcite-action icon="clock" text="Time" disabled></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button">
                     <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
                   </calcite-action>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html
index 26bf5362e6b..f42a8ff306d 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html
@@ -123,7 +123,7 @@
                     <calcite-icon icon="layers" scale="s"></calcite-icon>
                   </calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button">
                     <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
                   </calcite-action>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html
index 1d2d7245146..19953c1c54f 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html
@@ -129,7 +129,7 @@
                     <calcite-icon icon="layers" scale="s"></calcite-icon>
                   </calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button">
                     <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
                   </calcite-action>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html
index 28eb3f536f5..6e2e9296489 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html
@@ -221,7 +221,7 @@
                     calcite-hydrated=""
                   ></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group class="js-action-group" slot="bottom-actions" calcite-hydrated="">
+                <calcite-action-group class="js-action-group" slot="actions-end" calcite-hydrated="">
                   <calcite-action
                     id="feedback"
                     class="js-action"
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row-async.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row-async.html
index eda5f794f7a..84e11227450 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row-async.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row-async.html
@@ -97,7 +97,7 @@
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
@@ -131,7 +131,7 @@
                   <calcite-action icon="pencil-square" text="Edit" disabled></calcite-action>
                   <calcite-action icon="clock" text="Time" disabled></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button">
                     <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
                   </calcite-action>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html
index ee4d2c9a063..46e0d3f4070 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html
@@ -76,7 +76,7 @@
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
@@ -110,7 +110,7 @@
                   <calcite-action icon="pencil-square" text="Edit" disabled></calcite-action>
                   <calcite-action icon="clock" text="Time" disabled></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button">
                     <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
                   </calcite-action>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced.html b/packages/calcite-components/src/demos/shell/demo-app-advanced.html
index 164a7d7cc81..e4cc82f0940 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-advanced.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-advanced.html
@@ -87,7 +87,7 @@
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
@@ -123,7 +123,7 @@
                   </calcite-action>
                   <calcite-action text-enabled icon="clock" text="Time" disabled slot="menu-actions"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button">
                     <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
                   </calcite-action>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-blank.html b/packages/calcite-components/src/demos/shell/demo-app-blank.html
index 1a14370eca2..6f7a339bdc2 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-blank.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-blank.html
@@ -79,7 +79,7 @@
                   <calcite-action text="Make it a race car." icon="erase"> </calcite-action>
                   <calcite-action label="add in edit" icon="add-in-edit" text="3 Square?"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action icon="lightbulb" text="Tips" id="tip-manager-button"></calcite-action>
                   <calcite-action icon="mega-phone" text="What's that?!" id="tip-manager-button"></calcite-action>
                 </calcite-action-group>
@@ -108,7 +108,7 @@
                   <calcite-action text="Make it a race car." icon="erase"> </calcite-action>
                   <calcite-action label="add in edit" icon="add-in-edit" text="3 Square?"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action icon="lightbulb" text="Tips" id="tip-manager-button"></calcite-action>
                   <calcite-action icon="mega-phone" text="What's that?!" id="tip-manager-button"></calcite-action>
                 </calcite-action-group>
@@ -131,7 +131,7 @@
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
@@ -162,7 +162,7 @@
                   </calcite-action>
                   <calcite-action text-enabled icon="clock" text="Time" disabled slot="menu-actions"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button">
                     <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
                   </calcite-action>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html b/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html
index a2910666ec4..f44123affa1 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html
@@ -76,7 +76,7 @@
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
@@ -110,7 +110,7 @@
                   <calcite-action icon="pencil-square" text="Edit" disabled></calcite-action>
                   <calcite-action icon="clock" text="Time" disabled></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button">
                     <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
                   </calcite-action>
@@ -403,7 +403,7 @@ <h2>Boomer v Millennial - California</h2>
                   <calcite-action text="Make it a race car." icon="erase"> </calcite-action>
                   <calcite-action label="add in edit" icon="add-in-edit" text="3 Square?"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action icon="lightbulb" text="Tips" id="tip-manager-button"></calcite-action>
                   <calcite-action icon="mega-phone" text="What's that?!" id="tip-manager-button"></calcite-action>
                 </calcite-action-group>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html b/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html
index aaabe39c98b..2f1e727c983 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html
@@ -160,7 +160,7 @@
                   <calcite-action text="Save" disabled icon="save"> </calcite-action>
                   <calcite-action text="Layers" icon="layers"> </calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button" icon="lightbulb"> </calcite-action>
                 </calcite-action-group>
               </calcite-action-bar>
diff --git a/packages/calcite-components/src/demos/shell/demo-app-full-window.html b/packages/calcite-components/src/demos/shell/demo-app-full-window.html
index 188f25620fc..f36af0f334f 100644
--- a/packages/calcite-components/src/demos/shell/demo-app-full-window.html
+++ b/packages/calcite-components/src/demos/shell/demo-app-full-window.html
@@ -118,7 +118,7 @@
                   <calcite-action text="Save" disabled icon="save"> </calcite-action>
                   <calcite-action text="Layers" icon="layers"> </calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button" icon="lightbulb"> </calcite-action>
                 </calcite-action-group>
               </calcite-action-bar>
diff --git a/packages/calcite-components/src/demos/shell/nesting-testing-flow.html b/packages/calcite-components/src/demos/shell/nesting-testing-flow.html
index 82a6b21d405..117244ec3d4 100644
--- a/packages/calcite-components/src/demos/shell/nesting-testing-flow.html
+++ b/packages/calcite-components/src/demos/shell/nesting-testing-flow.html
@@ -79,7 +79,7 @@
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
@@ -105,7 +105,7 @@
                   <calcite-action icon="pencil-square" text="Edit" disabled></calcite-action>
                   <calcite-action icon="clock" text="Time" disabled></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button">
                     <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
                   </calcite-action>
diff --git a/packages/calcite-components/src/demos/shell/nesting-testing.html b/packages/calcite-components/src/demos/shell/nesting-testing.html
index 31f24b07aa8..93ccfd6f05e 100644
--- a/packages/calcite-components/src/demos/shell/nesting-testing.html
+++ b/packages/calcite-components/src/demos/shell/nesting-testing.html
@@ -79,7 +79,7 @@
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
@@ -105,7 +105,7 @@
                   <calcite-action icon="pencil-square" text="Edit" disabled></calcite-action>
                   <calcite-action icon="clock" text="Time" disabled></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button">
                     <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
                   </calcite-action>
diff --git a/packages/calcite-components/src/demos/shell/popup-config-example.html b/packages/calcite-components/src/demos/shell/popup-config-example.html
index 54b53e0bf1c..1f82ddd1081 100644
--- a/packages/calcite-components/src/demos/shell/popup-config-example.html
+++ b/packages/calcite-components/src/demos/shell/popup-config-example.html
@@ -89,7 +89,7 @@
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
@@ -138,7 +138,7 @@
                   <calcite-action icon="pencil-square" text="Edit" disabled></calcite-action>
                   <calcite-action icon="clock" text="Time" disabled></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button">
                     <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
                   </calcite-action>
diff --git a/packages/calcite-components/src/demos/shell/resizable-panels.html b/packages/calcite-components/src/demos/shell/resizable-panels.html
index 2de8ce5143f..4ced3682b60 100644
--- a/packages/calcite-components/src/demos/shell/resizable-panels.html
+++ b/packages/calcite-components/src/demos/shell/resizable-panels.html
@@ -88,7 +88,7 @@
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
@@ -124,7 +124,7 @@
                   </calcite-action>
                   <calcite-action text-enabled icon="clock" text="Time" disabled slot="menu-actions"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Tips" id="tip-manager-button">
                     <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
                   </calcite-action>
@@ -257,7 +257,7 @@ <h2>Boomer v Millennial - California</h2>
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>
@@ -282,7 +282,7 @@ <h2>Boomer v Millennial - California</h2>
                   <calcite-action text="Share" icon="share"></calcite-action>
                   <calcite-action text="Print" icon="print"></calcite-action>
                 </calcite-action-group>
-                <calcite-action-group slot="bottom-actions">
+                <calcite-action-group slot="actions-end">
                   <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
                   <calcite-action text="What's next" icon="mega-phone"></calcite-action>
                 </calcite-action-group>

From dd44433c7bc5624213158d2864f3ec5a17643f68 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Thu, 3 Aug 2023 13:59:54 -0700
Subject: [PATCH 2/4] cleanup

---
 .../calcite-components/src/components/action-bar/readme.md    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/action-bar/readme.md b/packages/calcite-components/src/components/action-bar/readme.md
index 30367b9c0a5..5837c506c58 100755
--- a/packages/calcite-components/src/components/action-bar/readme.md
+++ b/packages/calcite-components/src/components/action-bar/readme.md
@@ -19,9 +19,9 @@ Renders `calcite-action`s that stick to the top of the bar.
 </calcite-action-bar>
 ```
 
-### Bottom-actions
+### Actions-end
 
-The bottom-actions slot renders `calcite-action`s that stick to the bottom of the bar above the expand/collapse icon.
+The actions-end slot renders `calcite-action`s that stick to the end of the bar prior to the expand/collapse icon.
 
 ```html
 <calcite-action-bar>

From 21913b8958cfd568c0217e85179faeb796b8e3b5 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Thu, 3 Aug 2023 14:23:11 -0700
Subject: [PATCH 3/4] tests

---
 .../src/components/action-bar/action-bar.e2e.ts           | 8 ++++----
 .../src/components/action-pad/action-pad.e2e.ts           | 8 ++++----
 .../src/components/action-pad/action-pad.tsx              | 2 +-
 .../src/components/action-pad/resources.ts                | 2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
index b5c78e09324..efa739debf3 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
+++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
@@ -104,7 +104,7 @@ describe("calcite-action-bar", () => {
 
       const bar = await page.find("calcite-action-bar");
 
-      const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
+      const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupEnd}`);
 
       const button = await buttonGroup.find("calcite-action");
 
@@ -152,7 +152,7 @@ describe("calcite-action-bar", () => {
 
       await page.setContent("<calcite-action-bar expanded></calcite-action-bar>");
 
-      const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
+      const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupEnd}`);
 
       const button = await buttonGroup.find("calcite-action");
 
@@ -166,7 +166,7 @@ describe("calcite-action-bar", () => {
 
       await page.setContent(html`<calcite-action-bar expand-disabled></calcite-action-bar>`);
 
-      const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
+      const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupEnd}`);
 
       expect(buttonGroup).toBeNull();
     });
@@ -315,7 +315,7 @@ describe("calcite-action-bar", () => {
   it("should honor scale of expand icon", async () => {
     const page = await newE2EPage({ html: html`<calcite-action-bar scale="l"></calcite-action-bar>` });
 
-    const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);
+    const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupEnd}`);
 
     const button = await buttonGroup.find("calcite-action");
 
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
index a1b2a554141..939cb8473d2 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
+++ b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
@@ -80,7 +80,7 @@ describe("calcite-action-pad", () => {
 
       const pad = await page.find("calcite-action-pad");
 
-      const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
+      const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupEnd}`);
 
       const button = await buttonGroup.find(`calcite-action`);
 
@@ -129,7 +129,7 @@ describe("calcite-action-pad", () => {
 
       await page.setContent("<calcite-action-pad expanded></calcite-action-pad>");
 
-      const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
+      const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupEnd}`);
 
       const button = await buttonGroup.find("calcite-action");
 
@@ -144,7 +144,7 @@ describe("calcite-action-pad", () => {
 
     await page.setContent(`<calcite-action-pad expand-disabled></calcite-action-pad>`);
 
-    const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
+    const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupEnd}`);
 
     expect(buttonGroup).toBeNull();
   });
@@ -255,7 +255,7 @@ describe("calcite-action-pad", () => {
   it("should honor scale of expand icon", async () => {
     const page = await newE2EPage({ html: `<calcite-action-pad scale="l"></calcite-action-pad>` });
 
-    const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupBottom}`);
+    const buttonGroup = await page.find(`calcite-action-pad >>> .${CSS.actionGroupEnd}`);
 
     const button = await buttonGroup.find("calcite-action");
 
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx
index 8ca6810900e..dff569ee12e 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.tsx
+++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx
@@ -260,7 +260,7 @@ export class ActionPad
     ) : null;
 
     return expandToggleNode ? (
-      <calcite-action-group class={CSS.actionGroupBottom} layout={layout} scale={scale}>
+      <calcite-action-group class={CSS.actionGroupEnd} layout={layout} scale={scale}>
         <slot name={SLOTS.expandTooltip} />
         {expandToggleNode}
       </calcite-action-group>
diff --git a/packages/calcite-components/src/components/action-pad/resources.ts b/packages/calcite-components/src/components/action-pad/resources.ts
index 9cfad962fda..edbb3af26d5 100644
--- a/packages/calcite-components/src/components/action-pad/resources.ts
+++ b/packages/calcite-components/src/components/action-pad/resources.ts
@@ -1,5 +1,5 @@
 export const CSS = {
-  actionGroupBottom: "action-group--bottom",
+  actionGroupEnd: "action-group--end",
   container: "container",
 };
 

From f100fb29578b5461559b549bebb5cc0c7992831d Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 4 Aug 2023 08:45:52 -0700
Subject: [PATCH 4/4] fix getSlotted

---
 .../src/components/action-bar/action-bar.tsx                | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx
index acc20e59b72..3a8dc4dddd1 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.tsx
+++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -297,7 +297,7 @@ export class ActionBar
     this.setGroupLayout(actionGroups);
 
     const groupCount =
-      getSlotted(el, SLOTS.bottomActions) || !expandDisabled
+      getSlotted(el, SLOTS.actionsEnd) || getSlotted(el, SLOTS.bottomActions) || !expandDisabled
         ? actionGroups.length + 1
         : actionGroups.length;
 
@@ -371,7 +371,9 @@ export class ActionBar
       />
     ) : null;
 
-    return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (
+    return getSlotted(el, SLOTS.actionsEnd) ||
+      getSlotted(el, SLOTS.bottomActions) ||
+      expandToggleNode ? (
       <calcite-action-group class={CSS.actionGroupEnd} layout={layout} scale={scale}>
         <slot name={SLOTS.actionsEnd} />
         <slot name={SLOTS.bottomActions} />