@esri/calcite-components 1.3.0-next.1 → 1.3.0-next.2

package/dist/esm/{utils-e4d79b01.js → utils-c6fb72b1.js}

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.2
  */
 function rgbToHex(color) {
   const { r, g, b } = color;

package/dist/extras/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-04-06T18:30:38",
+  "timestamp": "2023-04-12T15:31:38",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.22.3",
@@ -1018,8 +1018,14 @@
           "attr": "layout",
           "reflectToAttr": true,
           "docs": "Indicates the layout of the component.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "Use the `layout` property on the component's parent instead."
+            }
+          ],
           "default": "\"vertical\"",
+          "deprecation": "Use the `layout` property on the component's parent instead.",
           "values": [
             {
               "value": "grid",
@@ -9344,7 +9350,7 @@
         {
           "name": "scale",
           "type": "\"l\" | \"m\" | \"s\"",
-          "mutable": true,
+          "mutable": false,
           "attr": "scale",
           "reflectToAttr": true,
           "docs": "Specifies the size of the component.",
@@ -9370,7 +9376,7 @@
         {
           "name": "status",
           "type": "\"idle\" | \"invalid\" | \"valid\"",
-          "mutable": true,
+          "mutable": false,
           "attr": "status",
           "reflectToAttr": true,
           "docs": "Specifies the status of the input field, which determines message and icons.",
@@ -10300,7 +10306,7 @@
         {
           "name": "scale",
           "type": "\"l\" | \"m\" | \"s\"",
-          "mutable": true,
+          "mutable": false,
           "attr": "scale",
           "reflectToAttr": true,
           "docs": "Specifies the size of the component.",
@@ -10993,7 +10999,7 @@
         {
           "name": "scale",
           "type": "\"l\" | \"m\" | \"s\"",
-          "mutable": true,
+          "mutable": false,
           "attr": "scale",
           "reflectToAttr": true,
           "docs": "Specifies the size of the component.",
@@ -11617,7 +11623,7 @@
         {
           "name": "scale",
           "type": "\"l\" | \"m\" | \"s\"",
-          "mutable": true,
+          "mutable": false,
           "attr": "scale",
           "reflectToAttr": true,
           "docs": "Specifies the size of the component.",
@@ -14498,6 +14504,10 @@
           "name": "slot",
           "text": "- A slot for adding custom content."
         },
+        {
+          "name": "slot",
+          "text": "action-bar - A slot for adding a `calcite-action-bar` to the component."
+        },
         {
           "name": "slot",
           "text": "header-actions-start - A slot for adding actions or content to the start side of the header."
@@ -14764,6 +14774,10 @@
           "name": "",
           "docs": "A slot for adding custom content."
         },
+        {
+          "name": "action-bar",
+          "docs": "A slot for adding a `calcite-action-bar` to the component."
+        },
         {
           "name": "fab",
           "docs": "A slot for adding a `calcite-fab` (floating action button) to perform an action."

package/dist/loader/cdn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.2
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.2
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.2
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.2
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/types/components/action-bar/action-bar.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { LoadableComponent } from "../../utils/loadable";
 import { LocalizedComponent } from "../../utils/locale";
@@ -25,6 +25,7 @@ export declare class ActionBar implements ConditionalSlotComponent, LoadableComp
    *  The layout direction of the actions.
    */
   layout: Extract<"horizontal" | "vertical", Layout>;
+  layoutHandler(): void;
   /**
    * Disables automatically overflowing `calcite-action`s that won't fit into menus.
    */
@@ -81,6 +82,9 @@ export declare class ActionBar implements ConditionalSlotComponent, LoadableComp
   conditionallyOverflowActions: () => void;
   toggleExpand: () => void;
   setExpandToggleRef: (el: HTMLCalciteActionElement) => void;
+  updateGroups(): void;
+  setGroupLayout(groups: HTMLCalciteActionGroupElement[]): void;
+  handleDefaultSlotChange: (event: Event) => void;
   renderBottomActionGroup(): VNode;
   render(): VNode;
 }

package/dist/types/components/action-group/action-group.d.ts

@@ -19,6 +19,8 @@ export declare class ActionGroup implements ConditionalSlotComponent, LoadableCo
   expandedHandler(): void;
   /**
    * Indicates the layout of the component.
+   *
+   * @deprecated Use the `layout` property on the component's parent instead.
    */
   layout: Layout;
   /**

package/dist/types/components/action-pad/action-pad.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { LoadableComponent } from "../../utils/loadable";
 import { LocalizedComponent } from "../../utils/locale";
@@ -23,6 +23,7 @@ export declare class ActionPad implements ConditionalSlotComponent, LoadableComp
    * Indicates the layout of the component.
    */
   layout: Layout;
+  layoutHandler(): void;
   /**
    * Arranges the component depending on the element's `dir` property.
    */
@@ -47,6 +48,7 @@ export declare class ActionPad implements ConditionalSlotComponent, LoadableComp
    */
   calciteActionPadToggle: EventEmitter<void>;
   el: HTMLCalciteActionPadElement;
+  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
   expandToggleEl: HTMLCalciteActionElement;
   effectiveLocale: string;
   effectiveLocaleChange(): void;
@@ -62,6 +64,9 @@ export declare class ActionPad implements ConditionalSlotComponent, LoadableComp
   actionMenuOpenHandler: (event: CustomEvent<void>) => void;
   toggleExpand: () => void;
   setExpandToggleRef: (el: HTMLCalciteActionElement) => void;
+  updateGroups(): void;
+  setGroupLayout(groups: HTMLCalciteActionGroupElement[]): void;
+  handleDefaultSlotChange: (event: Event) => void;
   renderBottomActionGroup(): VNode;
   render(): VNode;
 }

package/dist/types/components/panel/panel.d.ts

@@ -7,6 +7,7 @@ import { T9nComponent } from "../../utils/t9n";
 import { PanelMessages } from "./assets/panel/t9n";
 /**
  * @slot - A slot for adding custom content.
+ * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
  * @slot header-actions-start - A slot for adding actions or content to the start side of the header.
  * @slot header-actions-end - A slot for adding actions or content to the end side of the header.
  * @slot header-content - A slot for adding custom content to the header.
@@ -68,6 +69,7 @@ export declare class Panel implements InteractiveComponent, LoadableComponent, L
   hasEndActions: boolean;
   hasMenuItems: boolean;
   hasHeaderContent: boolean;
+  hasActionBar: boolean;
   hasFooterContent: boolean;
   hasFooterActions: boolean;
   hasFab: boolean;
@@ -92,6 +94,7 @@ export declare class Panel implements InteractiveComponent, LoadableComponent, L
   handleHeaderActionsStartSlotChange: (event: Event) => void;
   handleHeaderActionsEndSlotChange: (event: Event) => void;
   handleHeaderMenuActionsSlotChange: (event: Event) => void;
+  handleActionBarSlotChange: (event: Event) => void;
   handleHeaderContentSlotChange: (event: Event) => void;
   handleFooterSlotChange: (event: Event) => void;
   handleFooterActionsSlotChange: (event: Event) => void;
@@ -113,6 +116,7 @@ export declare class Panel implements InteractiveComponent, LoadableComponent, L
    */
   scrollContentTo(options?: ScrollToOptions): Promise<void>;
   renderHeaderContent(): VNode;
+  renderActionBar(): VNode;
   /**
    * Allows user to override the entire header-content node.
    */

package/dist/types/components/panel/resources.d.ts

@@ -1,4 +1,5 @@
 export declare const CSS: {
+  actionBarContainer: string;
   backButton: string;
   container: string;
   header: string;
@@ -22,6 +23,7 @@ export declare const ICONS: {
   backRight: string;
 };
 export declare const SLOTS: {
+  actionBar: string;
   headerActionsStart: string;
   headerActionsEnd: string;
   headerMenuActions: string;

package/dist/types/components/shell-panel/shell-panel.d.ts

@@ -74,4 +74,5 @@ export declare class ShellPanel implements ConditionalSlotComponent, LocalizedCo
   separatorPointerDown: (event: PointerEvent) => void;
   connectSeparator: (separatorEl: HTMLDivElement) => void;
   disconnectSeparator: () => void;
+  handleActionBarSlotChange: (event: Event) => void;
 }

package/dist/types/components.d.ts

@@ -240,6 +240,7 @@ export namespace Components {
         "expanded": boolean;
         /**
           * Indicates the layout of the component.
+          * @deprecated Use the `layout` property on the component's parent instead.
          */
         "layout": Layout;
         /**
@@ -5229,6 +5230,7 @@ declare namespace LocalJSX {
         "expanded"?: boolean;
         /**
           * Indicates the layout of the component.
+          * @deprecated Use the `layout` property on the component's parent instead.
          */
         "layout"?: Layout;
         /**

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { getAssetPath } from "./stencil-public-runtime";

package/dist/types/utils/observers.d.ts

@@ -4,7 +4,7 @@ export interface ExtendedMutationObserver extends MutationObserver {
 }
 type ObserverType = "mutation" | "intersection" | "resize";
 type ObserverCallbackType<T extends ObserverType> = T extends "mutation" ? MutationCallback : T extends "intersection" ? IntersectionObserverCallback : T extends "resize" ? ResizeObserverCallback : never;
-type ObserverOptions<T extends ObserverType> = T extends "mutation" ? MutationObserverInit : T extends "intersection" ? IntersectionObserverInit : T extends "resize" ? never : never;
+type ObserverOptions<T extends ObserverType> = T extends "intersection" ? IntersectionObserverInit : never;
 type ObserverInstanceType<T extends ObserverType> = T extends "mutation" ? ExtendedMutationObserver : T extends "intersection" ? IntersectionObserver : T extends "resize" ? ResizeObserver : never;
 /**
  * This utility ensures observers are created only for browser contexts.

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.3.0-next.1
+ * v1.3.0-next.2
  */
 'use strict';
 
@@ -9249,6 +9249,7 @@ class ActionBar {
       const actions = queryActions(el);
       const actionCount = expandDisabled ? actions.length : actions.length + 1;
       const actionGroups = Array.from(el.querySelectorAll("calcite-action-group"));
+      this.setGroupLayout(actionGroups);
       const groupCount = getSlotted(el, SLOTS$r.bottomActions) || !expandDisabled
         ? actionGroups.length + 1
         : actionGroups.length;
@@ -9280,6 +9281,10 @@ class ActionBar {
     this.setExpandToggleRef = (el) => {
       this.expandToggleEl = el;
     };
+    this.handleDefaultSlotChange = (event) => {
+      const groups = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-action-group"));
+      this.setGroupLayout(groups);
+    };
     this.expandDisabled = false;
     this.expanded = false;
     this.layout = "vertical";
@@ -9298,6 +9303,9 @@ class ActionBar {
     toggleChildActionText({ parent: this.el, expanded });
     this.conditionallyOverflowActions();
   }
+  layoutHandler() {
+    this.updateGroups();
+  }
   overflowDisabledHandler(overflowActionsDisabled) {
     overflowActionsDisabled
       ? this.resizeObserver.disconnect()
@@ -9361,6 +9369,12 @@ class ActionBar {
     await componentLoaded(this);
     this.el?.focus();
   }
+  updateGroups() {
+    this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
+  }
+  setGroupLayout(groups) {
+    groups.forEach((group) => (group.layout = this.layout));
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -9375,7 +9389,7 @@ class ActionBar {
     return getSlotted(el, SLOTS$r.bottomActions) || expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$V.actionGroupBottom, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$r.bottomActions }), hAsync("slot", { name: SLOTS$r.expandTooltip }), expandToggleNode)) : null;
   }
   render() {
-    return (hAsync(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, hAsync("slot", null), this.renderBottomActionGroup()));
+    return (hAsync(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
@@ -9383,6 +9397,7 @@ class ActionBar {
   static get watchers() { return {
     "expandDisabled": ["expandHandler"],
     "expanded": ["expandedHandler"],
+    "layout": ["layoutHandler"],
     "overflowActionsDisabled": ["overflowDisabledHandler"],
     "messageOverrides": ["onMessagesChange"],
     "effectiveLocale": ["effectiveLocaleChange"]
@@ -9840,6 +9855,7 @@ class ActionPad {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteActionPadToggle = createEvent(this, "calciteActionPadToggle", 6);
+    this.mutationObserver = createObserver();
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -9862,6 +9878,10 @@ class ActionPad {
     this.setExpandToggleRef = (el) => {
       this.expandToggleEl = el;
     };
+    this.handleDefaultSlotChange = (event) => {
+      const groups = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-action-group"));
+      this.setGroupLayout(groups);
+    };
     this.expandDisabled = false;
     this.expanded = false;
     this.layout = "vertical";
@@ -9875,6 +9895,9 @@ class ActionPad {
   expandedHandler(expanded) {
     toggleChildActionText({ parent: this.el, expanded });
   }
+  layoutHandler() {
+    this.updateGroups();
+  }
   onMessagesChange() {
     /* wired up by t9n util */
   }
@@ -9917,6 +9940,12 @@ class ActionPad {
     await componentLoaded(this);
     this.el?.focus();
   }
+  updateGroups() {
+    this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
+  }
+  setGroupLayout(groups) {
+    groups.forEach((group) => (group.layout = this.layout));
+  }
   // --------------------------------------------------------------------------
   //
   //  Component Methods
@@ -9931,13 +9960,14 @@ class ActionPad {
     return expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$U.actionGroupBottom, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$q.expandTooltip }), expandToggleNode)) : null;
   }
   render() {
-    return (hAsync(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, hAsync("div", { class: CSS$U.container }, hAsync("slot", null), this.renderBottomActionGroup())));
+    return (hAsync(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, hAsync("div", { class: CSS$U.container }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup())));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
   static get watchers() { return {
     "expanded": ["expandedHandler"],
+    "layout": ["layoutHandler"],
     "messageOverrides": ["onMessagesChange"],
     "effectiveLocale": ["effectiveLocaleChange"]
   }; }
@@ -19245,7 +19275,7 @@ const SLOTS$l = {
   dropdownTrigger: "trigger"
 };
 
-const dropdownCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-dropdown:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-dropdown{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-dropdown{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-dropdown{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-dropdown{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-dropdown{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-dropdown:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-dropdown:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}/*!@:host([hidden])*/[hidden].sc-calcite-dropdown-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-dropdown-h{pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-dropdown-h{display:inline-flex;flex:0 1 auto}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-dropdown-h[disabled] .sc-calcite-dropdown-s>[calcite-hydrated][disabled],[disabled].sc-calcite-dropdown-h [calcite-hydrated][disabled].sc-calcite-dropdown{opacity:1}/*!@:host .calcite-dropdown-wrapper*/.sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{--calcite-floating-ui-z-index:600;display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}/*!@.calcite-dropdown-wrapper .calcite-floating-ui-anim*/.calcite-dropdown-wrapper.sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:1;border-radius:0.25rem}/*!@.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=bottom].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{transform:translateY(-5px)}/*!@.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=top].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{transform:translateY(5px)}/*!@.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=left].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{transform:translateX(5px)}/*!@.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=right].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{transform:translateX(-5px)}/*!@.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active*/.calcite-dropdown-wrapper[data-placement].sc-calcite-dropdown .calcite-floating-ui-anim--active.sc-calcite-dropdown{opacity:1;transform:translate(0)}/*!@:host([open]) .calcite-dropdown-wrapper*/[open].sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{visibility:visible}/*!@:host .calcite-dropdown-content*/.sc-calcite-dropdown-h .calcite-dropdown-content.sc-calcite-dropdown{max-block-size:45vh;inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}/*!@.calcite-trigger-container*/.calcite-trigger-container.sc-calcite-dropdown{position:relative;display:flex;flex:1 1 auto}@media (forced-colors: active){/*!@:host([open]) .calcite-dropdown-wrapper*/[open].sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{border:1px solid canvasText}}/*!@:host([width=s])*/[width=s].sc-calcite-dropdown-h{--calcite-dropdown-width:12rem}/*!@:host([width=m])*/[width=m].sc-calcite-dropdown-h{--calcite-dropdown-width:14rem}/*!@:host([width=l])*/[width=l].sc-calcite-dropdown-h{--calcite-dropdown-width:16rem}";
+const dropdownCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-dropdown:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-dropdown{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-dropdown{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-dropdown{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-dropdown{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-dropdown{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-dropdown:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-dropdown:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}/*!@:host([hidden])*/[hidden].sc-calcite-dropdown-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-dropdown-h{pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-dropdown-h{display:inline-flex;flex:0 1 auto}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-dropdown-h[disabled] .sc-calcite-dropdown-s>[calcite-hydrated][disabled],[disabled].sc-calcite-dropdown-h [calcite-hydrated][disabled].sc-calcite-dropdown{opacity:1}/*!@:host .calcite-dropdown-wrapper*/.sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{--calcite-floating-ui-z-index:600;display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}/*!@.calcite-dropdown-wrapper .calcite-floating-ui-anim*/.calcite-dropdown-wrapper.sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:1;border-radius:0.25rem}/*!@.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=bottom].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{transform:translateY(-5px)}/*!@.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=top].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{transform:translateY(5px)}/*!@.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=left].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{transform:translateX(5px)}/*!@.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=right].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{transform:translateX(-5px)}/*!@.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active*/.calcite-dropdown-wrapper[data-placement].sc-calcite-dropdown .calcite-floating-ui-anim--active.sc-calcite-dropdown{opacity:1;transform:translate(0)}/*!@:host([open]) .calcite-dropdown-wrapper*/[open].sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{visibility:visible}/*!@:host .calcite-dropdown-content*/.sc-calcite-dropdown-h .calcite-dropdown-content.sc-calcite-dropdown{max-block-size:45vh;inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}/*!@.calcite-trigger-container*/.calcite-trigger-container.sc-calcite-dropdown{position:relative;display:flex;flex:1 1 auto;word-wrap:break-word;word-break:break-word}@media (forced-colors: active){/*!@:host([open]) .calcite-dropdown-wrapper*/[open].sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{border:1px solid canvasText}}/*!@:host([width=s])*/[width=s].sc-calcite-dropdown-h{--calcite-dropdown-width:12rem}/*!@:host([width=m])*/[width=m].sc-calcite-dropdown-h{--calcite-dropdown-width:14rem}/*!@:host([width=l])*/[width=l].sc-calcite-dropdown-h{--calcite-dropdown-width:16rem}";
 
 /**
  * @slot - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
@@ -20297,6 +20327,7 @@ class Flow {
 }
 
 const CSS$C = {
+  actionBarContainer: "action-bar-container",
   backButton: "back-button",
   container: "container",
   header: "header",
@@ -20320,6 +20351,7 @@ const ICONS$9 = {
   backRight: "chevron-right"
 };
 const SLOTS$k = {
+  actionBar: "action-bar",
   headerActionsStart: "header-actions-start",
   headerActionsEnd: "header-actions-end",
   headerMenuActions: "header-menu-actions",
@@ -21864,8 +21896,8 @@ class Input {
       "prefixText": [1, "prefix-text"],
       "readOnly": [516, "read-only"],
       "required": [516],
-      "scale": [1537],
-      "status": [1537],
+      "scale": [513],
+      "status": [513],
       "step": [520],
       "autocomplete": [1],
       "pattern": [1],
@@ -22537,7 +22569,7 @@ class InputMessage {
     "$members$": {
       "icon": [520],
       "iconFlipRtl": [516, "icon-flip-rtl"],
-      "scale": [1537],
+      "scale": [513],
       "status": [513]
     },
     "$listeners$": undefined,
@@ -23108,7 +23140,7 @@ class InputNumber {
       "prefixText": [1, "prefix-text"],
       "readOnly": [516, "read-only"],
       "required": [516],
-      "scale": [1537],
+      "scale": [513],
       "status": [513],
       "step": [520],
       "autocomplete": [1],
@@ -23471,7 +23503,7 @@ class InputText {
       "prefixText": [1, "prefix-text"],
       "readOnly": [516, "read-only"],
       "required": [516],
-      "scale": [1537],
+      "scale": [513],
       "status": [513],
       "autocomplete": [1],
       "inputMode": [1, "input-mode"],
@@ -26602,10 +26634,11 @@ class Pagination {
   }; }
 }
 
-const panelCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-panel:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-panel{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-panel{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-panel{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-panel{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-panel{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-panel:root{--calcite-internal-duration-factor:0.01}}/*!@:host*/.sc-calcite-panel-h{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-panel-h *.sc-calcite-panel{box-sizing:border-box}/*!@:root*/.sc-calcite-panel:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}/*!@:host([hidden])*/[hidden].sc-calcite-panel-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-panel-h{pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-panel-h{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-panel-h[disabled] .sc-calcite-panel-s>[calcite-hydrated][disabled],[disabled].sc-calcite-panel-h [calcite-hydrated][disabled].sc-calcite-panel{opacity:1}/*!@.header*/.header.sc-calcite-panel{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}/*!@.heading*/.heading.sc-calcite-panel{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}/*!@.header .heading*/.header.sc-calcite-panel .heading.sc-calcite-panel{flex:1 1 auto;padding:0.5rem}/*!@.container*/.container.sc-calcite-panel{margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;background-color:var(--calcite-ui-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing)}/*!@.container[hidden]*/.container[hidden].sc-calcite-panel{display:none}/*!@.header*/.header.sc-calcite-panel{border-block-end:1px solid;position:sticky;inset-block-start:0px;z-index:400;inline-size:100%;align-items:stretch;justify-content:flex-start;background-color:var(--calcite-ui-foreground-1);border-block-end-color:var(--calcite-ui-border-3);flex:0 0 auto}/*!@.header-content*/.header-content.sc-calcite-panel{display:flex;flex-direction:column;overflow:hidden;padding-inline:0.75rem;padding-block:0.875rem;margin-inline-end:auto}/*!@.header-content .heading,\n.header-content .description*/.header-content.sc-calcite-panel .heading.sc-calcite-panel,.header-content.sc-calcite-panel .description.sc-calcite-panel{display:block;overflow-wrap:break-word;padding:0px}/*!@.header-content .heading*/.header-content.sc-calcite-panel .heading.sc-calcite-panel{margin-inline:0px;margin-block:0px 0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-medium)}/*!@.header-content .heading:only-child*/.header-content.sc-calcite-panel .heading.sc-calcite-panel:only-child{margin-block-end:0px}/*!@.header-content .description*/.header-content.sc-calcite-panel .description.sc-calcite-panel{font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-2)}/*!@.back-button*/.back-button.sc-calcite-panel{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}/*!@.header-actions*/.header-actions.sc-calcite-panel{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}/*!@.header-actions--end*/.header-actions--end.sc-calcite-panel{margin-inline-start:auto}/*!@.content-wrapper*/.content-wrapper.sc-calcite-panel{overflow:auto}/*!@.content-height*/.content-height.sc-calcite-panel{block-size:100%}/*!@.content-container*/.content-container.sc-calcite-panel{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;background-color:var(--calcite-ui-background)}/*!@.footer*/.footer.sc-calcite-panel{border-block-start:1px solid;position:sticky;inset-block-end:0px;display:flex;inline-size:100%;justify-content:space-evenly;background-color:var(--calcite-ui-foreground-1);border-block-start-color:var(--calcite-ui-border-3);flex:0 0 auto;min-block-size:3rem;padding:0.5rem}/*!@.fab-container*/.fab-container.sc-calcite-panel{position:sticky;inset-block-end:0px;z-index:300;margin-block:0px;margin-inline:auto;display:block;padding:0.5rem;inset-inline:0;inline-size:-moz-fit-content;inline-size:fit-content}/*!@[hidden]*/[hidden].sc-calcite-panel{display:none}";
+const panelCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-panel:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-panel{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-panel{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-panel{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-panel{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-panel{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-panel:root{--calcite-internal-duration-factor:0.01}}/*!@:host*/.sc-calcite-panel-h{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-panel-h *.sc-calcite-panel{box-sizing:border-box}/*!@:root*/.sc-calcite-panel:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}/*!@:host([hidden])*/[hidden].sc-calcite-panel-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-panel-h{pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-panel-h{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-panel-h[disabled] .sc-calcite-panel-s>[calcite-hydrated][disabled],[disabled].sc-calcite-panel-h [calcite-hydrated][disabled].sc-calcite-panel{opacity:1}/*!@.header*/.header.sc-calcite-panel{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}/*!@.heading*/.heading.sc-calcite-panel{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}/*!@.header .heading*/.header.sc-calcite-panel .heading.sc-calcite-panel{flex:1 1 auto;padding:0.5rem}/*!@.container*/.container.sc-calcite-panel{margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;background-color:var(--calcite-ui-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing)}/*!@.container[hidden]*/.container[hidden].sc-calcite-panel{display:none}/*!@.header*/.header.sc-calcite-panel{border-block-end:1px solid;z-index:400;inline-size:100%;align-items:stretch;justify-content:flex-start;background-color:var(--calcite-ui-foreground-1);border-block-end-color:var(--calcite-ui-border-3);flex:0 0 auto}/*!@.action-bar-container*/.action-bar-container.sc-calcite-panel{border-block-end:1px solid;z-index:400;inline-size:100%;border-block-end-color:var(--calcite-ui-border-3)}/*!@.action-bar-container ::slotted(calcite-action-bar)*/.action-bar-container .sc-calcite-panel-s>calcite-action-bar{inline-size:100%}/*!@.header-content*/.header-content.sc-calcite-panel{display:flex;flex-direction:column;overflow:hidden;padding-inline:0.75rem;padding-block:0.875rem;margin-inline-end:auto}/*!@.header-content .heading,\n.header-content .description*/.header-content.sc-calcite-panel .heading.sc-calcite-panel,.header-content.sc-calcite-panel .description.sc-calcite-panel{display:block;overflow-wrap:break-word;padding:0px}/*!@.header-content .heading*/.header-content.sc-calcite-panel .heading.sc-calcite-panel{margin-inline:0px;margin-block:0px 0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-medium)}/*!@.header-content .heading:only-child*/.header-content.sc-calcite-panel .heading.sc-calcite-panel:only-child{margin-block-end:0px}/*!@.header-content .description*/.header-content.sc-calcite-panel .description.sc-calcite-panel{font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-2)}/*!@.back-button*/.back-button.sc-calcite-panel{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}/*!@.header-actions*/.header-actions.sc-calcite-panel{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}/*!@.header-actions--end*/.header-actions--end.sc-calcite-panel{margin-inline-start:auto}/*!@.content-wrapper*/.content-wrapper.sc-calcite-panel{overflow:auto}/*!@.content-height*/.content-height.sc-calcite-panel{block-size:100%}/*!@.content-container*/.content-container.sc-calcite-panel{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;background-color:var(--calcite-ui-background)}/*!@.footer*/.footer.sc-calcite-panel{border-block-start:1px solid;display:flex;inline-size:100%;justify-content:space-evenly;background-color:var(--calcite-ui-foreground-1);border-block-start-color:var(--calcite-ui-border-3);flex:0 0 auto;min-block-size:3rem;padding:0.5rem}/*!@.fab-container*/.fab-container.sc-calcite-panel{position:sticky;inset-block-end:0px;z-index:300;margin-block:0px;margin-inline:auto;display:block;padding:0.5rem;inset-inline:0;inline-size:-moz-fit-content;inline-size:fit-content}/*!@[hidden]*/[hidden].sc-calcite-panel{display:none}";
 
 /**
  * @slot - A slot for adding custom content.
+ * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
  * @slot header-actions-start - A slot for adding actions or content to the start side of the header.
  * @slot header-actions-end - A slot for adding actions or content to the end side of the header.
  * @slot header-content - A slot for adding custom content to the header.
@@ -26674,6 +26707,11 @@ class Panel {
       });
       this.hasMenuItems = !!elements.length;
     };
+    this.handleActionBarSlotChange = (event) => {
+      const actionBars = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-action-bar"));
+      actionBars.forEach((actionBar) => (actionBar.layout = "horizontal"));
+      this.hasActionBar = !!actionBars.length;
+    };
     this.handleHeaderContentSlotChange = (event) => {
       const elements = event.target.assignedElements({
         flatten: true
@@ -26720,6 +26758,7 @@ class Panel {
     this.hasEndActions = false;
     this.hasMenuItems = false;
     this.hasHeaderContent = false;
+    this.hasActionBar = false;
     this.hasFooterContent = false;
     this.hasFooterActions = false;
     this.hasFab = false;
@@ -26793,6 +26832,9 @@ class Panel {
     const descriptionNode = description ? hAsync("span", { class: CSS$C.description }, description) : null;
     return !hasHeaderContent && (headingNode || descriptionNode) ? (hAsync("div", { class: CSS$C.headerContent, key: "header-content" }, headingNode, descriptionNode)) : null;
   }
+  renderActionBar() {
+    return (hAsync("div", { class: CSS$C.actionBarContainer, hidden: !this.hasActionBar }, hAsync("slot", { name: SLOTS$k.actionBar, onSlotchange: this.handleActionBarSlotChange })));
+  }
   /**
    * Allows user to override the entire header-content node.
    */
@@ -26804,14 +26846,14 @@ class Panel {
     return (hAsync("div", { class: { [CSS$C.headerActionsStart]: true, [CSS$C.headerActions]: true }, hidden: !hasStartActions, key: "header-actions-start" }, hAsync("slot", { name: SLOTS$k.headerActionsStart, onSlotchange: this.handleHeaderActionsStartSlotChange })));
   }
   renderHeaderActionsEnd() {
-    const { close, hasEndActions, messages, closable } = this;
+    const { close, hasEndActions, messages, closable, hasMenuItems } = this;
     const text = messages.close;
-    const closableNode = closable ? (hAsync("calcite-action", { "aria-label": text, icon: ICONS$9.close, onClick: close, text: text,
+    const closableNode = closable ? (hAsync("calcite-action", { "aria-label": text, "data-test": "close", icon: ICONS$9.close, onClick: close, text: text,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setCloseRef })) : null;
     const slotNode = (hAsync("slot", { name: SLOTS$k.headerActionsEnd, onSlotchange: this.handleHeaderActionsEndSlotChange }));
-    const showContainer = hasEndActions || closableNode;
-    return (hAsync("div", { class: { [CSS$C.headerActionsEnd]: true, [CSS$C.headerActions]: true }, hidden: !showContainer, key: "header-actions-end" }, slotNode, closableNode));
+    const showContainer = hasEndActions || closableNode || hasMenuItems;
+    return (hAsync("div", { class: { [CSS$C.headerActionsEnd]: true, [CSS$C.headerActions]: true }, hidden: !showContainer, key: "header-actions-end" }, slotNode, this.renderMenu(), closableNode));
   }
   renderMenu() {
     const { hasMenuItems, messages, menuOpen } = this;
@@ -26826,7 +26868,7 @@ class Panel {
       hasEndActions ||
       closable ||
       hasMenuItems;
-    return (hAsync("header", { class: CSS$C.header, hidden: !showHeader }, this.renderHeaderStartActions(), this.renderHeaderSlottedContent(), headerContentNode, this.renderHeaderActionsEnd(), this.renderMenu()));
+    return (hAsync("header", { class: CSS$C.header, hidden: !showHeader }, this.renderHeaderStartActions(), this.renderHeaderSlottedContent(), headerContentNode, this.renderHeaderActionsEnd()));
   }
   renderFooterNode() {
     const { hasFooterContent, hasFooterActions } = this;
@@ -26852,7 +26894,7 @@ class Panel {
     const { loading, panelKeyDownHandler, closed, closable } = this;
     const panelNode = (hAsync("article", { "aria-busy": toAriaBoolean(loading), class: CSS$C.container, hidden: closed, onKeyDown: panelKeyDownHandler, tabIndex: closable ? 0 : -1,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setContainerRef }, this.renderHeaderNode(), this.renderContent(), this.renderFooterNode()));
+      ref: this.setContainerRef }, this.renderHeaderNode(), this.renderActionBar(), this.renderContent(), this.renderFooterNode()));
     return (hAsync(Fragment, null, loading ? hAsync("calcite-scrim", { loading: loading }) : null, panelNode));
   }
   static get assetsDirs() { return ["assets"]; }
@@ -26880,6 +26922,7 @@ class Panel {
       "hasEndActions": [32],
       "hasMenuItems": [32],
       "hasHeaderContent": [32],
+      "hasActionBar": [32],
       "hasFooterContent": [32],
       "hasFooterActions": [32],
       "hasFab": [32],
@@ -29526,6 +29569,9 @@ class ShellCenterRow {
     const { el } = this;
     const contentNode = (hAsync("div", { class: CSS$d.content }, hAsync("slot", null)));
     const actionBar = getSlotted(el, SLOTS$7.actionBar);
+    if (actionBar) {
+      actionBar.layout = "horizontal";
+    }
     const actionBarNode = actionBar ? (hAsync("div", { class: CSS$d.actionBarContainer, key: "action-bar" }, hAsync("slot", { name: SLOTS$7.actionBar }))) : null;
     const children = [actionBarNode, contentNode];
     if (actionBar?.position === "end") {
@@ -29674,6 +29720,9 @@ class ShellPanel {
     this.disconnectSeparator = () => {
       this.separatorEl?.removeEventListener("pointerdown", this.separatorPointerDown);
     };
+    this.handleActionBarSlotChange = (event) => {
+      slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-action-bar")).forEach((actionBar) => (actionBar.layout = "vertical"));
+    };
     this.collapsed = false;
     this.detached = false;
     this.detachedHeightScale = "l";
@@ -29733,7 +29782,7 @@ class ShellPanel {
     const separatorNode = allowResizing ? (hAsync("div", { "aria-label": this.messages.resize, "aria-orientation": "horizontal", "aria-valuemax": contentWidthMax, "aria-valuemin": contentWidthMin, "aria-valuenow": contentWidth ?? initialContentWidth, class: CSS$c.separator, key: "separator", onKeyDown: this.separatorKeyDown, role: "separator", tabIndex: 0, "touch-action": "none",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.connectSeparator })) : null;
-    const actionBarNode = hAsync("slot", { key: "action-bar", name: SLOTS$6.actionBar });
+    const actionBarNode = (hAsync("slot", { key: "action-bar", name: SLOTS$6.actionBar, onSlotchange: this.handleActionBarSlotChange }));
     const mainNodes = [actionBarNode, contentNode, separatorNode];
     if (position === "end") {
       mainNodes.reverse();