@esri/solutions-components 0.8.11 → 0.8.13

package/dist/components/json-editor2.js

@@ -10,6 +10,7 @@ import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.js';
 
 const jsonEditorCss = ":host{display:block}.editor-container{position:relative;height:100%}.editor-controls{height:2.75rem;padding-right:0.5rem;background-color:#F4F4F4}.editor-buttons{float:right}html[dir=rtl] .editor-buttons{float:left}.edit-error-flag{padding-top:0.5rem;color:red;visibility:hidden}.edit-button{padding-inline-start:0.5rem}.editor-text{width:100%;overflow-y:auto;background-color:#FFFFFF}.edit-width{width:100%}.edit-parent{box-sizing:border-box;width:100%;height:calc(100% - 46px)}.json-edit-container{height:100%;width:100%;border:1px #808080 solid}.padding-right{padding-inline-end:0.125rem}.btn{margin-bottom:1rem;display:flex;align-content:center;height:25px;width:120px}.select-ctrl{margin-bottom:1rem}.all-edits{margin-top:4rem}.floating-title{font-size:2rem;z-index:100;position:absolute;left:0.5rem;pointer-events:none}.floating-title-button{pointer-events:auto}.json-editor-position1{position:absolute;left:0px;top:0px;margin:0px;height:100%;width:100%;overflow:hidden;padding:0px;max-height:100% !important}.json-editor-position2a{position:absolute;left:0px;top:0px;margin:0px;height:100%;width:50%;overflow:hidden;padding:0px;max-height:100% !important}.json-editor-position2b{position:absolute;right:0px;top:0px;margin:0px;height:100%;width:50%;overflow:hidden;padding:0px;max-height:100% !important}";
+const JsonEditorStyle0 = jsonEditorCss;
 
 const JsonEditor = /*@__PURE__*/ proxyCustomElement(class JsonEditor extends HTMLElement {
     constructor() {
@@ -91,7 +92,7 @@ const JsonEditor = /*@__PURE__*/ proxyCustomElement(class JsonEditor extends HTM
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", { id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { class: "editor-controls" }, h("div", { class: "editor-buttons" }, h("calcite-icon", { id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "undo", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "redo", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "compare", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "search", scale: "s" })), h("calcite-button", { id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { icon: "reset", scale: "s" })))), h("div", { class: "edit-parent" }, h("div", { id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
+        return (h(Host, { key: '00ea91a9373e5cecbe52bd51ac7bf3b06b22ccc8' }, h("div", { key: '7afe9bd7953b0c06cd2a4eaf107dd9654a16c37e', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { key: 'c9bed17775348e586366b81bb37ab1b959300b8c', class: "editor-controls" }, h("div", { key: '846a0f27a14fcf200e473575fa772d68cdc546e7', class: "editor-buttons" }, h("calcite-icon", { key: '723cdd672261b9439750e6fb05a270aa46d97789', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { key: '23edf0b33632971b33b47bafc52f7697bebb6eb5', id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'e423f0f1b8fad1db9bd2b94d53ce2a5625ee87d1', icon: "undo", scale: "s" })), h("calcite-button", { key: 'de336e52d61b8575c1ac83a7eef3663520db5e4c', id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'c864583f66374d5d1d63f630e4069a11a98b8bcd', icon: "redo", scale: "s" })), h("calcite-button", { key: 'c740d3ef25901d6e313d70fccaa35c40ecab9cb4', id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '8bf4e985982d227086d3b11ab94b58ad84657970', icon: "compare", scale: "s" })), h("calcite-button", { key: '0c2d9b1498eb41886b2716d182ba9833bbe9a528', id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '1979a27bef07cfdd122e5bd0a2cb27c2ada29f6e', icon: "search", scale: "s" })), h("calcite-button", { key: '8b754884ef387235f57806310da7693a25a09699', id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'bfa24ac26db7ce6f8ed4ffa7cf39950fc8b959c9', icon: "reset", scale: "s" })))), h("div", { key: '671db1db990eedd2863cca9de51bc376e55085bf', class: "edit-parent" }, h("div", { key: 'a2cb3c42fb1edd5d26f8c52ee2ca2c0124e5d02a', id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { key: '9ec65340bb37c54a77d82e47129b5e07ec7b37cc', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -397,7 +398,7 @@ const JsonEditor = /*@__PURE__*/ proxyCustomElement(class JsonEditor extends HTM
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
-    static get style() { return jsonEditorCss; }
+    static get style() { return JsonEditorStyle0; }
 }, [0, "json-editor", {
         "hasChanges": [1540, "has-changes"],
         "hasErrors": [1540, "has-errors"],

package/dist/components/key.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 function isActivationKey(key) {
     return key === "Enter" || key === " ";

package/dist/components/ko.js

@@ -49,4 +49,4 @@ var locale = {
 };
 dayjs.locale(locale, null, true);
 
-export default locale;
+export { locale as default };

package/dist/components/label.js

@@ -9,7 +9,7 @@ import { c as componentOnReady } from './component.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
  */
 /**
  * Exported for testing purposes only

package/dist/components/label2.js

@@ -9,13 +9,14 @@ import { a as associateExplicitLabelToUnlabeledComponent, l as labelConnectedEve
 /*!
  * 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",
 };
 
 const labelCss = ":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}:host([alignment=start]){text-align:start}:host([alignment=end]){text-align:end}:host([alignment=center]){text-align:center}:host([scale=s]) .container{gap:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;margin-block-end:var(--calcite-label-margin-bottom, 0.5rem)}:host([scale=m]) .container{gap:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-block-end:var(--calcite-label-margin-bottom, 0.75rem)}:host([scale=l]) .container{gap:0.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-block-end:var(--calcite-label-margin-bottom, 1rem)}:host .container{margin-inline:0px;margin-block-start:0px;inline-size:100%;line-height:1.375;color:var(--calcite-color-text-1)}:host([layout=default]) .container{display:flex;flex-direction:column}:host([layout=inline]) .container,:host([layout=inline-space-between]) .container{display:flex;flex-direction:row;align-items:center;gap:0.5rem}:host([layout=inline][scale=l]) .container{gap:0.75rem}:host([layout=inline-space-between]) .container{justify-content:space-between}:host([disabled])>.container{opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted(*[disabled]),:host([disabled]) ::slotted(*[disabled] *){--tw-bg-opacity:1}:host([disabled]) ::slotted(calcite-input-message:not([active])){--tw-bg-opacity:0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteLabelStyle0 = labelCss;
 
 const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
     constructor() {
@@ -53,13 +54,13 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
         document.dispatchEvent(new CustomEvent(labelDisconnectedEvent));
     }
     render() {
-        return (h(Host, { onClick: this.labelClickHandler }, h("div", { class: CSS.container }, h("slot", null))));
+        return (h(Host, { key: 'fc1ef6c0deb51a1cfb30b8efe5bb386bdb834380', onClick: this.labelClickHandler }, h("div", { key: '23ac73d58f829394636f391ae5126332374e0857', class: CSS.container }, h("slot", { key: 'a2f2f7d660b6a3d31f14a027187e8f2d27fcb611' }))));
     }
     get el() { return this; }
     static get watchers() { return {
         "for": ["handleForChange"]
     }; }
-    static get style() { return labelCss; }
+    static get style() { return CalciteLabelStyle0; }
 }, [1, "calcite-label", {
         "alignment": [513],
         "for": [513],

package/dist/components/layer-list2.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { c as getMapLayerHash, a as getAllLayers } from './mapViewUtils.js';
+import { d as getMapLayerHash, a as getAllLayers } from './mapViewUtils.js';
 import { f as formatNumber, g as getLocaleComponentStrings } from './locale.js';
 import { d as defineCustomElement$c } from './action.js';
 import { d as defineCustomElement$b } from './filter2.js';
@@ -20,6 +20,7 @@ import { d as defineCustomElement$2 } from './scrim.js';
 import { d as defineCustomElement$1 } from './stack.js';
 
 const layerListCss = ":host{display:block}.error-msg{padding:10px}.layer-name{font-weight:500;padding:10px 12px}.feature-count{padding-right:12px}";
+const LayerListStyle0 = layerListCss;
 
 const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLElement {
     constructor() {
@@ -80,9 +81,9 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
      * Renders the component.
      */
     render() {
-        return (h(Fragment, null, this._isLoading && h("calcite-loader", { label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
+        return (h(Fragment, { key: '33fe25a29aac6e4eaa429b1a8f58431b66d44d46' }, this._isLoading && h("calcite-loader", { key: 'f5b3c6a90f850db50a3e2b6af9745936802903dc', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            h("calcite-notice", { key: 'a40c96db6ecf36097aacb652156cbd863f6f9a3b', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: '83c3b2982f750a8e69101501aa39b99a8636514f', slot: "title" }, this._translations.error), h("div", { key: '190eb16ca7991773c784c8d77bca9be064064028', slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-list", { key: '980f20cec107d8e54af0c57448036eac3f342b71', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -205,7 +206,7 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         this._translations = messages[0];
     }
     get el() { return this; }
-    static get style() { return layerListCss; }
+    static get style() { return LayerListStyle0; }
 }, [0, "layer-list", {
         "mapView": [16],
         "layers": [16],

package/dist/components/layer-table2.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { b as goToSelection, g as getLayerOrTable } from './mapViewUtils.js';
+import { b as goToSelection, c as getFeatureLayerView, g as getLayerOrTable } from './mapViewUtils.js';
 import { b as queryAllIds, c as queryFeatureIds, d as queryFeaturesByGlobalID } from './queryUtils.js';
 import { d as downloadCSV } from './downloadUtils.js';
 import { d as defineCustomElement$D } from './action.js';
@@ -50,6 +50,7 @@ import { d as defineCustomElement$2 } from './instant-apps-social-share2.js';
 import { d as defineCustomElement$1 } from './map-layer-picker2.js';
 
 const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.height-50-px{height:50px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-color-background)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{font-size:14px !important;color:var(--calcite-color-text-3) !important}.share-action{position:absolute;right:0}html[dir=\"rtl\"] .share-action{left:0}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.instant-app-share{height:50px !important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}.modal{--calcite-modal-content-padding:0}";
+const LayerTableStyle0 = layerTableCss;
 
 const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTMLElement {
     constructor() {
@@ -109,7 +110,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this.shareIncludeEmbed = undefined;
         this.shareIncludeSocial = undefined;
         this.showNewestFirst = undefined;
+        this.sortField = undefined;
+        this.sortOrder = undefined;
         this.zoomAndScrollToSelected = undefined;
+        this.zoomToScale = undefined;
         this._allIds = [];
         this._controlsThatFit = undefined;
         this._csvExporting = false;
@@ -264,7 +268,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                 }
             });
             if (layerView) {
-                await goToSelection([oid], layerView, this.mapView, true);
+                await goToSelection([oid], layerView, this.mapView, true, undefined, this.zoomToScale);
             }
         }
     }
@@ -335,7 +339,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: `width-full ${tableHeightClass}` }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '67d980e9ed0b2218b90711f0f828c53184ac6a32' }, h("calcite-shell", { key: '63142b7a72fea63dbdc6fe9fab5bd1787dbaaf18' }, this._getTableControlRow("header"), h("div", { key: 'de165431213df10a03f44ad8a620312f7134e23e', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '175dd2c233ae4f889389a9a4b35fc342e9a5fc1f', class: "height-full width-full" }, h("calcite-loader", { key: 'e7c5970984bc458c070806d74a81b958986018e4', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'af72f3f621ffc8d6f6e876c2da06686140bebc56', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
     }
@@ -1135,13 +1139,20 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
     }
     /**
-     * Sort the objectid field in descending order
+     * Sort the table with the configured field in the configured sort order
      */
     async _sortTable() {
-        if (this._table && this._layer && this.showNewestFirst) {
+        var _a, _b, _c, _d, _e, _f;
+        let sortField = this.sortField ? this.sortField : this._layer.objectIdField;
+        if (((_c = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.layerOptions) === null || _b === void 0 ? void 0 : _b.layers) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+            const configuredLayer = (_d = this.mapInfo.layerOptions) === null || _d === void 0 ? void 0 : _d.layers.filter((layer) => layer.id === this._layer.id);
+            sortField = ((_f = (_e = configuredLayer[0]) === null || _e === void 0 ? void 0 : _e.fields) === null || _f === void 0 ? void 0 : _f.includes(this.sortField)) ? this.sortField : this._layer.objectIdField;
+        }
+        const sortOrder = this.sortOrder ? this.sortOrder : 'desc';
+        if (this._table && this._layer) {
             await this._table.when();
             await this._layer.when(() => {
-                this._table.sortColumn(this._layer.objectIdField, "desc");
+                this._table.sortColumn(sortField, sortOrder);
             });
         }
     }
@@ -1387,8 +1398,11 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      *
      * @returns a promise that will resolve when the operation is complete
      */
-    _zoom() {
-        this._table.zoomToSelection();
+    async _zoom() {
+        if (this._layer) {
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this._layer.id);
+            await goToSelection(this.selectedIds, selectedLayerView, this.mapView, true, undefined, this.zoomToScale);
+        }
     }
     /**
      * Handles layer selection change to show new table
@@ -1467,7 +1481,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             items: [
                 {
                     label: this._translations.hideField,
-                    iconClass: "esri-icon-non-visible",
+                    iconClass: "view-hide",
                     autoCloseMenu: true,
                     clickFunction: () => {
                         this._handleHideClick(name);
@@ -1512,7 +1526,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "_layer": ["_layerWatchHandler"],
         "selectedIds": ["selectedIdsWatchHandler"]
     }; }
-    static get style() { return layerTableCss; }
+    static get style() { return LayerTableStyle0; }
 }, [0, "layer-table", {
         "defaultGlobalId": [16],
         "defaultLayerId": [1, "default-layer-id"],
@@ -1530,7 +1544,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "shareIncludeEmbed": [4, "share-include-embed"],
         "shareIncludeSocial": [4, "share-include-social"],
         "showNewestFirst": [4, "show-newest-first"],
+        "sortField": [1, "sort-field"],
+        "sortOrder": [1, "sort-order"],
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
+        "zoomToScale": [2, "zoom-to-scale"],
         "_allIds": [32],
         "_controlsThatFit": [32],
         "_csvExporting": [32],

package/dist/components/layout-manager.js

@@ -13,6 +13,7 @@ import { d as defineCustomElement$3 } from './popover.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
 const layoutManagerCss = ":host{display:block}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.display-flex{display:flex}.icon-color{--calcite-color-icon-color:var(--calcite-color-brand)}.icon{cursor:pointer}.tooltip-message{padding:5px 8px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.header-text{font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);padding-inline:0.75rem;padding-block:0.875rem;line-height:1.25rem}.img-background{background-repeat:no-repeat;background-size:100% 100%;width:38px;height:26px}.grid-background{background-image:url('../../assets/data/images/grid.png')}.horizontal-background{background-image:url('../../assets/data/images/horizontal.png')}.vertical-background{background-image:url('../../assets/data/images/vertical.png')}";
+const LayoutManagerStyle0 = layoutManagerCss;
 
 const LayoutManager$1 = /*@__PURE__*/ proxyCustomElement(class LayoutManager extends HTMLElement {
     constructor() {
@@ -48,7 +49,7 @@ const LayoutManager$1 = /*@__PURE__*/ proxyCustomElement(class LayoutManager ext
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", { class: "display-flex" }, h("div", { class: "display-flex action-center" }, h("calcite-icon", { class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { class: "tooltip-message" }, this._translations.appInfo))), h("div", { class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", ELayoutMode.HORIZONTAL, this._translations.horizontal))));
+        return (h(Host, { key: 'b8c4efb8e0990e7590411a467125edc54f1c9039' }, h("div", { key: 'ac235066e5891e3dd06c55432dd30366e14d702b', class: "display-flex" }, h("div", { key: 'aa743b87f77d2ee066b7594493ca64a0d930fc35', class: "display-flex action-center" }, h("calcite-icon", { key: 'f0b001707fe2b3c6bfb8077ce9f888c7e82fd253', class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { key: '010acee7b5301ce85ddb892683efe6635612a64c', closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { key: 'bc2d7c2b4b2b15ef19ea82ed845282c9d0c7e81b', class: "tooltip-message" }, this._translations.appInfo))), h("div", { key: '429386c5b13d349d6a28c5756bc1f0d261259c0e', class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", ELayoutMode.HORIZONTAL, this._translations.horizontal))));
     }
     //--------------------------------------------------------------------------
     //
@@ -89,7 +90,7 @@ const LayoutManager$1 = /*@__PURE__*/ proxyCustomElement(class LayoutManager ext
         this._translations = messages[0];
     }
     get el() { return this; }
-    static get style() { return layoutManagerCss; }
+    static get style() { return LayoutManagerStyle0; }
 }, [1, "layout-manager", {
         "_translations": [32]
     }]);

package/dist/components/link.js

@@ -10,7 +10,8 @@ import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFoc
 import { C as CSS_UTILITY } from './resources.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const linkCss = ":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}:host a,:host span{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0px;border-style:none;font-family:inherit;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host span:hover{text-decoration:none}:host a,:host span{outline-color:transparent}:host a:focus,:host span: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          )}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-block-start:-0.25em}:host .calcite-link--icon.icon-start{margin-inline-end:0.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:0.5rem}:host span,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0px;color:var(--calcite-color-text-link);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor, currentColor), linear-gradient(var(--calcite-color-brand-underline), var(--calcite-color-brand-underline));background-position-x:0%, 100%;background-position-y:min(1.5em, 100%);background-repeat:no-repeat, no-repeat;background-size:0% 1px, 100% 1px}:host span:hover,:host span:focus,:host a:hover,:host a:focus{background-size:100% 1px, 100% 1px}:host span:active,:host a:active{background-size:100% 2px, 100% 2px}:host span.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%, 100% 100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+const linkCss = ":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}:host a,:host span{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0px;border-style:none;font-family:inherit;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;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host span:hover{text-decoration:none}:host a,:host span{outline-color:transparent}:host a:focus,:host span: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          )}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;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;margin-block-start:-0.25em}:host .calcite-link--icon.icon-start{margin-inline-end:0.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:0.5rem}:host span,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0px;color:var(--calcite-color-text-link);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;line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor, currentColor), linear-gradient(var(--calcite-color-brand-underline), var(--calcite-color-brand-underline));background-position-x:0%, 100%;background-position-y:min(1.5em, 100%);background-repeat:no-repeat, no-repeat;background-size:0% 1px, 100% 1px}:host span:hover,:host span:focus,:host a:hover,:host a:focus{background-size:100% 1px, 100% 1px}:host span:active,:host a:active{background-size:100% 2px, 100% 2px}:host span.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%, 100% 100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteLinkStyle0 = linkCss;
 
 const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
     constructor() {
@@ -64,19 +65,19 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
         const { download, el } = this;
         const dir = getElementDir(el);
         const childElType = this.href ? "a" : "span";
-        const iconStartEl = (h("calcite-icon", { class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
-        const iconEndEl = (h("calcite-icon", { class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
+        const iconStartEl = (h("calcite-icon", { key: 'f3c88f34e5fddf3cb7779cabbac20ecd7fc62be1', class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
+        const iconEndEl = (h("calcite-icon", { key: '684df779ad349e596dbe9f128c035077d0c75d93', class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
         const Tag = childElType;
         const role = childElType === "span" ? "link" : null;
         const tabIndex = childElType === "span" ? 0 : null;
-        return (h(Host, { role: "presentation" }, h(InteractiveContainer, { disabled: this.disabled }, h(Tag, { class: { [CSS_UTILITY.rtl]: dir === "rtl" },
+        return (h(Host, { key: 'b8bf6a472945947d6bac9853d2322f8fedca5102', role: "presentation" }, h(InteractiveContainer, { key: 'e410a5b86b4d11dc12dbc4f60f8eae6e315f3b7d', disabled: this.disabled }, h(Tag, { key: '4e22e764e60b0446f4840ba745dba9eae90a7809', class: { [CSS_UTILITY.rtl]: dir === "rtl" },
             /*
           When the 'download' property of type 'boolean | string' is set to true, the value is "".
           This works around that issue for now.
           */
             download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && 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: this.storeTagRef }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null))));
+            ref: this.storeTagRef }, this.iconStart ? iconStartEl : null, h("slot", { key: 'eb1700118698d9c0a7dc5863bbe6bb7c03daa61b' }), this.iconEnd ? iconEndEl : null))));
     }
     //--------------------------------------------------------------------------
     //
@@ -103,7 +104,7 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
         focusElement(this.childEl);
     }
     get el() { return this; }
-    static get style() { return linkCss; }
+    static get style() { return CalciteLinkStyle0; }
 }, [1, "calcite-link", {
         "disabled": [516],
         "download": [520],

package/dist/components/list-flow-item.js

@@ -6,6 +6,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const listFlowItemCss = ":host{display:block}";
+const ListFlowItemStyle0 = listFlowItemCss;
 
 const ListFlowItem$1 = /*@__PURE__*/ proxyCustomElement(class ListFlowItem extends HTMLElement {
     constructor() {
@@ -49,10 +50,10 @@ const ListFlowItem$1 = /*@__PURE__*/ proxyCustomElement(class ListFlowItem exten
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, null, h("slot", null)));
+        return (h(Host, { key: 'b6d40c70e611fdba0e57f85ac707cc852b5a64f1' }, h("slot", { key: '0892b0046607b71954bf4a48496eff72dedf406a' })));
     }
     get el() { return this; }
-    static get style() { return listFlowItemCss; }
+    static get style() { return ListFlowItemStyle0; }
 }, [1, "list-flow-item"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/list-item.js

@@ -4,18 +4,20 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { j as slotChangeHasAssignedElement, B as getFirstTabbable, g as getElementDir, t as toAriaBoolean } from './dom.js';
+import { j as slotChangeHasAssignedElement, D as getFirstTabbable, g as getElementDir, t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
-import { a as activeCellTestAttribute, b as getDepth, C as CSS, I as ICONS, S as SLOTS, g as getListItemChildren, c as getListItemChildLists, u as updateListItemChildren } from './utils3.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
+import { a as getDepth, g as getListItemChildren, b as getListItemChildLists, u as updateListItemChildren } from './utils3.js';
+import { a as activeCellTestAttribute, C as CSS, I as ICONS, S as SLOTS } from './resources4.js';
 import { d as defineCustomElement$4 } from './action.js';
 import { d as defineCustomElement$3 } from './handle.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.js';
 
-const listItemCss = ":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;--calcite-list-item-icon-color:var(--calcite-color-brand);--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{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-color-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.container *{box-sizing:border-box}.container--hover:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2)}.container:active{background-color:var(--calcite-color-foreground-1)}.container--border{border-inline-start-width:4px;border-inline-start-style:solid}.container--border-selected{border-inline-start-color:var(--calcite-color-brand)}.container--border-unselected{border-inline-start-color:transparent}.container:hover.container--border-unselected{border-color:var(--calcite-color-border-1)}.nested-container{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1)}.nested-container--hidden{display:none}.content-container{display:flex;flex:1 1 auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}tr,td{outline-color:transparent}tr:focus,td: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          )}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}.label,.description,.content-bottom{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}.label:only-child,.description:only-child,.content-bottom:only-child{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-color-text-1)}:host([selected]) .label{font-weight:var(--calcite-font-weight-medium)}.description{margin-block-start:0.125rem;color:var(--calcite-color-text-3)}:host([selected]) .description{color:var(--calcite-color-text-2)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-bottom{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-inline:0.75rem;color:var(--calcite-color-border-input)}.selection-container--single{color:transparent}:host(:not([disabled]):not([selected])) .container:hover .selection-container--single{color:var(--calcite-color-border-1)}:host([selected]:hover) .selection-container,:host([selected]:hover) .selection-container--single,:host([selected]) .selection-container{color:var(--calcite-list-item-icon-color)}.open-container{color:var(--calcite-color-text-3)}:host(:not([disabled])) .container:hover .open-container{color:var(--calcite-color-text-1)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.open-container{display:flex;align-items:center}.open-container,.selection-container{cursor:pointer}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}::slotted(calcite-list-item){border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}::slotted(calcite-list:empty){padding-block:0.75rem}:host([hidden]){display:none}[hidden]{display:none}";
+const listItemCss = ":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-icon-color:var(--calcite-color-brand)}:host([filter-hidden]),:host([closed]){display:none}.wrapper--bordered{border-block-end:1px solid var(--calcite-color-border-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.indent{display:flex;flex-direction:column;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);margin-inline-start:var(--calcite-list-item-spacing-indent, 1.5rem)}.container{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-color-foreground-1)}.container *{box-sizing:border-box}.container--hover:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2)}.container:active{background-color:var(--calcite-color-foreground-1)}.container--border{border-inline-start-width:4px;border-inline-start-style:solid}.container--border-selected{border-inline-start-color:var(--calcite-color-brand)}.container--border-unselected{border-inline-start-color:transparent}.container:hover.container--border-unselected{border-color:var(--calcite-color-border-1)}.nested-container{display:flex;flex-direction:column}.nested-container--hidden{display:none}.content-container{display:flex;flex:1 1 auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:stretch;padding:0px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}tr,td{outline-color:transparent}tr:focus,td: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          )}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}.label,.description,.content-bottom{font-family:var(--calcite-font-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}.label:only-child,.description:only-child,.content-bottom:only-child{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-color-text-1)}:host([selected]) .label{font-weight:var(--calcite-font-weight-medium)}.description{margin-block-start:0.125rem;color:var(--calcite-color-text-3)}:host([selected]) .description{color:var(--calcite-color-text-2)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.content-bottom{display:flex;flex-direction:column}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-block:0px;color:var(--calcite-color-border-input);padding-inline:var(--calcite-spacing-md) var(--calcite-spacing-xxs)}.selection-container--single{color:transparent}:host(:not([disabled]):not([selected])) .container:hover .selection-container--single{color:var(--calcite-color-border-1)}:host([selected]:hover) .selection-container,:host([selected]:hover) .selection-container--single,:host([selected]) .selection-container{color:var(--calcite-list-item-icon-color)}.open-container{color:var(--calcite-color-text-3)}:host(:not([disabled])) .container:hover .open-container{color:var(--calcite-color-text-1)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.open-container{display:flex;align-items:center}.actions-start calcite-action,.actions-start calcite-handle,.actions-end calcite-action,.actions-end calcite-handle,.content-start calcite-action,.content-start calcite-handle,.content-end calcite-action,.content-end calcite-handle,.selection-container calcite-action,.selection-container calcite-handle,.drag-container calcite-action,.drag-container calcite-handle,.open-container calcite-action,.open-container calcite-handle{align-self:stretch}.open-container,.selection-container{cursor:pointer}.actions-start,.actions-end{padding:0px}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}::slotted(calcite-list:empty){border-block-start-width:0px}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteListItemStyle0 = listItemCss;
 
 const focusMap = new Map();
 const listSelector = "calcite-list";
@@ -196,6 +198,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
             focusedEl === null || focusedEl === void 0 ? void 0 : focusedEl.focus();
         };
         this.active = false;
+        this.bordered = false;
         this.closable = false;
         this.closed = false;
         this.description = undefined;
@@ -218,7 +221,6 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         this.effectiveLocale = "";
         this.defaultMessages = undefined;
         this.level = null;
-        this.visualLevel = null;
         this.parentListEl = undefined;
         this.openable = false;
         this.hasActionsStart = false;
@@ -264,7 +266,6 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         const { el } = this;
         this.parentListEl = el.closest(listSelector);
         this.level = getDepth(el) + 1;
-        this.visualLevel = getDepth(el, true);
         this.setSelectionDefaults();
     }
     async componentWillLoad() {
@@ -363,14 +364,16 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         return (h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
     }
     renderContentBottom() {
-        const { hasContentBottom, visualLevel } = this;
-        return (h("div", { class: CSS.contentBottom, hidden: !hasContentBottom, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, h("slot", { name: SLOTS.contentBottom, onSlotchange: this.handleContentBottomSlotChange })));
+        const { hasContentBottom } = this;
+        return (h("div", { class: CSS.contentBottom, hidden: !hasContentBottom }, h("slot", { name: SLOTS.contentBottom, onSlotchange: this.handleContentBottomSlotChange })));
     }
     renderDefaultContainer() {
         return (h("div", { class: {
                 [CSS.nestedContainer]: true,
                 [CSS.nestedContainerHidden]: this.openable && !this.open,
-            } }, h("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) })));
+            } }, h("slot", { onSlotchange: this.handleDefaultSlotChange,
+            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
+            ref: (el) => (this.defaultSlotEl = el) })));
     }
     renderContentProperties() {
         const { label, description, hasCustomContent } = this;
@@ -394,19 +397,19 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
             ref: (el) => (this.contentEl = el) }, content));
     }
     render() {
-        const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode, closed, visualLevel, } = this;
+        const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode, closed, filterHidden, bordered, disabled, } = this;
         const showBorder = selectionMode !== "none" && selectionAppearance === "border";
         const borderSelected = showBorder && selected;
         const borderUnselected = showBorder && !selected;
-        return (h(Host, null, h(InteractiveContainer, { disabled: this.disabled }, h("tr", { "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
+        return (h(Host, { key: '15651b0bef6af7db01d650ff74b732db28758292' }, h(InteractiveContainer, { key: 'a0a4c2b6587a5c173710235518bf97aafc7d3b2a', disabled: disabled }, h("div", { key: 'f4dceb92cd6164d4d5445a9977aebfa9ae4073ff', class: { [CSS.wrapper]: true, [CSS.wrapperBordered]: bordered } }, h("tr", { key: '105d3b31fde1dabc1b606b25e28f9f7535367503', "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
                 [CSS.container]: true,
                 [CSS.containerHover]: true,
                 [CSS.containerBorder]: showBorder,
                 [CSS.containerBorderSelected]: borderSelected,
                 [CSS.containerBorderUnselected]: borderUnselected,
-            }, hidden: closed, onFocus: this.focusCellNull, onFocusin: this.emitInternalListItemActive, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }, tabIndex: active ? 0 : -1,
+            }, hidden: closed || filterHidden, onFocus: this.focusCellNull, onFocusin: this.emitInternalListItemActive, onKeyDown: this.handleItemKeyDown, role: "row", tabIndex: active ? 0 : -1,
             // 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.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), this.renderContentBottom(), this.renderDefaultContainer())));
+            ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), this.renderContentBottom()), h("div", { key: '2018e3a2e07547caca69c18ce58a3e19ae66b3e8', class: CSS.indent }, this.renderDefaultContainer()))));
     }
     emitCalciteInternalListItemChange() {
         this.calciteInternalListItemChange.emit();
@@ -445,9 +448,10 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return listItemCss; }
+    static get style() { return CalciteListItemStyle0; }
 }, [1, "calcite-list-item", {
         "active": [4],
+        "bordered": [4],
         "closable": [516],
         "closed": [1540],
         "description": [1],
@@ -470,7 +474,6 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         "effectiveLocale": [32],
         "defaultMessages": [32],
         "level": [32],
-        "visualLevel": [32],
         "parentListEl": [32],
         "openable": [32],
         "hasActionsStart": [32],