@esri/solutions-components 0.7.34 → 0.7.36

package/dist/components/floating-ui.js

@@ -7,6 +7,11 @@ import { Build } from '@stencil/core/internal/client';
 import { g as getElementDir } from './dom.js';
 import { d as debounce } from './debounce.js';
 
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
 const sides = ['top', 'right', 'bottom', 'left'];
 const alignments = ['start', 'end'];
 const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
@@ -188,7 +193,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
 
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
- * next to a reference element when it is given a certain positioning strategy.
+ * next to a given reference element.
  *
  * This export does not have any `platform` interface logic. You will need to
  * write one for the platform you are using Floating UI with.
@@ -266,7 +271,6 @@ const computePosition$1 = async (reference, floating, config) => {
         } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
       }
       i = -1;
-      continue;
     }
   }
   return {
@@ -329,6 +333,7 @@ async function detectOverflow(state, options) {
     y: 1
   };
   const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
     rect,
     offsetParent,
     strategy
@@ -346,7 +351,7 @@ async function detectOverflow(state, options) {
  * appears centered to the reference element.
  * @see https://floating-ui.com/docs/arrow
  */
-const arrow = options => ({
+const arrow$1 = options => ({
   name: 'arrow',
   options,
   async fn(state) {
@@ -407,7 +412,7 @@ const arrow = options => ({
     // to point to nothing for an aligned placement, adjust the offset of the
     // floating element itself. To ensure `shift()` continues to take action,
     // a single reset is performed when this is true.
-    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
     const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
     return {
       [axis]: coords[axis] + alignmentOffset,
@@ -438,7 +443,7 @@ function getPlacementList(alignment, autoAlignment, allowedPlacements) {
  * preferred placement. Alternative to `flip`.
  * @see https://floating-ui.com/docs/autoPlacement
  */
-const autoPlacement = function (options) {
+const autoPlacement$1 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -532,7 +537,7 @@ const autoPlacement = function (options) {
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip = function (options) {
+const flip$1 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -657,7 +662,7 @@ function isAnySideFullyClipped(overflow) {
  * when it is not in the same clipping context as the reference element.
  * @see https://floating-ui.com/docs/hide
  */
-const hide = function (options) {
+const hide$1 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -712,6 +717,7 @@ const hide = function (options) {
 
 // For type backwards-compatibility, the `OffsetOptions` type was also
 // Derivable.
+
 async function convertValueToCoords(state, options) {
   const {
     placement,
@@ -725,8 +731,6 @@ async function convertValueToCoords(state, options) {
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
-
-  // eslint-disable-next-line prefer-const
   let {
     mainAxis,
     crossAxis,
@@ -768,15 +772,27 @@ const offset = function (options) {
     name: 'offset',
     options,
     async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
-        y
+        y,
+        placement,
+        middlewareData
       } = state;
       const diffCoords = await convertValueToCoords(state, options);
+
+      // If the placement is the same and the arrow caused an alignment offset
+      // then we don't need to change the positioning coordinates.
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
       return {
         x: x + diffCoords.x,
         y: y + diffCoords.y,
-        data: diffCoords
+        data: {
+          ...diffCoords,
+          placement
+        }
       };
     }
   };
@@ -787,7 +803,7 @@ const offset = function (options) {
  * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
-const shift = function (options) {
+const shift$1 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -867,7 +883,7 @@ function getNodeName(node) {
 }
 function getWindow(node) {
   var _node$ownerDocument;
-  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
 }
 function getDocumentElement(node) {
   var _ref;
@@ -1306,7 +1322,14 @@ function getClippingRect(_ref) {
 }
 
 function getDimensions(element) {
-  return getCssDimensions(element);
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  return {
+    width,
+    height
+  };
 }
 
 function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
@@ -1552,10 +1575,46 @@ function autoUpdate(reference, floating, update, options) {
   };
 }
 
+/**
+ * Optimizes the visibility of the floating element by choosing the placement
+ * that has the most space available automatically, without needing to specify a
+ * preferred placement. Alternative to `flip`.
+ * @see https://floating-ui.com/docs/autoPlacement
+ */
+const autoPlacement = autoPlacement$1;
+
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift = shift$1;
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip = flip$1;
+
+/**
+ * Provides data to hide the floating element in applicable situations, such as
+ * when it is not in the same clipping context as the reference element.
+ * @see https://floating-ui.com/docs/hide
+ */
+const hide = hide$1;
+
+/**
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow = arrow$1;
+
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
- * next to a reference element when it is given a certain CSS positioning
- * strategy.
+ * next to a given reference element.
  */
 const computePosition = (reference, floating, options) => {
   // This caches the expensive `getClippingElementAncestors` function so that
@@ -1621,17 +1680,17 @@ function offsetParentPolyfill(element) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 (function setUpFloatingUiForShadowDomPositioning() {
-  if (Build.isBrowser) {
-    const originalGetOffsetParent = platform.getOffsetParent;
-    platform.getOffsetParent = (element) => originalGetOffsetParent(element, offsetParent);
-  }
+    if (Build.isBrowser) {
+        const originalGetOffsetParent = platform.getOffsetParent;
+        platform.getOffsetParent = (element) => originalGetOffsetParent(element, offsetParent);
+    }
 })();
 function roundByDPR(value) {
-  const dpr = window.devicePixelRatio || 1;
-  return Math.round(value * dpr) / dpr;
+    const dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
 }
 /**
  * Positions the floating element relative to the reference element.
@@ -1674,53 +1733,53 @@ function roundByDPR(value) {
 const positionFloatingUI = 
 /* we export arrow function to allow us to spy on it during testing */
 async (component, { referenceEl, floatingEl, overlayPositioning = "absolute", placement, flipDisabled, flipPlacements, offsetDistance, offsetSkidding, arrowEl, type, }) => {
-  if (!referenceEl || !floatingEl) {
-    return null;
-  }
-  const { x, y, placement: effectivePlacement, strategy: position, middlewareData, } = await computePosition(referenceEl, floatingEl, {
-    strategy: overlayPositioning,
-    placement: placement === "auto" || placement === "auto-start" || placement === "auto-end"
-      ? undefined
-      : getEffectivePlacement(floatingEl, placement),
-    middleware: getMiddleware({
-      placement,
-      flipDisabled,
-      flipPlacements,
-      offsetDistance,
-      offsetSkidding,
-      arrowEl,
-      type,
-    }),
-  });
-  if (arrowEl && middlewareData.arrow) {
-    const { x, y } = middlewareData.arrow;
-    const side = effectivePlacement.split("-")[0];
-    const alignment = x != null ? "left" : "top";
-    const transform = ARROW_CSS_TRANSFORM[side];
-    const reset = { left: "", top: "", bottom: "", right: "" };
-    if ("floatingLayout" in component) {
-      component.floatingLayout = side === "left" || side === "right" ? "horizontal" : "vertical";
+    if (!referenceEl || !floatingEl) {
+        return null;
     }
-    Object.assign(arrowEl.style, {
-      ...reset,
-      [alignment]: `${alignment == "left" ? x : y}px`,
-      [side]: "100%",
-      transform,
+    const { x, y, placement: effectivePlacement, strategy: position, middlewareData, } = await computePosition(referenceEl, floatingEl, {
+        strategy: overlayPositioning,
+        placement: placement === "auto" || placement === "auto-start" || placement === "auto-end"
+            ? undefined
+            : getEffectivePlacement(floatingEl, placement),
+        middleware: getMiddleware({
+            placement,
+            flipDisabled,
+            flipPlacements,
+            offsetDistance,
+            offsetSkidding,
+            arrowEl,
+            type,
+        }),
+    });
+    if (arrowEl && middlewareData.arrow) {
+        const { x, y } = middlewareData.arrow;
+        const side = effectivePlacement.split("-")[0];
+        const alignment = x != null ? "left" : "top";
+        const transform = ARROW_CSS_TRANSFORM[side];
+        const reset = { left: "", top: "", bottom: "", right: "" };
+        if ("floatingLayout" in component) {
+            component.floatingLayout = side === "left" || side === "right" ? "horizontal" : "vertical";
+        }
+        Object.assign(arrowEl.style, {
+            ...reset,
+            [alignment]: `${alignment == "left" ? x : y}px`,
+            [side]: "100%",
+            transform,
+        });
+    }
+    const referenceHidden = middlewareData.hide?.referenceHidden;
+    const visibility = referenceHidden ? "hidden" : null;
+    const pointerEvents = visibility ? "none" : null;
+    floatingEl.setAttribute(placementDataAttribute, effectivePlacement);
+    const { open } = component;
+    Object.assign(floatingEl.style, {
+        visibility,
+        pointerEvents,
+        position,
+        transform: open ? `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)` : "",
+        top: 0,
+        left: 0,
     });
-  }
-  const referenceHidden = middlewareData.hide?.referenceHidden;
-  const visibility = referenceHidden ? "hidden" : null;
-  const pointerEvents = visibility ? "none" : null;
-  floatingEl.setAttribute(placementDataAttribute, effectivePlacement);
-  const { open } = component;
-  Object.assign(floatingEl.style, {
-    visibility,
-    pointerEvents,
-    position,
-    transform: open ? `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)` : "",
-    left: open ? "0" : "",
-    top: open ? "0" : "",
-  });
 };
 /**
  * Exported for testing purposes only
@@ -1731,73 +1790,73 @@ const placementDataAttribute = "data-placement";
  */
 const repositionDebounceTimeout = 100;
 const effectivePlacements = [
-  "top",
-  "bottom",
-  "right",
-  "left",
-  "top-start",
-  "top-end",
-  "bottom-start",
-  "bottom-end",
-  "right-start",
-  "right-end",
-  "left-start",
-  "left-end",
+    "top",
+    "bottom",
+    "right",
+    "left",
+    "top-start",
+    "top-end",
+    "bottom-start",
+    "bottom-end",
+    "right-start",
+    "right-end",
+    "left-start",
+    "left-end",
 ];
 const defaultMenuPlacement = "bottom-start";
 const FloatingCSS = {
-  animation: "calcite-floating-ui-anim",
-  animationActive: "calcite-floating-ui-anim--active",
+    animation: "calcite-floating-ui-anim",
+    animationActive: "calcite-floating-ui-anim--active",
 };
 function getMiddleware({ placement, flipDisabled, flipPlacements, offsetDistance, offsetSkidding, arrowEl, type, }) {
-  const defaultMiddleware = [shift(), hide()];
-  if (type === "menu") {
-    return [
-      ...defaultMiddleware,
-      flip({
-        fallbackPlacements: flipPlacements || ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"],
-      }),
-    ];
-  }
-  if (type === "popover" || type === "tooltip") {
-    const middleware = [
-      ...defaultMiddleware,
-      offset({
-        mainAxis: typeof offsetDistance === "number" ? offsetDistance : 0,
-        crossAxis: typeof offsetSkidding === "number" ? offsetSkidding : 0,
-      }),
-    ];
-    if (placement === "auto" || placement === "auto-start" || placement === "auto-end") {
-      middleware.push(autoPlacement({ alignment: placement === "auto-start" ? "start" : placement === "auto-end" ? "end" : null }));
+    const defaultMiddleware = [shift(), hide()];
+    if (type === "menu") {
+        return [
+            ...defaultMiddleware,
+            flip({
+                fallbackPlacements: flipPlacements || ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"],
+            }),
+        ];
     }
-    else if (!flipDisabled) {
-      middleware.push(flip(flipPlacements ? { fallbackPlacements: flipPlacements } : {}));
-    }
-    if (arrowEl) {
-      middleware.push(arrow({
-        element: arrowEl,
-      }));
+    if (type === "popover" || type === "tooltip") {
+        const middleware = [
+            ...defaultMiddleware,
+            offset({
+                mainAxis: typeof offsetDistance === "number" ? offsetDistance : 0,
+                crossAxis: typeof offsetSkidding === "number" ? offsetSkidding : 0,
+            }),
+        ];
+        if (placement === "auto" || placement === "auto-start" || placement === "auto-end") {
+            middleware.push(autoPlacement({ alignment: placement === "auto-start" ? "start" : placement === "auto-end" ? "end" : null }));
+        }
+        else if (!flipDisabled) {
+            middleware.push(flip(flipPlacements ? { fallbackPlacements: flipPlacements } : {}));
+        }
+        if (arrowEl) {
+            middleware.push(arrow({
+                element: arrowEl,
+            }));
+        }
+        return middleware;
     }
-    return middleware;
-  }
-  return [];
+    return [];
 }
 function filterComputedPlacements(placements, el) {
-  const filteredPlacements = placements.filter((placement) => effectivePlacements.includes(placement));
-  if (filteredPlacements.length !== placements.length) {
-    console.warn(`${el.tagName}: Invalid value found in: flipPlacements. Try any of these: ${effectivePlacements
-      .map((placement) => `"${placement}"`)
-      .join(", ")
-      .trim()}`, { el });
-  }
-  return filteredPlacements;
+    const filteredPlacements = placements.filter((placement) => effectivePlacements.includes(placement));
+    if (filteredPlacements.length !== placements.length) {
+        console.warn(`${el.tagName}: Invalid value found in: flipPlacements. Try any of these: ${effectivePlacements
+            .map((placement) => `"${placement}"`)
+            .join(", ")
+            .trim()}`, { el });
+    }
+    return filteredPlacements;
 }
 function getEffectivePlacement(floatingEl, placement) {
-  const placements = ["left", "right"];
-  if (getElementDir(floatingEl) === "rtl") {
-    placements.reverse();
-  }
-  return placement.replace(/leading/gi, placements[0]).replace(/trailing/gi, placements[1]);
+    const placements = ["left", "right"];
+    if (getElementDir(floatingEl) === "rtl") {
+        placements.reverse();
+    }
+    return placement.replace(/leading/gi, placements[0]).replace(/trailing/gi, placements[1]);
 }
 /**
  * Convenience function to manage `reposition` calls for FloatingUIComponents that use `positionFloatingUI.
@@ -1820,26 +1879,29 @@ function getEffectivePlacement(floatingEl, placement) {
  * @returns {Promise<void>}
  */
 async function reposition(component, options, delayed = false) {
-  const positionFunction = delayed ? getDebouncedReposition(component) : positionFloatingUI;
-  return positionFunction(component, options);
+    if (!component.open) {
+        return;
+    }
+    const positionFunction = delayed ? getDebouncedReposition(component) : positionFloatingUI;
+    return positionFunction(component, options);
 }
 function getDebouncedReposition(component) {
-  let debounced = componentToDebouncedRepositionMap.get(component);
-  if (debounced) {
+    let debounced = componentToDebouncedRepositionMap.get(component);
+    if (debounced) {
+        return debounced;
+    }
+    debounced = debounce(positionFloatingUI, repositionDebounceTimeout, {
+        leading: true,
+        maxWait: repositionDebounceTimeout,
+    });
+    componentToDebouncedRepositionMap.set(component, debounced);
     return debounced;
-  }
-  debounced = debounce(positionFloatingUI, repositionDebounceTimeout, {
-    leading: true,
-    maxWait: repositionDebounceTimeout,
-  });
-  componentToDebouncedRepositionMap.set(component, debounced);
-  return debounced;
 }
 const ARROW_CSS_TRANSFORM = {
-  top: "",
-  left: "rotate(-90deg)",
-  bottom: "rotate(180deg)",
-  right: "rotate(90deg)",
+    top: "",
+    left: "rotate(-90deg)",
+    bottom: "rotate(180deg)",
+    right: "rotate(90deg)",
 };
 /**
  * Exported for testing purposes only
@@ -1856,27 +1918,25 @@ const componentToDebouncedRepositionMap = new WeakMap();
  * @param floatingEl - The `floatingElement` containing the floating ui.
  */
 function connectFloatingUI(component, referenceEl, floatingEl) {
-  if (!floatingEl || !referenceEl) {
-    return;
-  }
-  disconnectFloatingUI(component, referenceEl, floatingEl);
-  Object.assign(floatingEl.style, {
-    visibility: "hidden",
-    pointerEvents: "none",
-    // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout
-    position: component.overlayPositioning,
-    top: "0",
-    left: "0",
-  });
-  const runAutoUpdate = Build.isBrowser
-    ? autoUpdate
-    : (_refEl, _floatingEl, updateCallback) => {
-      updateCallback();
-      return () => {
-        /* noop */
-      };
-    };
-  cleanupMap.set(component, runAutoUpdate(referenceEl, floatingEl, () => component.reposition()));
+    if (!floatingEl || !referenceEl) {
+        return;
+    }
+    disconnectFloatingUI(component, referenceEl, floatingEl);
+    Object.assign(floatingEl.style, {
+        visibility: "hidden",
+        pointerEvents: "none",
+        // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout
+        position: component.overlayPositioning,
+    });
+    const runAutoUpdate = Build.isBrowser
+        ? autoUpdate
+        : (_refEl, _floatingEl, updateCallback) => {
+            updateCallback();
+            return () => {
+                /* noop */
+            };
+        };
+    cleanupMap.set(component, runAutoUpdate(referenceEl, floatingEl, () => component.reposition()));
 }
 /**
  * Helper to tear down floating element interactions on disconnectedCallback.
@@ -1886,13 +1946,13 @@ function connectFloatingUI(component, referenceEl, floatingEl) {
  * @param floatingEl - The `floatingElement` containing the floating ui.
  */
 function disconnectFloatingUI(component, referenceEl, floatingEl) {
-  if (!floatingEl || !referenceEl) {
-    return;
-  }
-  cleanupMap.get(component)?.();
-  cleanupMap.delete(component);
-  componentToDebouncedRepositionMap.get(component)?.cancel();
-  componentToDebouncedRepositionMap.delete(component);
+    if (!floatingEl || !referenceEl) {
+        return;
+    }
+    cleanupMap.get(component)?.();
+    cleanupMap.delete(component);
+    componentToDebouncedRepositionMap.get(component)?.cancel();
+    componentToDebouncedRepositionMap.delete(component);
 }
 const visiblePointerSize = 4;
 /**

package/dist/components/flow-item.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getElementDir } from './dom.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
@@ -20,27 +20,27 @@ import { d as defineCustomElement$1 } from './scrim.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const CSS = {
-  backButton: "back-button",
+    backButton: "back-button",
 };
 const ICONS = {
-  backLeft: "chevron-left",
-  backRight: "chevron-right",
+    backLeft: "chevron-left",
+    backRight: "chevron-right",
 };
 const SLOTS = {
-  actionBar: "action-bar",
-  headerActionsStart: "header-actions-start",
-  headerActionsEnd: "header-actions-end",
-  headerMenuActions: "header-menu-actions",
-  headerContent: "header-content",
-  fab: "fab",
-  footer: "footer",
-  footerActions: "footer-actions",
+    actionBar: "action-bar",
+    headerActionsStart: "header-actions-start",
+    headerActionsEnd: "header-actions-end",
+    headerMenuActions: "header-menu-actions",
+    headerContent: "header-content",
+    fab: "fab",
+    footer: "footer",
+    footerActions: "footer-actions",
 };
 
-const flowItemCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);border-inline-end-width:1px}calcite-panel{--calcite-panel-footer-padding:var(--calcite-flow-item-footer-padding);--calcite-panel-header-border-block-end:var(--calcite-flow-item-header-border-block-end)}:host([hidden]){display:none}[hidden]{display:none}";
+const flowItemCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);border-inline-end-width:1px}calcite-panel{--calcite-panel-footer-padding:var(--calcite-flow-item-footer-padding);--calcite-panel-header-border-block-end:var(--calcite-flow-item-header-border-block-end)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLElement {
     constructor() {
@@ -92,6 +92,7 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
         this.menuOpen = false;
         this.messageOverrides = undefined;
         this.messages = undefined;
+        this.overlayPositioning = "absolute";
         this.showBackButton = false;
         this.defaultMessages = undefined;
         this.effectiveLocale = "";
@@ -179,10 +180,10 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
             ref: this.setBackRef })) : null;
     }
     render() {
-        const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, } = this;
-        return (h(Host, null, h("calcite-panel", { closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, onCalcitePanelToggle: this.handlePanelToggle,
+        const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, overlayPositioning, } = this;
+        return (h(Host, null, h(InteractiveContainer, { disabled: disabled }, h("calcite-panel", { closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, onCalcitePanelToggle: this.handlePanelToggle, overlayPositioning: overlayPositioning,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setContainerRef }, this.renderBackButton(), h("slot", { name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", null))));
+            ref: this.setContainerRef }, this.renderBackButton(), h("slot", { name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", null)))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
@@ -206,6 +207,7 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
         "menuOpen": [516, "menu-open"],
         "messageOverrides": [1040],
         "messages": [1040],
+        "overlayPositioning": [513, "overlay-positioning"],
         "showBackButton": [4, "show-back-button"],
         "defaultMessages": [32],
         "effectiveLocale": [32],