@esri/solutions-components 0.7.34 → 0.7.35

package/dist/components/calcite-input-time-zone.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as connectLabel, d as disconnectLabel } from './label.js';
-import { u as updateHostInteraction } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { b as getDateTimeFormat, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
@@ -18,121 +18,121 @@ import { d as defineCustomElement$2 } 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.
- * v2.0.0
+ * v2.4.0
  */
 const hourToMinutes = 60;
 const timeZoneNameBlockList = [
-  "CET",
-  "CST6CDT",
-  "EET",
-  "EST",
-  "EST5EDT",
-  "Factory",
-  "HST",
-  "MET",
-  "MST",
-  "MST7MDT",
-  "PST8PDT",
-  "UTC",
-  "WET",
+    "CET",
+    "CST6CDT",
+    "EET",
+    "EST",
+    "EST5EDT",
+    "Factory",
+    "HST",
+    "MET",
+    "MST",
+    "MST7MDT",
+    "PST8PDT",
+    "UTC",
+    "WET",
 ];
 function timeZoneOffsetToDecimal(shortOffsetTimeZoneName) {
-  const minusSign = "−";
-  const hyphen = "-";
-  return (shortOffsetTimeZoneName
-    .replace(":15", ".25")
-    .replace(":30", ".5")
-    .replace(":45", ".75")
-    // ensures decimal string representation is parseable
-    .replace(minusSign, hyphen));
+    const minusSign = "−";
+    const hyphen = "-";
+    return (shortOffsetTimeZoneName
+        .replace(":15", ".25")
+        .replace(":30", ".5")
+        .replace(":45", ".75")
+        // ensures decimal string representation is parseable
+        .replace(minusSign, hyphen));
 }
 function toOffsetValue(timeZoneName, referenceDateInMs) {
-  // we use "en-US" to allow us to reliably remove the standard time token
-  const offset = getTimeZoneShortOffset(timeZoneName, "en-US", referenceDateInMs).replace("GMT", "");
-  if (offset === "") {
-    return 0;
-  }
-  return Number(timeZoneOffsetToDecimal(offset)) * hourToMinutes;
+    // we use "en-US" to allow us to reliably remove the standard time token
+    const offset = getTimeZoneShortOffset(timeZoneName, "en-US", referenceDateInMs).replace("GMT", "");
+    if (offset === "") {
+        return 0;
+    }
+    return Number(timeZoneOffsetToDecimal(offset)) * hourToMinutes;
 }
 function getUserTimeZoneOffset() {
-  const localDate = new Date();
-  return localDate.getTimezoneOffset() * -1;
+    const localDate = new Date();
+    return localDate.getTimezoneOffset() * -1;
 }
 function getUserTimeZoneName() {
-  const dateFormatter = new Intl.DateTimeFormat();
-  return dateFormatter.resolvedOptions().timeZone;
+    const dateFormatter = new Intl.DateTimeFormat();
+    return dateFormatter.resolvedOptions().timeZone;
 }
 /**
  * The lazy-loaded timezone-groups lib to be used across instances.
  */
 let timeZoneGroups;
 async function createTimeZoneItems(locale, messages, mode, referenceDate) {
-  const referenceDateInMs = referenceDate.getTime();
-  const timeZoneNames = Intl.supportedValuesOf("timeZone");
-  if (mode === "offset") {
-    if (!timeZoneGroups) {
-      timeZoneGroups = Promise.all([
-        import('./index5.js'),
-        import('./index6.js'),
-      ]);
-    }
-    return timeZoneGroups.then(async ([{ groupTimeZones }, { DateEngine }]) => {
-      const timeZoneGroups = await groupTimeZones({
-        dateEngine: new DateEngine(),
-        groupDateRange: 1,
-        startDate: new Date(referenceDateInMs).toISOString(),
-      });
-      const listFormatter = new Intl.ListFormat(locale, { style: "long", type: "conjunction" });
-      // we remove blocked entries from tzs and adjust label indices accordingly
-      timeZoneGroups.forEach((group) => {
-        const indexOffsets = [];
-        let removedSoFar = 0;
-        group.tzs.forEach((tz, index) => {
-          if (timeZoneNameBlockList.includes(tz)) {
-            removedSoFar++;
-          }
-          indexOffsets[index] = removedSoFar;
-        });
-        group.tzs = group.tzs.filter((tz) => !timeZoneNameBlockList.includes(tz));
-        group.labelTzIndices = group.labelTzIndices
-          .map((index) => index - indexOffsets[index])
-          .filter((index) => index >= 0 && index < group.tzs.length);
-      });
-      return timeZoneGroups
-        .map(({ labelTzIndices, tzs }) => {
-        const groupRepTz = tzs[0];
-        const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(groupRepTz, locale, referenceDateInMs));
-        const value = toOffsetValue(groupRepTz, referenceDateInMs);
-        const tzLabels = labelTzIndices.map((index) => {
-          const timeZone = tzs[index];
-          const timeZoneLabel = messages[timeZone];
-          return (timeZoneLabel ||
-            // get city token
-            timeZone.split("/").pop());
+    const referenceDateInMs = referenceDate.getTime();
+    const timeZoneNames = Intl.supportedValuesOf("timeZone");
+    if (mode === "offset") {
+        if (!timeZoneGroups) {
+            timeZoneGroups = Promise.all([
+                import('./index5.js'),
+                import('./index6.js'),
+            ]);
+        }
+        return timeZoneGroups.then(async ([{ groupTimeZones }, { DateEngine }]) => {
+            const timeZoneGroups = await groupTimeZones({
+                dateEngine: new DateEngine(),
+                groupDateRange: 1,
+                startDate: new Date(referenceDateInMs).toISOString(),
+            });
+            const listFormatter = new Intl.ListFormat(locale, { style: "long", type: "conjunction" });
+            // we remove blocked entries from tzs and adjust label indices accordingly
+            timeZoneGroups.forEach((group) => {
+                const indexOffsets = [];
+                let removedSoFar = 0;
+                group.tzs.forEach((tz, index) => {
+                    if (timeZoneNameBlockList.includes(tz)) {
+                        removedSoFar++;
+                    }
+                    indexOffsets[index] = removedSoFar;
+                });
+                group.tzs = group.tzs.filter((tz) => !timeZoneNameBlockList.includes(tz));
+                group.labelTzIndices = group.labelTzIndices
+                    .map((index) => index - indexOffsets[index])
+                    .filter((index) => index >= 0 && index < group.tzs.length);
+            });
+            return timeZoneGroups
+                .map(({ labelTzIndices, tzs }) => {
+                const groupRepTz = tzs[0];
+                const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(groupRepTz, locale, referenceDateInMs));
+                const value = toOffsetValue(groupRepTz, referenceDateInMs);
+                const tzLabels = labelTzIndices.map((index) => {
+                    const timeZone = tzs[index];
+                    const timeZoneLabel = messages[timeZone];
+                    return (timeZoneLabel ||
+                        // get city token
+                        timeZone.split("/").pop());
+                });
+                const label = createTimeZoneOffsetLabel(messages, decimalOffset, listFormatter.format(tzLabels));
+                return {
+                    label,
+                    value,
+                    filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
+                };
+            })
+                .filter((group) => !!group)
+                .sort((groupA, groupB) => groupA.value - groupB.value);
         });
-        const label = createTimeZoneOffsetLabel(messages, decimalOffset, listFormatter.format(tzLabels));
+    }
+    return timeZoneNames
+        .map((timeZone) => {
+        const label = toUserFriendlyName(timeZone);
+        const value = timeZone;
         return {
-          label,
-          value,
-          filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
+            label,
+            value,
+            filterValue: timeZone,
         };
-      })
+    })
         .filter((group) => !!group)
-        .sort((groupA, groupB) => groupA.value - groupB.value);
-    });
-  }
-  return timeZoneNames
-    .map((timeZone) => {
-    const label = toUserFriendlyName(timeZone);
-    const value = timeZone;
-    return {
-      label,
-      value,
-      filterValue: timeZone,
-    };
-  })
-    .filter((group) => !!group)
-    .sort();
+        .sort();
 }
 /**
  * Exported for testing purposes only
@@ -140,18 +140,18 @@ async function createTimeZoneItems(locale, messages, mode, referenceDate) {
  * @internal
  */
 function toUserFriendlyName(timeZoneName) {
-  return timeZoneName.replace(/_/g, " ");
+    return timeZoneName.replace(/_/g, " ");
 }
 function createTimeZoneOffsetLabel(messages, offsetLabel, groupLabel) {
-  return messages.timeZoneLabel.replace("{offset}", offsetLabel).replace("{cities}", groupLabel);
+    return messages.timeZoneLabel.replace("{offset}", offsetLabel).replace("{cities}", groupLabel);
 }
 function getTimeZoneShortOffset(timeZone, locale, referenceDateInMs = Date.now()) {
-  const dateTimeFormat = getDateTimeFormat(locale, { timeZone, timeZoneName: "shortOffset" });
-  const parts = dateTimeFormat.formatToParts(referenceDateInMs);
-  return parts.find(({ type }) => type === "timeZoneName").value;
+    const dateTimeFormat = getDateTimeFormat(locale, { timeZone, timeZoneName: "shortOffset" });
+    const parts = dateTimeFormat.formatToParts(referenceDateInMs);
+    return parts.find(({ type }) => type === "timeZoneName").value;
 }
 
-const inputTimeZoneCss = ":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{display:block}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
+const inputTimeZoneCss = ":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{display:block}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone extends HTMLElement {
     constructor() {
@@ -202,6 +202,8 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         this.messages = undefined;
         this.messageOverrides = undefined;
         this.mode = "offset";
+        this.validationMessage = undefined;
+        this.validationIcon = undefined;
         this.name = undefined;
         this.open = false;
         this.overlayPositioning = "absolute";
@@ -304,13 +306,13 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         updateHostInteraction(this);
     }
     render() {
-        return (h(Host, null, h("calcite-combobox", { clearDisabled: true, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, maxItems: this.maxItems, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, scale: this.scale, selectionMode: "single-persist", status: this.status,
+        return (h(Host, null, h(InteractiveContainer, { disabled: this.disabled }, h("calcite-combobox", { clearDisabled: true, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, maxItems: this.maxItems, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, scale: this.scale, selectionMode: "single-persist", status: this.status, "validation-icon": this.validationIcon, "validation-message": this.validationMessage,
             // 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.setComboboxRef }, this.timeZoneItems.map((group) => {
             const selected = this.selectedTimeZoneItem === group;
             const { label, value } = group;
             return (h("calcite-combobox-item", { "data-value": value, key: label, selected: selected, textLabel: label, value: `${group.filterValue}` }));
-        })), h(HiddenFormInputSlot, { component: this })));
+        })), h(HiddenFormInputSlot, { component: this }))));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
@@ -331,6 +333,8 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         "messages": [1040],
         "messageOverrides": [1040],
         "mode": [513],
+        "validationMessage": [1, "validation-message"],
+        "validationIcon": [520, "validation-icon"],
         "name": [513],
         "open": [1540],
         "overlayPositioning": [513, "overlay-positioning"],

package/dist/components/calcite-list-item-group.js

@@ -4,20 +4,20 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
-import { a as getDepth, M as MAX_COLUMNS } from './utils3.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
+import { b as getDepth, M as MAX_COLUMNS } from './utils3.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 = {
-  container: "container",
-  heading: "heading",
+    container: "container",
+    heading: "heading",
 };
 
-const listItemGroupCss = ":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{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1);--calcite-list-item-spacing-indent:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{margin:0px;display:flex;flex:1 1 0%;background-color:var(--calcite-color-foreground-2);padding:0.75rem;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2)}.heading{padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}::slotted(calcite-list-item){--tw-shadow:0 -1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 -1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:1px}::slotted(calcite-list-item:nth-child(1 of :not([hidden]))){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:0px}:host([hidden]){display:none}[hidden]{display:none}";
+const listItemGroupCss = ":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{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1);--calcite-list-item-spacing-indent:1rem}:host([filter-hidden]){display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{margin:0px;display:flex;flex:1 1 0%;background-color:var(--calcite-color-foreground-2);padding:0.75rem;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2)}.heading{padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}::slotted(calcite-list-item){--tw-shadow:0 -1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 -1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:1px}::slotted(calcite-list-item:nth-child(1 of :not([hidden]))){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:0px}:host([hidden]){display:none}[hidden]{display:none}";
 
 const ListItemGroup = /*@__PURE__*/ proxyCustomElement(class ListItemGroup extends HTMLElement {
     constructor() {
@@ -34,6 +34,7 @@ const ListItemGroup = /*@__PURE__*/ proxyCustomElement(class ListItemGroup exten
             this.calciteInternalListItemGroupDefaultSlotChange.emit();
         };
         this.disabled = false;
+        this.filterHidden = false;
         this.heading = undefined;
         this.visualLevel = null;
     }
@@ -59,13 +60,14 @@ const ListItemGroup = /*@__PURE__*/ proxyCustomElement(class ListItemGroup exten
     //
     // --------------------------------------------------------------------------
     render() {
-        const { heading, visualLevel } = this;
-        return (h(Host, null, h("tr", { class: CSS.container, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, h("td", { class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", { onSlotchange: this.handleDefaultSlotChange })));
+        const { disabled, heading, visualLevel } = this;
+        return (h(Host, null, h(InteractiveContainer, { disabled: disabled }, h("tr", { class: CSS.container, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, h("td", { class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
     }
     get el() { return this; }
     static get style() { return listItemGroupCss; }
 }, [1, "calcite-list-item-group", {
         "disabled": [516],
+        "filterHidden": [516, "filter-hidden"],
         "heading": [513],
         "visualLevel": [32]
     }]);

package/dist/components/calcite-menu-item.js

@@ -17,26 +17,26 @@ import { d as defineCustomElement$2 } from './menu.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 = {
-  container: "container",
-  content: "content",
-  dropdownVertical: "dropdown--vertical",
-  dropdownMenuItems: "dropdown-menu-items",
-  dropdownAction: "dropdown-action",
-  layoutVertical: "layout--vertical",
-  hoverHrefIcon: "hover-href-icon",
-  icon: "icon",
-  iconBreadcrumb: "icon--breadcrumb",
-  iconDropdown: "icon--dropdown",
-  iconEnd: "icon--end",
-  iconStart: "icon--start",
-  isParentVertical: "parent--vertical",
-  itemContent: "item-content",
-  open: "open",
-  nested: "nested",
-  textContainer: "text-container",
+    container: "container",
+    content: "content",
+    dropdownVertical: "dropdown--vertical",
+    dropdownMenuItems: "dropdown-menu-items",
+    dropdownAction: "dropdown-action",
+    layoutVertical: "layout--vertical",
+    hoverHrefIcon: "hover-href-icon",
+    icon: "icon",
+    iconBreadcrumb: "icon--breadcrumb",
+    iconDropdown: "icon--dropdown",
+    iconEnd: "icon--end",
+    iconStart: "icon--start",
+    isParentVertical: "parent--vertical",
+    itemContent: "item-content",
+    open: "open",
+    nested: "nested",
+    textContainer: "text-container",
 };
 
 const menuItemCss = ":host{position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:3rem}:host([layout=vertical]){inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);padding-inline:1rem;font-size:var(--calcite-font-size-0);color:var(--calcite-color-text-2);outline:2px solid transparent;outline-offset:2px;text-decoration:none;border-block-end:0.125rem solid transparent;padding-block-start:0.125rem}.content:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-2)}.content:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-2);outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.content:active{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:1rem;border-block-end:0;border-inline-end:0.25rem solid transparent}:host([active]) .content{color:var(--calcite-color-text-1);border-color:var(--calcite-color-brand)}:host([active]) .content .icon{--calcite-ui-icon-color:var(--calcite-color-brand)}:host([layout=vertical]) .content{padding-inline:0.75rem}.icon--start{margin-inline-end:0.75rem}.icon--end{margin-inline-start:0.75rem}:host([layout=vertical]) .icon--end{margin-inline-start:auto;padding-inline-start:0.75rem}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-color-text-3)}:host([layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:0.75rem}:host([layout=vertical]) .hover-href-icon{padding-inline-start:0.5rem}:host([layout=vertical]) .hover-href-icon~.icon--end{margin-inline-start:0.5rem}:host([layout=vertical]) .hover-href-icon~.icon--breadcrumb{margin-inline-start:0.75rem}.icon--breadcrumb{margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-color-text-3)}:host([layout=vertical]) .icon--breadcrumb{margin-inline-start:auto}:host([layout=vertical]) .icon--breadcrumb~.icon--dropdown{margin-inline-start:0.5rem}:host([layout=vertical]) .icon--end~.icon--breadcrumb{margin-inline-start:0.5rem}:host([breadcrumb]) .content{padding-inline-end:0.75rem}calcite-action{position:relative;block-size:auto;border-inline-start:1px solid var(--calcite-color-foreground-1)}calcite-action:after{position:absolute;inset-inline-start:-1px;display:block;inline-size:1px;content:\"\";inset-block:0.75rem;background-color:var(--calcite-color-border-3)}calcite-action:hover:after{block-size:100%;inset-block:0}.content:focus~calcite-action,.content:hover~calcite-action{color:var(--calcite-color-text-1);border-inline-start:1px solid var(--calcite-color-border-3)}.container:hover .dropdown-action{background-color:var(--calcite-color-foreground-2)}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;border:1px solid var(--calcite-color-border-3);background:var(--calcite-color-foreground-1);inset-block-start:100%;z-index:var(--calcite-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translateX(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;border-radius:0px;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([layout=vertical]:last-of-type) .dropdown-menu-items{border-block-end:0}:host([slot=submenu-item]) .parent--vertical{padding-inline-start:1.5rem}.dropdown-menu-items.nested.calcite--rtl{transform:translateX(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:0.25rem;margin-inline-start:auto;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-0.25rem;opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
@@ -64,59 +64,58 @@ const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class CalciteMenuItem
             this.hasSubmenu = this.submenuItems.length > 0;
         };
         this.keyDownHandler = async (event) => {
-            // opening and closing of submenu is handled here. Any other functionality is bubbled to parent menu.
-            if (event.key === " " || event.key === "Enter") {
-                this.selectMenuItem(event);
-                if (this.hasSubmenu &&
-                    (!this.href || (this.href && event.target === this.dropdownActionEl))) {
-                    this.open = !this.open;
+            const { hasSubmenu, href, layout, open, submenuItems } = this;
+            const key = event.key;
+            const targetIsDropdown = event.target === this.dropdownActionEl;
+            if (key === " " || key === "Enter") {
+                if (hasSubmenu && (!href || (href && targetIsDropdown))) {
+                    this.open = !open;
+                }
+                if (!(href && targetIsDropdown) && key !== "Enter") {
+                    this.selectMenuItem(event);
+                }
+                if (key === " " || (href && targetIsDropdown)) {
+                    event.preventDefault();
                 }
-                event.preventDefault();
             }
-            else if (event.key === "Escape") {
-                if (this.open) {
+            else if (key === "Escape") {
+                if (open) {
                     this.open = false;
                     return;
                 }
                 this.calciteInternalMenuItemKeyEvent.emit({ event });
                 event.preventDefault();
             }
-            else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            else if (key === "ArrowDown" || key === "ArrowUp") {
                 event.preventDefault();
-                if ((event.target === this.dropdownActionEl || !this.href) &&
-                    this.hasSubmenu &&
-                    !this.open &&
-                    this.layout === "horizontal") {
+                if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === "horizontal") {
                     this.open = true;
                     return;
                 }
                 this.calciteInternalMenuItemKeyEvent.emit({
                     event,
-                    children: this.submenuItems,
-                    isSubmenuOpen: this.open && this.hasSubmenu,
+                    children: submenuItems,
+                    isSubmenuOpen: open && hasSubmenu,
                 });
             }
-            else if (event.key === "ArrowLeft") {
+            else if (key === "ArrowLeft") {
                 event.preventDefault();
                 this.calciteInternalMenuItemKeyEvent.emit({
                     event,
-                    children: this.submenuItems,
+                    children: submenuItems,
                     isSubmenuOpen: true,
                 });
             }
-            else if (event.key === "ArrowRight") {
+            else if (key === "ArrowRight") {
                 event.preventDefault();
-                if ((event.target === this.dropdownActionEl || !this.href) &&
-                    this.hasSubmenu &&
-                    !this.open &&
-                    this.layout === "vertical") {
+                if ((targetIsDropdown || !href) && hasSubmenu && !open && layout === "vertical") {
                     this.open = true;
                     return;
                 }
                 this.calciteInternalMenuItemKeyEvent.emit({
                     event,
-                    children: this.submenuItems,
-                    isSubmenuOpen: this.open && this.hasSubmenu,
+                    children: submenuItems,
+                    isSubmenuOpen: open && hasSubmenu,
                 });
             }
         };

package/dist/components/calcite-meter.js

@@ -13,25 +13,25 @@ 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.
- * v2.0.0
+ * v2.4.0
  */
 const CSS = {
-  container: "container",
-  fill: "fill",
-  stepLine: "step-line",
-  label: "label",
-  labelHidden: "label-hidden",
-  labelRange: "label-range",
-  labelValue: "label-value",
-  unitLabel: "unit-label",
-  stepsVisible: "steps-visible",
-  valueVisible: "value-visible",
-  success: "fill-success",
-  warning: "fill-warning",
-  danger: "fill-danger",
+    container: "container",
+    fill: "fill",
+    stepLine: "step-line",
+    label: "label",
+    labelHidden: "label-hidden",
+    labelRange: "label-range",
+    labelValue: "label-value",
+    unitLabel: "unit-label",
+    stepsVisible: "steps-visible",
+    valueVisible: "value-visible",
+    success: "fill-success",
+    warning: "fill-warning",
+    danger: "fill-danger",
 };
 
-const meterCss = ":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([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host{display:flex;--calcite-meter-space-internal:0.125rem;--calcite-meter-height-internal:1rem;--calcite-meter-font-size-internal:var(--calcite-font-size--1)}:host([scale=s]){--calcite-meter-height-internal:0.75rem;--calcite-meter-font-size-internal:var(--calcite-font-size--2)}:host([scale=l]){--calcite-meter-height-internal:1.5rem;--calcite-meter-font-size-internal:var(--calcite-font-size-0)}.container{position:relative;margin:0px;display:flex;inline-size:100%;align-items:center;block-size:var(--calcite-meter-height-internal);background-color:var(--calcite-color-foreground-2);border:1px solid var(--calcite-color-border-3);border-radius:var(--calcite-meter-height-internal)}.solid{border:1px solid var(--calcite-color-foreground-3);background-color:var(--calcite-color-foreground-3)}.outline{background-color:transparent}.value-visible{margin-block-start:1.5rem}.steps-visible{margin-block-end:1.5rem}.step-line{position:absolute;inset-block:0px;display:block;inline-size:var(--calcite-meter-space-internal);background-color:var(--calcite-color-border-3)}.label{position:absolute;font-size:var(--calcite-meter-font-size-internal)}.label-hidden{visibility:hidden;opacity:0}.label-value{inset-block-end:calc(100% + 0.5em);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1)}.label-range{color:var(--calcite-color-text-3);inset-block-start:calc(100% + 0.5em)}.unit-label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3)}.label-value .unit-label{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2)}.fill{position:absolute;z-index:var(--calcite-z-index);display:block;background-color:var(--calcite-color-brand);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-inline-start:var(--calcite-meter-space-internal);inset-block:var(--calcite-meter-space-internal);border-radius:var(--calcite-meter-height-internal);max-inline-size:calc(100% - var(--calcite-meter-space-internal) * 2);min-inline-size:calc(var(--calcite-meter-height-internal) - var(--calcite-meter-space-internal) * 2);transition-property:inline-size, background-color, box-shadow}.fill-danger{background-color:var(--calcite-color-status-danger)}.fill-success{background-color:var(--calcite-color-status-success)}.fill-warning{background-color:var(--calcite-color-status-warning)}.solid .fill{inset-block:0;inset-inline-start:0;max-inline-size:100%;min-inline-size:calc(var(--calcite-meter-height-internal));box-shadow:0 0 0 1px var(--calcite-color-brand)}.solid .fill-danger{box-shadow:0 0 0 1px var(--calcite-color-status-danger)}.solid .fill-success{box-shadow:0 0 0 1px var(--calcite-color-status-success)}.solid .fill-warning{box-shadow:0 0 0 1px var(--calcite-color-status-warning)}";
+const meterCss = ":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([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host{display:flex;--calcite-meter-space-internal:0.125rem;--calcite-meter-height-internal:1rem;--calcite-meter-font-size-internal:var(--calcite-font-size--1)}:host([scale=s]){--calcite-meter-height-internal:0.75rem;--calcite-meter-font-size-internal:var(--calcite-font-size--2)}:host([scale=l]){--calcite-meter-height-internal:1.5rem;--calcite-meter-font-size-internal:var(--calcite-font-size-0)}.container{position:relative;margin:0px;display:flex;inline-size:100%;align-items:center;block-size:var(--calcite-meter-height-internal);background-color:var(--calcite-color-foreground-2);border:1px solid var(--calcite-color-border-3);border-radius:var(--calcite-meter-height-internal)}.solid{border:1px solid var(--calcite-color-foreground-3);background-color:var(--calcite-color-foreground-3)}.outline{background-color:transparent}.value-visible{margin-block-start:1.5rem}.steps-visible{margin-block-end:1.5rem}.step-line{position:absolute;inset-block:0px;display:block;inline-size:var(--calcite-meter-space-internal);background-color:var(--calcite-color-border-3)}.label{position:absolute;font-size:var(--calcite-meter-font-size-internal)}.label-hidden{visibility:hidden;opacity:0}.label-value{inset-block-end:calc(100% + 0.5em);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1)}.label-range{color:var(--calcite-color-text-3);inset-block-start:calc(100% + 0.5em)}.unit-label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3)}.label-value .unit-label{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2)}.fill{position:absolute;z-index:var(--calcite-z-index);display:block;background-color:var(--calcite-color-brand);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-inline-start:var(--calcite-meter-space-internal);inset-block:var(--calcite-meter-space-internal);border-radius:var(--calcite-meter-height-internal);max-inline-size:calc(100% - var(--calcite-meter-space-internal) * 2);min-inline-size:calc(var(--calcite-meter-height-internal) - var(--calcite-meter-space-internal) * 2);transition-property:inline-size, background-color, box-shadow}.fill-danger{background-color:var(--calcite-color-status-danger)}.fill-success{background-color:var(--calcite-color-status-success)}.fill-warning{background-color:var(--calcite-color-status-warning)}.solid .fill{inset-block:0;inset-inline-start:0;max-inline-size:100%;min-inline-size:calc(var(--calcite-meter-height-internal));box-shadow:0 0 0 1px var(--calcite-color-brand)}.solid .fill-danger{box-shadow:0 0 0 1px var(--calcite-color-status-danger)}.solid .fill-success{box-shadow:0 0 0 1px var(--calcite-color-status-success)}.solid .fill-warning{box-shadow:0 0 0 1px var(--calcite-color-status-warning)}";
 
 const Meter = /*@__PURE__*/ proxyCustomElement(class Meter extends HTMLElement {
     constructor() {

package/dist/components/calcite-navigation-logo.js

@@ -10,16 +10,16 @@ import { d as defineCustomElement$2 } 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.
- * v2.0.0
+ * v2.4.0
  */
 const CSS = {
-  container: "container",
-  heading: "heading",
-  description: "description",
-  anchor: "anchor",
-  image: "image",
-  standalone: "standalone",
-  icon: "icon",
+    container: "container",
+    heading: "heading",
+    description: "description",
+    anchor: "anchor",
+    image: "image",
+    standalone: "standalone",
+    icon: "icon",
 };
 
 const navigationLogoCss = ":host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}.anchor{margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;-webkit-text-decoration-line:none;text-decoration-line:none;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}.anchor:hover,.anchor:focus{background-color:var(--calcite-color-foreground-2)}.anchor:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.anchor:active{background-color:var(--calcite-color-foreground-3)}.image,.icon{margin:0px;display:flex;block-size:1.75rem;padding-inline:1rem}.image~.icon{padding-inline-start:0px}.image~.container,.icon~.container{padding-inline-start:0px}:host(:active) .anchor{color:var(--calcite-color-text-1)}:host([active]) .anchor{color:var(--calcite-color-text-1);border-color:var(--calcite-color-brand);--calcite-ui-icon-color:var(--calcite-color-brand)}.container{margin-block-start:0.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:1rem;text-align:start}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.standalone{font-size:var(--calcite-font-size-1)}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}";

package/dist/components/calcite-navigation-user.js

@@ -11,13 +11,13 @@ import { d as defineCustomElement$2 } 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.
- * v2.0.0
+ * v2.4.0
  */
 const CSS = {
-  textContainer: "text-container",
-  fullName: "full-name",
-  username: "username",
-  button: "button",
+    textContainer: "text-container",
+    fullName: "full-name",
+    username: "username",
+    button: "button",
 };
 
 const navigationUserCss = ":host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{background-color:transparent;border:none;margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size-0);line-height:1.25rem;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}:host(:hover) .button,:host(:focus) .button{background-color:var(--calcite-color-foreground-2)}:host(:focus) .button{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:active) .button{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}calcite-avatar{padding-inline:1rem}calcite-avatar~.text-container{padding-inline-start:0px}:host([active]) .button{border-color:var(--calcite-color-brand);color:var(--calcite-color-text-1);--calcite-ui-icon-color:var(--calcite-color-brand)}.text-container{margin-block-start:0.125rem;display:flex;flex-direction:column;padding-inline:1rem;text-align:start}.full-name{margin-inline-start:0px;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.username{color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}";