@esri/solutions-components 0.7.1 → 0.7.2

package/dist/components/date-picker-month-header.js

@@ -9,12 +9,13 @@ import { c as closestElementCrossShadowBoundary } from './dom.js';
 import { i as isActivationKey } from './key.js';
 import { n as numberStringFormatter } from './locale2.js';
 import { H as Heading } from './Heading.js';
+import { g as getIconScale } from './component.js';
 import { d as defineCustomElement$1 } from './icon.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.
- * v1.9.0
+ * v1.11.0
  */
 const CSS = {
   header: "header",
@@ -134,16 +135,15 @@ const DatePickerMonthHeader = /*@__PURE__*/ proxyCustomElement(class DatePickerM
     const { months, unitOrder } = localeData;
     const localizedMonth = (months.wide || months.narrow || months.abbreviated)[activeMonth];
     const localizedYear = this.formatCalendarYear(activeDate.getFullYear());
-    const iconScale = this.scale === "l" ? "m" : "s";
     const order = getOrder(unitOrder);
     const reverse = order.indexOf("y") < order.indexOf("m");
     const suffix = (_a = localeData.year) === null || _a === void 0 ? void 0 : _a.suffix;
-    return (h(Fragment, null, h("a", { "aria-disabled": `${this.prevMonthDate.getMonth() === activeMonth}`, "aria-label": messages.prevMonth, class: CSS.chevron, href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronLeft, scale: iconScale })), h("div", { class: { text: true, [CSS.textReverse]: reverse } }, h(Heading, { class: CSS.month, level: this.headingLevel }, localizedMonth), h("span", { class: CSS.yearWrap }, h("input", { "aria-label": messages.year, class: {
+    return (h(Fragment, null, h("a", { "aria-disabled": `${this.prevMonthDate.getMonth() === activeMonth}`, "aria-label": messages.prevMonth, class: CSS.chevron, href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronLeft, scale: getIconScale(this.scale) })), h("div", { class: { text: true, [CSS.textReverse]: reverse } }, h(Heading, { class: CSS.month, level: this.headingLevel }, localizedMonth), h("span", { class: CSS.yearWrap }, h("input", { "aria-label": messages.year, class: {
         year: true,
         [CSS.yearSuffix]: !!suffix,
       }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", type: "text", value: localizedYear,
       // 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: (el) => (this.yearInput = el) }), suffix && h("span", { class: CSS.suffix }, suffix))), h("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": messages.nextMonth, class: CSS.chevron, href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronRight, scale: iconScale }))));
+      ref: (el) => (this.yearInput = el) }), suffix && h("span", { class: CSS.suffix }, suffix))), h("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": messages.nextMonth, class: CSS.chevron, href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronRight, scale: getIconScale(this.scale) }))));
   }
   setNextPrevMonthDates() {
     if (!this.activeDate) {

package/dist/components/date-picker-month.js

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as sameDate, b as dateFromRange, i as inRange } from './date.js';
 import { d as defineCustomElement$1 } from './date-picker-day.js';
 
-const datePickerMonthCss = ":host([hidden]){display:none}[hidden]{display:none}.calendar{margin-block-end:0.25rem}.week-headers{display:flex;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);padding-block:0px;padding-inline:0.25rem}.week-header{text-align:center;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-3);inline-size:14.2857142857%}.day{display:flex;min-inline-size:0px;justify-content:center;inline-size:14.2857142857%}:host([scale=s]) .week-header{padding-inline:0px;padding-block:0.5rem 0.75rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]) .week-header{padding-inline:0px;padding-block:0.75rem 1rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=l]) .week-header{padding-inline:0px;padding-block:1rem 1.25rem;font-size:var(--calcite-font-size--1);line-height:1rem}.week-days{display:flex;flex-direction:row;padding-block:0px;padding-inline:6px}.week-days:focus{outline:2px solid transparent;outline-offset:2px}";
+const datePickerMonthCss = ":host([hidden]){display:none}[hidden]{display:none}.calendar{margin-block-end:0.25rem}.week-headers{display:flex;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);padding-block:0px;padding-inline:0.25rem}.week-header{text-align:center;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-3);inline-size:14.2857142857%}.day{display:flex;min-inline-size:0px;justify-content:center;inline-size:14.2857142857%}.day calcite-date-picker-day{inline-size:100%}:host([scale=s]) .week-header{padding-inline:0px;padding-block:0.5rem 0.75rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]) .week-header{padding-inline:0px;padding-block:0.75rem 1rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=l]) .week-header{padding-inline:0px;padding-block:1rem 1.25rem;font-size:var(--calcite-font-size--1);line-height:1rem}.week-days{display:flex;flex-direction:row;padding-block:0px;padding-inline:6px}.week-days:focus{outline:2px solid transparent;outline-offset:2px}";
 
 const DAYS_PER_WEEK = 7;
 const DAYS_MAXIMUM_INDEX = 6;

package/dist/components/date-picker.js

@@ -16,7 +16,7 @@ import { d as defineCustomElement$1 } from './icon.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.
- * v1.9.0
+ * v1.11.0
  */
 const HEADING_LEVEL = 2;
 const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
@@ -24,7 +24,7 @@ const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 /**
  * CLDR cache.
@@ -72,7 +72,7 @@ function getValueAsDateRange(value) {
   return value.map((v, index) => dateFromISO(v, index === 1));
 }
 
-const datePickerCss = ":host{position:relative;display:inline-block;inline-size:100%;overflow:visible;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-1);background-color:var(--calcite-ui-foreground-1);vertical-align:top}:host([scale=s]){max-inline-size:216px}:host([scale=m]){max-inline-size:286px}:host([scale=l]){max-inline-size:398px}:host([hidden]){display:none}[hidden]{display:none}";
+const datePickerCss = ":host{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 *{box-sizing:border-box}:host{display:inline-block;inline-size:auto;overflow:visible;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-1);vertical-align:top}:host([scale=s]){inline-size:234px;min-inline-size:216px;max-inline-size:380px}:host([scale=m]){inline-size:304px;min-inline-size:272px;max-inline-size:480px}:host([scale=l]){inline-size:370px;min-inline-size:320px;max-inline-size:600px}:host([hidden]){display:none}[hidden]{display:none}";
 
 const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTMLElement {
   constructor() {

package/dist/components/date.js

@@ -8,7 +8,7 @@ import { n as numberStringFormatter } from './locale2.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.
- * v1.9.0
+ * v1.11.0
  */
 /**
  * Check if date is within a min and max

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/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 /**
  * The default `focus-trap/tabbable` options.
@@ -634,18 +634,16 @@ function getElementDir(el) {
   return closest ? closest.getAttribute(prop) : "ltr";
 }
 /**
- * This helper returns the value of an attribute on an element.
+ * This helper returns the computed width in pixels of a rendered HTMLElement.
  *
  * @param {HTMLElement} el An element.
- * @param {string} attribute An attribute name.
- * @param {any} fallbackValue A fallback value.
- * @returns {any} The value.
- * @deprecated
+ * @returns {number} The element's width.
  */
-function getElementProp(el, attribute, fallbackValue) {
-  const selector = `[${attribute}]`;
-  const closest = el.closest(selector);
-  return closest ? closest.getAttribute(attribute) : fallbackValue;
+function getElementWidth(el) {
+  if (!el) {
+    return 0;
+  }
+  return parseFloat(getComputedStyle(el).inlineSize);
 }
 /**
  * This helper returns the rootNode of an element.
@@ -666,6 +664,23 @@ function getShadowRootNode(el) {
   const rootNode = getRootNode(el);
   return "host" in rootNode ? rootNode : null;
 }
+/**
+ * This helper returns the computed width in pixels a given text string takes up on screen.
+ *
+ * See https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript
+ *
+ * @param {string} text The string of text to measure.
+ * @param {string} font The CSS font attribute's value, which should include size and face, e.g. "12px Arial".
+ */
+function getTextWidth(text, font) {
+  if (!text) {
+    return 0;
+  }
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  context.font = font;
+  return context.measureText(text).width;
+}
 /**
  * This helper returns the host of a ShadowRoot.
  *
@@ -1029,4 +1044,4 @@ function isBefore(a, b) {
   return children.indexOf(a) < children.indexOf(b);
 }
 
-export { ensureId as A, getShadowRootNode as B, getSlotted as a, intersects as b, closestElementCrossShadowBoundary as c, isBefore as d, containsCrossShadowBoundary as e, focusElement as f, getElementDir as g, slotChangeGetAssignedElements as h, isPrimaryPointerButton as i, slotChangeHasAssignedElement as j, focusFirstTabbable as k, tabbable as l, focusable as m, isTabbable as n, getTabIndex as o, isFocusable as p, queryElementRoots as q, tabbableOptions as r, setRequestedIcon as s, toAriaBoolean as t, getModeName as u, slotChangeHasContent as v, focusElementInGroup as w, nodeListToArray as x, filterDirectChildren as y, getElementProp as z };
+export { getTextWidth as A, ensureId as B, getShadowRootNode as C, getSlotted as a, intersects as b, closestElementCrossShadowBoundary as c, isBefore as d, containsCrossShadowBoundary as e, focusElement as f, getElementDir as g, slotChangeGetAssignedElements as h, isPrimaryPointerButton as i, slotChangeHasAssignedElement as j, focusFirstTabbable as k, tabbable as l, focusable as m, isTabbable as n, getTabIndex as o, isFocusable as p, queryElementRoots as q, tabbableOptions as r, setRequestedIcon as s, toAriaBoolean as t, getModeName as u, slotChangeHasContent as v, focusElementInGroup as w, nodeListToArray as x, filterDirectChildren as y, getElementWidth as z };

package/dist/components/dropdown-item.js

@@ -7,6 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { t as toAriaBoolean } from './dom.js';
 import { C as CSS } from './resources3.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
+import { g as getIconScale } from './component.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 const dropdownItemCss = ".container--s{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-inline-end:0.5rem;padding-inline-start:1.5rem}.container--m{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-inline-end:0.75rem;padding-inline-start:2rem}.container--l{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-inline-end:1rem;padding-inline-start:2.5rem}.container--s.container--none-selection{padding-inline-start:0.25rem}.container--s.container--none-selection .dropdown-link{padding-inline-start:0px}.container--m.container--none-selection{padding-inline-start:0.5rem}.container--m.container--none-selection .dropdown-link{padding-inline-start:0px}.container--l.container--none-selection{padding-inline-start:0.75rem}.container--l.container--none-selection .dropdown-link{padding-inline-start:0px}:host{position:relative;display:flex;flex-grow:1;align-items:center}.container{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;color:var(--calcite-ui-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);text-align:start}.dropdown-item-content{flex:1 1 auto;padding-block:0.125rem;padding-inline-end:auto;padding-inline-start:0.25rem}:host,.container--link a{outline-color:transparent}:host(:focus){outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.container--link{padding:0px}.container--link a{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;color:var(--calcite-ui-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.container--s .dropdown-link{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-inline-end:0.5rem;padding-inline-start:1.5rem}.container--m .dropdown-link{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-inline-end:0.75rem;padding-inline-start:2rem}.container--l .dropdown-link{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-inline-end:1rem;padding-inline-start:2.5rem}:host(:hover) .container,:host(:active) .container{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host(:hover) .container--link .dropdown-link,:host(:active) .container--link .dropdown-link{color:var(--calcite-ui-text-1)}:host(:focus) .container{color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host(:active) .container{background-color:var(--calcite-ui-foreground-3)}:host(:hover) .container:before,:host(:active) .container:before,:host(:focus) .container:before{opacity:1}:host([selected]) .container:not(.container--none-selection),:host([selected]) .container--link .dropdown-link{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([selected]) .container:not(.container--none-selection):before,:host([selected]) .container--link .dropdown-link:before{opacity:1;color:var(--calcite-ui-brand)}:host([selected]) .container:not(.container--none-selection) calcite-icon,:host([selected]) .container--link .dropdown-link calcite-icon{color:var(--calcite-ui-brand)}.container--multi-selection:before,.container--none-selection:before{display:none}.container--s:before{inset-inline-start:0.5rem}.container--m:before{inset-inline-start:0.75rem}.container--l:before{inset-inline-start:1rem}.dropdown-item-icon{position:absolute;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:scale(0.9)}.container--s .dropdown-item-icon{inset-inline-start:0.25rem}.container--m .dropdown-item-icon{inset-inline-start:0.5rem}.container--l .dropdown-item-icon{inset-inline-start:0.75rem}:host(:hover) .dropdown-item-icon{color:var(--calcite-ui-border-1);opacity:1}:host([selected]) .dropdown-item-icon{color:var(--calcite-ui-brand);opacity:1}.container--s .dropdown-item-icon-start{margin-inline-end:0.5rem;margin-inline-start:0.25rem}.container--s .dropdown-item-icon-end{margin-inline-start:0.5rem}.container--m .dropdown-item-icon-start{margin-inline-end:0.75rem;margin-inline-start:0.25rem}.container--m .dropdown-item-icon-end{margin-inline-start:0.75rem}.container--l .dropdown-item-icon-start{margin-inline-end:1rem;margin-inline-start:0.25rem}.container--l .dropdown-item-icon-end{margin-inline-start:1rem}:host([hidden]){display:none}[hidden]{display:none}";
@@ -59,9 +60,9 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
   }
   render() {
     const { href, selectionMode, label, iconFlipRtl, scale } = this;
-    const iconStartEl = (h("calcite-icon", { class: CSS.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: scale === "l" ? "m" : "s" }));
+    const iconStartEl = (h("calcite-icon", { class: CSS.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
     const contentNode = (h("span", { class: CSS.itemContent }, h("slot", null)));
-    const iconEndEl = (h("calcite-icon", { class: CSS.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: scale === "l" ? "m" : "s" }));
+    const iconEndEl = (h("calcite-icon", { 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
@@ -87,7 +88,7 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
         [CSS.containerMulti]: selectionMode === "multiple",
         [CSS.containerSingle]: selectionMode === "single",
         [CSS.containerNone]: selectionMode === "none",
-      } }, selectionMode !== "none" ? (h("calcite-icon", { class: CSS.icon, icon: selectionMode === "multiple" ? "check" : "bullet-point", scale: scale === "l" ? "m" : "s" })) : null, contentEl)));
+      } }, 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

@@ -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/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const SLOTS = {
   dropdownTrigger: "trigger",

package/dist/components/filter.js

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

package/dist/components/filter2.js

@@ -17,7 +17,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/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const CSS = {
   container: "container",
@@ -151,7 +151,7 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class Filter extends HTMLElement
   // --------------------------------------------------------------------------
   render() {
     const { disabled, scale } = this;
-    return (h(Fragment, null, h("div", { class: CSS.container }, h("label", null, h("calcite-input", { "aria-label": this.messages.label, clearable: true, disabled: disabled, icon: ICONS.search, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
+    return (h(Fragment, null, h("div", { class: CSS.container }, h("label", null, h("calcite-input", { 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, scale: scale, type: "text", value: this.value,
       // 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: (el) => {
         this.textInput = el;

package/dist/components/floating-ui.js

@@ -1621,7 +1621,7 @@ 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.
- * v1.9.0
+ * v1.11.0
  */
 (function setUpFloatingUiForShadowDomPositioning() {
   if (Build.isBrowser) {
@@ -1800,24 +1800,22 @@ function getEffectivePlacement(floatingEl, placement) {
  *
  * Note: this is not needed for components that use `calcite-popover`.
  *
- * @param component
- * @param options
- * @param options.referenceEl
- * @param options.floatingEl
- * @param options.overlayPositioning
- * @param options.placement
- * @param options.flipDisabled
- * @param options.flipPlacements
- * @param options.offsetDistance
- * @param options.offsetSkidding
- * @param options.arrowEl
- * @param options.type
- * @param delayed
+ * @param component - A floating-ui component.
+ * @param options - Reposition parameters.
+ * @param options.referenceEl - The `referenceElement` used to position the component according to its `placement` value.
+ * @param options.floatingEl - The `floatingElement` containing the floating ui.
+ * @param options.overlayPositioning - type of positioning to use for the overlaid content.
+ * @param options.placement - Determines where the component will be positioned relative to the `referenceElement`.
+ * @param options.flipDisabled - Prevents flipping the component's placement when overlapping its `referenceElement`.
+ * @param options.flipPlacements - Defines the available placements that can be used when a flip occurs.
+ * @param options.offsetDistance - Offsets the position of the popover away from the `referenceElement`.
+ * @param options.offsetSkidding - Offsets the position of the component along the `referenceElement`.
+ * @param options.arrowEl - A customizable arrow element.
+ * @param options.type - The type of floating UI.
+ * @param delayed - Reposition the component after a delay.
+ * @returns {Promise<void>}
  */
 async function reposition(component, options, delayed = false) {
-  if (!component.open) {
-    return;
-  }
   const positionFunction = delayed ? getDebouncedReposition(component) : positionFloatingUI;
   return positionFunction(component, options);
 }
@@ -1849,9 +1847,9 @@ const componentToDebouncedRepositionMap = new WeakMap();
 /**
  * Helper to set up floating element interactions on connectedCallback.
  *
- * @param component
- * @param referenceEl
- * @param floatingEl
+ * @param component - A floating-ui component.
+ * @param referenceEl - The `referenceElement` used to position the component according to its `placement` value.
+ * @param floatingEl - The `floatingElement` containing the floating ui.
  */
 function connectFloatingUI(component, referenceEl, floatingEl) {
   if (!floatingEl || !referenceEl) {
@@ -1879,9 +1877,9 @@ function connectFloatingUI(component, referenceEl, floatingEl) {
 /**
  * Helper to tear down floating element interactions on disconnectedCallback.
  *
- * @param component
- * @param referenceEl
- * @param floatingEl
+ * @param component - A floating-ui component.
+ * @param referenceEl - The `referenceElement` used to position the component according to its `placement` value.
+ * @param floatingEl - The `floatingElement` containing the floating ui.
  */
 function disconnectFloatingUI(component, referenceEl, floatingEl) {
   if (!floatingEl || !referenceEl) {

package/dist/components/focusTrapComponent.js

@@ -6,30 +6,30 @@
 import { l as tabbable, m as focusable, n as isTabbable, o as getTabIndex, p as isFocusable, f as focusElement, r as tabbableOptions } from './dom.js';
 
 /*!
-* focus-trap 7.5.2
+* focus-trap 7.5.4
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
   }
-  return keys;
+  return t;
 }
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-  return target;
+  return e;
 }
 function _defineProperty(obj, key, value) {
   key = _toPropertyKey(key);
@@ -406,11 +406,30 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.");
     }
   };
+
+  /**
+   * Gets the current activeElement. If it's a web-component and has open shadow-root
+   * it will recursively search inside shadow roots for the "true" activeElement.
+   *
+   * @param {Document | ShadowRoot} el
+   *
+   * @returns {HTMLElement} The element that currently has the focus
+   **/
+  var getActiveElement = function getActiveElement(el) {
+    var activeElement = el.activeElement;
+    if (!activeElement) {
+      return;
+    }
+    if (activeElement.shadowRoot && activeElement.shadowRoot.activeElement !== null) {
+      return getActiveElement(activeElement.shadowRoot);
+    }
+    return activeElement;
+  };
   var tryFocus = function tryFocus(node) {
     if (node === false) {
       return;
     }
-    if (node === doc.activeElement) {
+    if (node === getActiveElement(document)) {
       return;
     }
     if (!node || !node.focus) {
@@ -824,14 +843,14 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       state.active = true;
       state.paused = false;
       state.nodeFocusedBeforeActivation = doc.activeElement;
-      onActivate === null || onActivate === void 0 ? void 0 : onActivate();
+      onActivate === null || onActivate === void 0 || onActivate();
       var finishActivation = function finishActivation() {
         if (checkCanFocusTrap) {
           updateTabbableNodes();
         }
         addListeners();
         updateObservedNodes();
-        onPostActivate === null || onPostActivate === void 0 ? void 0 : onPostActivate();
+        onPostActivate === null || onPostActivate === void 0 || onPostActivate();
       };
       if (checkCanFocusTrap) {
         checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);
@@ -860,13 +879,13 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       var onPostDeactivate = getOption(options, 'onPostDeactivate');
       var checkCanReturnFocus = getOption(options, 'checkCanReturnFocus');
       var returnFocus = getOption(options, 'returnFocus', 'returnFocusOnDeactivate');
-      onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate();
+      onDeactivate === null || onDeactivate === void 0 || onDeactivate();
       var finishDeactivation = function finishDeactivation() {
         delay(function () {
           if (returnFocus) {
             tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
           }
-          onPostDeactivate === null || onPostDeactivate === void 0 ? void 0 : onPostDeactivate();
+          onPostDeactivate === null || onPostDeactivate === void 0 || onPostDeactivate();
         });
       };
       if (returnFocus && checkCanReturnFocus) {
@@ -883,10 +902,10 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       var onPause = getOption(pauseOptions, 'onPause');
       var onPostPause = getOption(pauseOptions, 'onPostPause');
       state.paused = true;
-      onPause === null || onPause === void 0 ? void 0 : onPause();
+      onPause === null || onPause === void 0 || onPause();
       removeListeners();
       updateObservedNodes();
-      onPostPause === null || onPostPause === void 0 ? void 0 : onPostPause();
+      onPostPause === null || onPostPause === void 0 || onPostPause();
       return this;
     },
     unpause: function unpause(unpauseOptions) {
@@ -896,11 +915,11 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       var onUnpause = getOption(unpauseOptions, 'onUnpause');
       var onPostUnpause = getOption(unpauseOptions, 'onPostUnpause');
       state.paused = false;
-      onUnpause === null || onUnpause === void 0 ? void 0 : onUnpause();
+      onUnpause === null || onUnpause === void 0 || onUnpause();
       updateTabbableNodes();
       addListeners();
       updateObservedNodes();
-      onPostUnpause === null || onPostUnpause === void 0 ? void 0 : onPostUnpause();
+      onPostUnpause === null || onPostUnpause === void 0 || onPostUnpause();
       return this;
     },
     updateContainerElements: function updateContainerElements(containerElements) {
@@ -924,7 +943,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 /**
  * This module allows custom configuration for components.
@@ -935,7 +954,7 @@ const focusTrapStack = customConfig?.focusTrapStack || [];
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 /**
  * Helper to set up the FocusTrap component.

package/dist/components/form.js

@@ -6,38 +6,10 @@
 import { q as queryElementRoots, c as closestElementCrossShadowBoundary } from './dom.js';
 import { h } from '@stencil/core/internal/client';
 
-(function(prototype) {
-  if (typeof prototype.requestSubmit == "function") return
-
-  prototype.requestSubmit = function(submitter) {
-    if (submitter) {
-      validateSubmitter(submitter, this);
-      submitter.click();
-    } else {
-      submitter = document.createElement("input");
-      submitter.type = "submit";
-      submitter.hidden = true;
-      this.appendChild(submitter);
-      submitter.click();
-      this.removeChild(submitter);
-    }
-  };
-
-  function validateSubmitter(submitter, form) {
-    submitter instanceof HTMLElement || raise(TypeError, "parameter 1 is not of type 'HTMLElement'");
-    submitter.type == "submit" || raise(TypeError, "The specified element is not a submit button");
-    submitter.form == form || raise(DOMException, "The specified element is not owned by this form element", "NotFoundError");
-  }
-
-  function raise(errorConstructor, message, name) {
-    throw new errorConstructor("Failed to execute 'requestSubmit' on 'HTMLFormElement': " + message + ".", name)
-  }
-})(HTMLFormElement.prototype);
-
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 /**
  * Exported for testing purposes.

package/dist/components/globalAttributes.js

@@ -8,7 +8,7 @@ import { c as createObserver } from './observers.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.
- * v1.9.0
+ * v1.11.0
  */
 const allowedGlobalAttributes = ["lang", "role", "aria-expanded"];
 const elementToComponentAndObserverOptionsMap = new Map();

package/dist/components/graph.js

@@ -10,7 +10,7 @@ import { c as createObserver } from './observers.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.
- * v1.9.0
+ * v1.11.0
  */
 /**
  * Calculate slope of the tangents

package/dist/components/guid.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 function gen(counts) {
   return counts

package/dist/components/handle.js

@@ -13,7 +13,7 @@ import { d as defineCustomElement$1 } from './icon.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.
- * v1.9.0
+ * v1.11.0
  */
 const CSS = {
   handle: "handle",

package/dist/components/icon.js

@@ -10,7 +10,7 @@ import { c as createObserver } from './observers.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.
- * v1.9.0
+ * v1.11.0
  */
 const CSS = {
   icon: "icon",
@@ -20,7 +20,7 @@ const CSS = {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 /**
  * Icon data cache.
@@ -90,7 +90,7 @@ function normalizeIconName(name) {
   return numberLeadingName ? `i${name}` : name;
 }
 
-const iconCss = ":host{display:inline-flex;color:var(--calcite-ui-icon-color)}:host([scale=s]){block-size:1rem;inline-size:1rem;min-inline-size:1rem;min-block-size:1rem}:host([scale=m]){block-size:1.5rem;inline-size:1.5rem;min-inline-size:1.5rem;min-block-size:1.5rem}:host([scale=l]){block-size:2rem;inline-size:2rem;min-inline-size:2rem;min-block-size:2rem}.flip-rtl{transform:scaleX(-1)}.svg{display:block}:host([hidden]){display:none}[hidden]{display:none}";
+const iconCss = ":host{display:inline-flex;color:var(--calcite-ui-icon-color)}:host([scale=s]){inline-size:16px;block-size:16px;min-inline-size:16px;min-block-size:16px}:host([scale=m]){inline-size:24px;block-size:24px;min-inline-size:24px;min-block-size:24px}:host([scale=l]){inline-size:32px;block-size:32px;min-inline-size:32px;min-block-size:32px}.flip-rtl{transform:scaleX(-1)}.svg{display:block}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
   constructor() {
@@ -144,7 +144,12 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
     if (!Build.isBrowser || !icon || !visible) {
       return;
     }
-    this.pathData = await fetchIcon({ icon, scale });
+    const pathData = await fetchIcon({ icon, scale });
+    // While the fetchIcon method is awaiting response, the icon requested can change. This check is to verify the response received belongs to the current icon.
+    if (icon !== this.icon) {
+      return;
+    }
+    this.pathData = pathData;
   }
   waitUntilVisible(callback) {
     this.intersectionObserver = createObserver("intersection", (entries) => {

package/dist/components/index.js

@@ -9,7 +9,7 @@ export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stenc
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 /**
  * Emits when the mode is dynamically toggled between light and dark on <body> or in OS preferences.
@@ -40,7 +40,7 @@ function initModeChangeEvent() {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 /**
  * This file is imported in Stencil's `globalScript` config option.