@esri/solutions-components 0.8.6-6.3 → 0.8.6

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

@@ -18,7 +18,7 @@ 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.8.2
+ * v2.4.0
  */
 const hourToMinutes = 60;
 const timeZoneNameBlockList = [
@@ -150,16 +150,8 @@ function getTimeZoneShortOffset(timeZone, locale, referenceDateInMs = Date.now()
     const parts = dateTimeFormat.formatToParts(referenceDateInMs);
     return parts.find(({ type }) => type === "timeZoneName").value;
 }
-function findTimeZoneItemByProp(timeZoneItems, prop, valueToMatch) {
-    return valueToMatch == null
-        ? null
-        : timeZoneItems.find((item) => 
-        // intentional == to match string to number
-        item[prop] == valueToMatch);
-}
 
 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 CalciteInputTimeZoneStyle0 = inputTimeZoneCss;
 
 const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone extends HTMLElement {
     constructor() {
@@ -185,16 +177,9 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         this.onComboboxChange = (event) => {
             event.stopPropagation();
             const combobox = event.target;
-            const selectedItem = combobox.selectedItems[0];
-            if (!selectedItem) {
-                this.value = null;
-                this.selectedTimeZoneItem = null;
-                this.calciteInputTimeZoneChange.emit();
-                return;
-            }
-            const selected = this.findTimeZoneItemByLabel(selectedItem.textLabel);
+            const selected = this.findTimeZoneItem(combobox.selectedItems[0].getAttribute("data-value"));
             const selectedValue = `${selected.value}`;
-            if (this.value === selectedValue && selected.label === this.selectedTimeZoneItem.label) {
+            if (this.value === selectedValue) {
                 return;
             }
             this.value = selectedValue;
@@ -211,7 +196,6 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
             event.stopPropagation();
             this.calciteInputTimeZoneOpen.emit();
         };
-        this.clearable = false;
         this.disabled = false;
         this.form = undefined;
         this.maxItems = 0;
@@ -220,19 +204,6 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         this.mode = "offset";
         this.validationMessage = undefined;
         this.validationIcon = undefined;
-        this.validity = {
-            valid: false,
-            badInput: false,
-            customError: false,
-            patternMismatch: false,
-            rangeOverflow: false,
-            rangeUnderflow: false,
-            stepMismatch: false,
-            tooLong: false,
-            tooShort: false,
-            typeMismatch: false,
-            valueMissing: false,
-        };
         this.name = undefined;
         this.open = false;
         this.overlayPositioning = "absolute";
@@ -241,7 +212,6 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         this.scale = "m";
         this.status = "idle";
         this.value = undefined;
-        this.readOnly = false;
         this.defaultMessages = undefined;
         this.effectiveLocale = "";
     }
@@ -252,12 +222,6 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         this.updateTimeZoneItemsAndSelection();
     }
     handleValueChange(value, oldValue) {
-        value = this.normalizeValue(value);
-        if (!value && this.clearable) {
-            this.value = value;
-            this.selectedTimeZoneItem = null;
-            return;
-        }
         const timeZoneItem = this.findTimeZoneItem(value);
         if (!timeZoneItem) {
             this.value = oldValue;
@@ -286,22 +250,20 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         this.setFocus();
     }
     findTimeZoneItem(value) {
-        return findTimeZoneItemByProp(this.timeZoneItems, "value", value);
-    }
-    findTimeZoneItemByLabel(label) {
-        return findTimeZoneItemByProp(this.timeZoneItems, "label", label);
+        const valueToMatch = value;
+        return this.timeZoneItems.find(({ value }) => 
+        // intentional == to match string to number
+        value == valueToMatch);
     }
     async updateTimeZoneItemsAndSelection() {
         var _a;
         this.timeZoneItems = await this.createTimeZoneItems();
-        if (this.value === "" && this.clearable) {
-            this.selectedTimeZoneItem = null;
-            return;
-        }
         const fallbackValue = this.mode === "offset" ? getUserTimeZoneOffset() : getUserTimeZoneName();
         const valueToMatch = (_a = this.value) !== null && _a !== void 0 ? _a : fallbackValue;
-        this.selectedTimeZoneItem =
-            this.findTimeZoneItem(valueToMatch) || this.findTimeZoneItem(fallbackValue);
+        this.selectedTimeZoneItem = this.findTimeZoneItem(valueToMatch);
+        if (!this.selectedTimeZoneItem) {
+            this.selectedTimeZoneItem = this.findTimeZoneItem(fallbackValue);
+        }
     }
     async createTimeZoneItems() {
         var _a;
@@ -329,15 +291,11 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         disconnectLocalized(this);
         disconnectMessages(this);
     }
-    normalizeValue(value) {
-        return value === null ? "" : value;
-    }
     async componentWillLoad() {
         setUpLoadableComponent(this);
         await setUpMessages(this);
-        this.value = this.normalizeValue(this.value);
         await this.updateTimeZoneItemsAndSelection();
-        const selectedValue = this.selectedTimeZoneItem ? `${this.selectedTimeZoneItem.value}` : null;
+        const selectedValue = `${this.selectedTimeZoneItem.value}`;
         afterConnectDefaultValueSet(this, selectedValue);
         this.value = selectedValue;
     }
@@ -348,13 +306,13 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         updateHostInteraction(this);
     }
     render() {
-        return (h(Host, { key: '80390d6f555967845c57683286d3bc7a467e986d' }, h(InteractiveContainer, { key: 'b2d3bcc8f1ca941fb73bb503e36e06eed541ea48', disabled: this.disabled }, h("calcite-combobox", { key: '14c3f7559338973e2eb08c528a236d05ec4c489c', clearDisabled: !this.clearable, 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, placeholder: this.mode === "name" ? this.messages.namePlaceholder : this.messages.offsetPlaceholder, readOnly: this.readOnly, scale: this.scale, selectionMode: this.clearable ? "single" : "single-persist", status: this.status, "validation-icon": this.validationIcon, "validation-message": this.validationMessage,
+        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, { key: '9be196de8ecde0e10e293cd49b778ce52e75a131', component: this }))));
+        })), h(HiddenFormInputSlot, { component: this }))));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
@@ -367,9 +325,8 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         "value": ["handleValueChange"],
         "effectiveLocale": ["effectiveLocaleWatcher"]
     }; }
-    static get style() { return CalciteInputTimeZoneStyle0; }
+    static get style() { return inputTimeZoneCss; }
 }, [17, "calcite-input-time-zone", {
-        "clearable": [516],
         "disabled": [516],
         "form": [513],
         "maxItems": [514, "max-items"],
@@ -378,7 +335,6 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         "mode": [513],
         "validationMessage": [1, "validation-message"],
         "validationIcon": [520, "validation-icon"],
-        "validity": [1040],
         "name": [513],
         "open": [1540],
         "overlayPositioning": [513, "overlay-positioning"],
@@ -387,7 +343,6 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         "scale": [513],
         "status": [513],
         "value": [1025],
-        "readOnly": [516, "read-only"],
         "defaultMessages": [32],
         "effectiveLocale": [32],
         "setFocus": [64]

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

@@ -5,20 +5,19 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
-import { M as MAX_COLUMNS } from './resources4.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.8.2
+ * v2.4.0
  */
 const CSS = {
     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)}: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%;padding:0.75rem;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2)}.heading{padding:0px}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteListItemGroupStyle0 = listItemGroupCss;
+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() {
@@ -37,6 +36,7 @@ const ListItemGroup = /*@__PURE__*/ proxyCustomElement(class ListItemGroup exten
         this.disabled = false;
         this.filterHidden = false;
         this.heading = undefined;
+        this.visualLevel = null;
     }
     // --------------------------------------------------------------------------
     //
@@ -44,6 +44,8 @@ const ListItemGroup = /*@__PURE__*/ proxyCustomElement(class ListItemGroup exten
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
+        const { el } = this;
+        this.visualLevel = getDepth(el, true);
         connectInteractive(this);
     }
     componentDidRender() {
@@ -58,15 +60,16 @@ const ListItemGroup = /*@__PURE__*/ proxyCustomElement(class ListItemGroup exten
     //
     // --------------------------------------------------------------------------
     render() {
-        const { disabled, heading } = this;
-        return (h(Host, { key: 'aced6e7f4e0f88658a55973c6451bd3ade9a1095' }, h(InteractiveContainer, { key: '6a7e77734cc737dfc7779c38f958e23ad19da06a', disabled: disabled }, h("tr", { key: '702a28ae4b478501503ab647fc46c33f25c1e8f7', class: CSS.container }, h("td", { key: '24f50d9130578bbac482ad2dce2777c962f19cc2', class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", { key: '67ff643701086e093115a93eca5cdb3e1c6559d5', 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 CalciteListItemGroupStyle0; }
+    static get style() { return listItemGroupCss; }
 }, [1, "calcite-list-item-group", {
         "disabled": [516],
         "filterHidden": [516, "filter-hidden"],
-        "heading": [513]
+        "heading": [513],
+        "visualLevel": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -17,7 +17,7 @@ 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.8.2
+ * v2.4.0
  */
 const CSS = {
     container: "container",
@@ -39,8 +39,7 @@ const CSS = {
     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-ui-focus-color, 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}";
-const CalciteMenuItemStyle0 = menuItemCss;
+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}";
 
 const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class CalciteMenuItem extends HTMLElement {
     constructor() {
@@ -68,9 +67,6 @@ const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class CalciteMenuItem
             const { hasSubmenu, href, layout, open, submenuItems } = this;
             const key = event.key;
             const targetIsDropdown = event.target === this.dropdownActionEl;
-            if (event.defaultPrevented) {
-                return;
-            }
             if (key === " " || key === "Enter") {
                 if (hasSubmenu && (!href || (href && targetIsDropdown))) {
                     this.open = !open;
@@ -269,10 +265,10 @@ const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class CalciteMenuItem
     }
     render() {
         const dir = getElementDir(this.el);
-        return (h(Host, { key: 'a84ca1769bc08137a7defbea5e10ee12a78fbd58', onBlur: this.blurHandler, onFocus: this.focusHandler }, h("li", { key: '88d13dda176ed2821b59505a6866b98b88f47f9b', class: {
+        return (h(Host, { onBlur: this.blurHandler, onFocus: this.focusHandler }, h("li", { class: {
                 [CSS.container]: true,
                 [CSS.isParentVertical]: this.topLevelMenuLayout === "vertical",
-            }, role: "none" }, h("div", { key: '185265194184e457cfc1d578bee3b8c5e02d45b3', class: CSS.itemContent }, h("a", { key: '456bbee5f9af53b51951c57b355b0696fa76fff7', "aria-current": this.isFocused ? "page" : false, "aria-expanded": this.open, "aria-haspopup": this.hasSubmenu, "aria-label": this.label, class: { [CSS.layoutVertical]: this.layout === "vertical", [CSS.content]: true }, href: this.href, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, rel: this.rel, role: "menuitem", tabIndex: this.isTopLevelItem ? 0 : -1, target: this.target,
+            }, role: "none" }, h("div", { class: CSS.itemContent }, h("a", { "aria-current": this.isFocused ? "page" : false, "aria-expanded": this.open, "aria-haspopup": this.hasSubmenu, "aria-label": this.label, class: { [CSS.layoutVertical]: this.layout === "vertical", [CSS.content]: true }, href: this.href, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, rel: this.rel, role: "menuitem", tabIndex: this.isTopLevelItem ? 0 : -1, target: this.target,
             // 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.anchorEl = el) }, this.renderItemContent(dir)), this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null), this.renderSubmenuItems(dir))));
     }
@@ -282,7 +278,7 @@ const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class CalciteMenuItem
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return CalciteMenuItemStyle0; }
+    static get style() { return menuItemCss; }
 }, [1, "calcite-menu-item", {
         "active": [516],
         "breadcrumb": [516],

package/dist/components/calcite-meter.js

@@ -13,7 +13,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.
- * v2.8.2
+ * v2.4.0
  */
 const CSS = {
     container: "container",
@@ -32,7 +32,6 @@ const CSS = {
 };
 
 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 CalciteMeterStyle0 = meterCss;
 
 const Meter = /*@__PURE__*/ proxyCustomElement(class Meter extends HTMLElement {
     constructor() {
@@ -304,7 +303,7 @@ const Meter = /*@__PURE__*/ proxyCustomElement(class Meter extends HTMLElement {
             : unitLabel
                 ? textUnitLabel
                 : undefined;
-        return (h(Host, { key: '4d680b8b390c26c00418c1947db18379e9499319' }, h("div", { key: 'd1cc9301427c9ec89a606f269119b8f7cceb9970', "aria-label": label, "aria-valuemax": rangeLabelType === "percent" ? maxPercent : max, "aria-valuemin": rangeLabelType === "percent" ? minPercent : min, "aria-valuenow": valueLabelType === "percent" ? currentPercent : value, "aria-valuetext": valueText, class: {
+        return (h(Host, null, h("div", { "aria-label": label, "aria-valuemax": rangeLabelType === "percent" ? maxPercent : max, "aria-valuemin": rangeLabelType === "percent" ? minPercent : min, "aria-valuenow": valueLabelType === "percent" ? currentPercent : value, "aria-valuetext": valueText, class: {
                 [CSS.container]: true,
                 [CSS.stepsVisible]: rangeLabels,
                 [CSS.valueVisible]: valueLabel,
@@ -326,7 +325,7 @@ const Meter = /*@__PURE__*/ proxyCustomElement(class Meter extends HTMLElement {
         "valueLabel": ["handleLabelChange"],
         "valueLabelType": ["handleLabelChange"]
     }; }
-    static get style() { return CalciteMeterStyle0; }
+    static get style() { return meterCss; }
 }, [1, "calcite-meter", {
         "appearance": [513],
         "disabled": [516],

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

@@ -5,13 +5,12 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
-import { H as Heading } from './Heading.js';
 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.8.2
+ * v2.4.0
  */
 const CSS = {
     container: "container",
@@ -23,8 +22,7 @@ const CSS = {
     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;text-decoration-line:none;outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:inherit;border-block-end:2px solid transparent}.anchor:hover,.anchor:focus{background-color:var(--calcite-color-foreground-2)}.anchor:focus{outline:2px solid var(--calcite-ui-focus-color, 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}";
-const CalciteNavigationLogoStyle0 = navigationLogoCss;
+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}";
 
 const CalciteNavigationLogo$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNavigationLogo extends HTMLElement {
     constructor() {
@@ -41,7 +39,6 @@ const CalciteNavigationLogo$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNa
         this.target = undefined;
         this.heading = undefined;
         this.thumbnail = undefined;
-        this.headingLevel = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -75,22 +72,16 @@ const CalciteNavigationLogo$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNa
         /** Icon scale is not variable as the component does not have a scale property */
         return h("calcite-icon", { class: CSS.icon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "l" });
     }
-    renderHeaderContent() {
-        const { heading, headingLevel, description } = this;
-        const headingNode = heading ? (h(Heading, { class: {
+    render() {
+        const { heading, description, thumbnail } = this;
+        return (h(Host, null, h("a", { class: CSS.anchor, href: this.href, rel: this.rel, target: this.target }, thumbnail && h("img", { alt: this.label || "", class: CSS.image, src: thumbnail }), this.icon && this.renderIcon(), (heading || description) && (h("div", { class: CSS.container }, heading && (h("span", { "aria-label": this.heading, class: {
                 [CSS.heading]: true,
                 [CSS.standalone]: !this.description,
-            }, key: CSS.heading, level: headingLevel }, heading)) : null;
-        const descriptionNode = description ? (h("span", { class: CSS.description, key: CSS.description }, description)) : null;
-        return headingNode || descriptionNode ? (h("div", { class: CSS.container, key: CSS.container }, headingNode, descriptionNode)) : null;
-    }
-    render() {
-        const { thumbnail } = this;
-        return (h(Host, { key: 'cd8a1c95e9c72a494942c09285db6ce4e554e6a1' }, h("a", { key: 'bcb1a269e0d6cde0969de9d822f1f98e689f826a', class: CSS.anchor, href: this.href, rel: this.rel, target: this.target }, thumbnail && h("img", { key: 'c028ae89a0e3ae62e90280e3646894e9ee70458b', alt: this.label || "", class: CSS.image, src: thumbnail }), this.icon && this.renderIcon(), this.renderHeaderContent())));
+            }, key: CSS.heading }, heading)), description && (h("span", { "aria-label": this.description, class: CSS.description, key: CSS.description }, description)))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
-    static get style() { return CalciteNavigationLogoStyle0; }
+    static get style() { return navigationLogoCss; }
 }, [17, "calcite-navigation-logo", {
         "active": [516],
         "href": [513],
@@ -102,7 +93,6 @@ const CalciteNavigationLogo$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNa
         "target": [513],
         "heading": [1],
         "thumbnail": [1],
-        "headingLevel": [514, "heading-level"],
         "setFocus": [64]
     }]);
 function defineCustomElement$1() {

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

@@ -3,7 +3,104 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { C as CalciteNavigationUser$1, d as defineCustomElement$1 } from './navigation-user.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
+import { d as defineCustomElement$3 } from './avatar.js';
+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.4.0
+ */
+const CSS = {
+    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}";
+
+const CalciteNavigationUser$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNavigationUser extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.active = undefined;
+        this.fullName = undefined;
+        this.label = undefined;
+        this.textDisabled = false;
+        this.thumbnail = undefined;
+        this.userId = undefined;
+        this.username = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        await componentFocusable(this);
+        this.el.focus();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    componentWillLoad() {
+        setUpLoadableComponent(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    render() {
+        return (h(Host, null, h("button", { "aria-label": this.label, class: CSS.button }, h("calcite-avatar", { "full-name": this.fullName, label: this.label, thumbnail: this.thumbnail, "user-id": this.userId, username: this.username }), (this.fullName || this.username) && !this.textDisabled && (h("div", { class: CSS.textContainer }, this.fullName && (h("span", { class: CSS.fullName, key: CSS.fullName }, this.fullName)), this.username && (h("span", { class: CSS.username, key: CSS.username }, this.username)))))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return this; }
+    static get style() { return navigationUserCss; }
+}, [17, "calcite-navigation-user", {
+        "active": [516],
+        "fullName": [1, "full-name"],
+        "label": [1],
+        "textDisabled": [516, "text-disabled"],
+        "thumbnail": [1],
+        "userId": [1, "user-id"],
+        "username": [1],
+        "setFocus": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["calcite-navigation-user", "calcite-avatar", "calcite-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "calcite-navigation-user":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CalciteNavigationUser$1);
+            }
+            break;
+        case "calcite-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const CalciteNavigationUser = CalciteNavigationUser$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/calcite-navigation.js

@@ -13,7 +13,7 @@ import { d as defineCustomElement$2 } from './loader.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.8.2
+ * v2.4.0
  */
 const CSS = {
     container: "container",
@@ -40,7 +40,6 @@ const ICONS = {
 };
 
 const navigationCss = ":host([hidden]){display:none}[hidden]{display:none}.container{display:flex;inline-size:100%;flex-direction:column;margin-block:0;margin-inline:auto;background-color:var(--calcite-navigation-background, var(--calcite-color-foreground-1))}.container.primary,.container.secondary,.container.tertiary{border-block-end:1px solid;border-block-end-color:var(--calcite-navigation-border-color, var(--calcite-color-border-3))}.user,.logo{display:flex}.hide{display:none}.primary{block-size:4rem}.secondary{block-size:3rem}.tertiary{block-size:3rem}.container-content{margin-inline:auto;display:flex;block-size:100%;inline-size:100%;margin-block:0;inline-size:var(--calcite-navigation-width, 100%);max-inline-size:100%}.container-content.progress-bar{margin-block-start:0.125rem}slot[name]{display:flex;flex-direction:row}slot[name=navigation-secondary]::slotted(calcite-navigation),slot[name=navigation-tertiary]::slotted(calcite-navigation){inline-size:100%}slot[name=content-start]::slotted(*),slot[name=content-center]::slotted(*),slot[name=content-end]::slotted(*){display:flex;flex-direction:row;align-items:center}slot[name=progress],slot[name=progress] calcite-progress{inset-block-start:0;inset-inline:0}slot[name=content-end]{margin-inline-start:auto}slot[name=content-start]{margin-inline-end:auto}slot[name=content-end],slot[name=logo]~slot[name=user],slot[name=user]:only-child{margin-inline-start:auto}slot[name=content-center]{margin-inline-start:auto;margin-inline-end:auto}slot[name=content-start]~slot[name=content-center]{margin-inline-start:0px}slot[name=content-start]~slot[name=content-end],slot[name=content-center]~slot[name=content-end],slot[name=content-center]~slot[name=user],slot[name=content-end]~slot[name=user]{margin:0px}";
-const CalciteNavigationStyle0 = navigationCss;
 
 const CalciteNavigation$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNavigation extends HTMLElement {
     constructor() {
@@ -156,15 +155,15 @@ const CalciteNavigation$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNaviga
             this.primaryContentStartSlotHasElements ||
             this.navigationAction;
         const slotName = this.el.slot;
-        return (h(Host, { key: '8bbdbb63ced5dbf54b0e2f7d21327780ec02c461' }, h("div", { key: '30f9b294f2d7589b879ebf6444c7d50291544395', class: {
+        return (h(Host, null, h("div", { class: {
                 [CSS.container]: true,
                 [CSS.secondary]: slotName === SLOTS.navSecondary,
                 [CSS.tertiary]: slotName === SLOTS.navTertiary,
                 [CSS.primary]: primaryLevelHasElements,
-            } }, h("div", { key: 'b5e645212bd0eb7fe7188fedf8a9a97022012698', class: { [CSS.hide]: !this.progressSlotHasElement, [SLOTS.progress]: true } }, h("slot", { key: '138fe1bcec98a49c9d2a70ab13c057f2e5f14b7c', name: SLOTS.progress, onSlotchange: this.handleProgressSlotChange })), h("div", { key: 'ef62d2575a2620b8530a4fc2e1df97adce0fabd7', class: { [CSS.containerContent]: true, [CSS.hasProgress]: this.progressSlotHasElement } }, this.renderMenuAction(), h("div", { key: 'c775762b072e199be013daa9821fcb9833ac08b8', class: { [CSS.hide]: !this.logoSlotHasElements, [SLOTS.logo]: true } }, h("slot", { key: '6925a8a345685c3bb90d5e994454c24bac80611a', name: SLOTS.logo, onSlotchange: this.handleLogoSlotChange })), h("slot", { key: '0121dc1a80006070b325c19e73a80f0374301392', name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange }), h("slot", { key: '3257e07e02c5aa5ae517306069eed4ca8abf3b8f', name: SLOTS.contentCenter, onSlotchange: this.handleContentCenterSlotChange }), h("slot", { key: '23f105f826d3fe35f9270b552927bbf89aa7dbbd', name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange }), h("div", { key: '469ad09b41f4cbdc09473065fa5fcf8638a82c1d', class: { [CSS.hide]: !this.userSlotHasElements, [SLOTS.user]: true } }, h("slot", { key: '78bb1fe16546fa871887991ab1916fb32ebf8186', name: SLOTS.user, onSlotchange: this.handleUserSlotChange })))), h(Fragment, { key: '28d6c126b06c4c4a52c425e90772c5f151468014' }, h("slot", { key: '913e9cce3188cc23d87eb0471f5d91cbdb3788b8', name: SLOTS.navSecondary, onSlotchange: this.handleSecondarySlotChange }), h("slot", { key: 'ff4d86c572567ca4993b6091185fc9d48ecb1ab0', name: SLOTS.navTertiary, onSlotchange: this.handleTertiarySlotChange }))));
+            } }, h("div", { class: { [CSS.hide]: !this.progressSlotHasElement, [SLOTS.progress]: true } }, h("slot", { name: SLOTS.progress, onSlotchange: this.handleProgressSlotChange })), h("div", { class: { [CSS.containerContent]: true, [CSS.hasProgress]: this.progressSlotHasElement } }, this.renderMenuAction(), h("div", { class: { [CSS.hide]: !this.logoSlotHasElements, [SLOTS.logo]: true } }, h("slot", { name: SLOTS.logo, onSlotchange: this.handleLogoSlotChange })), h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange }), h("slot", { name: SLOTS.contentCenter, onSlotchange: this.handleContentCenterSlotChange }), h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange }), h("div", { class: { [CSS.hide]: !this.userSlotHasElements, [SLOTS.user]: true } }, h("slot", { name: SLOTS.user, onSlotchange: this.handleUserSlotChange })))), h(Fragment, null, h("slot", { name: SLOTS.navSecondary, onSlotchange: this.handleSecondarySlotChange }), h("slot", { name: SLOTS.navTertiary, onSlotchange: this.handleTertiarySlotChange }))));
     }
     get el() { return this; }
-    static get style() { return CalciteNavigationStyle0; }
+    static get style() { return navigationCss; }
 }, [1, "calcite-navigation", {
         "label": [1],
         "navigationAction": [516, "navigation-action"],

package/dist/components/calcite-option-group.js

@@ -6,7 +6,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 
 const optionGroupCss = ":host{display:block}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteOptionGroupStyle0 = optionGroupCss;
 
 const OptionGroup = /*@__PURE__*/ proxyCustomElement(class OptionGroup extends HTMLElement {
     constructor() {
@@ -26,13 +25,13 @@ const OptionGroup = /*@__PURE__*/ proxyCustomElement(class OptionGroup extends H
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Fragment, { key: '52990dfd78732b297a9693682994eac13de0ea6c' }, h("div", { key: 'f8907d01f123eb1f3df0055cafc6bba8d6067080' }, this.label), h("slot", { key: '393f15738c365072299d1b60be1408a5e86a95f3' })));
+        return (h(Fragment, null, h("div", null, this.label), h("slot", null)));
     }
     static get watchers() { return {
         "disabled": ["handlePropChange"],
         "label": ["handlePropChange"]
     }; }
-    static get style() { return CalciteOptionGroupStyle0; }
+    static get style() { return optionGroupCss; }
 }, [1, "calcite-option-group", {
         "disabled": [516],
         "label": [1]