@esri/solutions-components 0.10.27 → 0.10.28

package/dist/components/dom.js

@@ -578,7 +578,7 @@ var isFocusable = function isFocusable(node, options) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 /**
  * The default `focus-trap/tabbable` options.
@@ -695,52 +695,37 @@ function getHost(root) {
  *
  * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
  *
- * @param {Element} element An element.
+ * @param {Element} el An element.
  * @param root0
  * @param root0.selector
  * @param root0.id
  * @returns {Element} An element.
  */
-function queryElementRoots(element, { selector, id, }) {
-    // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
-    // Based on: https://stackoverflow.com/q/54520554/194216
-    function queryFrom(el) {
-        if (!el) {
-            return null;
-        }
-        if (el.assignedSlot) {
-            el = el.assignedSlot;
-        }
-        const rootNode = getRootNode(el);
-        const found = id
-            ? "getElementById" in rootNode
-                ? /*
-                  Check to make sure 'getElementById' exists in cases where element is no longer connected to the DOM and getRootNode() returns the element.
-                  https://github.com/Esri/calcite-design-system/pull/4280
-                   */
-                    rootNode.getElementById(id)
-                : null
-            : selector
-                ? rootNode.querySelector(selector)
-                : null;
-        const host = getHost(rootNode);
-        return found ? found : host ? queryFrom(host) : null;
+function queryElementRoots(el, { selector, id, }) {
+    if (!el) {
+        return null;
+    }
+    if (el.assignedSlot) {
+        el = el.assignedSlot;
     }
-    return queryFrom(element);
+    const rootNode = getRootNode(el);
+    const found = id
+        ? "getElementById" in rootNode
+            ? /*
+                Check to make sure 'getElementById' exists in cases where element is no longer connected to the DOM and getRootNode() returns the element.
+                https://github.com/Esri/calcite-design-system/pull/4280
+                 */
+                rootNode.getElementById(id)
+            : null
+        : selector
+            ? rootNode.querySelector(selector)
+            : null;
+    return found || queryElementRoots(getHost(rootNode), { selector, id });
 }
-/**
- * This helper returns the closest element matching the selector by crossing he shadow boundary if necessary.
- *
- * @param {Element} element The starting element.
- * @param {string} selector The selector.
- * @returns {Element} The targeted element.
- */
 function closestElementCrossShadowBoundary(element, selector) {
-    // based on https://stackoverflow.com/q/54520554/194216
-    function closestFrom(el) {
-        return el ? el.closest(selector) || closestFrom(getHost(getRootNode(el))) : null;
-    }
-    return closestFrom(element);
+    return element
+        ? element.closest(selector) || closestElementCrossShadowBoundary(getHost(getRootNode(element)), selector)
+        : null;
 }
 /**
  * This utility helps invoke a callback as it traverses a node and its ancestors until reaching the root document.

package/dist/components/dropdown-group.js

@@ -45,9 +45,9 @@ const DropdownGroup = /*@__PURE__*/ proxyCustomElement(class DropdownGroup exten
     render() {
         const groupTitle = this.groupTitle ? (h("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
         const dropdownSeparator = this.groupPosition > 0 ? h("div", { class: "dropdown-separator", role: "separator" }) : null;
-        return (h(Host, { key: '5e46ca1eb8f37e5af6f9ff4f417a9290c84f2f69', "aria-label": this.groupTitle, role: "group" }, h("div", { key: 'af52f0ab422c21b0c10620b61fc7b6445d277878', class: {
+        return (h(Host, { key: 'f41943751aefdb17d4f5d5bd8778c219cfd01a00', "aria-label": this.groupTitle, role: "group" }, h("div", { key: '87b78040b93c06081ca8282a785d466ed8fcf334', class: {
                 [CSS.container]: true,
-            } }, dropdownSeparator, groupTitle, h("slot", { key: 'e320a38a327d6ca9802c9664c93907df2705fbf3' }))));
+            } }, dropdownSeparator, groupTitle, h("slot", { key: 'f635a5bdbe439315eba6292a4858cbd8519d23d1' }))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/dropdown-item.js

@@ -65,9 +65,9 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
     }
     render() {
         const { href, selectionMode, label, iconFlipRtl } = this;
-        const iconStartEl = (h("calcite-icon", { key: '46fd6784a80e78a149e6796018f495f33c9fe172', class: CSS.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
-        const contentNode = (h("span", { key: 'feee494a9e26fad963b71e5aacf3abf9084ec463', class: CSS.itemContent }, h("slot", { key: '33e49b095819a250f469d457279f6a340ff31fd4' })));
-        const iconEndEl = (h("calcite-icon", { key: 'ea58bc58292cf76bcda6826e3c402079b0d3ad69', class: CSS.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
+        const iconStartEl = (h("calcite-icon", { key: '1ec1c941651dda8f39fa15427592141f04180f3e', class: CSS.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+        const contentNode = (h("span", { key: '3ab167ed4054ca34b4e13e72b752af6cf25522ae', class: CSS.itemContent }, h("slot", { key: '88cf44809fb48450c66cc8f105bbda008a78157d' })));
+        const iconEndEl = (h("calcite-icon", { key: '32fb27182943a032c0037f1f878a95c194d2dff1', class: CSS.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
         const slottedContent = this.iconStart && this.iconEnd
             ? [iconStartEl, contentNode, iconEndEl]
             : this.iconStart
@@ -85,7 +85,7 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
                     : "menuitem";
         const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
         const { disabled } = this;
-        return (h(Host, { key: '269693a7a036a7e39f4f8d529695df44f34df22a', "aria-checked": itemAria, "aria-label": !href ? label : "", role: itemRole, tabIndex: disabled ? -1 : 0 }, h(InteractiveContainer, { key: '0c644e048c9e30b8062cd60f7574c3e8fb631b4c', disabled: disabled }, h("div", { key: 'd5c9098d6c3007d5f05b28770074f6833a43d53f', class: {
+        return (h(Host, { key: 'beec8e51bf18bdcab1928181828b372cc70bb7ee', "aria-checked": itemAria, "aria-label": !href ? label : "", role: itemRole, tabIndex: disabled ? -1 : 0 }, h(InteractiveContainer, { key: '5cbbd1074d6c571f4cac3a99e4a2c09bf113db55', disabled: disabled }, h("div", { key: 'bff025aeb280c9d0d829e5cf4d94e9392604e607', class: {
                 [CSS.container]: true,
                 [CSS.containerNone]: selectionMode === "none",
             } }, selectionMode !== "none" ? (h("calcite-icon", { class: CSS.icon, icon: selectionMode === "multiple" ? "check" : "bullet-point", scale: getIconScale(this.scale) })) : null, contentEl))));

package/dist/components/dropdown.js

@@ -4,10 +4,10 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { k as focusFirstTabbable, t as toAriaBoolean, y as focusElementInGroup, f as focusElement } from './dom.js';
-import { f as filterValidFlipPlacements, c as connectFloatingUI, b as defaultMenuPlacement, a as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui.js';
+import { f as focusElement, k as focusFirstTabbable, t as toAriaBoolean, y as focusElementInGroup } from './dom.js';
+import { f as filterValidFlipPlacements, c as connectFloatingUI, e as defaultMenuPlacement, a as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui.js';
 import { g as guid } from './guid.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { i as isActivationKey } from './key.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { c as createObserver } from './observers.js';
@@ -16,7 +16,7 @@ import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const SLOTS = {
     dropdownTrigger: "trigger",
@@ -41,6 +41,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
         this.openTransitionProp = "opacity";
         this.guid = `calcite-dropdown-${guid()}`;
+        this.focusLastDropdownItem = false;
         //--------------------------------------------------------------------------
         //
         //  Private Methods
@@ -125,38 +126,44 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
             if (defaultPrevented) {
                 return;
             }
-            if (this.open) {
-                if (key === "Escape") {
-                    this.closeCalciteDropdown();
-                    event.preventDefault();
-                    return;
-                }
-                else if (event.shiftKey && key === "Tab") {
-                    this.closeCalciteDropdown();
-                    event.preventDefault();
-                    return;
-                }
-            }
-            if (isActivationKey(key)) {
-                this.openCalciteDropdown();
+            if (key === "Escape") {
+                this.closeCalciteDropdown();
                 event.preventDefault();
+                return;
             }
-            else if (key === "Escape") {
+            if (this.open && event.shiftKey && key === "Tab") {
                 this.closeCalciteDropdown();
                 event.preventDefault();
+                return;
+            }
+            if (isActivationKey(key)) {
+                this.toggleDropdown();
+                event.preventDefault();
+            }
+            else if (key === "ArrowDown" || key === "ArrowUp") {
+                this.focusLastDropdownItem = key === "ArrowUp";
+                this.open = true;
+                this.el.addEventListener("calciteDropdownOpen", this.onOpenEnd);
             }
         };
-        this.focusOnFirstActiveOrFirstItem = () => {
-            this.getFocusableElement(this.getTraversableItems().find((item) => item.selected) || this.items[0]);
+        this.focusOnFirstActiveOrDefaultItem = () => {
+            const selectedItem = this.getTraversableItems().find((item) => item.selected);
+            const target = selectedItem ||
+                (this.focusLastDropdownItem ? this.items[this.items.length - 1] : this.items[0]);
+            this.focusLastDropdownItem = false;
+            if (!target) {
+                return;
+            }
+            focusElement(target);
         };
-        this.toggleOpenEnd = () => {
-            this.focusOnFirstActiveOrFirstItem();
-            this.el.removeEventListener("calciteDropdownOpen", this.toggleOpenEnd);
+        this.onOpenEnd = () => {
+            this.focusOnFirstActiveOrDefaultItem();
+            this.el.removeEventListener("calciteDropdownOpen", this.onOpenEnd);
         };
-        this.openCalciteDropdown = () => {
+        this.toggleDropdown = () => {
             this.open = !this.open;
             if (this.open) {
-                this.el.addEventListener("calciteDropdownOpen", this.toggleOpenEnd);
+                this.el.addEventListener("calciteDropdownOpen", this.onOpenEnd);
             }
         };
         this.open = false;
@@ -223,7 +230,6 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
             this.openHandler();
             onToggleOpenCloseComponent(this);
         }
-        connectInteractive(this);
         this.updateItems();
         connectFloatingUI(this, this.referenceEl, this.floatingEl);
     }
@@ -240,16 +246,15 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
         this.resizeObserver?.disconnect();
-        disconnectInteractive(this);
         disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     }
     render() {
         const { open, guid } = this;
-        return (h(Host, { key: '4b3349c1645b7d39263a20b688f7645d92148f23' }, h(InteractiveContainer, { key: 'db1d56073b9f9db2fbf6eaef824e3f12411dd174', disabled: this.disabled }, h("div", { key: '05de1bb5f3641147441f18eaeae104acb06e47c6', class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { key: '39b976c808c4f44983f2d6a056bb128537cf1aae', "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { key: '57ba0f8d3632febcab69b706a73a910f54f09b62', "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, h("div", { key: 'ae7505fa472d323ad6aed6ea0dd2ab7fdf8e7e59', "aria-labelledby": `${guid}-menubutton`, class: {
+        return (h(Host, { key: '377c3d9687bc025f004b4efe58bfa5f0893d86d0' }, h(InteractiveContainer, { key: '9e2f48be045fc6db10cc7203a8b998ec2b6abafd', disabled: this.disabled }, h("div", { key: '8607de2d53a4f8c4b29206ee56aa23ad4c2cbe3d', class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.toggleDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { key: '07de8df34055ddc39301654a5ca312ddf293e6a9', "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { key: 'c1469efb62eb704b021ce6479ad55deda59582d4', "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, h("div", { key: 'f875166d486a53cd393f17d9295974aa449d449f', "aria-labelledby": `${guid}-menubutton`, class: {
                 ["calcite-dropdown-content"]: true,
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: open,
-            }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, h("slot", { key: 'ae94137311b106fbed88dfde346002d87e4efcbb', onSlotchange: this.updateGroups }))))));
+            }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, h("slot", { key: 'bc6e61383aaf85b3d6242a86c50da68bc8b31e27', onSlotchange: this.updateGroups }))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -292,7 +297,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         if (this.disabled || this.type !== "hover") {
             return;
         }
-        this.openCalciteDropdown();
+        this.toggleDropdown();
     }
     pointerLeaveHandler() {
         if (this.disabled || this.type !== "hover") {
@@ -384,12 +389,6 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
             focusElement(this.triggers[0]);
         }
     }
-    getFocusableElement(item) {
-        if (!item) {
-            return;
-        }
-        focusElement(item);
-    }
     updateTabIndexOfItems(target) {
         this.items.forEach((item) => {
             item.tabIndex = target !== item ? -1 : 0;

package/dist/components/filter.js

@@ -737,7 +737,7 @@ function forIn(object, iteratee) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const filter = (data, value, filterProps) => {
     const escapedValue = escapeRegExp(value);

package/dist/components/filter2.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { f as filter } from './filter.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, 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 { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n.js';
@@ -18,7 +18,7 @@ import { d as debounce } from './debounce.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     container: "container",
@@ -43,8 +43,7 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class Filter extends HTMLElement
         //  Private Methods
         //
         // --------------------------------------------------------------------------
-        this.filterDebounced = debounce((value, emit = false, onFilter) => this.items.length &&
-            this.updateFiltered(filter(this.items, value, this.filterProps), emit, onFilter), DEBOUNCE.filter);
+        this.filterDebounced = debounce((value, emit = false, onFilter) => this.updateFiltered(filter(this.items ?? [], value, this.filterProps), emit, onFilter), DEBOUNCE.filter);
         this.inputHandler = (event) => {
             const target = event.target;
             this.value = target.value;
@@ -101,13 +100,10 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class Filter extends HTMLElement
     //--------------------------------------------------------------------------
     async componentWillLoad() {
         setUpLoadableComponent(this);
-        if (this.items.length) {
-            this.updateFiltered(filter(this.items, this.value, this.filterProps));
-        }
+        this.updateFiltered(filter(this.items ?? [], this.value, this.filterProps));
         await setUpMessages(this);
     }
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -115,7 +111,6 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class Filter extends HTMLElement
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
         this.filterDebounced.cancel();
@@ -161,7 +156,7 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class Filter extends HTMLElement
     // --------------------------------------------------------------------------
     render() {
         const { disabled, scale } = this;
-        return (h(InteractiveContainer, { key: 'da4ff667fdb02ae8b85c56cd717b416f3256145d', disabled: disabled }, h("div", { key: 'f4406a403101afa7c97da11f8408fa464aa8a08c', class: CSS.container }, h("label", { key: 'aace74138ebea71058044e05d4fe44cb7ee6beb2' }, h("calcite-input", { key: 'cc7dca3364cc73bf42a78d76155477af98d72552', clearable: true, disabled: disabled, icon: ICONS.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+        return (h(InteractiveContainer, { key: 'c4a624e52409ed90839b506f5d99ab623767260e', disabled: disabled }, h("div", { key: '1f2ef99156489719dd2f938bc5ce8a05185866bf', class: CSS.container }, h("label", { key: '6fe8c6cf73f554908be38299263d23380a4ed089' }, h("calcite-input", { key: '6765e00d208d6898221540769865d84aa1c64974', clearable: true, disabled: disabled, icon: ICONS.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
                 this.textInput = el;
             }, scale: scale, type: "text", value: this.value })))));
     }

package/dist/components/floating-ui.js

@@ -1177,6 +1177,9 @@ const size = function (options) {
   };
 };
 
+function hasWindow() {
+  return typeof window !== 'undefined';
+}
 function getNodeName(node) {
   if (isNode(node)) {
     return (node.nodeName || '').toLowerCase();
@@ -1195,17 +1198,25 @@ function getDocumentElement(node) {
   return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
 }
 function isNode(value) {
+  if (!hasWindow()) {
+    return false;
+  }
   return value instanceof Node || value instanceof getWindow(value).Node;
 }
 function isElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
   return value instanceof Element || value instanceof getWindow(value).Element;
 }
 function isHTMLElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
   return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
 }
 function isShadowRoot(value) {
-  // Browsers without `ShadowRoot` support.
-  if (typeof ShadowRoot === 'undefined') {
+  if (!hasWindow() || typeof ShadowRoot === 'undefined') {
     return false;
   }
   return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
@@ -1488,10 +1499,14 @@ function getClientRects(element) {
   return Array.from(element.getClientRects());
 }
 
-function getWindowScrollBarX(element) {
-  // If <html> has a CSS width greater than the viewport, then this will be
-  // incorrect for RTL.
-  return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
+// If <html> has a CSS width greater than the viewport, then this will be
+// incorrect for RTL.
+function getWindowScrollBarX(element, rect) {
+  const leftScroll = getNodeScroll(element).scrollLeft;
+  if (!rect) {
+    return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+  }
+  return rect.left + leftScroll;
 }
 
 // Gets the entire size of the scrollable document area, even extending outside
@@ -1675,11 +1690,22 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
       offsets.x = offsetRect.x + offsetParent.clientLeft;
       offsets.y = offsetRect.y + offsetParent.clientTop;
     } else if (documentElement) {
+      // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
+      // Firefox with layout.scrollbar.side = 3 in about:config to test this.
       offsets.x = getWindowScrollBarX(documentElement);
     }
   }
-  const x = rect.left + scroll.scrollLeft - offsets.x;
-  const y = rect.top + scroll.scrollTop - offsets.y;
+  let htmlX = 0;
+  let htmlY = 0;
+  if (documentElement && !isOffsetParentAnElement && !isFixed) {
+    const htmlRect = documentElement.getBoundingClientRect();
+    htmlY = htmlRect.top + scroll.scrollTop;
+    htmlX = htmlRect.left + scroll.scrollLeft -
+    // RTL <body> scrollbar.
+    getWindowScrollBarX(documentElement, htmlRect);
+  }
+  const x = rect.left + scroll.scrollLeft - offsets.x - htmlX;
+  const y = rect.top + scroll.scrollTop - offsets.y - htmlY;
   return {
     x,
     y,
@@ -1699,7 +1725,16 @@ function getTrueOffsetParent(element, polyfill) {
   if (polyfill) {
     return polyfill(element);
   }
-  return element.offsetParent;
+  let rawOffsetParent = element.offsetParent;
+
+  // Firefox returns the <html> element as the offsetParent if it's non-static,
+  // while Chrome and Safari return the <body> element. The <body> element must
+  // be used to perform the correct calculations even if the <html> element is
+  // non-static.
+  if (getDocumentElement(element) === rawOffsetParent) {
+    rawOffsetParent = rawOffsetParent.ownerDocument.body;
+  }
+  return rawOffsetParent;
 }
 
 // Gets the closest ancestor positioned element. Handles some edge cases,
@@ -2050,7 +2085,7 @@ function offsetParentPolyfill(element) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 (function setUpFloatingUiForShadowDomPositioning() {
     if (isBrowser()) {
@@ -2106,15 +2141,16 @@ async (component, { referenceEl, floatingEl, overlayPositioning = "absolute", pl
     if (!referenceEl || !floatingEl) {
         return null;
     }
+    const isRTL = getElementDir(floatingEl) === "rtl";
     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),
+            : getEffectivePlacement(placement, isRTL),
         middleware: getMiddleware({
             placement,
             flipDisabled,
-            flipPlacements: flipPlacements?.map((placement) => getEffectivePlacement(floatingEl, placement)),
+            flipPlacements: flipPlacements?.map((placement) => getEffectivePlacement(placement, isRTL)),
             offsetDistance,
             offsetSkidding,
             arrowEl,
@@ -2176,9 +2212,12 @@ const flipPlacements = [
     "trailing-end",
 ];
 const defaultMenuPlacement = "bottom-start";
+const defaultEndMenuPlacement = "bottom-end";
 const FloatingCSS = {
     animation: "calcite-floating-ui-anim",
     animationActive: "calcite-floating-ui-anim--active",
+    arrow: "calcite-floating-ui-arrow",
+    arrowStroke: "calcite-floating-ui-arrow__stroke",
 };
 function getMiddleware({ placement, flipDisabled, flipPlacements, offsetDistance, offsetSkidding, arrowEl, type, }) {
     const defaultMiddleware = [shift(), hide()];
@@ -2223,9 +2262,9 @@ function filterValidFlipPlacements(placements, el) {
     }
     return filteredPlacements;
 }
-function getEffectivePlacement(floatingEl, placement) {
+function getEffectivePlacement(placement, isRTL = false) {
     const placements = ["left", "right"];
-    if (getElementDir(floatingEl) === "rtl") {
+    if (isRTL) {
         placements.reverse();
     }
     return placement.replace(/leading/gi, placements[0]).replace(/trailing/gi, placements[1]);
@@ -2362,4 +2401,4 @@ const visiblePointerSize = 4;
  */
 const defaultOffsetDistance = Math.ceil(Math.hypot(visiblePointerSize, visiblePointerSize));
 
-export { FloatingCSS as F, disconnectFloatingUI as a, defaultMenuPlacement as b, connectFloatingUI as c, defaultOffsetDistance as d, filterValidFlipPlacements as f, reposition as r };
+export { FloatingCSS as F, disconnectFloatingUI as a, defaultEndMenuPlacement as b, connectFloatingUI as c, defaultOffsetDistance as d, defaultMenuPlacement as e, filterValidFlipPlacements as f, reposition as r };

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, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, 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,7 +20,7 @@ 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/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     backButton: "back-button",
@@ -124,7 +124,6 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -136,7 +135,6 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
     }
@@ -196,7 +194,7 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
     }
     render() {
         const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, overlayPositioning, beforeClose, } = this;
-        return (h(Host, { key: '166a2f53829cecc09019a7fa3fe670b5e4e42146' }, h(InteractiveContainer, { key: '53f00fb0e5ec53b8a19efde1592e1bff176302d1', disabled: disabled }, h("calcite-panel", { key: 'a24ff76af240b1403ebfa5810bc8fe0443901040', beforeClose: beforeClose, 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.handleInternalPanelClose, onCalcitePanelScroll: this.handleInternalPanelScroll, onCalcitePanelToggle: this.handleInternalPanelToggle, overlayPositioning: overlayPositioning, ref: this.setContainerRef, scale: this.scale }, this.renderBackButton(), h("slot", { key: '9051287e5b89eaca28b440816cbcddc03cefed73', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: '566fb396078d3eac17fbff69e0cd43fb5b8ca13e', name: SLOTS.alerts, slot: SLOTS$1.alerts }), h("slot", { key: '88ced257238e369cd99250c9d5a93fa03746fbd5', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: 'beab9f93af9deed383adc8250ec943b883e058b8', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: '1f1c7579d1ac1085004b08d2f57ec8b9e0641e35', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: '3696e4a7e80db48581f438336007a1b63a201040', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: '370e0817cbc13d7cf4c8adaccff8fe9d7c91c859', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: 'd55cc859cb1c9c6cc80a63521aad955f6e23d31c', name: SLOTS.contentTop, slot: SLOTS$1.contentTop }), h("slot", { key: '7cea1750cd59d1fdda66516c9b4c78884127dde5', name: SLOTS.contentBottom, slot: SLOTS$1.contentBottom }), h("slot", { key: 'd07ed2f97623023312cdb0a5a01b909286f34373', name: SLOTS.footerStart, slot: SLOTS$1.footerStart }), h("slot", { key: 'fdc209c1e77fd62cadaaad0ee576e71a1f0419d8', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: '5348d32cc42b7fa3b07e4b5ef711863f6ce812bc', name: SLOTS.footerEnd, slot: SLOTS$1.footerEnd }), h("slot", { key: 'bad7644787a3ad19ef40931fb38cfe9c18962b27', name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { key: '97675398537cc86f41a219126e17bcf24cf4682b' })))));
+        return (h(Host, { key: '2e7872bb2687db0b67ddbf375f8ec0beaabbda36' }, h(InteractiveContainer, { key: 'a9418954405a2cec2092bae3be5d77f02306e3c9', disabled: disabled }, h("calcite-panel", { key: 'd563c751421bf2d66c03286deaa613e09f585546', beforeClose: beforeClose, 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.handleInternalPanelClose, onCalcitePanelScroll: this.handleInternalPanelScroll, onCalcitePanelToggle: this.handleInternalPanelToggle, overlayPositioning: overlayPositioning, ref: this.setContainerRef, scale: this.scale }, this.renderBackButton(), h("slot", { key: 'c506ec8bb4debbd6a9da6c7941878de49776f614', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: 'e76e55e654ff878acff734bdf387402a9e262159', name: SLOTS.alerts, slot: SLOTS$1.alerts }), h("slot", { key: 'f7ab8839d7b101e31087130ebf3e36af1ec7da24', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: '2932c4c15b168732356b8e55fcc3064f5b3f4cf5', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: '1ef8a9050683022733695445092f8c626487d87b', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: '24c0ab570a601a6c0edfb0c820e580fd24b158ce', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: 'ec55bbe7ba939a6efb35225850c37a1aadb97275', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: 'aa0bfec47656ef9f7f575cd933897a7909e5badc', name: SLOTS.contentTop, slot: SLOTS$1.contentTop }), h("slot", { key: 'e23532d080e2df529c2aeb6af043c6efe7a0ab6d', name: SLOTS.contentBottom, slot: SLOTS$1.contentBottom }), h("slot", { key: 'db6ffc0d9300c77067a4c88ab277de685c7713af', name: SLOTS.footerStart, slot: SLOTS$1.footerStart }), h("slot", { key: '5f249356da9292f34c4036d0d0741f048fe999e9', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: '7476137bacc0f3be5c97682c5027f74d73254765', name: SLOTS.footerEnd, slot: SLOTS$1.footerEnd }), h("slot", { key: '58f60a46c42a05abe9b100a57d478d991e4f25bc', name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { key: '926a8d94b76b6fcdef6dfd219ba8180c44f81c35' })))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/flow.js

@@ -10,7 +10,7 @@ import { c as componentFocusable, s as setUpLoadableComponent, a as setComponent
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     frame: "frame",
@@ -141,7 +141,7 @@ const Flow = /*@__PURE__*/ proxyCustomElement(class Flow extends HTMLElement {
             [CSS.frameAdvancing]: flowDirection === "advancing",
             [CSS.frameRetreating]: flowDirection === "retreating",
         };
-        return (h("div", { key: '93590e2eec869cef65a59c01aa2c6001b431da9a', class: frameDirectionClasses }, h("slot", { key: '5b97e4147abb053391f170f5e36bac4670934072' })));
+        return (h("div", { key: '01fbee965d48cb54fa5bd1b53a3435538df84332', class: frameDirectionClasses }, h("slot", { key: '495880eceeb04387dd1352aa00337f037ab0636c' })));
     }
     get el() { return this; }
     static get style() { return CalciteFlowStyle0; }