@esri/solutions-components 0.8.12 → 0.8.13

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

@@ -12,7 +12,7 @@ import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './la
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { n as numberStringFormatter, g as getSupportedLocale, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap } from './focusTrapComponent.js';
-import { l as localizeTimeString, t as toISOTimeString, i as isValidTime, f as formatTimeString, a as formatTimePart, d as defineCustomElement$2 } from './time-picker.js';
+import { d as defineCustomElement$2, l as localizeTimeString, t as toISOTimeString, i as isValidTime, f as formatTimeString, a as formatTimePart } from './time-picker.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { d as decimalPlaces } from './math.js';
@@ -25,15 +25,6 @@ import { d as defineCustomElement$5 } from './loader.js';
 import { d as defineCustomElement$4 } from './popover.js';
 import { d as defineCustomElement$3 } from './progress.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 = {
-    toggleIcon: "toggle-icon",
-};
-
 var SECONDS_A_MINUTE = 60;
 var SECONDS_A_HOUR = SECONDS_A_MINUTE * 60;
 var SECONDS_A_DAY = SECONDS_A_HOUR * 24;
@@ -74,8 +65,8 @@ const en = {
 };
 
 const en$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    'default': en
+  __proto__: null,
+  'default': en
 });
 
 var padStart = function padStart(string, length, pad) {
@@ -1197,7 +1188,17 @@ const updateLocale = (function (option, Dayjs, dayjs) {
   };
 });
 
-const inputTimePickerCss = ":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:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select: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}:host([scale=s]){--calcite-toggle-spacing:0.5rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}:host([scale=m]){--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}:host([scale=l]){--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}:host([hidden]){display:none}[hidden]{display:none}";
+/*!
+ * 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
+ */
+const CSS = {
+    toggleIcon: "toggle-icon",
+};
+
+const inputTimePickerCss = ":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:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select: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}:host([scale=s]){--calcite-toggle-spacing:0.5rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}:host([scale=m]){--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}:host([scale=l]){--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing);--calcite-ui-icon-color:var(--calcite-color-text-3)}.input-wrapper:hover .toggle-icon,calcite-input-text:focus+.toggle-icon{--calcite-ui-icon-color:var(--calcite-color-text-1)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteInputTimePickerStyle0 = inputTimePickerCss;
 
 // some bundlers (e.g., Webpack) need dynamic import paths to be static
 const supportedDayjsLocaleToLocaleConfigImport = new Map([
@@ -1480,6 +1481,19 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         this.messages = undefined;
         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.numberingSystem = undefined;
         this.required = false;
@@ -1824,13 +1838,13 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
     // --------------------------------------------------------------------------
     render() {
         const { disabled, messages, readOnly, dialogId } = this;
-        return (h(Host, { onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input-text", { "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status,
+        return (h(Host, { key: '561e33708dcc90afdba91d4072b7979ff11f79c7', onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '19c3360f4640bce039a46d8cb06a8927855bf13c', disabled: this.disabled }, h("div", { key: 'e48f09d0b5179e75e55cc9664f880bd350543d6a', class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input-text", { key: '717afb03fbcf590ebf927fe4bd0005a00e5fe2ec', "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status,
             // 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.setInputAndTransitionEl }), !this.readOnly && this.renderToggleIcon(this.open)), h("calcite-popover", { focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
+            ref: this.setInputAndTransitionEl }), !this.readOnly && this.renderToggleIcon(this.open)), h("calcite-popover", { key: 'd62bfe8b3ddc24e012d84b61a05061a09e6322dd', focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
             // 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.setCalcitePopoverEl }, h("calcite-time-picker", { lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value,
+            ref: this.setCalcitePopoverEl }, h("calcite-time-picker", { key: '6bfcee7272942b5476486a86933376b81aff7b23', lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setCalciteTimePickerEl })), h(HiddenFormInputSlot, { component: this }), this.validationMessage ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            ref: this.setCalciteTimePickerEl })), h(HiddenFormInputSlot, { key: '0ca8c8c04ef40e120530a4666761473b8d1b987f', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
         return (h("span", { class: CSS.toggleIcon }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
@@ -1849,7 +1863,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         "value": ["valueWatcher"],
         "effectiveLocale": ["effectiveLocaleWatcher"]
     }; }
-    static get style() { return inputTimePickerCss; }
+    static get style() { return CalciteInputTimePickerStyle0; }
 }, [17, "calcite-input-time-picker", {
         "open": [1540],
         "disabled": [516],
@@ -1860,6 +1874,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         "messages": [1040],
         "validationMessage": [1, "validation-message"],
         "validationIcon": [520, "validation-icon"],
+        "validity": [1040],
         "name": [1],
         "numberingSystem": [1, "numbering-system"],
         "required": [516],

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.4.0
+ * v2.8.2
  */
 const hourToMinutes = 60;
 const timeZoneNameBlockList = [
@@ -150,8 +150,16 @@ 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() {
@@ -177,9 +185,16 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         this.onComboboxChange = (event) => {
             event.stopPropagation();
             const combobox = event.target;
-            const selected = this.findTimeZoneItem(combobox.selectedItems[0].getAttribute("data-value"));
+            const selectedItem = combobox.selectedItems[0];
+            if (!selectedItem) {
+                this.value = null;
+                this.selectedTimeZoneItem = null;
+                this.calciteInputTimeZoneChange.emit();
+                return;
+            }
+            const selected = this.findTimeZoneItemByLabel(selectedItem.textLabel);
             const selectedValue = `${selected.value}`;
-            if (this.value === selectedValue) {
+            if (this.value === selectedValue && selected.label === this.selectedTimeZoneItem.label) {
                 return;
             }
             this.value = selectedValue;
@@ -196,6 +211,7 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
             event.stopPropagation();
             this.calciteInputTimeZoneOpen.emit();
         };
+        this.clearable = false;
         this.disabled = false;
         this.form = undefined;
         this.maxItems = 0;
@@ -204,6 +220,19 @@ 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";
@@ -212,6 +241,7 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         this.scale = "m";
         this.status = "idle";
         this.value = undefined;
+        this.readOnly = false;
         this.defaultMessages = undefined;
         this.effectiveLocale = "";
     }
@@ -222,6 +252,12 @@ 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;
@@ -250,20 +286,22 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         this.setFocus();
     }
     findTimeZoneItem(value) {
-        const valueToMatch = value;
-        return this.timeZoneItems.find(({ value }) => 
-        // intentional == to match string to number
-        value == valueToMatch);
+        return findTimeZoneItemByProp(this.timeZoneItems, "value", value);
+    }
+    findTimeZoneItemByLabel(label) {
+        return findTimeZoneItemByProp(this.timeZoneItems, "label", label);
     }
     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);
-        if (!this.selectedTimeZoneItem) {
-            this.selectedTimeZoneItem = this.findTimeZoneItem(fallbackValue);
-        }
+        this.selectedTimeZoneItem =
+            this.findTimeZoneItem(valueToMatch) || this.findTimeZoneItem(fallbackValue);
     }
     async createTimeZoneItems() {
         var _a;
@@ -291,11 +329,15 @@ 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.value}`;
+        const selectedValue = this.selectedTimeZoneItem ? `${this.selectedTimeZoneItem.value}` : null;
         afterConnectDefaultValueSet(this, selectedValue);
         this.value = selectedValue;
     }
@@ -306,13 +348,13 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         updateHostInteraction(this);
     }
     render() {
-        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,
+        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,
             // 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, { key: '9be196de8ecde0e10e293cd49b778ce52e75a131', component: this }))));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
@@ -325,8 +367,9 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class InputTimeZone exten
         "value": ["handleValueChange"],
         "effectiveLocale": ["effectiveLocaleWatcher"]
     }; }
-    static get style() { return inputTimeZoneCss; }
+    static get style() { return CalciteInputTimeZoneStyle0; }
 }, [17, "calcite-input-time-zone", {
+        "clearable": [516],
         "disabled": [516],
         "form": [513],
         "maxItems": [514, "max-items"],
@@ -335,6 +378,7 @@ 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"],
@@ -343,6 +387,7 @@ 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,19 +5,20 @@
  */
 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 { b as getDepth, M as MAX_COLUMNS } from './utils3.js';
+import { M as MAX_COLUMNS } from './resources4.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
+ * v2.8.2
  */
 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);--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 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 ListItemGroup = /*@__PURE__*/ proxyCustomElement(class ListItemGroup extends HTMLElement {
     constructor() {
@@ -36,7 +37,6 @@ const ListItemGroup = /*@__PURE__*/ proxyCustomElement(class ListItemGroup exten
         this.disabled = false;
         this.filterHidden = false;
         this.heading = undefined;
-        this.visualLevel = null;
     }
     // --------------------------------------------------------------------------
     //
@@ -44,8 +44,6 @@ const ListItemGroup = /*@__PURE__*/ proxyCustomElement(class ListItemGroup exten
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        const { el } = this;
-        this.visualLevel = getDepth(el, true);
         connectInteractive(this);
     }
     componentDidRender() {
@@ -60,16 +58,15 @@ const ListItemGroup = /*@__PURE__*/ proxyCustomElement(class ListItemGroup exten
     //
     // --------------------------------------------------------------------------
     render() {
-        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 }))));
+        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 }))));
     }
     get el() { return this; }
-    static get style() { return listItemGroupCss; }
+    static get style() { return CalciteListItemGroupStyle0; }
 }, [1, "calcite-list-item-group", {
         "disabled": [516],
         "filterHidden": [516, "filter-hidden"],
-        "heading": [513],
-        "visualLevel": [32]
+        "heading": [513]
     }]);
 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.4.0
+ * v2.8.2
  */
 const CSS = {
     container: "container",
@@ -39,7 +39,8 @@ 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-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 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 CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class CalciteMenuItem extends HTMLElement {
     constructor() {
@@ -67,6 +68,9 @@ 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;
@@ -265,10 +269,10 @@ const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class CalciteMenuItem
     }
     render() {
         const dir = getElementDir(this.el);
-        return (h(Host, { onBlur: this.blurHandler, onFocus: this.focusHandler }, h("li", { class: {
+        return (h(Host, { key: 'a84ca1769bc08137a7defbea5e10ee12a78fbd58', onBlur: this.blurHandler, onFocus: this.focusHandler }, h("li", { key: '88d13dda176ed2821b59505a6866b98b88f47f9b', class: {
                 [CSS.container]: true,
                 [CSS.isParentVertical]: this.topLevelMenuLayout === "vertical",
-            }, 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,
+            }, 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,
             // 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))));
     }
@@ -278,7 +282,7 @@ const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class CalciteMenuItem
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return menuItemCss; }
+    static get style() { return CalciteMenuItemStyle0; }
 }, [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.4.0
+ * v2.8.2
  */
 const CSS = {
     container: "container",
@@ -32,6 +32,7 @@ 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() {
@@ -303,7 +304,7 @@ const Meter = /*@__PURE__*/ proxyCustomElement(class Meter extends HTMLElement {
             : unitLabel
                 ? textUnitLabel
                 : undefined;
-        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: {
+        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: {
                 [CSS.container]: true,
                 [CSS.stepsVisible]: rangeLabels,
                 [CSS.valueVisible]: valueLabel,
@@ -325,7 +326,7 @@ const Meter = /*@__PURE__*/ proxyCustomElement(class Meter extends HTMLElement {
         "valueLabel": ["handleLabelChange"],
         "valueLabelType": ["handleLabelChange"]
     }; }
-    static get style() { return meterCss; }
+    static get style() { return CalciteMeterStyle0; }
 }, [1, "calcite-meter", {
         "appearance": [513],
         "disabled": [516],

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

@@ -5,12 +5,13 @@
  */
 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.4.0
+ * v2.8.2
  */
 const CSS = {
     container: "container",
@@ -22,7 +23,8 @@ 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;-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 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: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 CalciteNavigationLogo$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNavigationLogo extends HTMLElement {
     constructor() {
@@ -39,6 +41,7 @@ const CalciteNavigationLogo$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNa
         this.target = undefined;
         this.heading = undefined;
         this.thumbnail = undefined;
+        this.headingLevel = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -72,16 +75,22 @@ 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" });
     }
-    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: {
+    renderHeaderContent() {
+        const { heading, headingLevel, description } = this;
+        const headingNode = heading ? (h(Heading, { class: {
                 [CSS.heading]: true,
                 [CSS.standalone]: !this.description,
-            }, key: CSS.heading }, heading)), description && (h("span", { "aria-label": this.description, class: CSS.description, key: CSS.description }, 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())));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
-    static get style() { return navigationLogoCss; }
+    static get style() { return CalciteNavigationLogoStyle0; }
 }, [17, "calcite-navigation-logo", {
         "active": [516],
         "href": [513],
@@ -93,6 +102,7 @@ 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

@@ -11,7 +11,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.4.0
+ * v2.8.2
  */
 const CSS = {
     textContainer: "text-container",
@@ -20,7 +20,8 @@ const CSS = {
     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 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-font-family);font-size:var(--calcite-font-size-0);line-height:1.25rem;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;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-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          )}:host(:active) .button{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}: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}calcite-avatar{padding-inline:1rem}calcite-avatar~.text-container{padding-inline-start:0px}.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 CalciteNavigationUserStyle0 = navigationUserCss;
 
 const CalciteNavigationUser$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNavigationUser extends HTMLElement {
     constructor() {
@@ -62,11 +63,11 @@ const CalciteNavigationUser$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNa
     //
     // --------------------------------------------------------------------------
     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)))))));
+        return (h(Host, { key: '869bc0b518ff407bf3f110ebda48571f456229a8' }, h("button", { key: '0cb5497ebcbf9fad2bfb6ffdd3bfad151594460d', "aria-label": this.label, class: CSS.button }, h("calcite-avatar", { key: '6de54637d077afa83f7520636037b6da33b24334', "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", { key: '0d0be3d6ba276d6c3e24a67b7085dd75e56b3e5b', 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; }
+    static get style() { return CalciteNavigationUserStyle0; }
 }, [17, "calcite-navigation-user", {
         "active": [516],
         "fullName": [1, "full-name"],